@memberjunction/ng-record-changes 5.27.1 → 5.29.0

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

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-import { EntityFieldTSType, Metadata, RunView } from '@memberjunction/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, } from '@angular/core';
+import { EntityFieldTSType, Metadata, RunView, } from '@memberjunction/core';
+import { UUIDsEqual } from '@memberjunction/global';
 import { diffChars, diffWords } from 'diff';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-notifications";
@@ -7,12 +8,14 @@ import * as i2 from "@angular/platform-browser";
 import * as i3 from "@angular/forms";
 import * as i4 from "@memberjunction/ng-shared-generic";
 import * as i5 from "@memberjunction/ng-versions";
+import * as i6 from "./restore-preview-panel/restore-preview-panel.component";
+import * as i7 from "@angular/common";
 const _c0 = a0 => [a0];
 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;
+const _forTrack1 = ($index, $item) => $item.Key;
+const _forTrack2 = ($index, $item) => $item.label;
+const _forTrack3 = ($index, $item) => $item.name;
+const _forTrack4 = ($index, $item) => $item.field;
 function RecordChangesComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 1);
 } }
@@ -86,12 +89,120 @@ function RecordChangesComponent_Conditional_2_Conditional_14_Template(rf, ctx) {
     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) {
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_0_For_1_Template_button_click_0_listener() { const pill_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.TogglePill(pill_r6.Key)); });
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "span", 48);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const pill_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("active", ctx_r1.ChipSelections[pill_r6.Key])("rc-filter-pill-restore", pill_r6.Variant === "restore");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", pill_r6.Icon));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", pill_r6.Label, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(pill_r6.Count);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_0_For_1_Template, 5, 9, "button", 46, _forTrack1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵrepeater(ctx_r1.ConditionalPills);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 48);
     i0.ɵɵtext(1);
-    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedConditionalCount);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 59)(1, "input", 60);
+    i0.ɵɵlistener("change", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_For_5_Template_input_change_1_listener() { const pill_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.TogglePill(pill_r10.Key)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "i", 47);
+    i0.ɵɵelementStart(3, "span", 61);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 62);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const pill_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("rc-filter-overflow-row-restore", pill_r10.Variant === "restore");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.ChipSelections[pill_r10.Key]);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", pill_r10.Icon));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(pill_r10.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(pill_r10.Count);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.CloseFilterOverflow()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 53)(2, "div", 54);
+    i0.ɵɵtext(3, "Filter by");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_For_5_Template, 7, 8, "label", 55, _forTrack1);
+    i0.ɵɵelementStart(6, "div", 56)(7, "button", 57);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.SelectAllPill(); return i0.ɵɵresetView(ctx_r1.CloseFilterOverflow()); });
+    i0.ɵɵtext(8, " Clear all ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 58);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.CloseFilterOverflow()); });
+    i0.ɵɵtext(10, " Done ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.ConditionalPills);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45)(1, "button", 49);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.ToggleFilterOverflow()); });
+    i0.ɵɵelement(2, "i", 50);
+    i0.ɵɵtext(3, " More filters ");
+    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_4_Template, 2, 1, "span", 48);
+    i0.ɵɵelement(5, "i", 51);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Conditional_6_Template, 11, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.SelectedConditionalCount > 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.SelectedConditionalCount > 0 ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowFilterOverflow ? 6 : -1);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_0_Template, 2, 0)(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Conditional_1_Template, 7, 4, "div", 45);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(!ctx_r1.UseOverflowPopover ? 0 : 1);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementStart(2, "button", 63);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_20_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
     i0.ɵɵtext(3, "Clear filters");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -99,254 +210,314 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Temp
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" Showing ", ctx_r1.filteredData.length, " of ", ctx_r1.viewData.length, " changes ");
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵelement(1, "i", 49);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelement(1, "i", 64);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No changes match your current filters.");
     i0.ɵɵelementEnd();
-    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", 51);
+    i0.ɵɵelementStart(4, "button", 65);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
+    i0.ɵɵelement(5, "i", 66);
     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", 72)(1, "div", 73);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const srcChange_r16 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext(7);
+    i0.ɵɵtextInterpolate1(" by ", ctx_r1.getUserDisplayName(srcChange_r16.User), " ");
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 85);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Conditional_0_Template_a_click_0_listener($event) { const srcChange_r16 = i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(7); return i0.ɵɵresetView(ctx_r1.JumpToSourceChange(srcChange_r16, $event)); });
+    i0.ɵɵelement(1, "i", 86);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "date");
+    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Conditional_0_Conditional_4_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const srcChange_r16 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext(7);
+    i0.ɵɵproperty("title", "Jump to source version (" + ctx_r1.formatFullDateTime(srcChange_r16.ChangedAt) + ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" Restored from ", ctx_r1.formatTime(srcChange_r16.ChangedAt), " ", srcChange_r16.ChangedAt ? "on " + i0.ɵɵpipeBind2(3, 4, srcChange_r16.ChangedAt, "mediumDate") : "", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(srcChange_r16.User ? 4 : -1);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 87);
+    i0.ɵɵtext(2, " Restored from earlier version ");
+    i0.ɵɵelementEnd();
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Conditional_0_Template, 5, 7, "a", 83)(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Conditional_1_Template, 3, 0, "span", 84);
+} if (rf & 2) {
+    let tmp_24_0;
+    const change_r14 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵconditional((tmp_24_0 = ctx_r1.getRestoredFromSourceChange(change_r14)) ? 0 : 1, tmp_24_0);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "blockquote", 88)(1, "span", 93);
+    i0.ɵɵtext(2, "Reason");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 94);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_2_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95)(1, "div", 96);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 74)(4, "span", 75);
+    i0.ɵɵelementStart(3, "div", 97)(4, "span", 98);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const field_r9 = ctx.$implicit;
+    const field_r17 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(field_r9.displayName);
+    i0.ɵɵtextInterpolate(field_r17.displayName);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(field_r9.value);
+    i0.ɵɵtextInterpolate(field_r17.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", 72, _forTrack2);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_2_Conditional_0_For_1_Template, 6, 2, "div", 95, _forTrack3);
 } if (rf & 2) {
-    const change_r8 = i0.ɵɵnextContext(3).$implicit;
+    const change_r14 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵrepeater(ctx_r1.getCreatedFields(change_r8));
+    i0.ɵɵrepeater(ctx_r1.getCreatedFields(change_r14));
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_Template, 2, 0);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_2_Conditional_0_Template, 2, 0);
 } if (rf & 2) {
-    const change_r8 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵconditional(change_r8.FullRecordJSON ? 0 : -1);
+    const change_r14 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵconditional(change_r14.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", 68);
-    i0.ɵɵelement(1, "i", 44);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵelement(1, "i", 99);
     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", 76);
-    i0.ɵɵelement(1, "span", 79);
-    i0.ɵɵelementStart(2, "span", 80);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵelement(1, "span", 103);
+    i0.ɵɵelementStart(2, "span", 104);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 81)(5, "span", 79);
-    i0.ɵɵelementStart(6, "span", 82);
+    i0.ɵɵelement(4, "i", 105)(5, "span", 103);
+    i0.ɵɵelementStart(6, "span", 106);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const fc_r10 = i0.ɵɵnextContext().$implicit;
+    const fc_r18 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("on", fc_r10.oldValue === "true" || fc_r10.oldValue === "1")("off", fc_r10.oldValue !== "true" && fc_r10.oldValue !== "1");
+    i0.ɵɵclassProp("on", fc_r18.oldValue === "true" || fc_r18.oldValue === "1")("off", fc_r18.oldValue !== "true" && fc_r18.oldValue !== "1");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(fc_r10.oldValue === "true" || fc_r10.oldValue === "1" ? "Yes" : "No");
+    i0.ɵɵtextInterpolate(fc_r18.oldValue === "true" || fc_r18.oldValue === "1" ? "Yes" : "No");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("on", fc_r10.newValue === "true" || fc_r10.newValue === "1")("off", fc_r10.newValue !== "true" && fc_r10.newValue !== "1");
+    i0.ɵɵclassProp("on", fc_r18.newValue === "true" || fc_r18.newValue === "1")("off", fc_r18.newValue !== "true" && fc_r18.newValue !== "1");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", fc_r10.newValue === "true" || fc_r10.newValue === "1")("inactive", fc_r10.newValue !== "true" && fc_r10.newValue !== "1");
+    i0.ɵɵclassProp("active", fc_r18.newValue === "true" || fc_r18.newValue === "1")("inactive", fc_r18.newValue !== "true" && fc_r18.newValue !== "1");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(fc_r10.newValue === "true" || fc_r10.newValue === "1" ? "Yes" : "No");
+    i0.ɵɵtextInterpolate(fc_r18.newValue === "true" || fc_r18.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", 77)(1, "span", 83);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 101)(1, "span", 107);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 81);
-    i0.ɵɵelementStart(4, "span", 75);
+    i0.ɵɵelement(3, "i", 105);
+    i0.ɵɵelementStart(4, "span", 98);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const fc_r10 = i0.ɵɵnextContext().$implicit;
+    const fc_r18 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(fc_r10.oldValue || "(empty)");
+    i0.ɵɵtextInterpolate(fc_r18.oldValue || "(empty)");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(fc_r10.newValue || "(empty)");
+    i0.ɵɵtextInterpolate(fc_r18.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", 78);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 102);
 } if (rf & 2) {
-    const fc_r10 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("innerHTML", fc_r10.diffHtml, i0.ɵɵsanitizeHtml);
+    const fc_r18 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("innerHTML", fc_r18.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", 77)(1, "span", 83);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 101)(1, "span", 107);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 81);
-    i0.ɵɵelementStart(4, "span", 75);
+    i0.ɵɵelement(3, "i", 105);
+    i0.ɵɵelementStart(4, "span", 98);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const fc_r10 = i0.ɵɵnextContext().$implicit;
+    const fc_r18 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(fc_r10.oldValue || "(empty)");
+    i0.ɵɵtextInterpolate(fc_r18.oldValue || "(empty)");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(fc_r10.newValue || "(empty)");
+    i0.ɵɵtextInterpolate(fc_r18.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", 72)(1, "div", 73);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95)(1, "div", 96);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(3, "div", 97);
+    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_4_Template, 8, 14, "div", 100)(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_5_Template, 6, 2, "div", 101)(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_6_Template, 1, 1, "div", 102)(7, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Conditional_7_Template, 6, 2, "div", 101);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const fc_r10 = ctx.$implicit;
+    const fc_r18 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(fc_r10.displayName);
+    i0.ɵɵtextInterpolate(fc_r18.displayName);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(fc_r10.fieldType === "boolean" ? 4 : fc_r10.fieldType === "date" || fc_r10.fieldType === "number" ? 5 : fc_r10.diffHtml ? 6 : 7);
+    i0.ɵɵconditional(fc_r18.fieldType === "boolean" ? 4 : fc_r18.fieldType === "date" || fc_r18.fieldType === "number" ? 5 : fc_r18.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", 72, _forTrack3);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_For_1_Template, 8, 2, "div", 95, _forTrack4);
 } if (rf & 2) {
-    const change_r8 = i0.ɵɵnextContext(2).$implicit;
+    const change_r14 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵrepeater(ctx_r1.getFieldChanges(change_r8));
+    i0.ɵɵrepeater(ctx_r1.getFieldChanges(change_r14));
 } }
-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", 69);
-    i0.ɵɵelement(1, "i", 84);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵelement(1, "i", 108);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const change_r8 = i0.ɵɵnextContext(2).$implicit;
+    const change_r14 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", change_r8.Comments, " ");
+    i0.ɵɵtextInterpolate1(" ", change_r14.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", 70);
-    i0.ɵɵelement(1, "i", 85);
-    i0.ɵɵelementStart(2, "pre", 86);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 91);
+    i0.ɵɵelement(1, "i", 109);
+    i0.ɵɵelementStart(2, "pre", 110);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const change_r8 = i0.ɵɵnextContext(2).$implicit;
+    const change_r14 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(change_r8.ErrorLog);
+    i0.ɵɵtextInterpolate(change_r14.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 ");
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 92)(1, "button", 111);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_7_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r19); const change_r14 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRestoreVersion(change_r14, $event)); });
+    i0.ɵɵelement(2, "i", 87);
+    i0.ɵɵtext(3, " Restore record to this version ");
     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", 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);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵconditionalCreate(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_1_Template, 5, 1, "blockquote", 88);
