@memberjunction/ng-record-changes 5.22.0 → 5.24.0

package/dist/lib/ng-record-changes.component.js

@@ -12,11 +12,12 @@ const _forTrack0 = ($index, $item) => $item.ID;
 const _forTrack1 = ($index, $item) => $item.label;
 const _forTrack2 = ($index, $item) => $item.name;
 const _forTrack3 = ($index, $item) => $item.field;
+const _forTrack4 = ($index, $item) => $item.FieldName;
 function RecordChangesComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 1);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
+    i0.ɵɵelementStart(0, "span", 9);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -25,26 +26,26 @@ function RecordChangesComponent_Conditional_2_Conditional_7_Template(rf, ctx) {
     i0.ɵɵtextInterpolate(ctx_r1.RecordLabels.length);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵtext(2, " Loading labels... ");
     i0.ɵɵelementEnd();
 } }
 function RecordChangesComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵtext(1, " No version labels for this record yet. ");
     i0.ɵɵelementEnd();
 } }
 function RecordChangesComponent_Conditional_2_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵelement(1, "i", 17);
-    i0.ɵɵelementStart(2, "span", 18);
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span", 19);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 19)(5, "span", 20);
+    i0.ɵɵelementStart(4, "span", 20)(5, "span", 21);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 21);
+    i0.ɵɵelementStart(7, "span", 22);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -61,8 +62,8 @@ function RecordChangesComponent_Conditional_2_Conditional_13_For_2_Template(rf,
     i0.ɵɵtextInterpolate2("", label_r3.ItemCount, " item", label_r3.ItemCount !== 1 ? "s" : "");
 } }
 function RecordChangesComponent_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵrepeaterCreate(1, RecordChangesComponent_Conditional_2_Conditional_13_For_2_Template, 9, 7, "div", 16, _forTrack0);
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵrepeaterCreate(1, RecordChangesComponent_Conditional_2_Conditional_13_For_2_Template, 9, 7, "div", 17, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -70,26 +71,26 @@ function RecordChangesComponent_Conditional_2_Conditional_13_Template(rf, ctx) {
     i0.ɵɵrepeater(ctx_r1.RecordLabels);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 22);
-    i0.ɵɵelement(2, "i", 23);
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 23);
+    i0.ɵɵelement(2, "i", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h3", 24);
+    i0.ɵɵelementStart(3, "h3", 25);
     i0.ɵɵtext(4, "No Change History");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 25);
+    i0.ɵɵelementStart(5, "p", 26);
     i0.ɵɵtext(6, " This record doesn't have any tracked changes yet. Changes will appear here automatically as edits are made. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 26);
-    i0.ɵɵelement(8, "i", 27);
+    i0.ɵɵelementStart(7, "div", 27);
+    i0.ɵɵelement(8, "i", 28);
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Record change tracking is managed at the entity level");
     i0.ɵɵelementEnd()()();
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelementStart(0, "div", 45);
     i0.ɵɵtext(1);
-    i0.ɵɵelementStart(2, "button", 47);
+    i0.ɵɵelementStart(2, "button", 48);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
     i0.ɵɵtext(3, "Clear filters");
     i0.ɵɵelementEnd()();
@@ -100,22 +101,22 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Temp
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No changes match your current filters.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 49);
+    i0.ɵɵelementStart(4, "button", 50);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
-    i0.ɵɵelement(5, "i", 50);
+    i0.ɵɵelement(5, "i", 51);
     i0.ɵɵtext(6, " Clear Filters ");
     i0.ɵɵelementEnd()();
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70)(1, "div", 71);
+    i0.ɵɵelementStart(0, "div", 72)(1, "div", 73);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 72)(4, "span", 73);
+    i0.ɵɵelementStart(3, "div", 74)(4, "span", 75);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -126,7 +127,7 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵtextInterpolate(field_r9.value);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_For_1_Template, 6, 2, "div", 70, _forTrack2);
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_For_1_Template, 6, 2, "div", 72, _forTrack2);
 } if (rf & 2) {
     const change_r8 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -139,19 +140,19 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵconditional(change_r8.FullRecordJSON ? 0 : -1);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "i", 44);
     i0.ɵɵtext(2, " This record was permanently removed from the system. ");
     i0.ɵɵelementEnd();
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵelement(1, "span", 77);
-    i0.ɵɵelementStart(2, "span", 78);
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "span", 79);
+    i0.ɵɵelementStart(2, "span", 80);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 79)(5, "span", 77);
-    i0.ɵɵelementStart(6, "span", 80);
+    i0.ɵɵelement(4, "i", 81)(5, "span", 79);
+    i0.ɵɵelementStart(6, "span", 82);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -168,11 +169,11 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵtextInterpolate(fc_r10.newValue === "true" || fc_r10.newValue === "1" ? "Yes" : "No");
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75)(1, "span", 81);
+    i0.ɵɵelementStart(0, "div", 77)(1, "span", 83);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 79);
-    i0.ɵɵelementStart(4, "span", 73);
+    i0.ɵɵelement(3, "i", 81);
+    i0.ɵɵelementStart(4, "span", 75);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -183,17 +184,17 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵtextInterpolate(fc_r10.newValue || "(empty)");
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 76);
+    i0.ɵɵelement(0, "div", 78);
 } if (rf & 2) {
     const fc_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("innerHTML", fc_r10.diffHtml, i0.ɵɵsanitizeHtml);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75)(1, "span", 81);
+    i0.ɵɵelementStart(0, "div", 77)(1, "span", 83);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 79);
-    i0.ɵɵelementStart(4, "span", 73);
+    i0.ɵɵelement(3, "i", 81);
+    i0.ɵɵelementStart(4, "span", 75);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -204,11 +205,11 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵtextInterpolate(fc_r10.newValue || "(empty)");
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70)(1, "div", 71);
+    i0.ɵɵelementStart(0, "div", 72)(1, "div", 73);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 72);
-    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_4_Template, 8, 14, "div", 74)(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_5_Template, 6, 2, "div", 75)(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_6_Template, 1, 1, "div", 76)(7, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_7_Template, 6, 2, "div", 75);
+    i0.ɵɵelementStart(3, "div", 74);
+    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_4_Template, 8, 14, "div", 76)(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_5_Template, 6, 2, "div", 77)(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_6_Template, 1, 1, "div", 78)(7, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_7_Template, 6, 2, "div", 77);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const fc_r10 = ctx.$implicit;
@@ -218,15 +219,15 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵconditional(fc_r10.fieldType === "boolean" ? 4 : fc_r10.fieldType === "date" || fc_r10.fieldType === "number" ? 5 : fc_r10.diffHtml ? 6 : 7);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Template, 8, 2, "div", 70, _forTrack3);
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Template, 8, 2, "div", 72, _forTrack3);
 } if (rf & 2) {
     const change_r8 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵrepeater(ctx_r1.getFieldChanges(change_r8));
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 82);
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -235,9 +236,9 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵtextInterpolate1(" ", change_r8.Comments, " ");
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 69);
-    i0.ɵɵelement(1, "i", 83);
-    i0.ɵɵelementStart(2, "pre", 84);
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵelement(1, "i", 85);
+    i0.ɵɵelementStart(2, "pre", 86);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -245,50 +246,62 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(change_r8.ErrorLog);
 } }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 71)(1, "button", 87);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_6_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r11); const change_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRestoreVersion(change_r8, $event)); });
+    i0.ɵɵelement(2, "i", 88);
+    i0.ɵɵtext(3, " Restore Previous Values ");
+    i0.ɵɵelementEnd()();
+} }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66);
-    i0.ɵɵconditionalCreate(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Template, 1, 1)(2, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_2_Template, 3, 0, "div", 67)(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_Template, 2, 0);
-    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_4_Template, 3, 1, "div", 68);
-    i0.ɵɵconditionalCreate(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_5_Template, 4, 1, "div", 69);
+    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵconditionalCreate(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Template, 1, 1)(2, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_2_Template, 3, 0, "div", 68)(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_Template, 2, 0);
+    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_4_Template, 3, 1, "div", 69);
+    i0.ɵɵconditionalCreate(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_5_Template, 4, 1, "div", 70);
+    i0.ɵɵconditionalCreate(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_6_Template, 4, 0, "div", 71);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const change_r8 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
     i0.ɵɵconditional(change_r8.Type === "Create" ? 1 : change_r8.Type === "Delete" ? 2 : 3);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(change_r8.Comments ? 4 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(change_r8.ErrorLog ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.AllowRestore && change_r8.Type === "Update" ? 6 : -1);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵelementStart(0, "div", 55);
     i0.ɵɵlistener("keydown", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template_div_keydown_0_listener($event) { const change_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onTimelineItemKeydown($event, change_r8.ID)); });
-    i0.ɵɵelementStart(1, "div", 55);
+    i0.ɵɵelementStart(1, "div", 56);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template_div_click_1_listener() { const change_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExpansion(change_r8.ID)); });
-    i0.ɵɵelementStart(2, "div", 56)(3, "span", 57);
+    i0.ɵɵelementStart(2, "div", 57)(3, "span", 58);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 58);
+    i0.ɵɵelementStart(5, "span", 59);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 59)(8, "div", 60)(9, "div", 61);
+    i0.ɵɵelementStart(7, "div", 60)(8, "div", 61)(9, "div", 62);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 62);
+    i0.ɵɵelementStart(12, "span", 63);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 63);
+    i0.ɵɵelementStart(14, "span", 64);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 64);
+    i0.ɵɵelementStart(16, "span", 65);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(18, "i", 65);
+    i0.ɵɵelement(18, "i", 66);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(19, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Template, 6, 3, "div", 66);
+    i0.ɵɵconditionalCreate(19, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Template, 7, 4, "div", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const change_r8 = ctx.$implicit;
@@ -320,68 +333,68 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_
     i0.ɵɵconditional(ctx_r1.expandedItems.has(change_r8.ID) ? 19 : -1);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52);
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template, 20, 20, "div", 53, _forTrack0);
+    i0.ɵɵrepeaterCreate(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template, 20, 20, "div", 54, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r11 = ctx.$implicit;
+    const group_r12 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r11.label);
+    i0.ɵɵtextInterpolate(group_r12.label);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(group_r11.changes);
+    i0.ɵɵrepeater(group_r12.changes);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_Template, 5, 1, "div", 51, _forTrack1);
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_Template, 5, 1, "div", 52, _forTrack1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵrepeater(ctx_r1.dateGroups);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28)(1, "div")(2, "h2", 29);
+    i0.ɵɵelementStart(0, "div", 29)(1, "div")(2, "h2", 30);
     i0.ɵɵtext(3, "Change History");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 30);