+    i0.ɵɵconditionalCreate(2, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_2_Template, 1, 1)(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_3_Template, 3, 0, "div", 89)(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_4_Template, 2, 0);
+    i0.ɵɵconditionalCreate(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_5_Template, 3, 1, "div", 90);
+    i0.ɵɵconditionalCreate(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_6_Template, 4, 1, "div", 91);
+    i0.ɵɵconditionalCreate(7, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Conditional_7_Template, 4, 0, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const change_r8 = i0.ɵɵnextContext().$implicit;
+    let tmp_24_0;
+    const change_r14 = 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.ɵɵconditional((tmp_24_0 = ctx_r1.getRestoreReason(change_r14)) ? 1 : -1, tmp_24_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(change_r14.Type === "Create" ? 2 : change_r14.Type === "Delete" ? 3 : 4);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(change_r8.Comments ? 4 : -1);
+    i0.ɵɵconditional(change_r14.Comments ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(change_r8.ErrorLog ? 5 : -1);
+    i0.ɵɵconditional(change_r14.ErrorLog ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.AllowRestore && change_r8.Type === "Update" ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.AllowRestore && change_r14.Type !== "Delete" && !ctx_r1.isMostRecentChange(change_r14) ? 7 : -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", 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", 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", 57)(3, "span", 58);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵlistener("keydown", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Template_div_keydown_0_listener($event) { const change_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onTimelineItemKeydown($event, change_r14.ID)); });
+    i0.ɵɵelementStart(1, "div", 71);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Template_div_click_1_listener() { const change_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExpansion(change_r14.ID)); });
+    i0.ɵɵelementStart(2, "div", 72)(3, "span", 73);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 59);
+    i0.ɵɵelementStart(5, "span", 74);
     i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 60)(8, "div", 61)(9, "div", 62);
-    i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_7_Template, 2, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 75)(9, "div", 76)(10, "div", 77);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 63);
-    i0.ɵɵtext(13);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span", 78);
+    i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 64);
-    i0.ɵɵtext(15);
+    i0.ɵɵelementStart(15, "span", 79);
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 65);
-    i0.ɵɵtext(17);
+    i0.ɵɵelementStart(17, "span", 80);
+    i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(18, "i", 66);
+    i0.ɵɵelement(19, "i", 81);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(19, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Template, 7, 4, "div", 67);
+    i0.ɵɵconditionalCreate(20, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Conditional_20_Template, 8, 5, "div", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const change_r8 = ctx.$implicit;
+    const change_r14 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassMap(ctx_r1.getChangeTypeCardClass(change_r8.Type));
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedItems.has(change_r8.ID));
-    i0.ɵɵattribute("tabindex", 0)("aria-expanded", ctx_r1.expandedItems.has(change_r8.ID))("aria-label", ctx_r1.getTimelineItemLabel(change_r8));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.getChangeTypeBadgeText(change_r8.Type));
+    i0.ɵɵclassMap(ctx_r1.getChangeTypeCardClass(change_r14.Type));
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedItems.has(change_r14.ID))("rc-card-restore", ctx_r1.isRestoreRow(change_r14))("rc-card-highlight", ctx_r1.HighlightedChangeID === change_r14.ID);
+    i0.ɵɵattribute("data-change-id", change_r14.ID)("tabindex", 0)("aria-expanded", ctx_r1.expandedItems.has(change_r14.ID))("aria-label", ctx_r1.getTimelineItemLabel(change_r14));
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("rc-card-type-badge-restore", ctx_r1.isRestoreRow(change_r14));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.getEffectiveBadgeText(change_r14));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getChangeSummary(change_r8));
+    i0.ɵɵtextInterpolate(ctx_r1.getChangeSummary(change_r14));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isRestoreRow(change_r14) ? 7 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.getUserInitials(change_r8.User));
+    i0.ɵɵtextInterpolate(ctx_r1.getUserInitials(change_r14.User));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getUserDisplayName(change_r8.User), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getUserDisplayName(change_r14.User), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", ctx_r1.formatFullDateTime(change_r8.ChangedAt));
+    i0.ɵɵproperty("title", ctx_r1.formatFullDateTime(change_r14.ChangedAt));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatTime(change_r8.ChangedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTime(change_r14.ChangedAt));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getSourceClass(change_r8.Source));
+    i0.ɵɵclassMap(ctx_r1.getSourceClass(change_r14.Source));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(change_r8.Source);
+    i0.ɵɵtextInterpolate(change_r14.Source);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getStatusClass(change_r8.Status));
+    i0.ɵɵclassMap(ctx_r1.getStatusClass(change_r14.Status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(change_r8.Status);
+    i0.ɵɵtextInterpolate(change_r14.Status);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.expandedItems.has(change_r8.ID) ? 19 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedItems.has(change_r14.ID) ? 20 : -1);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67)(1, "div", 68);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template, 20, 20, "div", 54, _forTrack0);
+    i0.ɵɵrepeaterCreate(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_For_4_Template, 21, 28, "div", 69, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r12 = ctx.$implicit;
+    const group_r20 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r12.label);
+    i0.ɵɵtextInterpolate(group_r20.label);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(group_r12.changes);
+    i0.ɵɵrepeater(group_r20.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", 52, _forTrack1);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_For_1_Template, 5, 1, "div", 67, _forTrack2);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵrepeater(ctx_r1.dateGroups);
@@ -373,28 +544,15 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Template(rf, ctx) {
     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", 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.ɵɵ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.SelectAllPill()); });
     i0.ɵɵelement(17, "i", 41);
     i0.ɵɵtext(18, " All ");
     i0.ɵɵelementEnd();
-    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", 42);
-    i0.ɵɵtext(21, " Updates ");
+    i0.ɵɵconditionalCreate(19, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Template, 2, 1);
     i0.ɵɵelementEnd();
-    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", 43);
-    i0.ɵɵtext(24, " Creates ");
-    i0.ɵɵelementEnd();
-    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", 44);
-    i0.ɵɵtext(27, " Deletes ");
-    i0.ɵɵelementEnd()();
-    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.ɵɵconditionalCreate(20, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_20_Template, 4, 2, "div", 42);
+    i0.ɵɵelementStart(21, "div", 43);
+    i0.ɵɵconditionalCreate(22, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_Template, 7, 0, "div", 44)(23, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_23_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -407,19 +565,15 @@ function RecordChangesComponent_Conditional_2_Conditional_15_Template(rf, ctx) {
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.searchTerm);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", !ctx_r1.selectedType);
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.selectedType === "Update");
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.selectedType === "Create");
+    i0.ɵɵclassProp("active", ctx_r1.IsAllSelected);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.selectedType === "Delete");
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.filteredData.length !== ctx_r1.viewData.length ? 28 : -1);
+    i0.ɵɵconditional(ctx_r1.HasConditionalPills ? 19 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filteredData.length !== ctx_r1.viewData.length ? 20 : -1);
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", "Timeline of changes for " + ctx_r1.record.EntityInfo.Name + " record");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.filteredData.length === 0 ? 30 : 31);
+    i0.ɵɵconditional(ctx_r1.filteredData.length === 0 ? 22 : 23);
 } }
 function RecordChangesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -437,7 +591,7 @@ function RecordChangesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
     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", 15)(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, 24, 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -448,133 +602,34 @@ 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 _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()); });
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
+    i0.ɵɵelementStart(1, "div", 113);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_4_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "mj-label-create", 114);
+    i0.ɵɵlistener("Created", function RecordChangesComponent_Conditional_4_Template_mj_label_create_Created_2_listener($event) { i0.ɵɵrestoreView(_r21); 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(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("PreselectedEntity", ctx_r1.record.EntityInfo)("PreselectedRecordIds", i0.ɵɵpureFunction1(2, _c0, ctx_r1.record.PrimaryKey.KeyValuePairs[0].Value));
 } }
+/**
+ * Slide-out timeline of all changes to a single record. Hosts the reusable
+ * {@link RestorePreviewPanelComponent} for the actual restore confirmation
+ * flow, and exposes a `RestoreRequested` event the host can act on to
+ * persist the restore.
+ *
+ * @example
+ *   <mj-record-changes
+ *     [record]="myEntity"
+ *     [AllowRestore]="true"
+ *     (dialogClosed)="showHistory = false"
+ *     (RestoreRequested)="onRestoreRequested($event)">
+ *   </mj-record-changes>
+ */
 export class RecordChangesComponent {
     cdr;
     ngZone;
@@ -587,19 +642,20 @@ export class RecordChangesComponent {
     /** 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.
+     * Emitted when the user confirms a restore in the preview panel.
+     * The host is responsible for applying the snapshot to the record and
+     * saving with `record.SetRestoreContext()` set first.
      */
     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 */
+    /** The change record currently selected for restore preview, or null. */
+    RestorePreviewChange = null;
+    /** Visibility of the embedded restore preview slide-in. */
+    RestorePreviewVisible = false;
+    /** Whether the restore commit is in progress (between confirmation and host response). */
     IsRestoring = false;
     // Version label state
     RecordLabels = [];
@@ -607,8 +663,30 @@ export class RecordChangesComponent {
     ShowCreateWizard = false;
     // Filter properties
     searchTerm = '';
+    /** Single selected type filter (legacy, kept for backwards compat). */
     selectedType = '';
     selectedSource = '';
+    /** Map of Key → selected, used by the conditional chip system. */
+    ChipSelections = {};
+    /** Whether the overflow popover is open. */
+    ShowFilterOverflow = false;
+    /** Highlighted change ID for the lineage-jump indicator (transient). */
+    HighlightedChangeID = null;
+    /**
+     * Conditional filter pills derived from loaded data. Always includes 'All'
+     * implicitly. Other pills only render when at least one matching change
+     * exists. Overflows into a popover when the count exceeds 2.
+     */
+    ConditionalPills = [];
+    /** Threshold above which conditional chips collapse into the overflow popover. */
+    OVERFLOW_THRESHOLD = 2;
+    /**
+     * Subscription to the record's BaseEntity event stream. We listen for
+     * 'save' events and auto-refresh the timeline so the user immediately
+     * sees the new RecordChange row produced by either a normal save or a
+     * restore. Cleaned up in ngOnDestroy.
+     */
+    _entitySaveSub = null;
     constructor(cdr, ngZone, mjNotificationService, sanitizer) {
         this.cdr = cdr;
         this.ngZone = ngZone;
@@ -622,8 +700,30 @@ export class RecordChangesComponent {
             this.cdr.markForCheck();
             this.LoadRecordChanges(this.record.PrimaryKey, '', this.record.EntityInfo.Name);
             this.LoadRecordLabels();
+            this.subscribeToRecordSaves();
         }
     }
+    ngOnDestroy() {
+        this._entitySaveSub?.unsubscribe();
+        this._entitySaveSub = null;
+    }
+    /**
+     * Wires up an event handler on the live record so the timeline auto-
+     * refreshes immediately after any save lands — including the one
+     * produced by the restore flow. Without this the user sees their record
+     * update in the form but the panel above still shows the pre-restore
+     * change list, which is confusing.
+     */
+    subscribeToRecordSaves() {
+        if (!this.record)
+            return;
+        this._entitySaveSub?.unsubscribe();
+        this._entitySaveSub = this.record.RegisterEventHandler((event) => {
+            if (event?.type === 'save') {
+                this.ngZone.run(() => this.Refresh());
+            }
+        });
+    }
     /**
      * Reloads the record changes list from the database.
      * Called by the parent container after a save completes while the drawer is open.
@@ -648,8 +748,8 @@ export class RecordChangesComponent {
             this.ngZone.run(() => {
                 if (changes) {
                     this.viewData = changes.sort((a, b) => new Date(b.ChangedAt).getTime() - new Date(a.ChangedAt).getTime());
-                    this.filteredData = [...this.viewData];
-                    this.dateGroups = this.buildDateGroups(this.filteredData);
+                    this.rebuildConditionalPills();
+                    this.applyFilters();
                     this.IsLoading = false;
                 }
                 else {
@@ -667,16 +767,102 @@ export class RecordChangesComponent {
     onFilterChange() {
         this.applyFilters();
     }
-    SetTypeFilter(type) {
-        this.selectedType = this.selectedType === type ? '' : type;
+    /**
+     * Toggles the "All" pill — clears every conditional selection.
+     */
+    SelectAllPill() {
+        for (const k of Object.keys(this.ChipSelections))
+            this.ChipSelections[k] = false;
+        this.applyFilters();
+    }
+    /**
+     * Toggles a conditional pill on/off.
+     */
+    TogglePill(key) {
+        this.ChipSelections[key] = !this.ChipSelections[key];
         this.applyFilters();
     }
+    /**
+     * Returns true when no conditional pills are selected (i.e. "All" mode).
+     */
+    get IsAllSelected() {
+        return !Object.values(this.ChipSelections).some(v => v);
+    }
+    /**
+     * Whether any conditional pills are actually visible at all.
+     */
+    get HasConditionalPills() {
+        return this.ConditionalPills.length > 0;
+    }
+    /**
+     * True when the conditional chips should collapse into an overflow popover
+     * because there are more than the threshold.
+     */
+    get UseOverflowPopover() {
+        return this.ConditionalPills.length > this.OVERFLOW_THRESHOLD;
+    }
+    /** Number of currently selected conditional pills (for the popover trigger label). */
+    get SelectedConditionalCount() {
+        return Object.values(this.ChipSelections).filter(v => v).length;
+    }
+    ToggleFilterOverflow() {
+        this.ShowFilterOverflow = !this.ShowFilterOverflow;
+        this.cdr.markForCheck();
+    }
+    CloseFilterOverflow() {
+        this.ShowFilterOverflow = false;
+        this.cdr.markForCheck();
+    }
     ClearFilters() {
         this.searchTerm = '';
-        this.selectedType = '';
-        this.selectedSource = '';
+        for (const k of Object.keys(this.ChipSelections))
+            this.ChipSelections[k] = false;
         this.applyFilters();
     }
+    /**
+     * Builds the list of conditional pills from currently loaded data —
+     * a pill only appears for change types/sources that actually exist.
+     */
+    rebuildConditionalPills() {
+        const counts = {};
+        let restoreCount = 0;
+        for (const c of this.viewData) {
+            const type = c.Type ?? 'Update';
+            counts[type] = (counts[type] ?? 0) + 1;
+            if (this.isRestoreChange(c))
+                restoreCount++;
+        }
+        const pills = [];
+        if ((counts['Update'] ?? 0) > 0) {
+            pills.push({ Key: 'Update', Label: 'Updates', Icon: 'fa-pen', Count: counts['Update'], Variant: 'type' });
+        }
+        if ((counts['Create'] ?? 0) > 0) {
+            pills.push({ Key: 'Create', Label: 'Creates', Icon: 'fa-plus', Count: counts['Create'], Variant: 'type' });
+        }
+        if ((counts['Delete'] ?? 0) > 0) {
+            pills.push({ Key: 'Delete', Label: 'Deletes', Icon: 'fa-trash', Count: counts['Delete'], Variant: 'type' });
+        }
+        if ((counts['Snapshot'] ?? 0) > 0) {
+            pills.push({ Key: 'Snapshot', Label: 'Snapshots', Icon: 'fa-camera', Count: counts['Snapshot'], Variant: 'type' });
+        }
+        if (restoreCount > 0) {
+            pills.push({ Key: 'Restore', Label: 'Restored', Icon: 'fa-clock-rotate-left', Count: restoreCount, Variant: 'restore' });
+        }
+        // Initialize/prune selection state
+        const validKeys = new Set(pills.map(p => p.Key));
+        for (const k of Object.keys(this.ChipSelections)) {
+            if (!validKeys.has(k))
+                delete this.ChipSelections[k];
+        }
+        for (const p of pills) {
+            if (this.ChipSelections[p.Key] === undefined)
+                this.ChipSelections[p.Key] = false;
+        }
+        this.ConditionalPills = pills;
+    }
+    isRestoreChange(c) {
+        return c.Source === 'Restore' || c.RestoredFromID != null;
+    }
     applyFilters() {
         let filtered = [...this.viewData];
         if (this.searchTerm.trim()) {
@@ -685,11 +871,22 @@ export class RecordChangesComponent {
                 change.User?.toLowerCase().includes(search) ||
                 change.Comments?.toLowerCase().includes(search));
         }
-        if (this.selectedType) {
-            filtered = filtered.filter(change => change.Type === this.selectedType);
-        }
-        if (this.selectedSource) {
-            filtered = filtered.filter(change => change.Source === this.selectedSource);
+        // Apply conditional pill filters — if any are selected, only show changes matching ANY of them (OR semantics).
+        const selectedKeys = Object.keys(this.ChipSelections).filter(k => this.ChipSelections[k]);
+        if (selectedKeys.length > 0) {
+            filtered = filtered.filter(change => {
+                for (const key of selectedKeys) {
+                    if (key === 'Restore') {
+                        if (this.isRestoreChange(change))
+                            return true;
+                    }
+                    else {
+                        if (change.Type === key)
+                            return true;
+                    }
+                }
+                return false;
+            });
         }
         this.filteredData = filtered;
         this.dateGroups = this.buildDateGroups(this.filteredData);
@@ -709,7 +906,7 @@ export class RecordChangesComponent {
                 EntityName: 'MJ: Version Label Items',
                 Fields: ['VersionLabelID'],
                 ExtraFilter: `EntityID='${entityId}' AND RecordID='${recordId}'`,
-                ResultType: 'simple'
+                ResultType: 'simple',
             });
             if (!itemsResult.Success || itemsResult.Results.length === 0) {
                 this.ngZone.run(() => {
@@ -726,7 +923,7 @@ export class RecordChangesComponent {
                 Fields: ['ID', 'Name', 'Description', 'Scope', 'Status', 'ItemCount', '__mj_CreatedAt'],
                 ExtraFilter: `ID IN (${labelIdFilter})`,
                 OrderBy: '__mj_CreatedAt DESC',
-                ResultType: 'simple'
+                ResultType: 'simple',
             });
             if (labelsResult.Success) {
                 this.RecordLabels = labelsResult.Results.map(l => ({
@@ -736,7 +933,7 @@ export class RecordChangesComponent {
                     Scope: l.Scope,
                     Status: l.Status,
                     CreatedAt: l.__mj_CreatedAt,
-                    ItemCount: l.ItemCount
+                    ItemCount: l.ItemCount,
                 }));
             }
         }
@@ -790,104 +987,101 @@ export class RecordChangesComponent {
         }
     }
     /**
-     * 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.
+     * Opens the embedded restore preview panel for a given change record.
+     * The panel computes a full-record diff (current vs the change's
+     * FullRecordJSON snapshot) — this is the semantic-correctness fix:
+     * we restore TO the state at that point in time, not just undo the
+     * one delta the user clicked.
      */
     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 = [];
+        event.stopPropagation();
+        this.RestorePreviewChange = change;
+        this.RestorePreviewVisible = true;
         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.
+     * Called when the user confirms the restore in the embedded panel.
+     * Translates the panel's RestoreCommitEvent into the broader-shape
+     * RestoreVersionEvent the host is wired to handle.
      */
-    ConfirmRestore() {
-        if (!this.RestorePreview)
+    OnRestorePanelConfirmed(commit) {
+        if (!this.RestorePreviewChange)
             return;
-        const change = this.RestorePreview;
-        const fieldChanges = this.parseFieldChanges(change);
+        const change = this.RestorePreviewChange;
         this.IsRestoring = true;
         this.cdr.markForCheck();
         this.RestoreRequested.emit({
-            VersionID: change.ID,
+            SourceChangeID: commit.SourceChangeID,
             ChangedAt: change.ChangedAt,
             ChangedByUser: change.User || '',
-            FieldChanges: fieldChanges
+            Reason: commit.Reason,
+            FieldValues: commit.FieldValues,
         });
-        // The parent will handle the actual save; we close the preview on completion.
-        // A brief delay allows the parent to process, then we reset.
+        // Close the panel after a brief delay so the host has a moment to react.
         setTimeout(() => {
-            this.RestorePreview = null;
-            this.RestorePreviewFields = [];
+            this.RestorePreviewVisible = false;
+            this.RestorePreviewChange = null;
             this.IsRestoring = false;
             this.cdr.markForCheck();
         }, 500);
     }
     /**
-     * Builds the diff list comparing version old values vs the current record.
+     * Called when the user dismisses the restore preview without confirming.
      */
-    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);
+    OnRestorePanelCancelled() {
+        this.RestorePreviewVisible = false;
+        this.RestorePreviewChange = null;
+        this.cdr.markForCheck();
     }
-    /** Parses ChangesJSON into a structured map, returning null on failure. */
-    parseChangesJson(change) {
-        try {
-            return JSON.parse(change.ChangesJSON || '{}');
-        }
-        catch {
+    // ─── Lineage chip ───────────────────────────────────────────────
+    /**
+     * Returns the source change for a given restored row, if found in the
+     * currently loaded changes. Returns null when the source isn't loaded
+     * (e.g., it's been pruned from history) or when this row isn't a restore.
+     */
+    getRestoredFromSourceChange(change) {
+        const sourceId = change.RestoredFromID;
+        if (!sourceId)
             return null;
-        }
+        return this.viewData.find(c => UUIDsEqual(c.ID, sourceId)) ?? 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;
+    /**
+     * True when the row was produced by a restore operation (either the
+     * `Source` is `'Restore'` OR `RestoredFromID` is populated).
+     */
+    isRestoreRow(change) {
+        return this.isRestoreChange(change);
+    }
+    /**
+     * True when this change is the most recent in the loaded history.
+     * `viewData` is sorted DESC by `ChangedAt`, so the most recent is index 0.
+     * Restoring to the most recent version is a no-op, so the timeline hides
+     * the Restore button on this row.
+     */
+    isMostRecentChange(change) {
+        return this.viewData.length > 0 && this.viewData[0] === change;
+    }
+    /**
+     * Click handler for the lineage chip — scrolls/highlights the source
+     * change row in the timeline. Auto-clears after a few seconds.
+     */
+    JumpToSourceChange(sourceChange, event) {
+        event.stopPropagation();
+        this.HighlightedChangeID = sourceChange.ID;
+        this.expandedItems.add(sourceChange.ID);
+        this.cdr.markForCheck();
+        // Auto-clear the highlight after 3s
+        setTimeout(() => {
+            if (this.HighlightedChangeID && UUIDsEqual(this.HighlightedChangeID, sourceChange.ID)) {
+                this.HighlightedChangeID = null;
+                this.cdr.markForCheck();
+            }
+        }, 3000);
+        // Scroll into view
+        setTimeout(() => {
+            const el = document.querySelector(`[data-change-id="${sourceChange.ID}"]`);
+            el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }, 50);
     }
     // ─── Date Grouping ─────────────────────────────────────────────
     buildDateGroups(changes) {
@@ -919,6 +1113,7 @@ export class RecordChangesComponent {
             case 'Create': return 'type-create';
             case 'Update': return 'type-update';
             case 'Delete': return 'type-delete';
+            case 'Snapshot': return 'type-snapshot';
             default: return 'type-update';
         }
     }
@@ -926,11 +1121,38 @@ export class RecordChangesComponent {
         switch (type) {
             case 'Create': return 'Created';
             case 'Delete': return 'Deleted';
+            case 'Snapshot': return 'Snapshot';
             default: return type;
         }
     }
+    /**
+     * Badge text for the row's primary type tag. For restore rows we override
+     * the underlying `Type='Update'` and show "Restore" instead — matches the
+     * mockup's intent of treating restore as a first-class operation in the
+     * timeline rather than a flavor of update.
+     */
+    getEffectiveBadgeText(change) {
+        if (this.isRestoreRow(change))
+            return 'Restore';
+        return this.getChangeTypeBadgeText(change.Type);
+    }
+    /**
+     * Optional restore reason — pulled from the dynamic `RestoreReason`
+     * column added by the lineage migration. Returns null when not present
+     * or not a restore row.
+     */
+    getRestoreReason(change) {
+        if (!this.isRestoreRow(change))
+            return null;
+        const reason = change.RestoreReason;
+        return reason && reason.trim().length > 0 ? reason : null;
+    }
     getSourceClass(source) {
-        return source === 'Internal' ? 'source-internal' : 'source-external';
+        if (source === 'Restore')
+            return 'source-restore';
+        if (source === 'Internal')
+            return 'source-internal';
+        return 'source-external';
     }
     getStatusClass(status) {
         switch (status) {
@@ -946,12 +1168,10 @@ export class RecordChangesComponent {
     getUserInitials(user) {
         if (!user)
             return '?';
-        // Handle email addresses: take first char of local part + first char of domain
         if (user.includes('@')) {
             const local = user.split('@')[0];
             return local.substring(0, 2).toUpperCase();
         }
-        // Handle names: first char of each word
         const parts = user.trim().split(/\s+/);
         if (parts.length >= 2) {
             return (parts[0][0] + parts[1][0]).toUpperCase();
@@ -973,7 +1193,7 @@ export class RecordChangesComponent {
         return new Intl.DateTimeFormat('en-US', {
             hour: 'numeric',
             minute: '2-digit',
-            hour12: true
+            hour12: true,
         }).format(new Date(date));
     }
     formatRelativeTime(date) {
@@ -993,7 +1213,7 @@ export class RecordChangesComponent {
         return new Intl.DateTimeFormat('en-US', {
             month: 'short',
             day: 'numeric',
-            year: diffDays > 365 ? 'numeric' : undefined
+            year: diffDays > 365 ? 'numeric' : undefined,
         }).format(new Date(date));
     }
     formatFullDateTime(date) {
@@ -1004,15 +1224,27 @@ export class RecordChangesComponent {
             hour: 'numeric',
             minute: 'numeric',
             hour12: true,
-            timeZoneName: 'short'
+            timeZoneName: 'short',
         }).format(new Date(date));
     }
     // ─── Change Summary ─────────────────────────────────────────────
     getChangeSummary(change) {
+        // Restore rows get a distinctive summary so the timeline reads like a
+        // sentence — "Restored to 5:56 PM version" rather than yet another
+        // "Name and Description changed". The lineage chip carries the full
+        // source-version detail.
+        if (this.isRestoreRow(change)) {
+            const src = this.getRestoredFromSourceChange(change);
+            if (src)
+                return `Restored to ${this.formatTime(src.ChangedAt)} version`;
+            return 'Restored from earlier version';
+        }
         if (change.Type === 'Create')
             return 'Record created';
         if (change.Type === 'Delete')
             return 'Record deleted';
+        if (change.Type === 'Snapshot')
+            return change.ChangesDescription || 'Snapshot captured';
         try {
             const changesJson = JSON.parse(change.ChangesJSON || '{}');
             const fieldNames = this.extractFieldDisplayNames(changesJson);
@@ -1029,9 +1261,7 @@ export class RecordChangesComponent {
             if (!change.FullRecordJSON)
                 return 0;
             const record = JSON.parse(change.FullRecordJSON);
-            return this.record.EntityInfo.Fields
-                .filter((f) => record[f.Name] != null && record[f.Name] !== '')
-                .length;
+            return this.record.EntityInfo.Fields.filter((f) => record[f.Name] != null && record[f.Name] !== '').length;
         }
         catch {
             return 0;
@@ -1082,7 +1312,7 @@ export class RecordChangesComponent {
             oldValue: formattedOld,
             newValue: formattedNew,
             fieldType,
-            diffHtml
+            diffHtml,
         };
     }
     classifyFieldType(field) {
@@ -1107,7 +1337,7 @@ export class RecordChangesComponent {
                 .map((field) => ({
                 name: field.Name,
                 displayName: field.DisplayNameOrName,
-                value: this.formatChangeValue(record[field.Name], field.TSType === EntityFieldTSType.Date)
+                value: this.formatChangeValue(record[field.Name], field.TSType === EntityFieldTSType.Date),
             }));
         }
         catch {
@@ -1115,10 +1345,6 @@ export class RecordChangesComponent {
         }
     }
     // ─── Value Formatting ───────────────────────────────────────────
-    /**
-     * Formats a change value for display. Handles corrupted date values (stored as empty objects)
-     * and formats ISO date strings into a human-readable format.
-     */
     formatChangeValue(value, isDateField) {
         if (value == null)
             return '';
@@ -1137,7 +1363,7 @@ export class RecordChangesComponent {
                     year: 'numeric',
                     hour: 'numeric',
                     minute: '2-digit',
-                    hour12: true
+                    hour12: true,
                 }).format(date);
             }
         }
@@ -1156,21 +1382,22 @@ export class RecordChangesComponent {
         }
         const useWordDiff = this.shouldUseWordDiff(oldValue, newValue);
         const diffs = useWordDiff ? diffWords(oldValue, newValue) : diffChars(oldValue, newValue);
-        const html = diffs.map((part) => {
+        const html = diffs
+            .map((part) => {
             const escaped = this.escapeHtml(part.value);
             if (part.added)
                 return `<span class="rc-diff-added">${escaped}</span>`;
             if (part.removed)
                 return `<span class="rc-diff-removed">${escaped}</span>`;
             return `<span class="rc-diff-unchanged">${escaped}</span>`;
-        }).join('');
+        })
+            .join('');
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
     shouldUseWordDiff(oldValue, newValue) {
         const hasMultipleWords = (text) => text.includes(' ') && text.split(' ').length > 3;
         const isLongText = (text) => text.length > 50;
-        return (hasMultipleWords(oldValue) || hasMultipleWords(newValue)) &&
-            (isLongText(oldValue) || isLongText(newValue));
+        return (hasMultipleWords(oldValue) || hasMultipleWords(newValue)) && (isLongText(oldValue) || isLongText(newValue));
     }
     escapeHtml(text) {
         const div = document.createElement('div');
@@ -1178,12 +1405,14 @@ 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", 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) {
+    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: 13, consts: [[3, "Closed", "Mode", "Title", "Visible", "Resizable", "MinWidthPx", "MaxWidthRatio"], ["text", "Loading history...", "size", "medium"], [1, "rc-container"], [3, "RestoreConfirmed", "RestoreCancelled", "Visible", "Mode", "RecordChange", "LiveRecord"], [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"], ["type", "button", 1, "rc-filter-pill", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], [1, "rc-filter-results"], [1, "rc-timeline"], [1, "rc-no-results"], [1, "rc-filter-overflow-wrap"], ["type", "button", 1, "rc-filter-pill", 3, "active", "rc-filter-pill-restore"], ["aria-hidden", "true"], [1, "rc-filter-pill-count"], ["type", "button", 1, "rc-filter-pill", "rc-filter-pill-overflow", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-sliders"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down", "rc-filter-overflow-caret"], [1, "rc-filter-overflow-backdrop", 3, "click"], ["role", "menu", 1, "rc-filter-overflow-popover"], [1, "rc-filter-overflow-header"], [1, "rc-filter-overflow-row", 3, "rc-filter-overflow-row-restore"], [1, "rc-filter-overflow-actions"], ["type", "button", 1, "rc-filter-overflow-clear", 3, "click"], ["type", "button", 1, "rc-filter-overflow-done", 3, "click"], [1, "rc-filter-overflow-row"], ["type", "checkbox", 3, "change", "checked"], [1, "rc-filter-overflow-label"], [1, "rc-filter-overflow-count"], [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", "rc-card-restore", "rc-card-highlight"], [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-restored-chip", 3, "title"], ["title", "Source version was not loaded into this view", 1, "rc-restored-chip", "rc-restored-chip-orphan"], [1, "rc-restored-chip", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-link"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock-rotate-left"], [1, "rc-restore-reason"], [1, "rc-deletion-note"], [1, "rc-comments"], [1, "rc-errors"], [1, "rc-restore-action"], [1, "rc-restore-reason-label"], [1, "rc-restore-reason-text"], [1, "rc-field-row"], [1, "rc-field-label"], [1, "rc-field-values"], [1, "rc-val-new"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], [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 the entire record to its state at this version", 1, "rc-restore-btn", 3, "click"], [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, 25, 6, "div", 3);
+            i0.ɵɵelementStart(3, "mj-restore-preview-panel", 3);
+            i0.ɵɵlistener("RestoreConfirmed", function RecordChangesComponent_Template_mj_restore_preview_panel_RestoreConfirmed_3_listener($event) { return ctx.OnRestorePanelConfirmed($event); })("RestoreCancelled", function RecordChangesComponent_Template_mj_restore_preview_panel_RestoreCancelled_3_listener() { return ctx.OnRestorePanelCancelled(); });
+            i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_4_Template, 3, 4, "div", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
@@ -1193,14 +1422,14 @@ export class RecordChangesComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.RestorePreview ? 3 : -1);
+            i0.ɵɵproperty("Visible", ctx.RestorePreviewVisible)("Mode", "live")("RecordChange", ctx.RestorePreviewChange)("LiveRecord", ctx.record);
             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 });
+        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.MjSlidePanelComponent, i5.MjLabelCreateComponent, i6.RestorePreviewPanelComponent, i7.DatePipe], 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  /* Allow the lineage chip to wrap to a second line on narrow panel widths\n     instead of squeezing the title text into a \"Name and Description c...\"\n     truncation. The badge stays on the first line; chip wraps gracefully. */\n  flex-wrap: wrap;\n  row-gap: 6px;\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  /* Breathing room from the card's bottom and right edges so the button\n     doesn't sit flush against the border. */\n  padding-right: 10px;\n  padding-bottom: 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\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 *  Restore lineage + conditional filter chips + overflow popover\n *  (added with the Restore Prior Version feature)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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\n/* \u2500\u2500\u2500 Filter pill enhancements \u2500\u2500\u2500 */\n\n.rc-filter-pill-count {\n  margin-left: 4px;\n  background: color-mix(in srgb, currentColor 12%, transparent);\n  padding: 1px 6px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-filter-pill.active .rc-filter-pill-count {\n  background: color-mix(in srgb, var(--mj-text-inverse, #fff) 22%, transparent);\n}\n\n/* Restore-variant pill: violet treatment to set it apart from type pills */\n.rc-filter-pill-restore {\n  background: color-mix(in srgb, var(--mj-status-info) 8%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-info) 80%, var(--mj-text-secondary));\n  border-color: color-mix(in srgb, var(--mj-status-info) 30%, var(--mj-border-default));\n}\n.rc-filter-pill-restore:hover {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n.rc-filter-pill-restore.active {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse, #fff);\n  border-color: var(--mj-status-info);\n}\n\n/* \u2500\u2500\u2500 Overflow filter popover \u2500\u2500\u2500 */\n\n.rc-filter-overflow-wrap {\n  position: relative;\n  display: inline-block;\n}\n\n.rc-filter-pill-overflow {\n  /* Overflow trigger inherits the standard filter pill look */\n}\n\n.rc-filter-overflow-caret {\n  font-size: 9px;\n  margin-left: 2px;\n}\n\n.rc-filter-overflow-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10;\n}\n\n.rc-filter-overflow-popover {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 11;\n  min-width: 240px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);\n  padding: 8px;\n}\n\n.rc-filter-overflow-header {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  padding: 6px 8px 8px;\n}\n\n.rc-filter-overflow-row {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 8px;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n\n.rc-filter-overflow-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.rc-filter-overflow-row input[type=\"checkbox\"] {\n  margin: 0;\n  accent-color: var(--mj-brand-primary);\n}\n\n.rc-filter-overflow-row i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  width: 14px;\n  text-align: center;\n}\n\n.rc-filter-overflow-row-restore i {\n  color: var(--mj-status-info);\n}\n\n.rc-filter-overflow-label {\n  flex: 1;\n}\n\n.rc-filter-overflow-count {\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.rc-filter-overflow-actions {\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid var(--mj-border-subtle);\n  padding-top: 8px;\n  margin-top: 6px;\n}\n\n.rc-filter-overflow-clear,\n.rc-filter-overflow-done {\n  background: none;\n  border: none;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 4px 10px;\n  border-radius: 5px;\n}\n\n.rc-filter-overflow-clear {\n  color: var(--mj-text-muted);\n}\n.rc-filter-overflow-clear:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.rc-filter-overflow-done {\n  color: var(--mj-brand-primary);\n}\n.rc-filter-overflow-done:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n/* \u2500\u2500\u2500 Snapshot type badge + card accent \u2500\u2500\u2500 */\n\n.type-snapshot .rc-card-type-badge {\n  background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500\u2500 Restore Source pill (in card meta) \u2500\u2500\u2500 */\n\n.source-restore {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n/* \u2500\u2500\u2500 Restore card variant: violet left accent \u2500\u2500\u2500 */\n\n.rc-card.rc-card-restore {\n  border-left: 3px solid var(--mj-status-info);\n}\n\n/* \u2500\u2500\u2500 Lineage chip \u2500\u2500\u2500 */\n\n/* Lineage chip \u2014 outline-only \"interactive link\" treatment so it reads as\n   distinct from the filled RESTORE badge sitting next to it. The badge says\n   \"this row IS a restore\" (filled, static); the chip says \"click here to\n   see the source version\" (outline, hoverable). */\n.rc-restored-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  margin-left: 8px;\n  padding: 2px 9px;\n  border-radius: 11px;\n  font-size: 11px;\n  font-weight: 500;\n  background: transparent;\n  color: color-mix(in srgb, var(--mj-status-info) 90%, var(--mj-text-primary));\n  border: 1px solid color-mix(in srgb, var(--mj-status-info) 40%, var(--mj-border-default));\n  cursor: pointer;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background-color 0.12s, border-color 0.12s, color 0.12s;\n}\n\n.rc-restored-chip:hover {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, transparent);\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.rc-restored-chip i {\n  font-size: 10px;\n}\n\n.rc-restored-chip-orphan {\n  cursor: default;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n  border-color: var(--mj-border-default);\n}\n\n.rc-restored-chip-orphan:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Card highlight (when jumped-to via lineage chip) \u2500\u2500\u2500 */\n\n.rc-card.rc-card-highlight {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n  animation: rc-card-pulse 1.4s ease-in-out;\n}\n\n@keyframes rc-card-pulse {\n  0%, 100% { background: var(--mj-bg-surface); }\n  50% { background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)); }\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 *  Restore-row badge override + Restore Reason block\n *  (mockup-aligned treatment for restore rows in the timeline)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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\n/* The base type-update badge styling would otherwise paint a restore row's\n   badge blue with \"Update\" text. Override to violet + \"Restore\" text so it\n   matches the source pill, lineage chip, and card border. */\n.rc-card-type-badge.rc-card-type-badge-restore {\n  background: color-mix(in srgb, var(--mj-status-info) 14%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n/* Restore reason \u2014 minimal blockquote treatment.\n   A thin violet left bar + italic text reads like a margin note rather than\n   a heavy callout. Visually connected to the restore family (left bar uses\n   the same violet as the badge / source pill / card border) without\n   competing with the field-diff rows that follow. */\n.rc-restore-reason {\n  /* Indented in from the card body edge so it visually nests one level\n     deeper than the field-diff rows that follow, and given generous\n     vertical breathing room so it doesn't crowd the lineage chip above\n     or the first field row below. */\n  margin: 14px 8px 18px 18px;\n  padding: 0 0 0 12px;\n  border-left: 2px solid color-mix(in srgb, var(--mj-status-info) 55%, var(--mj-border-default));\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  font-size: 13px;\n  line-height: 1.5;\n}\n\n.rc-restore-reason-label {\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: color-mix(in srgb, var(--mj-status-info) 75%, var(--mj-text-muted));\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.rc-restore-reason-text {\n  color: var(--mj-text-secondary);\n  font-style: italic;\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\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"] }]
+        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 \u2014 chips render only for change types/sources actually present in loaded data.\n             When more than 2 conditional chips would render, they collapse into a \"More filters\" popover. -->\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\n          <button class=\"rc-filter-pill\" [class.active]=\"IsAllSelected\" (click)=\"SelectAllPill()\" type=\"button\">\n            <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i> All\n          </button>\n\n          @if (HasConditionalPills) {\n            @if (!UseOverflowPopover) {\n              <!-- 1-2 conditional pills: render inline -->\n              @for (pill of ConditionalPills; track pill.Key) {\n                <button class=\"rc-filter-pill\"\n                  [class.active]=\"ChipSelections[pill.Key]\"\n                  [class.rc-filter-pill-restore]=\"pill.Variant === 'restore'\"\n                  (click)=\"TogglePill(pill.Key)\"\n                  type=\"button\">\n                  <i class=\"fa-solid {{ pill.Icon }}\" aria-hidden=\"true\"></i>\n                  {{ pill.Label }}\n                  <span class=\"rc-filter-pill-count\">{{ pill.Count }}</span>\n                </button>\n              }\n            } @else {\n              <!-- 3+ conditional pills: overflow popover -->\n              <div class=\"rc-filter-overflow-wrap\">\n                <button class=\"rc-filter-pill rc-filter-pill-overflow\"\n                  [class.active]=\"SelectedConditionalCount > 0\"\n                  (click)=\"ToggleFilterOverflow()\"\n                  type=\"button\">\n                  <i class=\"fa-solid fa-sliders\" aria-hidden=\"true\"></i>\n                  More filters\n                  @if (SelectedConditionalCount > 0) {\n                    <span class=\"rc-filter-pill-count\">{{ SelectedConditionalCount }}</span>\n                  }\n                  <i class=\"fa-solid fa-chevron-down rc-filter-overflow-caret\" aria-hidden=\"true\"></i>\n                </button>\n\n                @if (ShowFilterOverflow) {\n                  <!-- Backdrop: clicks close the popover -->\n                  <div class=\"rc-filter-overflow-backdrop\" (click)=\"CloseFilterOverflow()\"></div>\n                  <div class=\"rc-filter-overflow-popover\" role=\"menu\">\n                    <div class=\"rc-filter-overflow-header\">Filter by</div>\n                    @for (pill of ConditionalPills; track pill.Key) {\n                      <label class=\"rc-filter-overflow-row\" [class.rc-filter-overflow-row-restore]=\"pill.Variant === 'restore'\">\n                        <input type=\"checkbox\"\n                          [checked]=\"ChipSelections[pill.Key]\"\n                          (change)=\"TogglePill(pill.Key)\" />\n                        <i class=\"fa-solid {{ pill.Icon }}\" aria-hidden=\"true\"></i>\n                        <span class=\"rc-filter-overflow-label\">{{ pill.Label }}</span>\n                        <span class=\"rc-filter-overflow-count\">{{ pill.Count }}</span>\n                      </label>\n                    }\n                    <div class=\"rc-filter-overflow-actions\">\n                      <button class=\"rc-filter-overflow-clear\" (click)=\"SelectAllPill(); CloseFilterOverflow()\" type=\"button\">\n                        Clear all\n                      </button>\n                      <button class=\"rc-filter-overflow-done\" (click)=\"CloseFilterOverflow()\" type=\"button\">\n                        Done\n                      </button>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\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                    [attr.data-change-id]=\"change.ID\"\n                    [class]=\"getChangeTypeCardClass(change.Type)\"\n                    [class.expanded]=\"expandedItems.has(change.ID)\"\n                    [class.rc-card-restore]=\"isRestoreRow(change)\"\n                    [class.rc-card-highlight]=\"HighlightedChangeID === 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\"\n                              [class.rc-card-type-badge-restore]=\"isRestoreRow(change)\">{{ getEffectiveBadgeText(change) }}</span>\n                        <span class=\"rc-card-summary\">{{ getChangeSummary(change) }}</span>\n\n                        <!-- Lineage chip \u2014 visible when this row was produced by a restore -->\n                        @if (isRestoreRow(change)) {\n                          @if (getRestoredFromSourceChange(change); as srcChange) {\n                            <a class=\"rc-restored-chip\"\n                              (click)=\"JumpToSourceChange(srcChange, $event)\"\n                              [title]=\"'Jump to source version (' + formatFullDateTime(srcChange.ChangedAt) + ')'\">\n                              <i class=\"fa-solid fa-link\" aria-hidden=\"true\"></i>\n                              Restored from {{ formatTime(srcChange.ChangedAt) }} {{ srcChange.ChangedAt ? 'on ' + (srcChange.ChangedAt | date:'mediumDate') : '' }}\n                              @if (srcChange.User) {\n                                by {{ getUserDisplayName(srcChange.User) }}\n                              }\n                            </a>\n                          } @else {\n                            <span class=\"rc-restored-chip rc-restored-chip-orphan\"\n                              title=\"Source version was not loaded into this view\">\n                              <i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i>\n                              Restored from earlier version\n                            </span>\n                          }\n                        }\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                        <!-- Restore reason (when present) \u2014 Notion/Linear-style\n                             blockquote: a thin violet left bar + italic text,\n                             with a tiny \"Reason\" prefix. No box, no header,\n                             no large vertical footprint. Reads as a\n                             justification note rather than a callout. -->\n                        @if (getRestoreReason(change); as reason) {\n                          <blockquote class=\"rc-restore-reason\">\n                            <span class=\"rc-restore-reason-label\">Reason</span>\n                            <span class=\"rc-restore-reason-text\">{{ reason }}</span>\n                          </blockquote>\n                        }\n\n                        @if (change.Type === 'Create') {\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 / Snapshot / Restore: 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                                  <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                                  <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                                  <div class=\"rc-text-diff\" [innerHTML]=\"fc.diffHtml\"></div>\n                                } @else {\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                        <!-- Restore action: shown for Update, Create, and Snapshot rows.\n                             Hidden on Delete rows (handled via the Recycle Bin path)\n                             and on the most recent change (restoring to current state is a no-op). -->\n                        @if (AllowRestore && change.Type !== 'Delete' && !isMostRecentChange(change)) {\n                          <div class=\"rc-restore-action\">\n                            <button class=\"rc-restore-btn\"\n                              (click)=\"OnRestoreVersion(change, $event)\"\n                              title=\"Restore the entire record to its state at this version\">\n                              <i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i>\n                              Restore record to this version\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Restore preview slide-in (reusable component) -->\n  <mj-restore-preview-panel\n    [Visible]=\"RestorePreviewVisible\"\n    [Mode]=\"'live'\"\n    [RecordChange]=\"RestorePreviewChange\"\n    [LiveRecord]=\"record\"\n    (RestoreConfirmed)=\"OnRestorePanelConfirmed($event)\"\n    (RestoreCancelled)=\"OnRestorePanelCancelled()\">\n  </mj-restore-preview-panel>\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  /* Allow the lineage chip to wrap to a second line on narrow panel widths\n     instead of squeezing the title text into a \"Name and Description c...\"\n     truncation. The badge stays on the first line; chip wraps gracefully. */\n  flex-wrap: wrap;\n  row-gap: 6px;\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  /* Breathing room from the card's bottom and right edges so the button\n     doesn't sit flush against the border. */\n  padding-right: 10px;\n  padding-bottom: 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\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 *  Restore lineage + conditional filter chips + overflow popover\n *  (added with the Restore Prior Version feature)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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\n/* \u2500\u2500\u2500 Filter pill enhancements \u2500\u2500\u2500 */\n\n.rc-filter-pill-count {\n  margin-left: 4px;\n  background: color-mix(in srgb, currentColor 12%, transparent);\n  padding: 1px 6px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-filter-pill.active .rc-filter-pill-count {\n  background: color-mix(in srgb, var(--mj-text-inverse, #fff) 22%, transparent);\n}\n\n/* Restore-variant pill: violet treatment to set it apart from type pills */\n.rc-filter-pill-restore {\n  background: color-mix(in srgb, var(--mj-status-info) 8%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-info) 80%, var(--mj-text-secondary));\n  border-color: color-mix(in srgb, var(--mj-status-info) 30%, var(--mj-border-default));\n}\n.rc-filter-pill-restore:hover {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n.rc-filter-pill-restore.active {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse, #fff);\n  border-color: var(--mj-status-info);\n}\n\n/* \u2500\u2500\u2500 Overflow filter popover \u2500\u2500\u2500 */\n\n.rc-filter-overflow-wrap {\n  position: relative;\n  display: inline-block;\n}\n\n.rc-filter-pill-overflow {\n  /* Overflow trigger inherits the standard filter pill look */\n}\n\n.rc-filter-overflow-caret {\n  font-size: 9px;\n  margin-left: 2px;\n}\n\n.rc-filter-overflow-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10;\n}\n\n.rc-filter-overflow-popover {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 11;\n  min-width: 240px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);\n  padding: 8px;\n}\n\n.rc-filter-overflow-header {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  padding: 6px 8px 8px;\n}\n\n.rc-filter-overflow-row {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 8px;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n\n.rc-filter-overflow-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.rc-filter-overflow-row input[type=\"checkbox\"] {\n  margin: 0;\n  accent-color: var(--mj-brand-primary);\n}\n\n.rc-filter-overflow-row i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  width: 14px;\n  text-align: center;\n}\n\n.rc-filter-overflow-row-restore i {\n  color: var(--mj-status-info);\n}\n\n.rc-filter-overflow-label {\n  flex: 1;\n}\n\n.rc-filter-overflow-count {\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.rc-filter-overflow-actions {\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid var(--mj-border-subtle);\n  padding-top: 8px;\n  margin-top: 6px;\n}\n\n.rc-filter-overflow-clear,\n.rc-filter-overflow-done {\n  background: none;\n  border: none;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 4px 10px;\n  border-radius: 5px;\n}\n\n.rc-filter-overflow-clear {\n  color: var(--mj-text-muted);\n}\n.rc-filter-overflow-clear:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.rc-filter-overflow-done {\n  color: var(--mj-brand-primary);\n}\n.rc-filter-overflow-done:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n/* \u2500\u2500\u2500 Snapshot type badge + card accent \u2500\u2500\u2500 */\n\n.type-snapshot .rc-card-type-badge {\n  background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500\u2500 Restore Source pill (in card meta) \u2500\u2500\u2500 */\n\n.source-restore {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n/* \u2500\u2500\u2500 Restore card variant: violet left accent \u2500\u2500\u2500 */\n\n.rc-card.rc-card-restore {\n  border-left: 3px solid var(--mj-status-info);\n}\n\n/* \u2500\u2500\u2500 Lineage chip \u2500\u2500\u2500 */\n\n/* Lineage chip \u2014 outline-only \"interactive link\" treatment so it reads as\n   distinct from the filled RESTORE badge sitting next to it. The badge says\n   \"this row IS a restore\" (filled, static); the chip says \"click here to\n   see the source version\" (outline, hoverable). */\n.rc-restored-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  margin-left: 8px;\n  padding: 2px 9px;\n  border-radius: 11px;\n  font-size: 11px;\n  font-weight: 500;\n  background: transparent;\n  color: color-mix(in srgb, var(--mj-status-info) 90%, var(--mj-text-primary));\n  border: 1px solid color-mix(in srgb, var(--mj-status-info) 40%, var(--mj-border-default));\n  cursor: pointer;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background-color 0.12s, border-color 0.12s, color 0.12s;\n}\n\n.rc-restored-chip:hover {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, transparent);\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.rc-restored-chip i {\n  font-size: 10px;\n}\n\n.rc-restored-chip-orphan {\n  cursor: default;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n  border-color: var(--mj-border-default);\n}\n\n.rc-restored-chip-orphan:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-default);\n}\n\n/* \u2500\u2500\u2500 Card highlight (when jumped-to via lineage chip) \u2500\u2500\u2500 */\n\n.rc-card.rc-card-highlight {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n  animation: rc-card-pulse 1.4s ease-in-out;\n}\n\n@keyframes rc-card-pulse {\n  0%, 100% { background: var(--mj-bg-surface); }\n  50% { background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)); }\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 *  Restore-row badge override + Restore Reason block\n *  (mockup-aligned treatment for restore rows in the timeline)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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\n/* The base type-update badge styling would otherwise paint a restore row's\n   badge blue with \"Update\" text. Override to violet + \"Restore\" text so it\n   matches the source pill, lineage chip, and card border. */\n.rc-card-type-badge.rc-card-type-badge-restore {\n  background: color-mix(in srgb, var(--mj-status-info) 14%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n/* Restore reason \u2014 minimal blockquote treatment.\n   A thin violet left bar + italic text reads like a margin note rather than\n   a heavy callout. Visually connected to the restore family (left bar uses\n   the same violet as the badge / source pill / card border) without\n   competing with the field-diff rows that follow. */\n.rc-restore-reason {\n  /* Indented in from the card body edge so it visually nests one level\n     deeper than the field-diff rows that follow, and given generous\n     vertical breathing room so it doesn't crowd the lineage chip above\n     or the first field row below. */\n  margin: 14px 8px 18px 18px;\n  padding: 0 0 0 12px;\n  border-left: 2px solid color-mix(in srgb, var(--mj-status-info) 55%, var(--mj-border-default));\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  font-size: 13px;\n  line-height: 1.5;\n}\n\n.rc-restore-reason-label {\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: color-mix(in srgb, var(--mj-status-info) 75%, var(--mj-text-muted));\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.rc-restore-reason-text {\n  color: var(--mj-text-secondary);\n  font-style: italic;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.MJNotificationService }, { type: i2.DomSanitizer }], { dialogClosed: [{
             type: Output
         }], record: [{
@@ -1210,5 +1439,5 @@ export class RecordChangesComponent {
         }], RestoreRequested: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordChangesComponent, { className: "RecordChangesComponent", filePath: "src/lib/ng-record-changes.component.ts", lineNumber: 67 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordChangesComponent, { className: "RecordChangesComponent", filePath: "src/lib/ng-record-changes.component.ts", lineNumber: 120 }); })();
 //# sourceMappingURL=ng-record-changes.component.js.map