+    i0.ɵɵelementStart(4, "div", 31);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 31)(7, "div", 32);
-    i0.ɵɵelement(8, "i", 33);
+    i0.ɵɵelementStart(6, "div", 32)(7, "div", 33);
+    i0.ɵɵelement(8, "i", 34);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 34);
+    i0.ɵɵelementStart(10, "div", 35);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 35)(13, "div", 36);
-    i0.ɵɵelement(14, "i", 37);
-    i0.ɵɵelementStart(15, "input", 38);
+    i0.ɵɵelementStart(12, "div", 36)(13, "div", 37);
+    i0.ɵɵelement(14, "i", 38);
+    i0.ɵɵelementStart(15, "input", 39);
     i0.ɵɵtwoWayListener("ngModelChange", function RecordChangesComponent_Conditional_2_Conditional_15_Template_input_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.searchTerm, $event) || (ctx_r1.searchTerm = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("input", function RecordChangesComponent_Conditional_2_Conditional_15_Template_input_input_15_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchChange()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "button", 39);
+    i0.ɵɵelementStart(16, "button", 40);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("")); });
-    i0.ɵɵelement(17, "i", 40);
+    i0.ɵɵelement(17, "i", 41);
     i0.ɵɵtext(18, " All ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "button", 39);
+    i0.ɵɵelementStart(19, "button", 40);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("Update")); });
-    i0.ɵɵelement(20, "i", 41);
+    i0.ɵɵelement(20, "i", 42);
     i0.ɵɵtext(21, " Updates ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "button", 39);
+    i0.ɵɵelementStart(22, "button", 40);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("Create")); });
-    i0.ɵɵelement(23, "i", 42);
+    i0.ɵɵelement(23, "i", 43);
     i0.ɵɵtext(24, " Creates ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "button", 39);
+    i0.ɵɵelementStart(25, "button", 40);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("Delete")); });
-    i0.ɵɵelement(26, "i", 43);
+    i0.ɵɵelement(26, "i", 44);
     i0.ɵɵtext(27, " Deletes ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(28, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Template, 4, 2, "div", 44);
-    i0.ɵɵelementStart(29, "div", 45);
-    i0.ɵɵconditionalCreate(30, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template, 7, 0, "div", 46)(31, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_Template, 2, 0);
+    i0.ɵɵconditionalCreate(28, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Template, 4, 2, "div", 45);
+    i0.ɵɵelementStart(29, "div", 46);
+    i0.ɵɵconditionalCreate(30, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template, 7, 0, "div", 47)(31, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -410,21 +423,21 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Template(rf, ctx) {
 } }
 function RecordChangesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 4)(2, "div", 5)(3, "div", 6);
-    i0.ɵɵelement(4, "i", 7);
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 5)(2, "div", 6)(3, "div", 7);
+    i0.ɵɵelement(4, "i", 8);
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6, "Version Labels");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, RecordChangesComponent_Conditional_2_Conditional_7_Template, 2, 1, "span", 8);
+    i0.ɵɵconditionalCreate(7, RecordChangesComponent_Conditional_2_Conditional_7_Template, 2, 1, "span", 9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 9);
+    i0.ɵɵelementStart(8, "button", 10);
     i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenCreateWizard()); });
-    i0.ɵɵelement(9, "i", 10);
+    i0.ɵɵelement(9, "i", 11);
     i0.ɵɵtext(10, " Create Label ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, RecordChangesComponent_Conditional_2_Conditional_11_Template, 3, 0, "div", 11)(12, RecordChangesComponent_Conditional_2_Conditional_12_Template, 2, 0, "div", 12)(13, RecordChangesComponent_Conditional_2_Conditional_13_Template, 3, 0, "div", 13);
+    i0.ɵɵconditionalCreate(11, RecordChangesComponent_Conditional_2_Conditional_11_Template, 3, 0, "div", 12)(12, RecordChangesComponent_Conditional_2_Conditional_12_Template, 2, 0, "div", 13)(13, RecordChangesComponent_Conditional_2_Conditional_13_Template, 3, 0, "div", 14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(14, RecordChangesComponent_Conditional_2_Conditional_14_Template, 11, 0, "div", 14)(15, RecordChangesComponent_Conditional_2_Conditional_15_Template, 32, 18);
+    i0.ɵɵconditionalCreate(14, RecordChangesComponent_Conditional_2_Conditional_14_Template, 11, 0, "div", 15)(15, RecordChangesComponent_Conditional_2_Conditional_15_Template, 32, 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -435,14 +448,127 @@ function RecordChangesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.viewData.length === 0 ? 14 : 15);
 } }
+function RecordChangesComponent_Conditional_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵelement(1, "i", 101);
+    i0.ɵɵtext(2, " No field changes could be parsed from this version. ");
+    i0.ɵɵelementEnd();
+} }
+function RecordChangesComponent_Conditional_3_Conditional_18_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 107);
+} }
+function RecordChangesComponent_Conditional_3_Conditional_18_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 108);
+} }
+function RecordChangesComponent_Conditional_3_Conditional_18_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 103);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 104);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "td", 105);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "td", 106);
+    i0.ɵɵconditionalCreate(8, RecordChangesComponent_Conditional_3_Conditional_18_For_12_Conditional_8_Template, 1, 0, "i", 107)(9, RecordChangesComponent_Conditional_3_Conditional_18_For_12_Conditional_9_Template, 1, 0, "i", 108);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const diff_r14 = ctx.$implicit;
+    i0.ɵɵclassProp("rc-diff-changed", diff_r14.IsChanged)("rc-diff-unchanged", !diff_r14.IsChanged);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(diff_r14.DisplayName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(diff_r14.CurrentValue || "(empty)");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(diff_r14.VersionValue || "(empty)");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(diff_r14.IsChanged ? 8 : 9);
+} }
+function RecordChangesComponent_Conditional_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 97)(1, "thead")(2, "tr")(3, "th");
+    i0.ɵɵtext(4, "Field");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "th");
+    i0.ɵɵtext(6, "Current Value");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th");
+    i0.ɵɵtext(8, "Restore To");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(9, "th");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "tbody");
+    i0.ɵɵrepeaterCreate(11, RecordChangesComponent_Conditional_3_Conditional_18_For_12_Template, 10, 8, "tr", 102, _forTrack4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(11);
+    i0.ɵɵrepeater(ctx_r1.RestorePreviewFields);
+} }
+function RecordChangesComponent_Conditional_3_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 109);
+    i0.ɵɵtext(1, " Restoring... ");
+} }
+function RecordChangesComponent_Conditional_3_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 110);
+    i0.ɵɵtext(1, " Apply Restore ");
+} }
 function RecordChangesComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
-    i0.ɵɵelementStart(1, "div", 86);
-    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "mj-label-create", 87);
-    i0.ɵɵlistener("Created", function RecordChangesComponent_Conditional_3_Template_mj_label_create_Created_2_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreated($event)); })("Cancel", function RecordChangesComponent_Conditional_3_Template_mj_label_create_Cancel_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelRestorePreview()); });
+    i0.ɵɵelementStart(1, "div", 90);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 91)(3, "div", 92);
+    i0.ɵɵelement(4, "i", 88);
+    i0.ɵɵtext(5, " Restore Preview ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 93);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelRestorePreview()); });
+    i0.ɵɵelement(7, "i", 94);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 95)(9, "span")(10, "strong");
+    i0.ɵɵtext(11, "Version:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span")(14, "strong");
+    i0.ɵɵtext(15, "By:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(17, RecordChangesComponent_Conditional_3_Conditional_17_Template, 3, 0, "div", 96)(18, RecordChangesComponent_Conditional_3_Conditional_18_Template, 13, 0, "table", 97);
+    i0.ɵɵelementStart(19, "div", 98)(20, "button", 99);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmRestore()); });
+    i0.ɵɵconditionalCreate(21, RecordChangesComponent_Conditional_3_Conditional_21_Template, 2, 0)(22, RecordChangesComponent_Conditional_3_Conditional_22_Template, 2, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "button", 100);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelRestorePreview()); });
+    i0.ɵɵtext(24, " Cancel ");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(12);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatFullDateTime(ctx_r1.RestorePreview.ChangedAt));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getUserDisplayName(ctx_r1.RestorePreview.User));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.RestorePreviewFields.length === 0 ? 17 : 18);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.IsRestoring || ctx_r1.RestorePreviewFields.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsRestoring ? 21 : 22);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.IsRestoring);
+} }
+function RecordChangesComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 111);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
+    i0.ɵɵelementStart(1, "div", 112);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_4_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "mj-label-create", 113);
+    i0.ɵɵlistener("Created", function RecordChangesComponent_Conditional_4_Template_mj_label_create_Created_2_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreated($event)); })("Cancel", function RecordChangesComponent_Conditional_4_Template_mj_label_create_Cancel_2_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -458,10 +584,23 @@ export class RecordChangesComponent {
     IsVisible = false;
     dialogClosed = new EventEmitter();
     record;
+    /** Whether to show a "Restore" button on each historical version row. Default false. */
+    AllowRestore = false;
+    /**
+     * Emitted when the user clicks Restore on a historical version.
+     * The parent is responsible for loading old values into the record and saving.
+     */
+    RestoreRequested = new EventEmitter();
     viewData = [];
     filteredData = [];
     dateGroups = [];
     expandedItems = new Set();
+    /** The change record being previewed for restore, or null if no preview is active */
+    RestorePreview = null;
+    /** Parsed field-level diff for the restore preview */
+    RestorePreviewFields = [];
+    /** Whether the restore operation is in progress */
+    IsRestoring = false;
     // Version label state
     RecordLabels = [];
     IsLoadingLabels = false;
@@ -639,6 +778,106 @@ export class RecordChangesComponent {
             this.toggleExpansion(changeId);
         }
     }
+    /**
+     * Opens the inline restore preview panel for a given change record.
+     * Computes a field-by-field diff between the version's old values and the current record.
+     */
+    OnRestoreVersion(change, event) {
+        event.stopPropagation(); // Prevent card toggle
+        this.RestorePreview = change;
+        this.RestorePreviewFields = this.buildRestorePreviewFields(change);
+        this.IsRestoring = false;
+        this.cdr.markForCheck();
+    }
+    /** Closes the restore preview panel without applying changes. */
+    CancelRestorePreview() {
+        this.RestorePreview = null;
+        this.RestorePreviewFields = [];
+        this.cdr.markForCheck();
+    }
+    /**
+     * Confirms the restore: emits a RestoreVersionEvent with the old field values
+     * so the parent (record-form-container) can apply them and save.
+     */
+    ConfirmRestore() {
+        if (!this.RestorePreview)
+            return;
+        const change = this.RestorePreview;
+        const fieldChanges = this.parseFieldChanges(change);
+        this.IsRestoring = true;
+        this.cdr.markForCheck();
+        this.RestoreRequested.emit({
+            VersionID: change.ID,
+            ChangedAt: change.ChangedAt,
+            ChangedByUser: change.User || '',
+            FieldChanges: fieldChanges
+        });
+        // The parent will handle the actual save; we close the preview on completion.
+        // A brief delay allows the parent to process, then we reset.
+        setTimeout(() => {
+            this.RestorePreview = null;
+            this.RestorePreviewFields = [];
+            this.IsRestoring = false;
+            this.cdr.markForCheck();
+        }, 500);
+    }
+    /**
+     * Builds the diff list comparing version old values vs the current record.
+     */
+    buildRestorePreviewFields(change) {
+        const changesJson = this.parseChangesJson(change);
+        if (!changesJson)
+            return [];
+        const diffs = [];
+        for (const key of Object.keys(changesJson)) {
+            const entry = changesJson[key];
+            const fieldName = entry.field || key;
+            const entityField = this.record.EntityInfo.Fields.find((f) => f.Name.trim().toLowerCase() === fieldName.trim().toLowerCase());
+            const isDateField = entityField?.TSType === EntityFieldTSType.Date;
+            const versionValue = this.formatChangeValue(entry.oldValue, isDateField);
+            const currentValue = this.getCurrentFieldValue(fieldName, isDateField);
+            diffs.push({
+                FieldName: fieldName,
+                DisplayName: entityField?.DisplayNameOrName || fieldName,
+                VersionValue: versionValue,
+                CurrentValue: currentValue,
+                IsChanged: versionValue !== currentValue
+            });
+        }
+        return diffs;
+    }
+    /** Gets the current value of a field from the live record, formatted for display. */
+    getCurrentFieldValue(fieldName, isDateField) {
+        const field = this.record.Fields.find(f => f.Name.trim().toLowerCase() === fieldName.trim().toLowerCase());
+        if (!field)
+            return '';
+        return this.formatChangeValue(field.Value, isDateField);
+    }
+    /** Parses ChangesJSON into a structured map, returning null on failure. */
+    parseChangesJson(change) {
+        try {
+            return JSON.parse(change.ChangesJSON || '{}');
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Parses field changes into the RestoreVersionEvent format. */
+    parseFieldChanges(change) {
+        const fieldChanges = {};
+        const changesJson = this.parseChangesJson(change);
+        if (!changesJson)
+            return fieldChanges;
+        for (const key of Object.keys(changesJson)) {
+            const entry = changesJson[key];
+            const fieldName = entry.field || key;
+            fieldChanges[fieldName] = {
+                OldValue: entry.oldValue,
+                NewValue: entry.newValue
+            };
+        }
+        return fieldChanges;
+    }
     // ─── Date Grouping ─────────────────────────────────────────────
     buildDateGroups(changes) {
         const groups = new Map();
@@ -928,12 +1167,13 @@ export class RecordChangesComponent {
         return div.innerHTML;
     }
     static ɵfac = function RecordChangesComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecordChangesComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.MJNotificationService), i0.ɵɵdirectiveInject(i2.DomSanitizer)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], inputs: { record: "record" }, outputs: { dialogClosed: "dialogClosed" }, standalone: false, decls: 4, vars: 9, consts: [[3, "Closed", "Mode", "Title", "Visible", "Resizable", "MinWidthPx", "MaxWidthRatio"], ["text", "Loading history...", "size", "medium"], [1, "rc-container"], [1, "rc-wizard-overlay"], [1, "rc-labels-section"], [1, "rc-labels-header"], [1, "rc-labels-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-tags"], [1, "rc-labels-count"], ["title", "Create a version label for this record", 1, "rc-create-label-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "rc-labels-loading"], [1, "rc-labels-empty"], [1, "rc-labels-list"], [1, "rc-empty-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "rc-label-chip", 3, "title"], [1, "fa-solid", "fa-tag", "rc-label-chip-icon"], [1, "rc-label-chip-name"], [1, "rc-label-chip-meta"], [1, "rc-label-chip-status"], [1, "rc-label-chip-items"], [1, "rc-empty-state-icon"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "rc-empty-state-title"], [1, "rc-empty-state-description"], [1, "rc-empty-state-hint"], [1, "fa-solid", "fa-shield-halved"], [1, "rc-page-header"], [1, "rc-page-title"], [1, "rc-page-subtitle"], [1, "rc-header-meta"], [1, "rc-entity-badge"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "rc-change-count"], [1, "rc-filter-bar"], [1, "rc-search-wrap"], ["aria-hidden", "true", 1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search changes...", "aria-label", "Search record changes", 1, "rc-search-box", 3, "ngModelChange", "input", "ngModel"], [1, "rc-filter-pill", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], [1, "rc-filter-results"], [1, "rc-timeline"], [1, "rc-no-results"], [1, "rc-clear-filters-link", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], [1, "rc-clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "rc-date-group"], [1, "rc-date-label"], [1, "rc-card", 3, "class", "expanded"], [1, "rc-card", 3, "keydown"], [1, "rc-card-header", 3, "click"], [1, "rc-card-header-left"], [1, "rc-card-type-badge"], [1, "rc-card-summary"], [1, "rc-card-meta"], [1, "rc-card-user"], [1, "rc-avatar"], [1, "rc-card-time", 3, "title"], [1, "rc-card-source"], [1, "rc-card-status"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down", "rc-card-chevron"], [1, "rc-card-body"], [1, "rc-deletion-note"], [1, "rc-comments"], [1, "rc-errors"], [1, "rc-field-row"], [1, "rc-field-label"], [1, "rc-field-values"], [1, "rc-val-new"], [1, "rc-bool-change"], [1, "rc-atomic-change"], [1, "rc-text-diff", 3, "innerHTML"], [1, "rc-bool-dot"], [1, "rc-bool-label", "old"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-right", "rc-val-arrow"], [1, "rc-bool-label", "new"], [1, "rc-val-old"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle"], [1, "rc-error-log"], [1, "rc-wizard-overlay", 3, "click"], [1, "rc-wizard-container", 3, "click"], [3, "Created", "Cancel", "PreselectedEntity", "PreselectedRecordIds"]], template: function RecordChangesComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], inputs: { record: "record", AllowRestore: "AllowRestore" }, outputs: { dialogClosed: "dialogClosed", RestoreRequested: "RestoreRequested" }, standalone: false, decls: 5, vars: 10, consts: [[3, "Closed", "Mode", "Title", "Visible", "Resizable", "MinWidthPx", "MaxWidthRatio"], ["text", "Loading history...", "size", "medium"], [1, "rc-container"], [1, "rc-restore-preview-backdrop"], [1, "rc-wizard-overlay"], [1, "rc-labels-section"], [1, "rc-labels-header"], [1, "rc-labels-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-tags"], [1, "rc-labels-count"], ["title", "Create a version label for this record", 1, "rc-create-label-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "rc-labels-loading"], [1, "rc-labels-empty"], [1, "rc-labels-list"], [1, "rc-empty-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "rc-label-chip", 3, "title"], [1, "fa-solid", "fa-tag", "rc-label-chip-icon"], [1, "rc-label-chip-name"], [1, "rc-label-chip-meta"], [1, "rc-label-chip-status"], [1, "rc-label-chip-items"], [1, "rc-empty-state-icon"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "rc-empty-state-title"], [1, "rc-empty-state-description"], [1, "rc-empty-state-hint"], [1, "fa-solid", "fa-shield-halved"], [1, "rc-page-header"], [1, "rc-page-title"], [1, "rc-page-subtitle"], [1, "rc-header-meta"], [1, "rc-entity-badge"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "rc-change-count"], [1, "rc-filter-bar"], [1, "rc-search-wrap"], ["aria-hidden", "true", 1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search changes...", "aria-label", "Search record changes", 1, "rc-search-box", 3, "ngModelChange", "input", "ngModel"], [1, "rc-filter-pill", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], [1, "rc-filter-results"], [1, "rc-timeline"], [1, "rc-no-results"], [1, "rc-clear-filters-link", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], [1, "rc-clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "rc-date-group"], [1, "rc-date-label"], [1, "rc-card", 3, "class", "expanded"], [1, "rc-card", 3, "keydown"], [1, "rc-card-header", 3, "click"], [1, "rc-card-header-left"], [1, "rc-card-type-badge"], [1, "rc-card-summary"], [1, "rc-card-meta"], [1, "rc-card-user"], [1, "rc-avatar"], [1, "rc-card-time", 3, "title"], [1, "rc-card-source"], [1, "rc-card-status"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down", "rc-card-chevron"], [1, "rc-card-body"], [1, "rc-deletion-note"], [1, "rc-comments"], [1, "rc-errors"], [1, "rc-restore-action"], [1, "rc-field-row"], [1, "rc-field-label"], [1, "rc-field-values"], [1, "rc-val-new"], [1, "rc-bool-change"], [1, "rc-atomic-change"], [1, "rc-text-diff", 3, "innerHTML"], [1, "rc-bool-dot"], [1, "rc-bool-label", "old"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-right", "rc-val-arrow"], [1, "rc-bool-label", "new"], [1, "rc-val-old"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle"], [1, "rc-error-log"], ["title", "Restore field values from before this change", 1, "rc-restore-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock-rotate-left"], [1, "rc-restore-preview-backdrop", 3, "click"], [1, "rc-restore-preview-panel", 3, "click"], [1, "rc-restore-preview-header"], [1, "rc-restore-preview-title"], ["title", "Close preview", 1, "rc-restore-preview-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "rc-restore-preview-meta"], [1, "rc-restore-preview-empty"], [1, "rc-restore-preview-table"], [1, "rc-restore-preview-actions"], [1, "rc-restore-confirm-btn", 3, "click", "disabled"], [1, "rc-restore-cancel-btn", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-info"], [3, "rc-diff-changed", "rc-diff-unchanged"], [1, "rc-restore-field-name"], [1, "rc-restore-current"], [1, "rc-restore-version"], [1, "rc-restore-indicator"], ["title", "Will be changed", 1, "fa-solid", "fa-circle-exclamation"], ["title", "Already matches", 1, "fa-solid", "fa-check"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-left"], [1, "rc-wizard-overlay", 3, "click"], [1, "rc-wizard-container", 3, "click"], [3, "Created", "Cancel", "PreselectedEntity", "PreselectedRecordIds"]], template: function RecordChangesComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-slide-panel", 0);
             i0.ɵɵlistener("Closed", function RecordChangesComponent_Template_mj_slide_panel_Closed_0_listener() { return ctx.OnClose(); });
             i0.ɵɵconditionalCreate(1, RecordChangesComponent_Conditional_1_Template, 1, 0, "mj-loading", 1);
             i0.ɵɵconditionalCreate(2, RecordChangesComponent_Conditional_2_Template, 16, 3, "div", 2);
-            i0.ɵɵconditionalCreate(3, RecordChangesComponent_Conditional_3_Template, 3, 4, "div", 3);
+            i0.ɵɵconditionalCreate(3, RecordChangesComponent_Conditional_3_Template, 25, 6, "div", 3);
+            i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_4_Template, 3, 4, "div", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("Mode", "slide")("Title", "Record Changes History")("Visible", ctx.IsVisible)("Resizable", true)("MinWidthPx", 400)("MaxWidthRatio", 0.6);
@@ -942,16 +1182,22 @@ export class RecordChangesComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowCreateWizard ? 3 : -1);
-        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.MjSlidePanelComponent, i5.MjLabelCreateComponent], styles: ["/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Record Changes \u2014 Option A \"Clean Timeline\"\n   Linear / Notion-inspired minimal timeline design\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Version Labels Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-labels-section {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.rc-labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.rc-labels-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rc-labels-title i { color: var(--mj-brand-primary); }\n\n.rc-labels-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  border-radius: 10px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-create-label-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.rc-labels-loading {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  padding: 4px 0;\n}\n\n.rc-labels-loading i { margin-right: 4px; }\n\n.rc-labels-empty {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 4px 0;\n}\n\n.rc-labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.rc-label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.rc-label-chip:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-label-chip-icon { color: var(--mj-brand-primary); font-size: 10px; }\n\n.rc-label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.rc-label-chip-status {\n  padding: 1px 5px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 9px;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.label-status-archived { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.label-status-restored { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n\n.rc-label-chip-items { white-space: nowrap; }\n\n/* \u2500\u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 32px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.rc-empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.rc-empty-state-icon i { font-size: 32px; color: var(--mj-text-disabled); }\n\n.rc-empty-state-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 12px 0;\n}\n\n.rc-empty-state-description {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 24px 0;\n}\n\n.rc-empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 20px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.rc-empty-state-hint i { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Page Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 24px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-page-title {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.rc-page-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n}\n\n.rc-header-meta { text-align: right; }\n\n.rc-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.rc-change-count {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n}\n\n/* \u2500\u2500\u2500 Filter Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-filter-bar {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 20px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.rc-search-wrap {\n  position: relative;\n  flex: 1;\n  min-width: 180px;\n}\n\n.rc-search-wrap i {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.rc-search-box {\n  width: 100%;\n  padding: 8px 12px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  color: var(--mj-text-primary);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.rc-search-box:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-search-box::placeholder { color: var(--mj-text-disabled); }\n\n.rc-filter-pill {\n  padding: 7px 14px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.rc-filter-pill:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.rc-filter-pill.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.rc-filter-results {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-clear-filters-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n\n.rc-clear-filters-link:hover { color: var(--mj-brand-primary-hover); }\n\n/* \u2500\u2500\u2500 No Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-no-results {\n  text-align: center;\n  padding: 48px 16px;\n  color: var(--mj-text-muted);\n}\n\n.rc-no-results i {\n  display: block;\n  font-size: 32px;\n  margin-bottom: 16px;\n  color: var(--mj-text-disabled);\n}\n\n.rc-no-results p { font-size: 14px; margin: 0 0 16px 0; }\n\n.rc-clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-clear-filters-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500\u2500 Timeline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-timeline {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* Vertical line running through the timeline */\n.rc-timeline::before {\n  content: '';\n  position: absolute;\n  left: 15px;\n  top: 24px;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Date Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-date-group { margin-bottom: 8px; }\n\n.rc-date-label {\n  position: relative;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-disabled);\n  padding: 16px 0 12px 44px;\n}\n\n/* Date dot on the timeline line */\n.rc-date-label::before {\n  content: '';\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-border-default);\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Change Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card {\n  position: relative;\n  margin-left: 44px;\n  margin-bottom: 12px;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.2s;\n  overflow: hidden;\n}\n\n.rc-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-card:focus {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Colored dot on the timeline line for each card */\n.rc-card::before {\n  content: '';\n  position: absolute;\n  left: -23px;\n  top: 20px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  z-index: 1;\n}\n\n.rc-card.type-update::before {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-card.type-create::before {\n  background: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 15%, transparent);\n}\n\n.rc-card.type-delete::before {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n}\n\n/* \u2500\u2500\u2500 Card Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-header {\n  padding: 14px 18px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  gap: 12px;\n}\n\n.rc-card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.rc-card-type-badge {\n  padding: 3px 10px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.type-update .rc-card-type-badge { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.type-create .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.type-delete .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n\n.rc-card-summary {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.rc-card-user {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.rc-avatar {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n}\n\n.rc-card-time { white-space: nowrap; }\n\n.rc-card-source {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.source-internal { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.source-external { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n.rc-card-status {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-complete { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.status-pending { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n.status-error { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.status-unknown { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n.rc-card-chevron {\n  color: var(--mj-text-disabled);\n  transition: transform 0.2s;\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.rc-card.expanded .rc-card-chevron { transform: rotate(180deg); }\n\n/* \u2500\u2500\u2500 Card Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-body {\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Field Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-field-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-field-row:last-child { border-bottom: none; }\n\n.rc-field-label {\n  width: 140px;\n  min-width: 140px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.rc-field-values {\n  flex: 1;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Atomic Change (numbers, dates) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-atomic-change {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.rc-val-old {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n  font-weight: 400;\n}\n\n.rc-val-arrow {\n  color: var(--mj-border-strong);\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.rc-val-new {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n/* \u2500\u2500\u2500 Boolean Change \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-bool-change {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-bool-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.rc-bool-dot.on { background: var(--mj-status-success); }\n.rc-bool-dot.off { background: var(--mj-border-strong); }\n\n.rc-bool-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.rc-bool-label.old {\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n}\n\n.rc-bool-label.new.active { color: var(--mj-status-success); }\n.rc-bool-label.new.inactive { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Text Diff (strings only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-text-diff {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  line-height: 1.6;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.rc-diff-added {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  padding: 1px 3px;\n  border-radius: 3px;\n}\n\n.rc-diff-removed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  padding: 1px 3px;\n  border-radius: 3px;\n  text-decoration: line-through;\n}\n\n.rc-diff-unchanged {\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500\u2500 Deletion Note \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-deletion-note {\n  padding: 16px 18px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-deletion-note i {\n  color: var(--mj-status-error);\n  font-size: 14px;\n}\n\n/* \u2500\u2500\u2500 Comments & Errors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-comments {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-comments i {\n  color: var(--mj-brand-primary);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-errors {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-errors i {\n  color: var(--mj-status-error);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-error-log {\n  background: var(--mj-bg-surface);\n  padding: 8px;\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n  flex: 1;\n}\n\n/* \u2500\u2500\u2500 Create Wizard Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-wizard-container {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 24px;\n  animation: rc-slideUp 0.2s ease;\n}\n\n@keyframes rc-fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rc-slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .rc-card-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .rc-card-meta {\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .rc-field-row {\n    flex-direction: column;\n  }\n\n  .rc-field-label {\n    width: 100%;\n    min-width: unset;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n  }\n\n  .rc-field-values {\n    padding: 8px 16px;\n  }\n\n  .rc-atomic-change {\n    flex-wrap: wrap;\n  }\n\n  .rc-filter-bar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .rc-search-wrap { min-width: unset; }\n\n  .rc-filter-pill { justify-content: center; }\n\n  .rc-page-header {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .rc-header-meta { text-align: left; }\n}\n\n@media (max-width: 480px) {\n  .rc-container { padding: 12px 16px; }\n\n  .rc-card { margin-left: 36px; }\n\n  .rc-date-label { padding-left: 36px; }\n\n  .rc-card::before { left: -19px; }\n\n  .rc-timeline::before { left: 12px; }\n\n  .rc-date-label::before { left: 7px; }\n}\n"], encapsulation: 2, changeDetection: 0 });
+            i0.ɵɵconditional(ctx.RestorePreview ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowCreateWizard ? 4 : -1);
+        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.MjSlidePanelComponent, i5.MjLabelCreateComponent], styles: ["/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Record Changes \u2014 Option A \"Clean Timeline\"\n   Linear / Notion-inspired minimal timeline design\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Version Labels Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-labels-section {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.rc-labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.rc-labels-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rc-labels-title i { color: var(--mj-brand-primary); }\n\n.rc-labels-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  border-radius: 10px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-create-label-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.rc-labels-loading {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  padding: 4px 0;\n}\n\n.rc-labels-loading i { margin-right: 4px; }\n\n.rc-labels-empty {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 4px 0;\n}\n\n.rc-labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.rc-label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.rc-label-chip:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-label-chip-icon { color: var(--mj-brand-primary); font-size: 10px; }\n\n.rc-label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.rc-label-chip-status {\n  padding: 1px 5px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 9px;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.label-status-archived { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.label-status-restored { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n\n.rc-label-chip-items { white-space: nowrap; }\n\n/* \u2500\u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 32px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.rc-empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.rc-empty-state-icon i { font-size: 32px; color: var(--mj-text-disabled); }\n\n.rc-empty-state-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 12px 0;\n}\n\n.rc-empty-state-description {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 24px 0;\n}\n\n.rc-empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 20px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.rc-empty-state-hint i { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Page Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 24px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-page-title {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.rc-page-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n}\n\n.rc-header-meta { text-align: right; }\n\n.rc-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.rc-change-count {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n}\n\n/* \u2500\u2500\u2500 Filter Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-filter-bar {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 20px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.rc-search-wrap {\n  position: relative;\n  flex: 1;\n  min-width: 180px;\n}\n\n.rc-search-wrap i {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.rc-search-box {\n  width: 100%;\n  padding: 8px 12px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  color: var(--mj-text-primary);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.rc-search-box:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-search-box::placeholder { color: var(--mj-text-disabled); }\n\n.rc-filter-pill {\n  padding: 7px 14px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.rc-filter-pill:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.rc-filter-pill.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.rc-filter-results {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-clear-filters-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n\n.rc-clear-filters-link:hover { color: var(--mj-brand-primary-hover); }\n\n/* \u2500\u2500\u2500 No Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-no-results {\n  text-align: center;\n  padding: 48px 16px;\n  color: var(--mj-text-muted);\n}\n\n.rc-no-results i {\n  display: block;\n  font-size: 32px;\n  margin-bottom: 16px;\n  color: var(--mj-text-disabled);\n}\n\n.rc-no-results p { font-size: 14px; margin: 0 0 16px 0; }\n\n.rc-clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-clear-filters-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500\u2500 Timeline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-timeline {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* Vertical line running through the timeline */\n.rc-timeline::before {\n  content: '';\n  position: absolute;\n  left: 15px;\n  top: 24px;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Date Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-date-group { margin-bottom: 8px; }\n\n.rc-date-label {\n  position: relative;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-disabled);\n  padding: 16px 0 12px 44px;\n}\n\n/* Date dot on the timeline line */\n.rc-date-label::before {\n  content: '';\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-border-default);\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Change Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card {\n  position: relative;\n  margin-left: 44px;\n  margin-bottom: 12px;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.2s;\n  overflow: hidden;\n}\n\n.rc-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-card:focus {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Colored dot on the timeline line for each card */\n.rc-card::before {\n  content: '';\n  position: absolute;\n  left: -23px;\n  top: 20px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  z-index: 1;\n}\n\n.rc-card.type-update::before {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-card.type-create::before {\n  background: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 15%, transparent);\n}\n\n.rc-card.type-delete::before {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n}\n\n/* \u2500\u2500\u2500 Card Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-header {\n  padding: 14px 18px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  gap: 12px;\n}\n\n.rc-card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.rc-card-type-badge {\n  padding: 3px 10px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.type-update .rc-card-type-badge { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.type-create .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.type-delete .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n\n.rc-card-summary {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.rc-card-user {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.rc-avatar {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n}\n\n.rc-card-time { white-space: nowrap; }\n\n.rc-card-source {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.source-internal { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.source-external { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n.rc-card-status {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-complete { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.status-pending { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n.status-error { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.status-unknown { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n.rc-card-chevron {\n  color: var(--mj-text-disabled);\n  transition: transform 0.2s;\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.rc-card.expanded .rc-card-chevron { transform: rotate(180deg); }\n\n/* \u2500\u2500\u2500 Card Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-body {\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Field Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-field-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-field-row:last-child { border-bottom: none; }\n\n.rc-field-label {\n  width: 140px;\n  min-width: 140px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.rc-field-values {\n  flex: 1;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Atomic Change (numbers, dates) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-atomic-change {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.rc-val-old {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n  font-weight: 400;\n}\n\n.rc-val-arrow {\n  color: var(--mj-border-strong);\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.rc-val-new {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n/* \u2500\u2500\u2500 Boolean Change \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-bool-change {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-bool-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.rc-bool-dot.on { background: var(--mj-status-success); }\n.rc-bool-dot.off { background: var(--mj-border-strong); }\n\n.rc-bool-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.rc-bool-label.old {\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n}\n\n.rc-bool-label.new.active { color: var(--mj-status-success); }\n.rc-bool-label.new.inactive { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Text Diff (strings only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-text-diff {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  line-height: 1.6;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.rc-diff-added {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  padding: 1px 3px;\n  border-radius: 3px;\n}\n\n.rc-diff-removed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  padding: 1px 3px;\n  border-radius: 3px;\n  text-decoration: line-through;\n}\n\n.rc-diff-unchanged {\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500\u2500 Deletion Note \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-deletion-note {\n  padding: 16px 18px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-deletion-note i {\n  color: var(--mj-status-error);\n  font-size: 14px;\n}\n\n/* \u2500\u2500\u2500 Comments & Errors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-comments {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-comments i {\n  color: var(--mj-brand-primary);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-errors {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-errors i {\n  color: var(--mj-status-error);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-error-log {\n  background: var(--mj-bg-surface);\n  padding: 8px;\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n  flex: 1;\n}\n\n/* \u2500\u2500\u2500 Create Wizard Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-wizard-container {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 24px;\n  animation: rc-slideUp 0.2s ease;\n}\n\n@keyframes rc-fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rc-slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .rc-card-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .rc-card-meta {\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .rc-field-row {\n    flex-direction: column;\n  }\n\n  .rc-field-label {\n    width: 100%;\n    min-width: unset;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n  }\n\n  .rc-field-values {\n    padding: 8px 16px;\n  }\n\n  .rc-atomic-change {\n    flex-wrap: wrap;\n  }\n\n  .rc-filter-bar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .rc-search-wrap { min-width: unset; }\n\n  .rc-filter-pill { justify-content: center; }\n\n  .rc-page-header {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .rc-header-meta { text-align: left; }\n}\n\n@media (max-width: 480px) {\n  .rc-container { padding: 12px 16px; }\n\n  .rc-card { margin-left: 36px; }\n\n  .rc-date-label { padding-left: 36px; }\n\n  .rc-card::before { left: -19px; }\n\n  .rc-timeline::before { left: 12px; }\n\n  .rc-date-label::before { left: 7px; }\n}\n\n/* \u2500\u2500\u2500 Restore Action \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-restore-action {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 10px;\n  margin-top: 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.rc-restore-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-family: inherit;\n  line-height: 1;\n}\n\n.rc-restore-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-restore-btn:active {\n  transform: translateY(1px);\n  box-shadow: none;\n}\n\n.rc-restore-btn i {\n  font-size: 13px;\n}\n\n/* \u2500\u2500\u2500 Restore Preview Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-restore-preview-backdrop {\n  position: fixed;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-restore-preview-panel {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 90%;\n  max-width: 700px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 0;\n  animation: rc-slideUp 0.2s ease;\n}\n\n.rc-restore-preview-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-preview-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.rc-restore-preview-title i {\n  color: var(--mj-brand-primary);\n}\n\n.rc-restore-preview-close {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 16px;\n  transition: color 0.15s, background 0.15s;\n}\n\n.rc-restore-preview-close:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.rc-restore-preview-meta {\n  display: flex;\n  gap: 20px;\n  padding: 12px 20px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-preview-empty {\n  padding: 24px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.rc-restore-preview-empty i {\n  color: var(--mj-text-disabled);\n}\n\n/* Restore Preview Table */\n.rc-restore-preview-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.rc-restore-preview-table th {\n  text-align: left;\n  padding: 10px 16px;\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-preview-table td {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  vertical-align: top;\n}\n\n.rc-restore-preview-table tr:last-child td {\n  border-bottom: none;\n}\n\n.rc-restore-preview-table tr.rc-diff-changed {\n  background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n}\n\n.rc-restore-preview-table tr.rc-diff-unchanged {\n  opacity: 0.6;\n}\n\n.rc-restore-field-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n}\n\n.rc-restore-current {\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-secondary);\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-restore-version {\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-restore-indicator {\n  text-align: center;\n  width: 30px;\n}\n\n.rc-diff-changed .rc-restore-indicator i {\n  color: var(--mj-status-warning);\n}\n\n.rc-diff-unchanged .rc-restore-indicator i {\n  color: var(--mj-status-success);\n  font-size: 12px;\n}\n\n/* Restore Preview Actions */\n.rc-restore-preview-actions {\n  display: flex;\n  gap: 10px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-confirm-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s, box-shadow 0.15s;\n  font-family: inherit;\n}\n\n.rc-restore-confirm-btn:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.rc-restore-confirm-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.rc-restore-cancel-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-family: inherit;\n}\n\n.rc-restore-cancel-btn:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.rc-restore-cancel-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordChangesComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-record-changes', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mj-slide-panel\n  [Mode]=\"'slide'\"\n  [Title]=\"'Record Changes History'\"\n  [Visible]=\"IsVisible\"\n  [Resizable]=\"true\"\n  [MinWidthPx]=\"400\"\n  [MaxWidthRatio]=\"0.6\"\n  (Closed)=\"OnClose()\">\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading history...\" size=\"medium\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <div class=\"rc-container\">\n      <!-- Version Labels Section -->\n      <div class=\"rc-labels-section\">\n        <div class=\"rc-labels-header\">\n          <div class=\"rc-labels-title\">\n            <i class=\"fa-solid fa-tags\" aria-hidden=\"true\"></i>\n            <span>Version Labels</span>\n            @if (RecordLabels.length > 0) {\n              <span class=\"rc-labels-count\">{{ RecordLabels.length }}</span>\n            }\n          </div>\n          <button class=\"rc-create-label-btn\" (click)=\"OpenCreateWizard()\" title=\"Create a version label for this record\">\n            <i class=\"fa-solid fa-plus\"></i> Create Label\n          </button>\n        </div>\n        @if (IsLoadingLabels) {\n          <div class=\"rc-labels-loading\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading labels...\n          </div>\n        } @else if (RecordLabels.length === 0) {\n          <div class=\"rc-labels-empty\">\n            No version labels for this record yet.\n          </div>\n        } @else {\n          <div class=\"rc-labels-list\">\n            @for (label of RecordLabels; track label.ID) {\n              <div class=\"rc-label-chip\" [title]=\"label.Description || label.Name\">\n                <i class=\"fa-solid fa-tag rc-label-chip-icon\"></i>\n                <span class=\"rc-label-chip-name\">{{ label.Name }}</span>\n                <span class=\"rc-label-chip-meta\">\n                  <span class=\"rc-label-chip-status\" [class]=\"getLabelStatusClass(label.Status)\">{{ label.Status }}</span>\n                  <span class=\"rc-label-chip-items\">{{ label.ItemCount }} item{{ label.ItemCount !== 1 ? 's' : '' }}</span>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (viewData.length === 0) {\n        <!-- Empty state -->\n        <div class=\"rc-empty-state\">\n          <div class=\"rc-empty-state-icon\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          </div>\n          <h3 class=\"rc-empty-state-title\">No Change History</h3>\n          <p class=\"rc-empty-state-description\">\n            This record doesn't have any tracked changes yet.\n            Changes will appear here automatically as edits are made.\n          </p>\n          <div class=\"rc-empty-state-hint\">\n            <i class=\"fa-solid fa-shield-halved\"></i>\n            <span>Record change tracking is managed at the entity level</span>\n          </div>\n        </div>\n      } @else {\n        <!-- Page Header -->\n        <div class=\"rc-page-header\">\n          <div>\n            <h2 class=\"rc-page-title\">Change History</h2>\n            <div class=\"rc-page-subtitle\">{{ record.EntityInfo.Name }}</div>\n          </div>\n          <div class=\"rc-header-meta\">\n            <div class=\"rc-entity-badge\">\n              <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n              {{ record.EntityInfo.Name }}\n            </div>\n            <div class=\"rc-change-count\">{{ viewData.length }} change{{ viewData.length !== 1 ? 's' : '' }} &middot; {{ getUniqueContributorCount() }} contributor{{ getUniqueContributorCount() !== 1 ? 's' : '' }}</div>\n          </div>\n        </div>\n\n        <!-- Filter Bar -->\n        <div class=\"rc-filter-bar\">\n          <div class=\"rc-search-wrap\">\n            <i class=\"fa-solid fa-search\" aria-hidden=\"true\"></i>\n            <input\n              class=\"rc-search-box\"\n              type=\"text\"\n              placeholder=\"Search changes...\"\n              [(ngModel)]=\"searchTerm\"\n              (input)=\"onSearchChange()\"\n              aria-label=\"Search record changes\"\n            />\n          </div>\n          <button class=\"rc-filter-pill\" [class.active]=\"!selectedType\" (click)=\"SetTypeFilter('')\">\n            <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i> All\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Update'\" (click)=\"SetTypeFilter('Update')\">\n            <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i> Updates\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Create'\" (click)=\"SetTypeFilter('Create')\">\n            <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i> Creates\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Delete'\" (click)=\"SetTypeFilter('Delete')\">\n            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i> Deletes\n          </button>\n        </div>\n\n        @if (filteredData.length !== viewData.length) {\n          <div class=\"rc-filter-results\">\n            Showing {{ filteredData.length }} of {{ viewData.length }} changes\n            <button class=\"rc-clear-filters-link\" (click)=\"ClearFilters()\">Clear filters</button>\n          </div>\n        }\n\n        <!-- Timeline -->\n        <div class=\"rc-timeline\" [attr.aria-label]=\"'Timeline of changes for ' + record.EntityInfo.Name + ' record'\">\n          @if (filteredData.length === 0) {\n            <div class=\"rc-no-results\">\n              <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n              <p>No changes match your current filters.</p>\n              <button class=\"rc-clear-filters-btn\" (click)=\"ClearFilters()\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear Filters\n              </button>\n            </div>\n          } @else {\n            @for (group of dateGroups; track group.label) {\n              <div class=\"rc-date-group\">\n                <div class=\"rc-date-label\">{{ group.label }}</div>\n\n                @for (change of group.changes; track change.ID) {\n                  <div\n                    class=\"rc-card\"\n                    [class]=\"getChangeTypeCardClass(change.Type)\"\n                    [class.expanded]=\"expandedItems.has(change.ID)\"\n                    [attr.tabindex]=\"0\"\n                    [attr.aria-expanded]=\"expandedItems.has(change.ID)\"\n                    [attr.aria-label]=\"getTimelineItemLabel(change)\"\n                    (keydown)=\"onTimelineItemKeydown($event, change.ID)\"\n                  >\n                    <!-- Card Header -->\n                    <div class=\"rc-card-header\" (click)=\"toggleExpansion(change.ID)\">\n                      <div class=\"rc-card-header-left\">\n                        <span class=\"rc-card-type-badge\">{{ getChangeTypeBadgeText(change.Type) }}</span>\n                        <span class=\"rc-card-summary\">{{ getChangeSummary(change) }}</span>\n                      </div>\n                      <div class=\"rc-card-meta\">\n                        <div class=\"rc-card-user\">\n                          <div class=\"rc-avatar\">{{ getUserInitials(change.User) }}</div>\n                          {{ getUserDisplayName(change.User) }}\n                        </div>\n                        <span class=\"rc-card-time\" [title]=\"formatFullDateTime(change.ChangedAt)\">{{ formatTime(change.ChangedAt) }}</span>\n                        <span class=\"rc-card-source\" [class]=\"getSourceClass(change.Source)\">{{ change.Source }}</span>\n                        <span class=\"rc-card-status\" [class]=\"getStatusClass(change.Status)\">{{ change.Status }}</span>\n                        <i class=\"fa-solid fa-chevron-down rc-card-chevron\" aria-hidden=\"true\"></i>\n                      </div>\n                    </div>\n\n                    <!-- Card Body (expanded) -->\n                    @if (expandedItems.has(change.ID)) {\n                      <div class=\"rc-card-body\">\n                        @if (change.Type === 'Create') {\n                          <!-- Created record fields -->\n                          @if (change.FullRecordJSON) {\n                            @for (field of getCreatedFields(change); track field.name) {\n                              <div class=\"rc-field-row\">\n                                <div class=\"rc-field-label\">{{ field.displayName }}</div>\n                                <div class=\"rc-field-values\">\n                                  <span class=\"rc-val-new\">{{ field.value }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        } @else if (change.Type === 'Delete') {\n                          <div class=\"rc-deletion-note\">\n                            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                            This record was permanently removed from the system.\n                          </div>\n                        } @else {\n                          <!-- Update: type-aware field changes -->\n                          @for (fc of getFieldChanges(change); track fc.field) {\n                            <div class=\"rc-field-row\">\n                              <div class=\"rc-field-label\">{{ fc.displayName }}</div>\n                              <div class=\"rc-field-values\">\n                                @if (fc.fieldType === 'boolean') {\n                                  <!-- Boolean: dot indicators -->\n                                  <div class=\"rc-bool-change\">\n                                    <span class=\"rc-bool-dot\" [class.on]=\"fc.oldValue === 'true' || fc.oldValue === '1'\" [class.off]=\"fc.oldValue !== 'true' && fc.oldValue !== '1'\"></span>\n                                    <span class=\"rc-bool-label old\">{{ fc.oldValue === 'true' || fc.oldValue === '1' ? 'Yes' : 'No' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-bool-dot\" [class.on]=\"fc.newValue === 'true' || fc.newValue === '1'\" [class.off]=\"fc.newValue !== 'true' && fc.newValue !== '1'\"></span>\n                                    <span class=\"rc-bool-label new\" [class.active]=\"fc.newValue === 'true' || fc.newValue === '1'\" [class.inactive]=\"fc.newValue !== 'true' && fc.newValue !== '1'\">{{ fc.newValue === 'true' || fc.newValue === '1' ? 'Yes' : 'No' }}</span>\n                                  </div>\n                                } @else if (fc.fieldType === 'date' || fc.fieldType === 'number') {\n                                  <!-- Atomic: old \u2192 new -->\n                                  <div class=\"rc-atomic-change\">\n                                    <span class=\"rc-val-old\">{{ fc.oldValue || '(empty)' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-val-new\">{{ fc.newValue || '(empty)' }}</span>\n                                  </div>\n                                } @else if (fc.diffHtml) {\n                                  <!-- Text: word/char diff -->\n                                  <div class=\"rc-text-diff\" [innerHTML]=\"fc.diffHtml\"></div>\n                                } @else {\n                                  <!-- Fallback: old \u2192 new -->\n                                  <div class=\"rc-atomic-change\">\n                                    <span class=\"rc-val-old\">{{ fc.oldValue || '(empty)' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-val-new\">{{ fc.newValue || '(empty)' }}</span>\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          }\n                        }\n\n                        @if (change.Comments) {\n                          <div class=\"rc-comments\">\n                            <i class=\"fa-solid fa-comment\" aria-hidden=\"true\"></i>\n                            {{ change.Comments }}\n                          </div>\n                        }\n\n                        @if (change.ErrorLog) {\n                          <div class=\"rc-errors\">\n                            <i class=\"fa-solid fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n                            <pre class=\"rc-error-log\">{{ change.ErrorLog }}</pre>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (ShowCreateWizard) {\n    <div class=\"rc-wizard-overlay\" (click)=\"OnLabelCreateCancelled()\">\n      <div class=\"rc-wizard-container\" (click)=\"$event.stopPropagation()\">\n        <mj-label-create\n          [PreselectedEntity]=\"record.EntityInfo\"\n          [PreselectedRecordIds]=\"[record.PrimaryKey.KeyValuePairs[0].Value]\"\n          (Created)=\"OnLabelCreated($event)\"\n          (Cancel)=\"OnLabelCreateCancelled()\">\n        </mj-label-create>\n      </div>\n    </div>\n  }\n</mj-slide-panel>\n", styles: ["/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Record Changes \u2014 Option A \"Clean Timeline\"\n   Linear / Notion-inspired minimal timeline design\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Version Labels Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-labels-section {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.rc-labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.rc-labels-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rc-labels-title i { color: var(--mj-brand-primary); }\n\n.rc-labels-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  border-radius: 10px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-create-label-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.rc-labels-loading {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  padding: 4px 0;\n}\n\n.rc-labels-loading i { margin-right: 4px; }\n\n.rc-labels-empty {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 4px 0;\n}\n\n.rc-labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.rc-label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.rc-label-chip:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-label-chip-icon { color: var(--mj-brand-primary); font-size: 10px; }\n\n.rc-label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.rc-label-chip-status {\n  padding: 1px 5px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 9px;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.label-status-archived { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.label-status-restored { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n\n.rc-label-chip-items { white-space: nowrap; }\n\n/* \u2500\u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 32px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.rc-empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.rc-empty-state-icon i { font-size: 32px; color: var(--mj-text-disabled); }\n\n.rc-empty-state-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 12px 0;\n}\n\n.rc-empty-state-description {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 24px 0;\n}\n\n.rc-empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 20px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.rc-empty-state-hint i { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Page Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 24px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-page-title {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.rc-page-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n}\n\n.rc-header-meta { text-align: right; }\n\n.rc-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.rc-change-count {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n}\n\n/* \u2500\u2500\u2500 Filter Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-filter-bar {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 20px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.rc-search-wrap {\n  position: relative;\n  flex: 1;\n  min-width: 180px;\n}\n\n.rc-search-wrap i {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.rc-search-box {\n  width: 100%;\n  padding: 8px 12px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  color: var(--mj-text-primary);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.rc-search-box:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-search-box::placeholder { color: var(--mj-text-disabled); }\n\n.rc-filter-pill {\n  padding: 7px 14px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.rc-filter-pill:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.rc-filter-pill.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.rc-filter-results {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-clear-filters-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n\n.rc-clear-filters-link:hover { color: var(--mj-brand-primary-hover); }\n\n/* \u2500\u2500\u2500 No Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-no-results {\n  text-align: center;\n  padding: 48px 16px;\n  color: var(--mj-text-muted);\n}\n\n.rc-no-results i {\n  display: block;\n  font-size: 32px;\n  margin-bottom: 16px;\n  color: var(--mj-text-disabled);\n}\n\n.rc-no-results p { font-size: 14px; margin: 0 0 16px 0; }\n\n.rc-clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-clear-filters-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500\u2500 Timeline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-timeline {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* Vertical line running through the timeline */\n.rc-timeline::before {\n  content: '';\n  position: absolute;\n  left: 15px;\n  top: 24px;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Date Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-date-group { margin-bottom: 8px; }\n\n.rc-date-label {\n  position: relative;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-disabled);\n  padding: 16px 0 12px 44px;\n}\n\n/* Date dot on the timeline line */\n.rc-date-label::before {\n  content: '';\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-border-default);\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Change Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card {\n  position: relative;\n  margin-left: 44px;\n  margin-bottom: 12px;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.2s;\n  overflow: hidden;\n}\n\n.rc-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-card:focus {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Colored dot on the timeline line for each card */\n.rc-card::before {\n  content: '';\n  position: absolute;\n  left: -23px;\n  top: 20px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  z-index: 1;\n}\n\n.rc-card.type-update::before {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-card.type-create::before {\n  background: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 15%, transparent);\n}\n\n.rc-card.type-delete::before {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n}\n\n/* \u2500\u2500\u2500 Card Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-header {\n  padding: 14px 18px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  gap: 12px;\n}\n\n.rc-card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.rc-card-type-badge {\n  padding: 3px 10px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.type-update .rc-card-type-badge { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.type-create .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.type-delete .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n\n.rc-card-summary {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.rc-card-user {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.rc-avatar {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n}\n\n.rc-card-time { white-space: nowrap; }\n\n.rc-card-source {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.source-internal { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.source-external { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n.rc-card-status {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-complete { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.status-pending { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n.status-error { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.status-unknown { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n.rc-card-chevron {\n  color: var(--mj-text-disabled);\n  transition: transform 0.2s;\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.rc-card.expanded .rc-card-chevron { transform: rotate(180deg); }\n\n/* \u2500\u2500\u2500 Card Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-body {\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Field Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-field-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-field-row:last-child { border-bottom: none; }\n\n.rc-field-label {\n  width: 140px;\n  min-width: 140px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.rc-field-values {\n  flex: 1;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Atomic Change (numbers, dates) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-atomic-change {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.rc-val-old {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n  font-weight: 400;\n}\n\n.rc-val-arrow {\n  color: var(--mj-border-strong);\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.rc-val-new {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n/* \u2500\u2500\u2500 Boolean Change \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-bool-change {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-bool-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.rc-bool-dot.on { background: var(--mj-status-success); }\n.rc-bool-dot.off { background: var(--mj-border-strong); }\n\n.rc-bool-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.rc-bool-label.old {\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n}\n\n.rc-bool-label.new.active { color: var(--mj-status-success); }\n.rc-bool-label.new.inactive { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Text Diff (strings only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-text-diff {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  line-height: 1.6;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.rc-diff-added {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  padding: 1px 3px;\n  border-radius: 3px;\n}\n\n.rc-diff-removed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  padding: 1px 3px;\n  border-radius: 3px;\n  text-decoration: line-through;\n}\n\n.rc-diff-unchanged {\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500\u2500 Deletion Note \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-deletion-note {\n  padding: 16px 18px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-deletion-note i {\n  color: var(--mj-status-error);\n  font-size: 14px;\n}\n\n/* \u2500\u2500\u2500 Comments & Errors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-comments {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-comments i {\n  color: var(--mj-brand-primary);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-errors {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-errors i {\n  color: var(--mj-status-error);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-error-log {\n  background: var(--mj-bg-surface);\n  padding: 8px;\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n  flex: 1;\n}\n\n/* \u2500\u2500\u2500 Create Wizard Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-wizard-container {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 24px;\n  animation: rc-slideUp 0.2s ease;\n}\n\n@keyframes rc-fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rc-slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .rc-card-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .rc-card-meta {\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .rc-field-row {\n    flex-direction: column;\n  }\n\n  .rc-field-label {\n    width: 100%;\n    min-width: unset;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n  }\n\n  .rc-field-values {\n    padding: 8px 16px;\n  }\n\n  .rc-atomic-change {\n    flex-wrap: wrap;\n  }\n\n  .rc-filter-bar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .rc-search-wrap { min-width: unset; }\n\n  .rc-filter-pill { justify-content: center; }\n\n  .rc-page-header {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .rc-header-meta { text-align: left; }\n}\n\n@media (max-width: 480px) {\n  .rc-container { padding: 12px 16px; }\n\n  .rc-card { margin-left: 36px; }\n\n  .rc-date-label { padding-left: 36px; }\n\n  .rc-card::before { left: -19px; }\n\n  .rc-timeline::before { left: 12px; }\n\n  .rc-date-label::before { left: 7px; }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-record-changes', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mj-slide-panel\n  [Mode]=\"'slide'\"\n  [Title]=\"'Record Changes History'\"\n  [Visible]=\"IsVisible\"\n  [Resizable]=\"true\"\n  [MinWidthPx]=\"400\"\n  [MaxWidthRatio]=\"0.6\"\n  (Closed)=\"OnClose()\">\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading history...\" size=\"medium\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <div class=\"rc-container\">\n      <!-- Version Labels Section -->\n      <div class=\"rc-labels-section\">\n        <div class=\"rc-labels-header\">\n          <div class=\"rc-labels-title\">\n            <i class=\"fa-solid fa-tags\" aria-hidden=\"true\"></i>\n            <span>Version Labels</span>\n            @if (RecordLabels.length > 0) {\n              <span class=\"rc-labels-count\">{{ RecordLabels.length }}</span>\n            }\n          </div>\n          <button class=\"rc-create-label-btn\" (click)=\"OpenCreateWizard()\" title=\"Create a version label for this record\">\n            <i class=\"fa-solid fa-plus\"></i> Create Label\n          </button>\n        </div>\n        @if (IsLoadingLabels) {\n          <div class=\"rc-labels-loading\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading labels...\n          </div>\n        } @else if (RecordLabels.length === 0) {\n          <div class=\"rc-labels-empty\">\n            No version labels for this record yet.\n          </div>\n        } @else {\n          <div class=\"rc-labels-list\">\n            @for (label of RecordLabels; track label.ID) {\n              <div class=\"rc-label-chip\" [title]=\"label.Description || label.Name\">\n                <i class=\"fa-solid fa-tag rc-label-chip-icon\"></i>\n                <span class=\"rc-label-chip-name\">{{ label.Name }}</span>\n                <span class=\"rc-label-chip-meta\">\n                  <span class=\"rc-label-chip-status\" [class]=\"getLabelStatusClass(label.Status)\">{{ label.Status }}</span>\n                  <span class=\"rc-label-chip-items\">{{ label.ItemCount }} item{{ label.ItemCount !== 1 ? 's' : '' }}</span>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (viewData.length === 0) {\n        <!-- Empty state -->\n        <div class=\"rc-empty-state\">\n          <div class=\"rc-empty-state-icon\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          </div>\n          <h3 class=\"rc-empty-state-title\">No Change History</h3>\n          <p class=\"rc-empty-state-description\">\n            This record doesn't have any tracked changes yet.\n            Changes will appear here automatically as edits are made.\n          </p>\n          <div class=\"rc-empty-state-hint\">\n            <i class=\"fa-solid fa-shield-halved\"></i>\n            <span>Record change tracking is managed at the entity level</span>\n          </div>\n        </div>\n      } @else {\n        <!-- Page Header -->\n        <div class=\"rc-page-header\">\n          <div>\n            <h2 class=\"rc-page-title\">Change History</h2>\n            <div class=\"rc-page-subtitle\">{{ record.EntityInfo.Name }}</div>\n          </div>\n          <div class=\"rc-header-meta\">\n            <div class=\"rc-entity-badge\">\n              <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n              {{ record.EntityInfo.Name }}\n            </div>\n            <div class=\"rc-change-count\">{{ viewData.length }} change{{ viewData.length !== 1 ? 's' : '' }} &middot; {{ getUniqueContributorCount() }} contributor{{ getUniqueContributorCount() !== 1 ? 's' : '' }}</div>\n          </div>\n        </div>\n\n        <!-- Filter Bar -->\n        <div class=\"rc-filter-bar\">\n          <div class=\"rc-search-wrap\">\n            <i class=\"fa-solid fa-search\" aria-hidden=\"true\"></i>\n            <input\n              class=\"rc-search-box\"\n              type=\"text\"\n              placeholder=\"Search changes...\"\n              [(ngModel)]=\"searchTerm\"\n              (input)=\"onSearchChange()\"\n              aria-label=\"Search record changes\"\n            />\n          </div>\n          <button class=\"rc-filter-pill\" [class.active]=\"!selectedType\" (click)=\"SetTypeFilter('')\">\n            <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i> All\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Update'\" (click)=\"SetTypeFilter('Update')\">\n            <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i> Updates\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Create'\" (click)=\"SetTypeFilter('Create')\">\n            <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i> Creates\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Delete'\" (click)=\"SetTypeFilter('Delete')\">\n            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i> Deletes\n          </button>\n        </div>\n\n        @if (filteredData.length !== viewData.length) {\n          <div class=\"rc-filter-results\">\n            Showing {{ filteredData.length }} of {{ viewData.length }} changes\n            <button class=\"rc-clear-filters-link\" (click)=\"ClearFilters()\">Clear filters</button>\n          </div>\n        }\n\n        <!-- Timeline -->\n        <div class=\"rc-timeline\" [attr.aria-label]=\"'Timeline of changes for ' + record.EntityInfo.Name + ' record'\">\n          @if (filteredData.length === 0) {\n            <div class=\"rc-no-results\">\n              <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n              <p>No changes match your current filters.</p>\n              <button class=\"rc-clear-filters-btn\" (click)=\"ClearFilters()\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear Filters\n              </button>\n            </div>\n          } @else {\n            @for (group of dateGroups; track group.label) {\n              <div class=\"rc-date-group\">\n                <div class=\"rc-date-label\">{{ group.label }}</div>\n\n                @for (change of group.changes; track change.ID) {\n                  <div\n                    class=\"rc-card\"\n                    [class]=\"getChangeTypeCardClass(change.Type)\"\n                    [class.expanded]=\"expandedItems.has(change.ID)\"\n                    [attr.tabindex]=\"0\"\n                    [attr.aria-expanded]=\"expandedItems.has(change.ID)\"\n                    [attr.aria-label]=\"getTimelineItemLabel(change)\"\n                    (keydown)=\"onTimelineItemKeydown($event, change.ID)\"\n                  >\n                    <!-- Card Header -->\n                    <div class=\"rc-card-header\" (click)=\"toggleExpansion(change.ID)\">\n                      <div class=\"rc-card-header-left\">\n                        <span class=\"rc-card-type-badge\">{{ getChangeTypeBadgeText(change.Type) }}</span>\n                        <span class=\"rc-card-summary\">{{ getChangeSummary(change) }}</span>\n                      </div>\n                      <div class=\"rc-card-meta\">\n                        <div class=\"rc-card-user\">\n                          <div class=\"rc-avatar\">{{ getUserInitials(change.User) }}</div>\n                          {{ getUserDisplayName(change.User) }}\n                        </div>\n                        <span class=\"rc-card-time\" [title]=\"formatFullDateTime(change.ChangedAt)\">{{ formatTime(change.ChangedAt) }}</span>\n                        <span class=\"rc-card-source\" [class]=\"getSourceClass(change.Source)\">{{ change.Source }}</span>\n                        <span class=\"rc-card-status\" [class]=\"getStatusClass(change.Status)\">{{ change.Status }}</span>\n                        <i class=\"fa-solid fa-chevron-down rc-card-chevron\" aria-hidden=\"true\"></i>\n                      </div>\n                    </div>\n\n                    <!-- Card Body (expanded) -->\n                    @if (expandedItems.has(change.ID)) {\n                      <div class=\"rc-card-body\">\n                        @if (change.Type === 'Create') {\n                          <!-- Created record fields -->\n                          @if (change.FullRecordJSON) {\n                            @for (field of getCreatedFields(change); track field.name) {\n                              <div class=\"rc-field-row\">\n                                <div class=\"rc-field-label\">{{ field.displayName }}</div>\n                                <div class=\"rc-field-values\">\n                                  <span class=\"rc-val-new\">{{ field.value }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        } @else if (change.Type === 'Delete') {\n                          <div class=\"rc-deletion-note\">\n                            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                            This record was permanently removed from the system.\n                          </div>\n                        } @else {\n                          <!-- Update: type-aware field changes -->\n                          @for (fc of getFieldChanges(change); track fc.field) {\n                            <div class=\"rc-field-row\">\n                              <div class=\"rc-field-label\">{{ fc.displayName }}</div>\n                              <div class=\"rc-field-values\">\n                                @if (fc.fieldType === 'boolean') {\n                                  <!-- Boolean: dot indicators -->\n                                  <div class=\"rc-bool-change\">\n                                    <span class=\"rc-bool-dot\" [class.on]=\"fc.oldValue === 'true' || fc.oldValue === '1'\" [class.off]=\"fc.oldValue !== 'true' && fc.oldValue !== '1'\"></span>\n                                    <span class=\"rc-bool-label old\">{{ fc.oldValue === 'true' || fc.oldValue === '1' ? 'Yes' : 'No' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-bool-dot\" [class.on]=\"fc.newValue === 'true' || fc.newValue === '1'\" [class.off]=\"fc.newValue !== 'true' && fc.newValue !== '1'\"></span>\n                                    <span class=\"rc-bool-label new\" [class.active]=\"fc.newValue === 'true' || fc.newValue === '1'\" [class.inactive]=\"fc.newValue !== 'true' && fc.newValue !== '1'\">{{ fc.newValue === 'true' || fc.newValue === '1' ? 'Yes' : 'No' }}</span>\n                                  </div>\n                                } @else if (fc.fieldType === 'date' || fc.fieldType === 'number') {\n                                  <!-- Atomic: old \u2192 new -->\n                                  <div class=\"rc-atomic-change\">\n                                    <span class=\"rc-val-old\">{{ fc.oldValue || '(empty)' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-val-new\">{{ fc.newValue || '(empty)' }}</span>\n                                  </div>\n                                } @else if (fc.diffHtml) {\n                                  <!-- Text: word/char diff -->\n                                  <div class=\"rc-text-diff\" [innerHTML]=\"fc.diffHtml\"></div>\n                                } @else {\n                                  <!-- Fallback: old \u2192 new -->\n                                  <div class=\"rc-atomic-change\">\n                                    <span class=\"rc-val-old\">{{ fc.oldValue || '(empty)' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-val-new\">{{ fc.newValue || '(empty)' }}</span>\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          }\n                        }\n\n                        @if (change.Comments) {\n                          <div class=\"rc-comments\">\n                            <i class=\"fa-solid fa-comment\" aria-hidden=\"true\"></i>\n                            {{ change.Comments }}\n                          </div>\n                        }\n\n                        @if (change.ErrorLog) {\n                          <div class=\"rc-errors\">\n                            <i class=\"fa-solid fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n                            <pre class=\"rc-error-log\">{{ change.ErrorLog }}</pre>\n                          </div>\n                        }\n\n                        @if (AllowRestore && change.Type === 'Update') {\n                          <div class=\"rc-restore-action\">\n                            <button class=\"rc-restore-btn\"\n                              (click)=\"OnRestoreVersion(change, $event)\"\n                              title=\"Restore field values from before this change\">\n                              <i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i>\n                              Restore Previous Values\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       RESTORE PREVIEW PANEL (inline diff before applying)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @if (RestorePreview) {\n    <div class=\"rc-restore-preview-backdrop\" (click)=\"CancelRestorePreview()\">\n      <div class=\"rc-restore-preview-panel\" (click)=\"$event.stopPropagation()\">\n        <div class=\"rc-restore-preview-header\">\n          <div class=\"rc-restore-preview-title\">\n            <i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i>\n            Restore Preview\n          </div>\n          <button class=\"rc-restore-preview-close\" (click)=\"CancelRestorePreview()\" title=\"Close preview\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n\n        <div class=\"rc-restore-preview-meta\">\n          <span><strong>Version:</strong> {{ formatFullDateTime(RestorePreview.ChangedAt) }}</span>\n          <span><strong>By:</strong> {{ getUserDisplayName(RestorePreview.User) }}</span>\n        </div>\n\n        @if (RestorePreviewFields.length === 0) {\n          <div class=\"rc-restore-preview-empty\">\n            <i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\"></i>\n            No field changes could be parsed from this version.\n          </div>\n        } @else {\n          <table class=\"rc-restore-preview-table\">\n            <thead>\n              <tr>\n                <th>Field</th>\n                <th>Current Value</th>\n                <th>Restore To</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (diff of RestorePreviewFields; track diff.FieldName) {\n                <tr [class.rc-diff-changed]=\"diff.IsChanged\" [class.rc-diff-unchanged]=\"!diff.IsChanged\">\n                  <td class=\"rc-restore-field-name\">{{ diff.DisplayName }}</td>\n                  <td class=\"rc-restore-current\">{{ diff.CurrentValue || '(empty)' }}</td>\n                  <td class=\"rc-restore-version\">{{ diff.VersionValue || '(empty)' }}</td>\n                  <td class=\"rc-restore-indicator\">\n                    @if (diff.IsChanged) {\n                      <i class=\"fa-solid fa-circle-exclamation\" title=\"Will be changed\"></i>\n                    } @else {\n                      <i class=\"fa-solid fa-check\" title=\"Already matches\"></i>\n                    }\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n\n        <div class=\"rc-restore-preview-actions\">\n          <button class=\"rc-restore-confirm-btn\"\n            [disabled]=\"IsRestoring || RestorePreviewFields.length === 0\"\n            (click)=\"ConfirmRestore()\">\n            @if (IsRestoring) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n              Restoring...\n            } @else {\n              <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n              Apply Restore\n            }\n          </button>\n          <button class=\"rc-restore-cancel-btn\" (click)=\"CancelRestorePreview()\" [disabled]=\"IsRestoring\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (ShowCreateWizard) {\n    <div class=\"rc-wizard-overlay\" (click)=\"OnLabelCreateCancelled()\">\n      <div class=\"rc-wizard-container\" (click)=\"$event.stopPropagation()\">\n        <mj-label-create\n          [PreselectedEntity]=\"record.EntityInfo\"\n          [PreselectedRecordIds]=\"[record.PrimaryKey.KeyValuePairs[0].Value]\"\n          (Created)=\"OnLabelCreated($event)\"\n          (Cancel)=\"OnLabelCreateCancelled()\">\n        </mj-label-create>\n      </div>\n    </div>\n  }\n</mj-slide-panel>\n", styles: ["/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Record Changes \u2014 Option A \"Clean Timeline\"\n   Linear / Notion-inspired minimal timeline design\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Version Labels Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-labels-section {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.rc-labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.rc-labels-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rc-labels-title i { color: var(--mj-brand-primary); }\n\n.rc-labels-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  border-radius: 10px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-create-label-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.rc-labels-loading {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  padding: 4px 0;\n}\n\n.rc-labels-loading i { margin-right: 4px; }\n\n.rc-labels-empty {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 4px 0;\n}\n\n.rc-labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.rc-label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.rc-label-chip:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-label-chip-icon { color: var(--mj-brand-primary); font-size: 10px; }\n\n.rc-label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.rc-label-chip-status {\n  padding: 1px 5px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 9px;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.label-status-archived { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.label-status-restored { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n\n.rc-label-chip-items { white-space: nowrap; }\n\n/* \u2500\u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 32px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.rc-empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.rc-empty-state-icon i { font-size: 32px; color: var(--mj-text-disabled); }\n\n.rc-empty-state-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 12px 0;\n}\n\n.rc-empty-state-description {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 24px 0;\n}\n\n.rc-empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 20px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.rc-empty-state-hint i { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Page Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 24px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-page-title {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.rc-page-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n}\n\n.rc-header-meta { text-align: right; }\n\n.rc-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.rc-change-count {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n}\n\n/* \u2500\u2500\u2500 Filter Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-filter-bar {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 20px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.rc-search-wrap {\n  position: relative;\n  flex: 1;\n  min-width: 180px;\n}\n\n.rc-search-wrap i {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.rc-search-box {\n  width: 100%;\n  padding: 8px 12px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  color: var(--mj-text-primary);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.rc-search-box:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-search-box::placeholder { color: var(--mj-text-disabled); }\n\n.rc-filter-pill {\n  padding: 7px 14px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.rc-filter-pill:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.rc-filter-pill.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.rc-filter-results {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-clear-filters-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n\n.rc-clear-filters-link:hover { color: var(--mj-brand-primary-hover); }\n\n/* \u2500\u2500\u2500 No Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-no-results {\n  text-align: center;\n  padding: 48px 16px;\n  color: var(--mj-text-muted);\n}\n\n.rc-no-results i {\n  display: block;\n  font-size: 32px;\n  margin-bottom: 16px;\n  color: var(--mj-text-disabled);\n}\n\n.rc-no-results p { font-size: 14px; margin: 0 0 16px 0; }\n\n.rc-clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-clear-filters-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500\u2500 Timeline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-timeline {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* Vertical line running through the timeline */\n.rc-timeline::before {\n  content: '';\n  position: absolute;\n  left: 15px;\n  top: 24px;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Date Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-date-group { margin-bottom: 8px; }\n\n.rc-date-label {\n  position: relative;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-disabled);\n  padding: 16px 0 12px 44px;\n}\n\n/* Date dot on the timeline line */\n.rc-date-label::before {\n  content: '';\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-border-default);\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* \u2500\u2500\u2500 Change Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card {\n  position: relative;\n  margin-left: 44px;\n  margin-bottom: 12px;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.2s;\n  overflow: hidden;\n}\n\n.rc-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.rc-card:focus {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Colored dot on the timeline line for each card */\n.rc-card::before {\n  content: '';\n  position: absolute;\n  left: -23px;\n  top: 20px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  z-index: 1;\n}\n\n.rc-card.type-update::before {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-card.type-create::before {\n  background: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 15%, transparent);\n}\n\n.rc-card.type-delete::before {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n}\n\n/* \u2500\u2500\u2500 Card Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-header {\n  padding: 14px 18px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  gap: 12px;\n}\n\n.rc-card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.rc-card-type-badge {\n  padding: 3px 10px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.type-update .rc-card-type-badge { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.type-create .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.type-delete .rc-card-type-badge { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n\n.rc-card-summary {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.rc-card-user {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.rc-avatar {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n}\n\n.rc-card-time { white-space: nowrap; }\n\n.rc-card-source {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.source-internal { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.source-external { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n.rc-card-status {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-complete { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.status-pending { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n.status-error { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.status-unknown { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n.rc-card-chevron {\n  color: var(--mj-text-disabled);\n  transition: transform 0.2s;\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.rc-card.expanded .rc-card-chevron { transform: rotate(180deg); }\n\n/* \u2500\u2500\u2500 Card Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-body {\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Field Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-field-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-field-row:last-child { border-bottom: none; }\n\n.rc-field-label {\n  width: 140px;\n  min-width: 140px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.rc-field-values {\n  flex: 1;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Atomic Change (numbers, dates) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-atomic-change {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.rc-val-old {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n  font-weight: 400;\n}\n\n.rc-val-arrow {\n  color: var(--mj-border-strong);\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.rc-val-new {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n/* \u2500\u2500\u2500 Boolean Change \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-bool-change {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-bool-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.rc-bool-dot.on { background: var(--mj-status-success); }\n.rc-bool-dot.off { background: var(--mj-border-strong); }\n\n.rc-bool-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.rc-bool-label.old {\n  color: var(--mj-text-disabled);\n  text-decoration: line-through;\n}\n\n.rc-bool-label.new.active { color: var(--mj-status-success); }\n.rc-bool-label.new.inactive { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Text Diff (strings only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-text-diff {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  line-height: 1.6;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.rc-diff-added {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  padding: 1px 3px;\n  border-radius: 3px;\n}\n\n.rc-diff-removed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  padding: 1px 3px;\n  border-radius: 3px;\n  text-decoration: line-through;\n}\n\n.rc-diff-unchanged {\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500\u2500 Deletion Note \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-deletion-note {\n  padding: 16px 18px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-deletion-note i {\n  color: var(--mj-status-error);\n  font-size: 14px;\n}\n\n/* \u2500\u2500\u2500 Comments & Errors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-comments {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-comments i {\n  color: var(--mj-brand-primary);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-errors {\n  padding: 12px 18px;\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  font-size: 13px;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-errors i {\n  color: var(--mj-status-error);\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-error-log {\n  background: var(--mj-bg-surface);\n  padding: 8px;\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n  flex: 1;\n}\n\n/* \u2500\u2500\u2500 Create Wizard Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-wizard-container {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 24px;\n  animation: rc-slideUp 0.2s ease;\n}\n\n@keyframes rc-fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rc-slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .rc-card-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .rc-card-meta {\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .rc-field-row {\n    flex-direction: column;\n  }\n\n  .rc-field-label {\n    width: 100%;\n    min-width: unset;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n  }\n\n  .rc-field-values {\n    padding: 8px 16px;\n  }\n\n  .rc-atomic-change {\n    flex-wrap: wrap;\n  }\n\n  .rc-filter-bar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .rc-search-wrap { min-width: unset; }\n\n  .rc-filter-pill { justify-content: center; }\n\n  .rc-page-header {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .rc-header-meta { text-align: left; }\n}\n\n@media (max-width: 480px) {\n  .rc-container { padding: 12px 16px; }\n\n  .rc-card { margin-left: 36px; }\n\n  .rc-date-label { padding-left: 36px; }\n\n  .rc-card::before { left: -19px; }\n\n  .rc-timeline::before { left: 12px; }\n\n  .rc-date-label::before { left: 7px; }\n}\n\n/* \u2500\u2500\u2500 Restore Action \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-restore-action {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 10px;\n  margin-top: 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.rc-restore-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-family: inherit;\n  line-height: 1;\n}\n\n.rc-restore-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.rc-restore-btn:active {\n  transform: translateY(1px);\n  box-shadow: none;\n}\n\n.rc-restore-btn i {\n  font-size: 13px;\n}\n\n/* \u2500\u2500\u2500 Restore Preview Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-restore-preview-backdrop {\n  position: fixed;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-restore-preview-panel {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\n  width: 90%;\n  max-width: 700px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 0;\n  animation: rc-slideUp 0.2s ease;\n}\n\n.rc-restore-preview-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-preview-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.rc-restore-preview-title i {\n  color: var(--mj-brand-primary);\n}\n\n.rc-restore-preview-close {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 16px;\n  transition: color 0.15s, background 0.15s;\n}\n\n.rc-restore-preview-close:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.rc-restore-preview-meta {\n  display: flex;\n  gap: 20px;\n  padding: 12px 20px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-preview-empty {\n  padding: 24px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.rc-restore-preview-empty i {\n  color: var(--mj-text-disabled);\n}\n\n/* Restore Preview Table */\n.rc-restore-preview-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.rc-restore-preview-table th {\n  text-align: left;\n  padding: 10px 16px;\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-preview-table td {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  vertical-align: top;\n}\n\n.rc-restore-preview-table tr:last-child td {\n  border-bottom: none;\n}\n\n.rc-restore-preview-table tr.rc-diff-changed {\n  background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n}\n\n.rc-restore-preview-table tr.rc-diff-unchanged {\n  opacity: 0.6;\n}\n\n.rc-restore-field-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n}\n\n.rc-restore-current {\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-secondary);\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-restore-version {\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-restore-indicator {\n  text-align: center;\n  width: 30px;\n}\n\n.rc-diff-changed .rc-restore-indicator i {\n  color: var(--mj-status-warning);\n}\n\n.rc-diff-unchanged .rc-restore-indicator i {\n  color: var(--mj-status-success);\n  font-size: 12px;\n}\n\n/* Restore Preview Actions */\n.rc-restore-preview-actions {\n  display: flex;\n  gap: 10px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rc-restore-confirm-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s, box-shadow 0.15s;\n  font-family: inherit;\n}\n\n.rc-restore-confirm-btn:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.rc-restore-confirm-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.rc-restore-cancel-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-family: inherit;\n}\n\n.rc-restore-cancel-btn:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.rc-restore-cancel-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.MJNotificationService }, { type: i2.DomSanitizer }], { dialogClosed: [{
             type: Output
         }], record: [{
             type: Input
+        }], AllowRestore: [{
+            type: Input
+        }], RestoreRequested: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordChangesComponent, { className: "RecordChangesComponent", filePath: "src/lib/ng-record-changes.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordChangesComponent, { className: "RecordChangesComponent", filePath: "src/lib/ng-record-changes.component.ts", lineNumber: 67 }); })();
 //# sourceMappingURL=ng-record-changes.component.js.map