@memberjunction/ng-dashboards 5.39.0 → 5.40.0

package/dist/AI/components/duplicates/duplicate-detection-resource.component.js

@@ -19,7 +19,7 @@ import { CompositeKey, LogStatus, RecordMergeRequest, RunView } from '@memberjun
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { KnowledgeHubMetadataEngine } from '@memberjunction/core-entities';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
-import { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';
+import { BaseResourceComponent, NavigationService, ActivityService } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-shared-generic";
@@ -1272,6 +1272,9 @@ let DuplicateDetectionResourceComponent = class DuplicateDetectionResourceCompon
         }
     }
     cdr = inject(ChangeDetectorRef);
+    activityService = inject(ActivityService);
+    /** Activity-tracker id for the currently running detection (P3). */
+    detectionActivityID = null;
     navigationService = inject(NavigationService);
     destroy$ = new Subject();
     filterSubject = new Subject();
@@ -1603,6 +1606,11 @@ let DuplicateDetectionResourceComponent = class DuplicateDetectionResourceCompon
                 this.cdr.detectChanges();
                 return;
             }
+            this.detectionActivityID = this.activityService.Start('Duplicate detection', {
+                icon: 'fa-solid fa-clone',
+                detail: selectedDoc.EntityName,
+                progress: 0,
+            });
             // Subscribe to progress using the run ID as PipelineRunID
             this.subscribeToPipelineProgress(dupeRun.ID);
         }
@@ -1876,6 +1884,10 @@ let DuplicateDetectionResourceComponent = class DuplicateDetectionResourceCompon
                 this.IsDetecting = false;
                 this.DetectionStage = success ? 'Complete' : 'Error';
                 this.DetectionProgress = success ? 100 : 0;
+                if (this.detectionActivityID) {
+                    this.activityService.Complete(this.detectionActivityID, success ? 'success' : 'error');
+                    this.detectionActivityID = null;
+                }
                 if (success) {
                     await this.LoadData();
                 }
@@ -2808,7 +2820,7 @@ let DuplicateDetectionResourceComponent = class DuplicateDetectionResourceCompon
     static ɵfac = /*@__PURE__*/ (() => { let ɵDuplicateDetectionResourceComponent_BaseFactory; return function DuplicateDetectionResourceComponent_Factory(__ngFactoryType__) { return (ɵDuplicateDetectionResourceComponent_BaseFactory || (ɵDuplicateDetectionResourceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(DuplicateDetectionResourceComponent)))(__ngFactoryType__ || DuplicateDetectionResourceComponent); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DuplicateDetectionResourceComponent, selectors: [["app-duplicate-detection-resource"]], hostBindings: function DuplicateDetectionResourceComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function DuplicateDetectionResourceComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { HideToolbar: "HideToolbar" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 66, vars: 30, consts: [["Title", "Duplicate Detection", "Icon", "fa-solid fa-clone", "Subtitle", "Find and merge near-duplicate records using semantic similarity"], ["actions", ""], [1, "mj-input", "kh-doc-select", 3, "ngModelChange", "ngModel", "disabled"], ["value", ""], [3, "value"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], [3, "Flex"], [1, "detection-progress-section"], [1, "threshold-controls"], [1, "kpi-strip"], [1, "kpi-card"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-card", "kpi-pending"], [1, "kpi-card", "kpi-approved"], [1, "kpi-card", "kpi-rejected"], [1, "filter-bar"], [1, "filter-group"], [1, "filter-select", 3, "ngModelChange", "ngModel", "disabled"], [1, "filter-range"], [1, "filter-label"], ["type", "number", "min", "0", "max", "1", "step", "0.05", 1, "filter-input", "filter-input-score", 3, "ngModelChange", "placeholder", "ngModel"], ["type", "date", 1, "filter-input", "filter-input-date", 3, "ngModelChange", "min", "max", "ngModel"], [1, "clear-filters-btn"], [1, "merge-warning-banner"], [1, "loading-container"], [1, "empty-state"], [1, "kanban-board"], [1, "saving-overlay"], [1, "merge-confirm-backdrop"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "action-btn-label"], [1, "fa-solid", "fa-magnifying-glass"], [1, "progress-header"], [1, "progress-stage"], [1, "progress-percent"], [1, "progress-bar-track"], [1, "progress-bar-fill"], [1, "progress-current-item"], [1, "threshold-slider-group"], [1, "threshold-label"], [1, "fa-solid", "fa-adjust"], [1, "threshold-value"], ["type", "range", 1, "threshold-slider", 3, "input", "min", "max", "step", "value", "disabled"], [1, "threshold-hint"], [1, "fa-solid", "fa-bullseye"], [1, "clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-triangle-exclamation"], ["text", "Loading duplicate detection results..."], [1, "fa-solid", "fa-clone", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], [1, "kanban-column"], [1, "column-header", "column-header-pending"], [1, "fa-solid", "fa-clock"], [1, "column-title"], [1, "column-count"], [1, "column-body", 3, "dragover", "dragleave", "drop"], ["draggable", "true", 1, "kanban-card"], [1, "column-empty"], [1, "column-header", "column-header-approved"], [1, "fa-solid", "fa-check-circle"], [1, "column-header", "column-header-rejected"], [1, "fa-solid", "fa-ban"], ["draggable", "true", 1, "kanban-card", 3, "dragstart", "dragend", "click"], [1, "card-header"], [1, "card-header-left"], [1, "card-icon"], [1, "card-title-block"], [1, "card-record-name", 3, "title"], [1, "entity-badge"], [1, "score-indicator"], [1, "card-body"], [1, "match-summaries"], [1, "card-meta-row"], [1, "card-meta-item"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-calendar"], [1, "card-actions"], [1, "action-btn", "approve-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-check"], [1, "action-btn", "reject-btn", 3, "click", "disabled"], [1, "match-summary-row"], [1, "match-summary-more"], [1, "match-score"], [1, "match-name"], [1, "fa-solid", "fa-inbox"], ["text", "Saving...", "size", "small"], [1, "slide-backdrop", 3, "click"], [1, "comparison-panel", 3, "click"], [1, "comparison-header"], [1, "comparison-header-left"], [1, "comparison-entity-icon"], [1, "comparison-title"], [1, "comparison-entity-badge"], [1, "comparison-match-count"], [1, "comparison-header-right"], [1, "comparison-toggle"], [1, "toggle-btn", 3, "click"], ["title", "Close (Esc)", 1, "comparison-close-btn", 3, "click"], [1, "comparison-loading"], [1, "comparison-grid-wrapper", 3, "hidden"], [1, "comparison-grid"], [1, "grid-corner-cell"], [1, "grid-col-header", "grid-col-source"], [1, "col-header-label"], [1, "col-header-name"], [1, "surviving-selector"], ["type", "radio", "name", "survivor", 1, "surviving-radio", 3, "change", "checked"], [1, "surviving-label"], [1, "use-all-btn", 3, "click"], [1, "fa-solid"], [1, "deps-summary"], [1, "deps-total"], [1, "fa-solid", "fa-link"], [1, "deps-total-number"], [1, "deps-total-recommended"], [1, "grid-col-header", 3, "match-approved", "match-rejected"], [1, "comparison-footer"], [1, "comparison-footer-left"], [1, "comparison-summary"], [1, "merge-summary"], [1, "fa-solid", "fa-code-merge"], [1, "comparison-footer-right"], [1, "action-btn", "merge-btn", 3, "click", "disabled", "title"], [1, "merge-disabled-hint"], ["text", "Loading records for comparison...", "size", "medium"], [1, "fa-solid", "fa-star"], [1, "deps-header", 3, "click"], [1, "deps-detail-list"], [1, "deps-detail-group"], [1, "deps-detail-row", 3, "click"], [1, "deps-detail-entity"], [1, "fa-solid", "deps-expand-icon"], [1, "deps-detail-count"], [1, "deps-records-list"], [1, "deps-record-loading"], [1, "deps-record-row"], [1, "deps-record-row", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square", "deps-record-icon"], [1, "deps-record-name"], [1, "grid-col-header"], [1, "col-header-top"], [1, "col-header-diff-count"], [1, "match-approval-actions"], ["title", "Skip this match (exclude from merge)", 1, "match-action-btn", "match-skip-btn"], ["title", "Skip this match (exclude from merge)", 1, "match-action-btn", "match-skip-btn", 3, "click"], [1, "match-status-badge"], ["title", "Undo skip", 1, "match-action-btn", "match-undo-btn"], ["title", "Undo skip", 1, "match-action-btn", "match-undo-btn", 3, "click"], [1, "fa-solid", "fa-undo"], [1, "grid-label-cell"], [1, "grid-value-cell", "grid-source-cell", 3, "click"], [1, "field-not-available"], ["type", "radio", 1, "field-select-radio", 3, "name", "checked"], [1, "grid-value-cell", 3, "grid-row-odd", "value-same", "value-different", "field-selected"], ["type", "radio", 1, "field-select-radio", 3, "click", "change", "name", "checked"], [1, "grid-value-cell", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "merge-confirm-backdrop", 3, "click"], [1, "merge-confirm-panel", 3, "click"], [1, "merge-confirm-header"], [1, "merge-confirm-icon"], [1, "merge-confirm-title"], [1, "merge-confirm-subtitle"], [1, "merge-confirm-body"], [1, "merge-survivor-card"], [1, "merge-survivor-label"], [1, "fa-solid", "fa-shield-halved"], [1, "merge-survivor-name"], [1, "merge-survivor-pk"], [1, "fa-solid", "fa-key"], [1, "merge-survivor-detail"], [1, "merge-deps-transfer"], [1, "merge-delete-card"], [1, "merge-delete-label"], [1, "fa-solid", "fa-trash"], [1, "merge-delete-item"], [1, "merge-confirm-footer"], [1, "action-btn", "cancel-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-left"], [1, "action-btn", "confirm-merge-btn", 3, "click", "disabled"], [1, "merge-section-label"], [1, "merge-field-override"], [1, "merge-field-name"], [1, "merge-field-value"], [1, "merge-field-source"], [1, "merge-deps-transfer-label"], [1, "fa-solid", "fa-arrow-right-arrow-left"], [1, "merge-deps-transfer-row"], [1, "fa-solid", "fa-arrow-right"], [1, "merge-delete-name"], [1, "merge-delete-deps"]], template: function DuplicateDetectionResourceComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { HideToolbar: "HideToolbar" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 66, vars: 30, consts: [["Title", "Record Duplicates", "Icon", "fa-solid fa-clone", "Subtitle", "Find and merge near-duplicate entity records using semantic similarity"], ["actions", ""], [1, "mj-input", "kh-doc-select", 3, "ngModelChange", "ngModel", "disabled"], ["value", ""], [3, "value"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], [3, "Flex"], [1, "detection-progress-section"], [1, "threshold-controls"], [1, "kpi-strip"], [1, "kpi-card"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-card", "kpi-pending"], [1, "kpi-card", "kpi-approved"], [1, "kpi-card", "kpi-rejected"], [1, "filter-bar"], [1, "filter-group"], [1, "filter-select", 3, "ngModelChange", "ngModel", "disabled"], [1, "filter-range"], [1, "filter-label"], ["type", "number", "min", "0", "max", "1", "step", "0.05", 1, "filter-input", "filter-input-score", 3, "ngModelChange", "placeholder", "ngModel"], ["type", "date", 1, "filter-input", "filter-input-date", 3, "ngModelChange", "min", "max", "ngModel"], [1, "clear-filters-btn"], [1, "merge-warning-banner"], [1, "loading-container"], [1, "empty-state"], [1, "kanban-board"], [1, "saving-overlay"], [1, "merge-confirm-backdrop"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "action-btn-label"], [1, "fa-solid", "fa-magnifying-glass"], [1, "progress-header"], [1, "progress-stage"], [1, "progress-percent"], [1, "progress-bar-track"], [1, "progress-bar-fill"], [1, "progress-current-item"], [1, "threshold-slider-group"], [1, "threshold-label"], [1, "fa-solid", "fa-adjust"], [1, "threshold-value"], ["type", "range", 1, "threshold-slider", 3, "input", "min", "max", "step", "value", "disabled"], [1, "threshold-hint"], [1, "fa-solid", "fa-bullseye"], [1, "clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-triangle-exclamation"], ["text", "Loading duplicate detection results..."], [1, "fa-solid", "fa-clone", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], [1, "kanban-column"], [1, "column-header", "column-header-pending"], [1, "fa-solid", "fa-clock"], [1, "column-title"], [1, "column-count"], [1, "column-body", 3, "dragover", "dragleave", "drop"], ["draggable", "true", 1, "kanban-card"], [1, "column-empty"], [1, "column-header", "column-header-approved"], [1, "fa-solid", "fa-check-circle"], [1, "column-header", "column-header-rejected"], [1, "fa-solid", "fa-ban"], ["draggable", "true", 1, "kanban-card", 3, "dragstart", "dragend", "click"], [1, "card-header"], [1, "card-header-left"], [1, "card-icon"], [1, "card-title-block"], [1, "card-record-name", 3, "title"], [1, "entity-badge"], [1, "score-indicator"], [1, "card-body"], [1, "match-summaries"], [1, "card-meta-row"], [1, "card-meta-item"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-calendar"], [1, "card-actions"], [1, "action-btn", "approve-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-check"], [1, "action-btn", "reject-btn", 3, "click", "disabled"], [1, "match-summary-row"], [1, "match-summary-more"], [1, "match-score"], [1, "match-name"], [1, "fa-solid", "fa-inbox"], ["text", "Saving...", "size", "small"], [1, "slide-backdrop", 3, "click"], [1, "comparison-panel", 3, "click"], [1, "comparison-header"], [1, "comparison-header-left"], [1, "comparison-entity-icon"], [1, "comparison-title"], [1, "comparison-entity-badge"], [1, "comparison-match-count"], [1, "comparison-header-right"], [1, "comparison-toggle"], [1, "toggle-btn", 3, "click"], ["title", "Close (Esc)", 1, "comparison-close-btn", 3, "click"], [1, "comparison-loading"], [1, "comparison-grid-wrapper", 3, "hidden"], [1, "comparison-grid"], [1, "grid-corner-cell"], [1, "grid-col-header", "grid-col-source"], [1, "col-header-label"], [1, "col-header-name"], [1, "surviving-selector"], ["type", "radio", "name", "survivor", 1, "surviving-radio", 3, "change", "checked"], [1, "surviving-label"], [1, "use-all-btn", 3, "click"], [1, "fa-solid"], [1, "deps-summary"], [1, "deps-total"], [1, "fa-solid", "fa-link"], [1, "deps-total-number"], [1, "deps-total-recommended"], [1, "grid-col-header", 3, "match-approved", "match-rejected"], [1, "comparison-footer"], [1, "comparison-footer-left"], [1, "comparison-summary"], [1, "merge-summary"], [1, "fa-solid", "fa-code-merge"], [1, "comparison-footer-right"], [1, "action-btn", "merge-btn", 3, "click", "disabled", "title"], [1, "merge-disabled-hint"], ["text", "Loading records for comparison...", "size", "medium"], [1, "fa-solid", "fa-star"], [1, "deps-header", 3, "click"], [1, "deps-detail-list"], [1, "deps-detail-group"], [1, "deps-detail-row", 3, "click"], [1, "deps-detail-entity"], [1, "fa-solid", "deps-expand-icon"], [1, "deps-detail-count"], [1, "deps-records-list"], [1, "deps-record-loading"], [1, "deps-record-row"], [1, "deps-record-row", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square", "deps-record-icon"], [1, "deps-record-name"], [1, "grid-col-header"], [1, "col-header-top"], [1, "col-header-diff-count"], [1, "match-approval-actions"], ["title", "Skip this match (exclude from merge)", 1, "match-action-btn", "match-skip-btn"], ["title", "Skip this match (exclude from merge)", 1, "match-action-btn", "match-skip-btn", 3, "click"], [1, "match-status-badge"], ["title", "Undo skip", 1, "match-action-btn", "match-undo-btn"], ["title", "Undo skip", 1, "match-action-btn", "match-undo-btn", 3, "click"], [1, "fa-solid", "fa-undo"], [1, "grid-label-cell"], [1, "grid-value-cell", "grid-source-cell", 3, "click"], [1, "field-not-available"], ["type", "radio", 1, "field-select-radio", 3, "name", "checked"], [1, "grid-value-cell", 3, "grid-row-odd", "value-same", "value-different", "field-selected"], ["type", "radio", 1, "field-select-radio", 3, "click", "change", "name", "checked"], [1, "grid-value-cell", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "merge-confirm-backdrop", 3, "click"], [1, "merge-confirm-panel", 3, "click"], [1, "merge-confirm-header"], [1, "merge-confirm-icon"], [1, "merge-confirm-title"], [1, "merge-confirm-subtitle"], [1, "merge-confirm-body"], [1, "merge-survivor-card"], [1, "merge-survivor-label"], [1, "fa-solid", "fa-shield-halved"], [1, "merge-survivor-name"], [1, "merge-survivor-pk"], [1, "fa-solid", "fa-key"], [1, "merge-survivor-detail"], [1, "merge-deps-transfer"], [1, "merge-delete-card"], [1, "merge-delete-label"], [1, "fa-solid", "fa-trash"], [1, "merge-delete-item"], [1, "merge-confirm-footer"], [1, "action-btn", "cancel-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-left"], [1, "action-btn", "confirm-merge-btn", 3, "click", "disabled"], [1, "merge-section-label"], [1, "merge-field-override"], [1, "merge-field-name"], [1, "merge-field-value"], [1, "merge-field-source"], [1, "merge-deps-transfer-label"], [1, "fa-solid", "fa-arrow-right-arrow-left"], [1, "merge-deps-transfer-row"], [1, "fa-solid", "fa-arrow-right"], [1, "merge-delete-name"], [1, "merge-delete-deps"]], template: function DuplicateDetectionResourceComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "select", 2);
             i0.ɵɵtwoWayListener("ngModelChange", function DuplicateDetectionResourceComponent_Template_select_ngModelChange_3_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.SelectedEntityDocumentID, $event) || (ctx.SelectedEntityDocumentID = $event); return $event; });
             i0.ɵɵelementStart(4, "option", 3);
@@ -2952,7 +2964,7 @@ DuplicateDetectionResourceComponent = __decorate([
 export { DuplicateDetectionResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DuplicateDetectionResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-duplicate-detection-resource', encapsulation: ViewEncapsulation.None, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Duplicate Detection\"\n    Icon=\"fa-solid fa-clone\"\n    Subtitle=\"Find and merge near-duplicate records using semantic similarity\">\n    <div actions>\n      <select class=\"mj-input kh-doc-select\"\n              [(ngModel)]=\"SelectedEntityDocumentID\"\n              [disabled]=\"IsDetecting\">\n          <option value=\"\">Select entity document\u2026</option>\n          @for (doc of EntityDocuments; track doc.ID) {\n              <option [value]=\"doc.ID\">{{ doc.Name }} ({{ doc.EntityName }})</option>\n          }\n      </select>\n      <button mjButton variant=\"primary\" size=\"sm\"\n              (click)=\"RunDetection()\"\n              [disabled]=\"IsDetecting || !SelectedEntityDocumentID\">\n          @if (IsDetecting) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> <span class=\"action-btn-label\">Detecting\u2026</span>\n          } @else {\n              <i class=\"fa-solid fa-magnifying-glass\"></i> <span class=\"action-btn-label\">Run Detection</span>\n          }\n      </button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\">\n    <!-- Detection Progress (visible during run) -->\n    @if (IsDetecting) {\n        <div class=\"detection-progress-section\">\n            <div class=\"progress-header\">\n                <span class=\"progress-stage\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    {{ DetectionStage }}\n                </span>\n                <span class=\"progress-percent\">{{ DetectionProgress }}%</span>\n            </div>\n            <div class=\"progress-bar-track\">\n                <div class=\"progress-bar-fill\" [style.width.%]=\"DetectionProgress\"></div>\n            </div>\n            @if (DetectionCurrentItem) {\n                <span class=\"progress-current-item\">{{ DetectionCurrentItem }}</span>\n            }\n        </div>\n    }\n\n    <!-- Threshold Controls (when entity doc selected) -->\n    @if (SelectedDocumentThresholds) {\n        <div class=\"threshold-controls\">\n            <div class=\"threshold-slider-group\">\n                <label class=\"threshold-label\">\n                    <i class=\"fa-solid fa-adjust\"></i>\n                    Potential Match\n                    <span class=\"threshold-value\">{{ (RunPotentialThreshold * 100).toFixed(0) }}%</span>\n                </label>\n                <input type=\"range\" class=\"threshold-slider\"\n                    [min]=\"30\" [max]=\"99\" [step]=\"1\"\n                    [value]=\"RunPotentialThreshold * 100\"\n                    (input)=\"OnPotentialThresholdChanged($any($event.target).value / 100)\"\n                    [disabled]=\"IsDetecting\" />\n                <span class=\"threshold-hint\">Score above which duplicates are flagged for review</span>\n            </div>\n            <div class=\"threshold-slider-group\">\n                <label class=\"threshold-label\">\n                    <i class=\"fa-solid fa-bullseye\"></i>\n                    Absolute Match\n                    <span class=\"threshold-value\">{{ (RunAbsoluteThreshold * 100).toFixed(0) }}%</span>\n                </label>\n                <input type=\"range\" class=\"threshold-slider\"\n                    [min]=\"50\" [max]=\"100\" [step]=\"1\"\n                    [value]=\"RunAbsoluteThreshold * 100\"\n                    (input)=\"OnAbsoluteThresholdChanged($any($event.target).value / 100)\"\n                    [disabled]=\"IsDetecting\" />\n                <span class=\"threshold-hint\">Score above which duplicates are auto-confirmed</span>\n            </div>\n        </div>\n    }\n\n    <!-- KPI Strip -->\n    <div class=\"kpi-strip\">\n        <div class=\"kpi-card\">\n            <div class=\"kpi-value\">{{ TotalGroupCount }}</div>\n            <div class=\"kpi-label\">Total Groups</div>\n        </div>\n        <div class=\"kpi-card kpi-pending\">\n            <div class=\"kpi-value\">{{ PendingCount }}</div>\n            <div class=\"kpi-label\">Pending</div>\n        </div>\n        <div class=\"kpi-card kpi-approved\">\n            <div class=\"kpi-value\">{{ ApprovedCount }}</div>\n            <div class=\"kpi-label\">Approved</div>\n        </div>\n        <div class=\"kpi-card kpi-rejected\">\n            <div class=\"kpi-value\">{{ RejectedCount }}</div>\n            <div class=\"kpi-label\">Rejected</div>\n        </div>\n    </div>\n\n    <!-- Filter Bar -->\n    <div class=\"filter-bar\">\n        <div class=\"filter-group\">\n            <select class=\"filter-select\"\n                    [(ngModel)]=\"Filters.EntityName\"\n                    (ngModelChange)=\"OnFilterChange()\"\n                    [disabled]=\"EntityNames.length <= 1\">\n                @if (EntityNames.length > 1) {\n                    <option value=\"\">All Entities</option>\n                }\n                @for (name of EntityNames; track name) {\n                    <option [value]=\"name\">{{ name }}</option>\n                }\n            </select>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">Min Score</label>\n                <input type=\"number\"\n                       class=\"filter-input filter-input-score\"\n                       min=\"0\" max=\"1\" step=\"0.05\"\n                       [placeholder]=\"DataMinScore\"\n                       [(ngModel)]=\"Filters.MinScore\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">Max Score</label>\n                <input type=\"number\"\n                       class=\"filter-input filter-input-score\"\n                       min=\"0\" max=\"1\" step=\"0.05\"\n                       [placeholder]=\"DataMaxScore\"\n                       [(ngModel)]=\"Filters.MaxScore\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">From</label>\n                <input type=\"date\"\n                       class=\"filter-input filter-input-date\"\n                       [min]=\"DataMinDate\" [max]=\"DataMaxDate\"\n                       [(ngModel)]=\"Filters.DateFrom\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">To</label>\n                <input type=\"date\"\n                       class=\"filter-input filter-input-date\"\n                       [min]=\"DataMinDate\" [max]=\"DataMaxDate\"\n                       [(ngModel)]=\"Filters.DateTo\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n        </div>\n\n        @if (HasActiveFilters) {\n            <button class=\"clear-filters-btn\" (click)=\"ClearFilters()\">\n                <i class=\"fa-solid fa-times\"></i> Clear Filters\n            </button>\n        }\n    </div>\n\n    <!-- Merge Warning Banner (non-blocking, shown when entity lacks AllowRecordMerge) -->\n    @if (ShowMergeWarningBanner) {\n        <div class=\"merge-warning-banner\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            Merging is not available for this entity. Detection results are read-only.\n        </div>\n    }\n\n    <!-- Content -->\n    @if (IsLoading) {\n        <div class=\"loading-container\">\n            <mj-loading text=\"Loading duplicate detection results...\"></mj-loading>\n        </div>\n    } @else if (IsLoadingResults) {\n        <div class=\"loading-container\">\n            <mj-loading text=\"Loading duplicate detection results...\"></mj-loading>\n        </div>\n    } @else if (TotalGroupCount === 0) {\n        <div class=\"empty-state\">\n            <i class=\"fa-solid fa-clone empty-icon\"></i>\n            <p class=\"empty-text\">No duplicate detection results found.</p>\n            <p class=\"empty-subtext\">Select an entity document and click \"Run Detection\" to start.</p>\n        </div>\n    } @else {\n        <!-- Kanban Board -->\n        <div class=\"kanban-board\">\n            <!-- Pending Column -->\n            <div class=\"kanban-column\" [class.drop-target-active]=\"DragOverColumn === 'Pending' && DraggedGroup?.ApprovalStatus !== 'Pending'\">\n                <div class=\"column-header column-header-pending\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"column-title\">Pending Review</span>\n                    <span class=\"column-count\">{{ PendingCount }}</span>\n                </div>\n                <div class=\"column-body\"\n                     (dragover)=\"OnDragOver($event, 'Pending')\"\n                     (dragleave)=\"OnDragLeave($event, 'Pending')\"\n                     (drop)=\"OnDrop($event, 'Pending')\">\n                    @for (group of PendingGroups; track group.DetailId) {\n                        <div class=\"kanban-card\"\n                             draggable=\"true\"\n                             (dragstart)=\"OnDragStart($event, group)\"\n                             (dragend)=\"OnDragEnd()\"\n                             (click)=\"OpenComparison(group)\">\n                            <div class=\"card-header\">\n                                <div class=\"card-header-left\">\n                                    <div class=\"card-icon\">\n                                        <i [class]=\"group.EntityIcon\"></i>\n                                    </div>\n                                    <div class=\"card-title-block\">\n                                        <div class=\"card-record-name\" [title]=\"group.RecordName\">{{ group.RecordName }}</div>\n                                        <span class=\"entity-badge\">{{ group.EntityName }}</span>\n                                    </div>\n                                </div>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(group.HighestScore)\">\n                                    {{ (group.HighestScore * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <div class=\"card-body\">\n                                @if (group.TopMatchSummaries.length > 0) {\n                                    <div class=\"match-summaries\">\n                                        @for (ms of group.TopMatchSummaries; track ms.Name) {\n                                            <div class=\"match-summary-row\">\n                                                <span class=\"match-score\">{{ (ms.Score * 100).toFixed(0) }}%</span>\n                                                <span class=\"match-name\">{{ ms.Name }}</span>\n                                            </div>\n                                        }\n                                        @if (group.MatchCount > group.TopMatchSummaries.length) {\n                                            <div class=\"match-summary-more\">+{{ group.MatchCount - group.TopMatchSummaries.length }} more</div>\n                                        }\n                                    </div>\n                                }\n                                <div class=\"card-meta-row\">\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-layer-group\"></i>\n                                        {{ group.MatchCount }} match{{ group.MatchCount !== 1 ? 'es' : '' }}\n                                    </span>\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-calendar\"></i>\n                                        {{ FormatDate(group.MatchedAt) }}\n                                    </span>\n                                </div>\n                            </div>\n                            <div class=\"card-actions\">\n                                <button class=\"action-btn approve-btn\"\n                                        [disabled]=\"IsSaving\"\n                                        (click)=\"ApproveMatch(group); $event.stopPropagation()\">\n                                    <i class=\"fa-solid fa-check\"></i> Approve\n                                </button>\n                                <button class=\"action-btn reject-btn\"\n                                        [disabled]=\"IsSaving\"\n                                        (click)=\"RejectMatch(group); $event.stopPropagation()\">\n                                    <i class=\"fa-solid fa-times\"></i> Reject\n                                </button>\n                            </div>\n                        </div>\n                    }\n                    @if (PendingGroups.length === 0) {\n                        <div class=\"column-empty\">\n                            <i class=\"fa-solid fa-check-circle\"></i>\n                            <span>No pending items</span>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <!-- Approved Column -->\n            <div class=\"kanban-column\" [class.drop-target-active]=\"DragOverColumn === 'Approved' && DraggedGroup?.ApprovalStatus !== 'Approved'\">\n                <div class=\"column-header column-header-approved\">\n                    <i class=\"fa-solid fa-check-circle\"></i>\n                    <span class=\"column-title\">Approved</span>\n                    <span class=\"column-count\">{{ ApprovedCount }}</span>\n                </div>\n                <div class=\"column-body\"\n                     (dragover)=\"OnDragOver($event, 'Approved')\"\n                     (dragleave)=\"OnDragLeave($event, 'Approved')\"\n                     (drop)=\"OnDrop($event, 'Approved')\">\n                    @for (group of ApprovedGroups; track group.DetailId) {\n                        <div class=\"kanban-card\"\n                             draggable=\"true\"\n                             (dragstart)=\"OnDragStart($event, group)\"\n                             (dragend)=\"OnDragEnd()\"\n                             (click)=\"OpenComparison(group)\">\n                            <div class=\"card-header\">\n                                <div class=\"card-header-left\">\n                                    <div class=\"card-icon\">\n                                        <i [class]=\"group.EntityIcon\"></i>\n                                    </div>\n                                    <div class=\"card-title-block\">\n                                        <div class=\"card-record-name\" [title]=\"group.RecordName\">{{ group.RecordName }}</div>\n                                        <span class=\"entity-badge\">{{ group.EntityName }}</span>\n                                    </div>\n                                </div>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(group.HighestScore)\">\n                                    {{ (group.HighestScore * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <div class=\"card-body\">\n                                @if (group.TopMatchSummaries.length > 0) {\n                                    <div class=\"match-summaries\">\n                                        @for (ms of group.TopMatchSummaries; track ms.Name) {\n                                            <div class=\"match-summary-row\">\n                                                <span class=\"match-score\">{{ (ms.Score * 100).toFixed(0) }}%</span>\n                                                <span class=\"match-name\">{{ ms.Name }}</span>\n                                            </div>\n                                        }\n                                        @if (group.MatchCount > group.TopMatchSummaries.length) {\n                                            <div class=\"match-summary-more\">+{{ group.MatchCount - group.TopMatchSummaries.length }} more</div>\n                                        }\n                                    </div>\n                                }\n                                <div class=\"card-meta-row\">\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-layer-group\"></i>\n                                        {{ group.MatchCount }} match{{ group.MatchCount !== 1 ? 'es' : '' }}\n                                    </span>\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-calendar\"></i>\n                                        {{ FormatDate(group.MatchedAt) }}\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                    @if (ApprovedGroups.length === 0) {\n                        <div class=\"column-empty\">\n                            <i class=\"fa-solid fa-inbox\"></i>\n                            <span>No approved items</span>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <!-- Rejected Column -->\n            <div class=\"kanban-column\" [class.drop-target-active]=\"DragOverColumn === 'Rejected' && DraggedGroup?.ApprovalStatus !== 'Rejected'\">\n                <div class=\"column-header column-header-rejected\">\n                    <i class=\"fa-solid fa-ban\"></i>\n                    <span class=\"column-title\">Rejected</span>\n                    <span class=\"column-count\">{{ RejectedCount }}</span>\n                </div>\n                <div class=\"column-body\"\n                     (dragover)=\"OnDragOver($event, 'Rejected')\"\n                     (dragleave)=\"OnDragLeave($event, 'Rejected')\"\n                     (drop)=\"OnDrop($event, 'Rejected')\">\n                    @for (group of RejectedGroups; track group.DetailId) {\n                        <div class=\"kanban-card\"\n                             draggable=\"true\"\n                             (dragstart)=\"OnDragStart($event, group)\"\n                             (dragend)=\"OnDragEnd()\"\n                             (click)=\"OpenComparison(group)\">\n                            <div class=\"card-header\">\n                                <div class=\"card-header-left\">\n                                    <div class=\"card-icon\">\n                                        <i [class]=\"group.EntityIcon\"></i>\n                                    </div>\n                                    <div class=\"card-title-block\">\n                                        <div class=\"card-record-name\" [title]=\"group.RecordName\">{{ group.RecordName }}</div>\n                                        <span class=\"entity-badge\">{{ group.EntityName }}</span>\n                                    </div>\n                                </div>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(group.HighestScore)\">\n                                    {{ (group.HighestScore * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <div class=\"card-body\">\n                                @if (group.TopMatchSummaries.length > 0) {\n                                    <div class=\"match-summaries\">\n                                        @for (ms of group.TopMatchSummaries; track ms.Name) {\n                                            <div class=\"match-summary-row\">\n                                                <span class=\"match-score\">{{ (ms.Score * 100).toFixed(0) }}%</span>\n                                                <span class=\"match-name\">{{ ms.Name }}</span>\n                                            </div>\n                                        }\n                                        @if (group.MatchCount > group.TopMatchSummaries.length) {\n                                            <div class=\"match-summary-more\">+{{ group.MatchCount - group.TopMatchSummaries.length }} more</div>\n                                        }\n                                    </div>\n                                }\n                                <div class=\"card-meta-row\">\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-layer-group\"></i>\n                                        {{ group.MatchCount }} match{{ group.MatchCount !== 1 ? 'es' : '' }}\n                                    </span>\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-calendar\"></i>\n                                        {{ FormatDate(group.MatchedAt) }}\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                    @if (RejectedGroups.length === 0) {\n                        <div class=\"column-empty\">\n                            <i class=\"fa-solid fa-inbox\"></i>\n                            <span>No rejected items</span>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n\n    <!-- Saving overlay -->\n    @if (IsSaving) {\n        <div class=\"saving-overlay\">\n            <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n        </div>\n    }\n\n    <!-- \u2550\u2550\u2550 Comparison Slide-In Panel \u2550\u2550\u2550 -->\n    @if (ComparisonGroup) {\n        <div class=\"slide-backdrop\" [class.comparison-closing]=\"ComparisonClosing\" (click)=\"CloseComparison()\"></div>\n        <div class=\"comparison-panel\" [class.comparison-closing]=\"ComparisonClosing\" (click)=\"$event.stopPropagation()\">\n            <!-- Header -->\n            <div class=\"comparison-header\">\n                <div class=\"comparison-header-left\">\n                    <div class=\"comparison-entity-icon\">\n                        <i [class]=\"ComparisonGroup.EntityIcon\"></i>\n                    </div>\n                    <div>\n                        <div class=\"comparison-title\">{{ ComparisonGroup.RecordName }}</div>\n                        <span class=\"comparison-entity-badge\">{{ ComparisonGroup.EntityName }}</span>\n                        <span class=\"comparison-match-count\">\n                            {{ ComparisonGroup.MatchCount }} potential duplicate{{ ComparisonGroup.MatchCount !== 1 ? 's' : '' }}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"comparison-header-right\">\n                    <div class=\"comparison-toggle\">\n                        <button class=\"toggle-btn\" [class.toggle-active]=\"ComparisonShowAllFields\"\n                                (click)=\"ComparisonShowAllFields = true\">All Fields</button>\n                        <button class=\"toggle-btn\" [class.toggle-active]=\"!ComparisonShowAllFields\"\n                                (click)=\"ComparisonShowAllFields = false\">Differences Only</button>\n                    </div>\n                    <button class=\"comparison-close-btn\" (click)=\"CloseComparison()\" title=\"Close (Esc)\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n            </div>\n\n            <!-- Grid -->\n            @if (ComparisonLoading) {\n                <div class=\"comparison-loading\">\n                    <mj-loading text=\"Loading records for comparison...\" size=\"medium\"></mj-loading>\n                </div>\n            }\n            <div class=\"comparison-grid-wrapper\" [hidden]=\"ComparisonLoading\">\n                <div class=\"comparison-grid\"\n                     [style.grid-template-columns]=\"'160px repeat(' + (1 + ComparisonMatches.length) + ', minmax(180px, 1fr))'\">\n\n                    <!-- Corner cell -->\n                    <div class=\"grid-corner-cell\">Field</div>\n\n                    <!-- Source column header -->\n                    <div class=\"grid-col-header grid-col-source\">\n                        <span class=\"col-header-label\">Source</span>\n                        <span class=\"col-header-name\">{{ ComparisonGroup.RecordName }}</span>\n                        <div class=\"surviving-selector\">\n                            <input type=\"radio\" name=\"survivor\" class=\"surviving-radio\"\n                                   [checked]=\"SurvivorColumnIndex === 0\"\n                                   (change)=\"SetSurvivor(0)\">\n                            <span class=\"surviving-label\" [class.is-survivor]=\"SurvivorColumnIndex === 0\">\n                                {{ SurvivorColumnIndex === 0 ? 'Surviving Record' : 'Set as survivor' }}\n                            </span>\n                        </div>\n                        <button class=\"use-all-btn\" [class.all-selected]=\"AllFieldsSelectedFrom(0)\"\n                                (click)=\"UseAllFieldsFrom(0)\">\n                            <i class=\"fa-solid\" [class.fa-check-double]=\"AllFieldsSelectedFrom(0)\" [class.fa-clone]=\"!AllFieldsSelectedFrom(0)\"></i>\n                            {{ AllFieldsSelectedFrom(0) ? 'Using all fields' : 'Use all fields' }}\n                        </button>\n                        <!-- Dependencies Summary -->\n                        <div class=\"deps-summary\">\n                            <div class=\"deps-total\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                <span class=\"deps-total-number\">{{ GetTotalDeps(0) }}</span>\n                                {{ GetTotalDeps(0) === 1 ? 'dependency' : 'dependencies' }}\n                                @if (GetMaxDepsColumnIndex() === 0 && GetTotalDeps(0) > 0) {\n                                    <span class=\"deps-total-recommended\"><i class=\"fa-solid fa-star\"></i> Most deps</span>\n                                }\n                            </div>\n                            @if (GetGroupedDeps(0).length > 0) {\n                                <div class=\"deps-header\" (click)=\"ToggleDepsExpanded(0)\">\n                                    <span>{{ IsDepsExpanded(0) ? 'Hide details' : 'Show details' }}</span>\n                                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!IsDepsExpanded(0)\" [class.fa-chevron-up]=\"IsDepsExpanded(0)\"></i>\n                                </div>\n                                @if (IsDepsExpanded(0)) {\n                                    <div class=\"deps-detail-list\">\n                                        @for (dep of GetGroupedDeps(0); track dep.Entity) {\n                                            <div class=\"deps-detail-group\">\n                                                <div class=\"deps-detail-row\" (click)=\"ToggleDepEntityGroup(0, dep.Entity); $event.stopPropagation()\">\n                                                    <span class=\"deps-detail-entity\">\n                                                        <i class=\"fa-solid deps-expand-icon\"\n                                                           [class.fa-chevron-right]=\"!IsDepEntityGroupExpanded(0, dep.Entity)\"\n                                                           [class.fa-chevron-down]=\"IsDepEntityGroupExpanded(0, dep.Entity)\"></i>\n                                                        {{ dep.Entity }}\n                                                    </span>\n                                                    <span class=\"deps-detail-count\">{{ dep.Count }}</span>\n                                                </div>\n                                                @if (IsDepEntityGroupExpanded(0, dep.Entity)) {\n                                                    <div class=\"deps-records-list\">\n                                                        @if (IsDepRecordsLoading(0, dep.Entity)) {\n                                                            <div class=\"deps-record-loading\"><i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...</div>\n                                                        }\n                                                        @for (record of GetDepRecords(0, dep.Entity); track $index) {\n                                                            <div class=\"deps-record-row\" (click)=\"OpenDepRecord(record); $event.stopPropagation()\">\n                                                                <i class=\"fa-solid fa-arrow-up-right-from-square deps-record-icon\"></i>\n                                                                <span class=\"deps-record-name\">{{ record.Name }}</span>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </div>\n\n                    <!-- Match column headers -->\n                    @for (match of ComparisonMatches; track match.Match.ID; let mi = $index) {\n                        <div class=\"grid-col-header\"\n                             [class.match-approved]=\"match.Match.ApprovalStatus === 'Approved'\"\n                             [class.match-rejected]=\"match.Match.ApprovalStatus === 'Rejected'\">\n                            <div class=\"col-header-top\">\n                                <span class=\"col-header-name\">{{ match.Name }}</span>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(match.Score)\">\n                                    {{ (match.Score * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <span class=\"col-header-diff-count\">{{ match.DiffCount }} difference{{ match.DiffCount !== 1 ? 's' : '' }}</span>\n                            <div class=\"surviving-selector\">\n                                <input type=\"radio\" name=\"survivor\" class=\"surviving-radio\"\n                                       [checked]=\"SurvivorColumnIndex === mi + 1\"\n                                       (change)=\"SetSurvivor(mi + 1)\">\n                                <span class=\"surviving-label\" [class.is-survivor]=\"SurvivorColumnIndex === mi + 1\">\n                                    {{ SurvivorColumnIndex === mi + 1 ? 'Surviving Record' : 'Set as survivor' }}\n                                </span>\n                            </div>\n                            <button class=\"use-all-btn\" [class.all-selected]=\"AllFieldsSelectedFrom(mi + 1)\"\n                                    (click)=\"UseAllFieldsFrom(mi + 1)\">\n                                <i class=\"fa-solid\" [class.fa-check-double]=\"AllFieldsSelectedFrom(mi + 1)\" [class.fa-clone]=\"!AllFieldsSelectedFrom(mi + 1)\"></i>\n                                {{ AllFieldsSelectedFrom(mi + 1) ? 'Using all fields' : 'Use all fields' }}\n                            </button>\n                            <!-- Dependencies Summary -->\n                            <div class=\"deps-summary\">\n                                <div class=\"deps-total\">\n                                    <i class=\"fa-solid fa-link\"></i>\n                                    <span class=\"deps-total-number\">{{ GetTotalDeps(mi + 1) }}</span>\n                                    {{ GetTotalDeps(mi + 1) === 1 ? 'dependency' : 'dependencies' }}\n                                    @if (GetMaxDepsColumnIndex() === mi + 1 && GetTotalDeps(mi + 1) > 0) {\n                                        <span class=\"deps-total-recommended\"><i class=\"fa-solid fa-star\"></i> Most deps</span>\n                                    }\n                                </div>\n                                @if (GetGroupedDeps(mi + 1).length > 0) {\n                                    <div class=\"deps-header\" (click)=\"ToggleDepsExpanded(mi + 1)\">\n                                        <span>{{ IsDepsExpanded(mi + 1) ? 'Hide details' : 'Show details' }}</span>\n                                        <i class=\"fa-solid\" [class.fa-chevron-down]=\"!IsDepsExpanded(mi + 1)\" [class.fa-chevron-up]=\"IsDepsExpanded(mi + 1)\"></i>\n                                    </div>\n                                    @if (IsDepsExpanded(mi + 1)) {\n                                        <div class=\"deps-detail-list\">\n                                            @for (dep of GetGroupedDeps(mi + 1); track dep.Entity) {\n                                                <div class=\"deps-detail-group\">\n                                                    <div class=\"deps-detail-row\" (click)=\"ToggleDepEntityGroup(mi + 1, dep.Entity); $event.stopPropagation()\">\n                                                        <span class=\"deps-detail-entity\">\n                                                            <i class=\"fa-solid deps-expand-icon\"\n                                                               [class.fa-chevron-right]=\"!IsDepEntityGroupExpanded(mi + 1, dep.Entity)\"\n                                                               [class.fa-chevron-down]=\"IsDepEntityGroupExpanded(mi + 1, dep.Entity)\"></i>\n                                                            {{ dep.Entity }}\n                                                        </span>\n                                                        <span class=\"deps-detail-count\">{{ dep.Count }}</span>\n                                                    </div>\n                                                    @if (IsDepEntityGroupExpanded(mi + 1, dep.Entity)) {\n                                                        <div class=\"deps-records-list\">\n                                                            @if (IsDepRecordsLoading(mi + 1, dep.Entity)) {\n                                                                <div class=\"deps-record-loading\"><i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...</div>\n                                                            }\n                                                            @for (record of GetDepRecords(mi + 1, dep.Entity); track $index) {\n                                                                <div class=\"deps-record-row\" (click)=\"OpenDepRecord(record); $event.stopPropagation()\">\n                                                                    <i class=\"fa-solid fa-arrow-up-right-from-square deps-record-icon\"></i>\n                                                                    <span class=\"deps-record-name\">{{ record.Name }}</span>\n                                                                </div>\n                                                            }\n                                                        </div>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                }\n                            </div>\n                            <!-- Per-match approval actions -->\n                            <div class=\"match-approval-actions\">\n                                @if (match.Match.ApprovalStatus === 'Pending') {\n                                    <button class=\"match-action-btn match-skip-btn\"\n                                            title=\"Skip this match (exclude from merge)\"\n                                            (click)=\"RejectIndividualMatch(match)\">\n                                        <i class=\"fa-solid fa-ban\"></i> Skip\n                                    </button>\n                                } @else {\n                                    <span class=\"match-status-badge\"\n                                          [class.status-approved]=\"match.Match.ApprovalStatus === 'Approved'\"\n                                          [class.status-rejected]=\"match.Match.ApprovalStatus === 'Rejected'\">\n                                        <i class=\"fa-solid\" [class.fa-check]=\"match.Match.ApprovalStatus === 'Approved'\"\n                                           [class.fa-times]=\"match.Match.ApprovalStatus === 'Rejected'\"></i>\n                                        {{ match.Match.ApprovalStatus === 'Rejected' ? 'Skipped' : match.Match.ApprovalStatus }}\n                                    </span>\n                                    @if (match.Match.ApprovalStatus === 'Rejected') {\n                                        <button class=\"match-action-btn match-undo-btn\"\n                                                title=\"Undo skip\"\n                                                (click)=\"UndoRejectIndividualMatch(match)\">\n                                            <i class=\"fa-solid fa-undo\"></i> Undo\n                                        </button>\n                                    }\n                                }\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Field rows -->\n                    @for (field of GetVisibleFields(); track field.FieldName; let odd = $odd) {\n                        <!-- Label cell -->\n                        <div class=\"grid-label-cell\" [class.grid-row-odd]=\"odd\">\n                            {{ field.DisplayName }}\n                        </div>\n                        <!-- Source value cell -->\n                        <div class=\"grid-value-cell grid-source-cell\"\n                             [class.grid-row-odd]=\"odd\"\n                             [class.has-diff-in-row]=\"field.HasDifference\"\n                             [class.field-selected]=\"field.SelectedColumnIndex === 0\"\n                             (click)=\"SelectFieldValue(field, 0)\">\n                            @if (field.SourceValue != null) {\n                                {{ field.SourceValue }}\n                            } @else {\n                                <span class=\"field-not-available\">(not available)</span>\n                            }\n                            @if (field.HasDifference || field.SelectedColumnIndex === 0) {\n                                <input type=\"radio\" [name]=\"'field-' + field.FieldName\" class=\"field-select-radio\"\n                                       [checked]=\"field.SelectedColumnIndex === 0\"\n                                       (click)=\"$event.stopPropagation()\"\n                                       (change)=\"SelectFieldValue(field, 0)\">\n                            }\n                        </div>\n                        <!-- Match value cells -->\n                        @for (matchVal of field.MatchValues; track $index; let mi = $index) {\n                            <div class=\"grid-value-cell\"\n                                 [class.grid-row-odd]=\"odd\"\n                                 [class.value-same]=\"AreValuesEqual(field.SourceValue, matchVal)\"\n                                 [class.value-different]=\"matchVal != null && field.SourceValue != null && !AreValuesEqual(field.SourceValue, matchVal)\"\n                                 [class.field-selected]=\"field.SelectedColumnIndex === mi + 1\"\n                                 (click)=\"matchVal != null ? SelectFieldValue(field, mi + 1) : null\">\n                                @if (matchVal != null) {\n                                    {{ matchVal }}\n                                    @if (field.HasDifference || field.SelectedColumnIndex === mi + 1) {\n                                        <input type=\"radio\" [name]=\"'field-' + field.FieldName\" class=\"field-select-radio\"\n                                               [checked]=\"field.SelectedColumnIndex === mi + 1\"\n                                               (click)=\"$event.stopPropagation()\"\n                                               (change)=\"SelectFieldValue(field, mi + 1)\">\n                                    }\n                                } @else {\n                                    <span class=\"field-not-available\">(not available)</span>\n                                }\n                            </div>\n                        }\n                    }\n                </div>\n            </div>\n\n            <!-- Footer -->\n            <div class=\"comparison-footer\">\n                <div class=\"comparison-footer-left\">\n                    <span class=\"comparison-summary\">\n                        Showing {{ GetVisibleFields().length }} of {{ ComparisonFields.length }} fields\n                    </span>\n                    <span class=\"merge-summary\">\n                        <i class=\"fa-solid fa-code-merge\"></i>\n                        Surviving: <strong>{{ SurvivorName() }}</strong>\n                        @if (CherryPickedCount() > 0) {\n                            &middot; {{ CherryPickedCount() }} field{{ CherryPickedCount() !== 1 ? 's' : '' }} cherry-picked\n                        }\n                    </span>\n                </div>\n                <div class=\"comparison-footer-right\">\n                    <button class=\"action-btn reject-btn\" [disabled]=\"IsSaving\"\n                            (click)=\"RejectMatch(ComparisonGroup!); CloseComparison()\">\n                        <i class=\"fa-solid fa-times\"></i> Reject All\n                    </button>\n                    <button class=\"action-btn merge-btn\" [disabled]=\"IsSaving || !HasMergeableMatches || !MergeEnabled\"\n                            (click)=\"OpenMergeConfirm()\"\n                            [title]=\"!MergeEnabled ? 'Merging is not enabled for this entity' : HasMergeableMatches ? 'Merge non-skipped records' : 'All matches have been skipped'\">\n                        <i class=\"fa-solid fa-code-merge\"></i> Merge Records\n                    </button>\n                    @if (!MergeEnabled) {\n                        <span class=\"merge-disabled-hint\"><i class=\"fa-solid fa-info-circle\"></i> Merging disabled for this entity</span>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n\n    <!-- \u2550\u2550\u2550 Merge Confirmation Panel \u2550\u2550\u2550 -->\n    @if (ShowMergeConfirm && ComparisonGroup) {\n        <div class=\"merge-confirm-backdrop\" (click)=\"CloseMergeConfirm()\">\n            <div class=\"merge-confirm-panel\" (click)=\"$event.stopPropagation()\">\n                <div class=\"merge-confirm-header\">\n                    <div class=\"merge-confirm-icon\"><i class=\"fa-solid fa-code-merge\"></i></div>\n                    <div>\n                        <div class=\"merge-confirm-title\">Confirm Record Merge</div>\n                        <div class=\"merge-confirm-subtitle\">This action cannot be undone. Please review carefully.</div>\n                    </div>\n                </div>\n\n                <div class=\"merge-confirm-body\">\n                    <!-- Surviving Record -->\n                    <div class=\"merge-survivor-card\">\n                        <div class=\"merge-survivor-label\"><i class=\"fa-solid fa-shield-halved\"></i> Surviving Record</div>\n                        <div class=\"merge-survivor-name\">{{ SurvivorName() }}</div>\n                        <div class=\"merge-survivor-pk\">\n                            <i class=\"fa-solid fa-key\"></i>\n                            {{ SurvivorKeyDisplay() }}\n                        </div>\n                        <div class=\"merge-survivor-detail\">This record's ID will be retained. All dependencies from merged records will be transferred here.</div>\n                    </div>\n\n                    <!-- Cherry-picked field overrides -->\n                    @if (GetCherryPickedFields().length > 0) {\n                        <div>\n                            <div class=\"merge-section-label\">Field Value Overrides ({{ GetCherryPickedFields().length }} field{{ GetCherryPickedFields().length !== 1 ? 's' : '' }})</div>\n                            @for (field of GetCherryPickedFields(); track field.FieldName) {\n                                <div class=\"merge-field-override\">\n                                    <span class=\"merge-field-name\">{{ field.DisplayName }}</span>\n                                    <span class=\"merge-field-value\">\"{{ field.Value }}\"</span>\n                                    <span class=\"merge-field-source\">from {{ field.SourceName }}</span>\n                                </div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Dependency transfer -->\n                    @if (GetNonSurvivorColumns().length > 0) {\n                        <div class=\"merge-deps-transfer\">\n                            <div class=\"merge-deps-transfer-label\"><i class=\"fa-solid fa-arrow-right-arrow-left\"></i> Dependencies to Transfer</div>\n                            @for (col of GetNonSurvivorColumns(); track col.ColumnIndex) {\n                                <div class=\"merge-deps-transfer-row\">\n                                    <i class=\"fa-solid fa-arrow-right\"></i>\n                                    <span>\n                                        @if (col.DepCount > 0) {\n                                            <strong>{{ col.DepCount }}</strong> {{ col.DepCount === 1 ? 'dependency' : 'dependencies' }} from <strong>{{ col.Name }}</strong> &rarr; {{ SurvivorName() }}\n                                        } @else {\n                                            <strong>0</strong> dependencies from <strong>{{ col.Name }}</strong>\n                                        }\n                                    </span>\n                                </div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Records to be deleted -->\n                    <div class=\"merge-delete-card\">\n                        <div class=\"merge-delete-label\"><i class=\"fa-solid fa-trash\"></i> Records to Delete After Merge</div>\n                        @for (col of GetNonSurvivorColumns(); track col.ColumnIndex) {\n                            <div class=\"merge-delete-item\">\n                                <span class=\"merge-delete-name\">{{ col.Name }}</span>\n                                <span class=\"merge-delete-deps\">\n                                    @if (col.DepCount > 0) {\n                                        {{ col.DepCount }} dep{{ col.DepCount !== 1 ? 's' : '' }} transferring\n                                    } @else {\n                                        no deps\n                                    }\n                                </span>\n                            </div>\n                        }\n                    </div>\n                </div>\n\n                <div class=\"merge-confirm-footer\">\n                    <button class=\"action-btn cancel-btn\" (click)=\"CloseMergeConfirm()\" [disabled]=\"IsMerging\">\n                        <i class=\"fa-solid fa-arrow-left\"></i> Back\n                    </button>\n                    <button class=\"action-btn confirm-merge-btn\" (click)=\"ExecuteMerge()\" [disabled]=\"IsMerging\">\n                        @if (IsMerging) {\n                            <i class=\"fa-solid fa-spinner fa-spin\"></i> Merging...\n                        } @else {\n                            <i class=\"fa-solid fa-code-merge\"></i> Confirm Merge ({{ GetNonSurvivorColumns().length + 1 }} records &rarr; 1)\n                        }\n                    </button>\n                </div>\n            </div>\n        </div>\n    }\n\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* ============================================================\n   Duplicate Detection Kanban Board - Resource Component Styles\n   All colors use MJ design tokens (--mj-*) exclusively.\n   ============================================================ */\n\napp-duplicate-detection-resource {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n}\n\n\n/* Entity-document select used in the [actions] slot. */\n.kh-doc-select {\n    width: auto;\n    min-width: 220px;\n    min-height: 32px;\n    padding: 4px 28px 4px 12px;\n    font-size: 0.8125rem;\n}\n\n/* ---- Detection Progress ---- */\n\n.detection-progress-section {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 8px;\n    padding: 14px 18px;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.progress-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n}\n\n.progress-stage {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\n.progress-percent {\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.progress-bar-track {\n    height: 6px;\n    border-radius: 3px;\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.progress-bar-fill {\n    height: 100%;\n    border-radius: 3px;\n    background: var(--mj-brand-primary);\n    transition: width 0.3s ease;\n}\n\n.progress-current-item {\n    display: block;\n    margin-top: 6px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* ---- Threshold Controls ---- */\n\n.threshold-controls {\n    display: flex;\n    gap: 24px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-status-info) 6%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-border-subtle);\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.threshold-slider-group {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.threshold-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n}\n\n.threshold-value {\n    margin-left: auto;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n}\n\n.threshold-slider {\n    width: 100%;\n    height: 4px;\n    appearance: none;\n    -webkit-appearance: none;\n    background: var(--mj-border-default);\n    border-radius: 2px;\n    outline: none;\n    cursor: pointer;\n}\n\n.threshold-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n\n.threshold-slider::-moz-range-thumb {\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n\n.threshold-slider:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.threshold-hint {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n/* ---- Threshold Info (legacy) ---- */\n\n.threshold-info {\n    display: flex;\n    gap: 16px;\n    padding: 8px 14px;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-status-info) 8%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-info-border);\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.threshold-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-status-info-text);\n    font-weight: 500;\n}\n\n.threshold-item i {\n    font-size: 11px;\n}\n\n/* ---- KPI Strip ---- */\n\n.kpi-strip {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.kpi-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.kpi-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.kpi-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-top: 2px;\n}\n\n.kpi-pending .kpi-value {\n    color: var(--mj-status-warning);\n}\n\n.kpi-approved .kpi-value {\n    color: var(--mj-status-success);\n}\n\n.kpi-rejected .kpi-value {\n    color: var(--mj-status-error);\n}\n\n/* ---- Filter Bar ---- */\n\n.filter-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.filter-group {\n    display: flex;\n    align-items: flex-end;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.filter-select {\n    height: 34px;\n    padding: 4px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    outline: none;\n    min-width: 160px;\n}\n\n.filter-select:focus {\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-range {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.filter-label {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.filter-input {\n    height: 34px;\n    padding: 4px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    outline: none;\n    width: 100px;\n}\n\n.filter-input-score {\n    width: 80px;\n}\n\n.filter-input-date {\n    width: 140px;\n}\n\n.filter-input:focus {\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.clear-filters-btn {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    height: 34px;\n    padding: 0 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.clear-filters-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* ---- Loading & Empty States ---- */\n\n.loading-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 1;\n    min-height: 200px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex: 1;\n    min-height: 200px;\n    gap: 8px;\n}\n\n.empty-icon {\n    font-size: 48px;\n    color: var(--mj-text-disabled);\n}\n\n.empty-text {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.empty-subtext {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    margin: 0;\n}\n\n/* ---- Kanban Board ---- */\n\n.kanban-board {\n    display: flex;\n    gap: 16px;\n    flex: 1;\n    min-height: 0;\n    overflow-x: auto;\n}\n\n.kanban-column {\n    flex: 1;\n    min-width: 280px;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.column-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n\n.column-header-pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.column-header-pending i {\n    color: var(--mj-status-warning);\n}\n\n.column-header-approved {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n}\n\n.column-header-approved i {\n    color: var(--mj-status-success);\n}\n\n.column-header-rejected {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.column-header-rejected i {\n    color: var(--mj-status-error);\n}\n\n.column-title {\n    flex: 1;\n}\n\n.column-count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 24px;\n    height: 24px;\n    padding: 0 6px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.column-body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.column-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    padding: 32px 16px;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.column-empty i {\n    font-size: 24px;\n}\n\n/* ---- Kanban Cards ---- */\n\n.kanban-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: box-shadow 0.15s ease, border-color 0.15s ease;\n    flex-shrink: 0; /* Prevent cards from shrinking \u2014 column scrolls instead */\n}\n\n.kanban-card:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n/* Drag and Drop */\n.kanban-card[draggable=\"true\"] {\n    cursor: grab;\n}\n\n.kanban-card[draggable=\"true\"]:active {\n    cursor: grabbing;\n}\n\n.drop-target-active {\n    outline: 2px dashed var(--mj-brand-primary);\n    outline-offset: -2px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface-card)) !important;\n}\n\n.drop-target-active .column-body {\n    min-height: 100px;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 10px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    gap: 8px;\n}\n\n.card-header-left {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    min-width: 0;\n    flex: 1;\n}\n\n.card-icon {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n}\n\n.card-title-block {\n    min-width: 0;\n    flex: 1;\n}\n\n.card-record-name {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin-bottom: 2px;\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 1px 6px;\n    border-radius: 3px;\n    font-size: 10px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    letter-spacing: 0.2px;\n}\n\n/* Score indicator colors */\n\n.score-indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 40px;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 700;\n}\n\n.score-high {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n    border: 1px solid var(--mj-status-success-border);\n}\n\n.score-medium {\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n    border: 1px solid var(--mj-status-warning-border);\n}\n\n.score-low {\n    background: var(--mj-status-error-bg);\n    color: var(--mj-status-error-text);\n    border: 1px solid var(--mj-status-error-border);\n}\n\n.card-body {\n    padding: 10px 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.match-summaries {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.match-summary-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.match-score {\n    flex-shrink: 0;\n    font-weight: 600;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    min-width: 30px;\n}\n\n.match-name {\n    color: var(--mj-text-secondary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.match-summary-more {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n    padding-left: 38px;\n}\n\n.card-meta-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    border-top: 1px solid var(--mj-border-subtle);\n    padding-top: 6px;\n}\n\n.card-meta-item {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.card-meta-item i {\n    font-size: 10px;\n}\n    font-size: 12px;\n    max-width: 180px;\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\n   Comparison Slide-In Panel\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 */\n\n.slide-backdrop {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 9999;\n    animation: fadeIn 0.2s ease;\n}\n\n.slide-backdrop.comparison-closing {\n    animation: fadeOut 0.25s ease forwards;\n}\n\n@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }\n\n.comparison-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 82vw;\n    max-width: 1300px;\n    background: var(--mj-bg-surface);\n    border-left: 1px solid var(--mj-border-default);\n    box-shadow: -8px 0 40px rgba(0,0,0,0.4);\n    z-index: 10000;\n    display: flex;\n    flex-direction: column;\n    animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n}\n\n.comparison-panel.comparison-closing {\n    animation: slideOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }\n@keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }\n\n/* Header */\n.comparison-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    gap: 12px;\n}\n\n.comparison-header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.comparison-entity-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 1rem;\n    flex-shrink: 0;\n}\n\n.comparison-title {\n    font-size: 1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.comparison-entity-badge {\n    display: inline-block;\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 0.65rem;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    margin-right: 6px;\n}\n\n.comparison-match-count {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.comparison-header-right {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-shrink: 0;\n}\n\n/* Toggle */\n.comparison-toggle {\n    display: flex;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 5px 12px;\n    font-size: 0.7rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n}\n\n.toggle-btn:first-child {\n    border-right: 1px solid var(--mj-border-default);\n}\n\n.toggle-btn.toggle-active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.comparison-close-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n    transition: all 0.15s ease;\n}\n\n.comparison-close-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* Loading state */\n.comparison-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Grid wrapper */\n.comparison-grid-wrapper {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n}\n\n/* Grid */\n.comparison-grid {\n    display: grid;\n    min-width: 100%;\n}\n\n.comparison-grid > div {\n    padding: 8px 12px;\n    font-size: 0.78rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    border-right: 1px solid var(--mj-border-subtle);\n}\n\n/* Corner cell */\n.grid-corner-cell {\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 4;\n    background: var(--mj-bg-surface-elevated);\n    font-size: 0.65rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-muted);\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: 6px;\n}\n\n/* Column headers */\n.grid-col-header {\n    position: sticky;\n    top: 0;\n    z-index: 3;\n    background: var(--mj-bg-surface-elevated);\n    padding: 10px 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.grid-col-source {\n    border-left: 3px solid var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface-elevated));\n}\n\n.col-header-label {\n    font-size: 0.6rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-brand-primary);\n}\n\n.col-header-top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 6px;\n}\n\n.col-header-name {\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.col-header-diff-count {\n    font-size: 0.65rem;\n    color: var(--mj-status-warning-text);\n}\n\n/* Surviving record selector */\n.surviving-selector {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n.surviving-radio {\n    appearance: none;\n    width: 14px;\n    height: 14px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.surviving-radio:checked {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-brand-primary);\n    box-shadow: inset 0 0 0 2px var(--mj-bg-surface-elevated);\n}\n\n.surviving-label {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n}\n\n.surviving-label.is-survivor {\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n/* Use all fields button */\n.use-all-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.62rem;\n    cursor: pointer;\n    transition: all 0.12s ease;\n    margin-top: 2px;\n}\n\n.use-all-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.use-all-btn.all-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n/* Per-match actions */\n.comparison-match-actions {\n    display: flex;\n    gap: 4px;\n    margin-top: 3px;\n}\n\n.action-btn-sm {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid;\n    border-radius: 5px;\n    cursor: pointer;\n    font-size: 0.65rem;\n    transition: all 0.15s ease;\n}\n\n.approve-btn-sm {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n    border-color: var(--mj-status-success-border);\n}\n.approve-btn-sm:hover { background: rgba(34,197,94,0.25); }\n\n.reject-btn-sm {\n    background: var(--mj-status-error-bg);\n    color: var(--mj-status-error-text);\n    border-color: var(--mj-status-error-border);\n}\n.reject-btn-sm:hover { background: rgba(239,68,68,0.25); }\n\n.match-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 0.68rem;\n    font-weight: 500;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.status-approved {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.status-rejected {\n    background: var(--mj-status-error-bg);\n    color: var(--mj-status-error-text);\n}\n\n.match-approval-actions {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 6px;\n}\n\n.match-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 10px;\n    border-radius: 6px;\n    font-size: 0.7rem;\n    font-weight: 500;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.match-skip-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n.match-skip-btn:hover {\n    background: var(--mj-status-error-bg);\n    border-color: var(--mj-status-error);\n}\n\n.match-undo-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n}\n\n.match-undo-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.match-approved {\n    border-top: 3px solid var(--mj-status-success);\n}\n\n.match-rejected {\n    border-top: 3px solid var(--mj-status-error);\n    opacity: 0.6;\n}\n\n/* Label cells */\n.grid-label-cell {\n    position: sticky;\n    left: 0;\n    z-index: 2;\n    background: var(--mj-bg-surface);\n    font-size: 0.72rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n}\n\n.grid-row-odd {\n    background: color-mix(in srgb, var(--mj-bg-surface-sunken) 50%, var(--mj-bg-surface));\n}\n\n.grid-label-cell.grid-row-odd {\n    background: color-mix(in srgb, var(--mj-bg-surface-sunken) 50%, var(--mj-bg-surface));\n}\n\n/* Value cells */\n.grid-value-cell {\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n    line-height: 1.45;\n    word-break: break-word;\n    position: relative;\n    cursor: pointer;\n}\n\n.grid-source-cell {\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, var(--mj-bg-surface));\n    border-left: 3px solid transparent;\n}\n\n.grid-source-cell.grid-row-odd {\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, color-mix(in srgb, var(--mj-bg-surface-sunken) 50%, var(--mj-bg-surface)));\n}\n\n.grid-source-cell.has-diff-in-row {\n    font-weight: 600;\n}\n\n/* Diff highlighting */\n.value-same {\n    color: var(--mj-text-muted);\n}\n\n.value-different {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, transparent) !important;\n    border-left: 3px solid var(--mj-status-warning);\n    color: var(--mj-text-primary);\n}\n\n.field-not-available {\n    font-style: italic;\n    font-size: 0.72rem;\n    color: var(--mj-text-disabled);\n}\n\n/* Field selection radio */\n.field-select-radio {\n    position: absolute;\n    top: 50%;\n    right: 8px;\n    transform: translateY(-50%);\n    appearance: none;\n    width: 16px;\n    height: 16px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.12s ease;\n    opacity: 0.4;\n}\n\n.field-select-radio:hover {\n    opacity: 0.8;\n}\n\n.field-select-radio:checked {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-brand-primary);\n    box-shadow: inset 0 0 0 2.5px var(--mj-bg-surface);\n    opacity: 1;\n}\n\n.grid-value-cell.field-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)) !important;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.grid-value-cell.field-selected .field-select-radio {\n    opacity: 1;\n}\n\n/* Footer */\n.comparison-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.comparison-footer-left {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.comparison-summary {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.merge-summary {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.merge-summary i {\n    font-size: 0.65rem;\n}\n\n.comparison-footer-right {\n    display: flex;\n    gap: 8px;\n}\n\n.comparison-footer-right .action-btn {\n    flex: none;\n    padding: 7px 14px;\n}\n\n.merge-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.merge-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.card-actions {\n    display: flex;\n    gap: 8px;\n    padding: 10px 12px;\n    border-top: 1px solid var(--mj-border-subtle);\n}\n\n.action-btn {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.action-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.approve-btn {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text);\n    border-color: var(--mj-status-success-border);\n}\n\n.approve-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, var(--mj-bg-surface));\n}\n\n.reject-btn {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text);\n    border-color: var(--mj-status-error-border);\n}\n\n.reject-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n/* ---- Responsive ---- */\n\n@media (max-width: 768px) {\n    .kanban-board {\n        flex-direction: column;\n    }\n\n    .kanban-column {\n        min-width: auto;\n        max-height: 400px;\n    }\n}\n\n@media (max-width: 480px) {\n    .kpi-strip {\n        flex-direction: column;\n    }\n\n    .filter-bar {\n        flex-wrap: wrap;\n    }\n\n    .filter-group {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n\n    .filter-select {\n        min-width: auto;\n        width: 100%;\n    }\n\n    .filter-input {\n        width: 100%;\n    }\n\n    .card-actions {\n        flex-direction: column;\n    }\n\n    .action-btn {\n        width: 100%;\n    }\n}\n\n/* ---- Saving Overlay ---- */\n\n.saving-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-overlay);\n    z-index: 10;\n    border-radius: 8px;\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\n   Dependencies Summary (in column headers)\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 */\n\n.deps-summary {\n    margin-top: 6px;\n    padding: 6px 8px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 0.68rem;\n}\n\n.deps-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-weight: 600;\n}\n\n.deps-header i {\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n}\n\n.deps-header:hover {\n    color: var(--mj-text-primary);\n}\n\n.deps-total {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 0.72rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin-bottom: 2px;\n}\n\n.deps-total i {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n}\n\n.deps-total-number {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    padding: 0 6px;\n    border-radius: 8px;\n    font-size: 0.7rem;\n    font-weight: 700;\n}\n\n.deps-total-recommended {\n    font-size: 0.58rem;\n    color: var(--mj-status-success-text);\n    font-weight: 600;\n    margin-left: 4px;\n}\n\n.deps-total-recommended i {\n    color: var(--mj-status-success-text);\n}\n\n.deps-detail-list {\n    margin-top: 4px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.deps-detail-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 3px 0;\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    border-radius: 3px;\n    transition: background 0.1s ease;\n}\n\n.deps-detail-row:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.deps-detail-entity {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.deps-expand-icon {\n    font-size: 0.5rem;\n    width: 10px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n/* Individual dependency records list */\n.deps-records-list {\n    padding-left: 14px;\n    margin-bottom: 2px;\n}\n\n.deps-record-row {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    padding: 2px 4px;\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    border-radius: 3px;\n    transition: color 0.1s ease, background 0.1s ease;\n}\n\n.deps-record-row:hover {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.deps-record-icon {\n    font-size: 0.5rem;\n    flex-shrink: 0;\n}\n\n.deps-record-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 0.6rem;\n}\n\n.deps-record-loading {\n    padding: 3px 4px;\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n}\n\n.deps-record-loading i {\n    margin-right: 4px;\n}\n\n.deps-detail-count {\n    color: var(--mj-text-primary);\n    font-weight: 600;\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\n   Merge Confirmation Panel\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 */\n\n.merge-confirm-backdrop {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 20000;\n    animation: fadeIn 0.2s ease;\n}\n\n.merge-confirm-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 520px;\n    background: var(--mj-bg-surface);\n    border-left: 1px solid var(--mj-border-default);\n    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);\n    z-index: 20001;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.merge-confirm-header {\n    padding: 18px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.merge-confirm-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text);\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.merge-confirm-title {\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.merge-confirm-subtitle {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.merge-confirm-body {\n    padding: 20px 24px;\n    overflow-y: auto;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Surviving record card */\n\n.merge-survivor-card {\n    padding: 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 8px;\n}\n\n.merge-survivor-label {\n    font-size: 0.65rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-brand-primary);\n    margin-bottom: 4px;\n}\n\n.merge-survivor-label i {\n    margin-right: 4px;\n}\n\n.merge-survivor-name {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.merge-survivor-pk {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 4px;\n    padding: 4px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 4px;\n    font-size: 0.68rem;\n    font-family: monospace;\n    color: var(--mj-text-secondary);\n}\n\n.merge-survivor-pk i {\n    font-size: 0.6rem;\n    color: var(--mj-brand-primary);\n}\n\n.merge-survivor-detail {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* Cherry-picked fields section */\n\n.merge-section-label {\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-bottom: 6px;\n}\n\n.merge-field-override {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 0.78rem;\n}\n\n.merge-field-name {\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    min-width: 110px;\n    flex-shrink: 0;\n}\n\n.merge-field-value {\n    color: var(--mj-text-primary);\n}\n\n.merge-field-source {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n    margin-left: auto;\n    white-space: nowrap;\n}\n\n/* Dependency transfer summary */\n\n.merge-deps-transfer {\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.merge-deps-transfer-label {\n    font-size: 0.65rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--mj-brand-primary);\n    margin-bottom: 6px;\n}\n\n.merge-deps-transfer-label i {\n    margin-right: 4px;\n}\n\n.merge-deps-transfer-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 3px 0;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.merge-deps-transfer-row i {\n    color: var(--mj-brand-primary);\n    font-size: 0.65rem;\n    width: 14px;\n    text-align: center;\n}\n\n/* Records to delete */\n\n.merge-delete-card {\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 8px;\n}\n\n.merge-delete-label {\n    font-size: 0.65rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--mj-status-error-text);\n    margin-bottom: 6px;\n}\n\n.merge-delete-label i {\n    margin-right: 4px;\n}\n\n.merge-delete-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 0;\n    font-size: 0.78rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.merge-delete-item:last-child {\n    border-bottom: none;\n}\n\n.merge-delete-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.merge-delete-deps {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n}\n\n/* Confirm footer */\n\n.merge-confirm-footer {\n    padding: 14px 24px;\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 10px;\n}\n\n.cancel-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.cancel-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.confirm-merge-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.confirm-merge-btn:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.confirm-merge-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n/* ---- Responsive: Merge Confirm ---- */\n\n@media (max-width: 600px) {\n    .merge-confirm-panel {\n        width: 100%;\n    }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550 Merge Disabled Hint \u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.merge-disabled-hint {\n    font-size: 11.5px;\n    color: var(--mj-status-warning-text, #e65100);\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    margin-left: 4px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550 Merge Warning Banner (inline, non-blocking) \u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.merge-warning-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    margin-bottom: 12px;\n    border-radius: 6px;\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n    border: 1px solid var(--mj-status-warning-border);\n    font-size: 13px;\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.merge-warning-banner i {\n    font-size: 14px;\n    flex-shrink: 0;\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-duplicate-detection-resource', encapsulation: ViewEncapsulation.None, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Record Duplicates\"\n    Icon=\"fa-solid fa-clone\"\n    Subtitle=\"Find and merge near-duplicate entity records using semantic similarity\">\n    <div actions>\n      <select class=\"mj-input kh-doc-select\"\n              [(ngModel)]=\"SelectedEntityDocumentID\"\n              [disabled]=\"IsDetecting\">\n          <option value=\"\">Select entity document\u2026</option>\n          @for (doc of EntityDocuments; track doc.ID) {\n              <option [value]=\"doc.ID\">{{ doc.Name }} ({{ doc.EntityName }})</option>\n          }\n      </select>\n      <button mjButton variant=\"primary\" size=\"sm\"\n              (click)=\"RunDetection()\"\n              [disabled]=\"IsDetecting || !SelectedEntityDocumentID\">\n          @if (IsDetecting) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> <span class=\"action-btn-label\">Detecting\u2026</span>\n          } @else {\n              <i class=\"fa-solid fa-magnifying-glass\"></i> <span class=\"action-btn-label\">Run Detection</span>\n          }\n      </button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\">\n    <!-- Detection Progress (visible during run) -->\n    @if (IsDetecting) {\n        <div class=\"detection-progress-section\">\n            <div class=\"progress-header\">\n                <span class=\"progress-stage\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    {{ DetectionStage }}\n                </span>\n                <span class=\"progress-percent\">{{ DetectionProgress }}%</span>\n            </div>\n            <div class=\"progress-bar-track\">\n                <div class=\"progress-bar-fill\" [style.width.%]=\"DetectionProgress\"></div>\n            </div>\n            @if (DetectionCurrentItem) {\n                <span class=\"progress-current-item\">{{ DetectionCurrentItem }}</span>\n            }\n        </div>\n    }\n\n    <!-- Threshold Controls (when entity doc selected) -->\n    @if (SelectedDocumentThresholds) {\n        <div class=\"threshold-controls\">\n            <div class=\"threshold-slider-group\">\n                <label class=\"threshold-label\">\n                    <i class=\"fa-solid fa-adjust\"></i>\n                    Potential Match\n                    <span class=\"threshold-value\">{{ (RunPotentialThreshold * 100).toFixed(0) }}%</span>\n                </label>\n                <input type=\"range\" class=\"threshold-slider\"\n                    [min]=\"30\" [max]=\"99\" [step]=\"1\"\n                    [value]=\"RunPotentialThreshold * 100\"\n                    (input)=\"OnPotentialThresholdChanged($any($event.target).value / 100)\"\n                    [disabled]=\"IsDetecting\" />\n                <span class=\"threshold-hint\">Score above which duplicates are flagged for review</span>\n            </div>\n            <div class=\"threshold-slider-group\">\n                <label class=\"threshold-label\">\n                    <i class=\"fa-solid fa-bullseye\"></i>\n                    Absolute Match\n                    <span class=\"threshold-value\">{{ (RunAbsoluteThreshold * 100).toFixed(0) }}%</span>\n                </label>\n                <input type=\"range\" class=\"threshold-slider\"\n                    [min]=\"50\" [max]=\"100\" [step]=\"1\"\n                    [value]=\"RunAbsoluteThreshold * 100\"\n                    (input)=\"OnAbsoluteThresholdChanged($any($event.target).value / 100)\"\n                    [disabled]=\"IsDetecting\" />\n                <span class=\"threshold-hint\">Score above which duplicates are auto-confirmed</span>\n            </div>\n        </div>\n    }\n\n    <!-- KPI Strip -->\n    <div class=\"kpi-strip\">\n        <div class=\"kpi-card\">\n            <div class=\"kpi-value\">{{ TotalGroupCount }}</div>\n            <div class=\"kpi-label\">Total Groups</div>\n        </div>\n        <div class=\"kpi-card kpi-pending\">\n            <div class=\"kpi-value\">{{ PendingCount }}</div>\n            <div class=\"kpi-label\">Pending</div>\n        </div>\n        <div class=\"kpi-card kpi-approved\">\n            <div class=\"kpi-value\">{{ ApprovedCount }}</div>\n            <div class=\"kpi-label\">Approved</div>\n        </div>\n        <div class=\"kpi-card kpi-rejected\">\n            <div class=\"kpi-value\">{{ RejectedCount }}</div>\n            <div class=\"kpi-label\">Rejected</div>\n        </div>\n    </div>\n\n    <!-- Filter Bar -->\n    <div class=\"filter-bar\">\n        <div class=\"filter-group\">\n            <select class=\"filter-select\"\n                    [(ngModel)]=\"Filters.EntityName\"\n                    (ngModelChange)=\"OnFilterChange()\"\n                    [disabled]=\"EntityNames.length <= 1\">\n                @if (EntityNames.length > 1) {\n                    <option value=\"\">All Entities</option>\n                }\n                @for (name of EntityNames; track name) {\n                    <option [value]=\"name\">{{ name }}</option>\n                }\n            </select>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">Min Score</label>\n                <input type=\"number\"\n                       class=\"filter-input filter-input-score\"\n                       min=\"0\" max=\"1\" step=\"0.05\"\n                       [placeholder]=\"DataMinScore\"\n                       [(ngModel)]=\"Filters.MinScore\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">Max Score</label>\n                <input type=\"number\"\n                       class=\"filter-input filter-input-score\"\n                       min=\"0\" max=\"1\" step=\"0.05\"\n                       [placeholder]=\"DataMaxScore\"\n                       [(ngModel)]=\"Filters.MaxScore\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">From</label>\n                <input type=\"date\"\n                       class=\"filter-input filter-input-date\"\n                       [min]=\"DataMinDate\" [max]=\"DataMaxDate\"\n                       [(ngModel)]=\"Filters.DateFrom\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n\n            <div class=\"filter-range\">\n                <label class=\"filter-label\">To</label>\n                <input type=\"date\"\n                       class=\"filter-input filter-input-date\"\n                       [min]=\"DataMinDate\" [max]=\"DataMaxDate\"\n                       [(ngModel)]=\"Filters.DateTo\"\n                       (ngModelChange)=\"OnFilterChange()\">\n            </div>\n        </div>\n\n        @if (HasActiveFilters) {\n            <button class=\"clear-filters-btn\" (click)=\"ClearFilters()\">\n                <i class=\"fa-solid fa-times\"></i> Clear Filters\n            </button>\n        }\n    </div>\n\n    <!-- Merge Warning Banner (non-blocking, shown when entity lacks AllowRecordMerge) -->\n    @if (ShowMergeWarningBanner) {\n        <div class=\"merge-warning-banner\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            Merging is not available for this entity. Detection results are read-only.\n        </div>\n    }\n\n    <!-- Content -->\n    @if (IsLoading) {\n        <div class=\"loading-container\">\n            <mj-loading text=\"Loading duplicate detection results...\"></mj-loading>\n        </div>\n    } @else if (IsLoadingResults) {\n        <div class=\"loading-container\">\n            <mj-loading text=\"Loading duplicate detection results...\"></mj-loading>\n        </div>\n    } @else if (TotalGroupCount === 0) {\n        <div class=\"empty-state\">\n            <i class=\"fa-solid fa-clone empty-icon\"></i>\n            <p class=\"empty-text\">No duplicate detection results found.</p>\n            <p class=\"empty-subtext\">Select an entity document and click \"Run Detection\" to start.</p>\n        </div>\n    } @else {\n        <!-- Kanban Board -->\n        <div class=\"kanban-board\">\n            <!-- Pending Column -->\n            <div class=\"kanban-column\" [class.drop-target-active]=\"DragOverColumn === 'Pending' && DraggedGroup?.ApprovalStatus !== 'Pending'\">\n                <div class=\"column-header column-header-pending\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"column-title\">Pending Review</span>\n                    <span class=\"column-count\">{{ PendingCount }}</span>\n                </div>\n                <div class=\"column-body\"\n                     (dragover)=\"OnDragOver($event, 'Pending')\"\n                     (dragleave)=\"OnDragLeave($event, 'Pending')\"\n                     (drop)=\"OnDrop($event, 'Pending')\">\n                    @for (group of PendingGroups; track group.DetailId) {\n                        <div class=\"kanban-card\"\n                             draggable=\"true\"\n                             (dragstart)=\"OnDragStart($event, group)\"\n                             (dragend)=\"OnDragEnd()\"\n                             (click)=\"OpenComparison(group)\">\n                            <div class=\"card-header\">\n                                <div class=\"card-header-left\">\n                                    <div class=\"card-icon\">\n                                        <i [class]=\"group.EntityIcon\"></i>\n                                    </div>\n                                    <div class=\"card-title-block\">\n                                        <div class=\"card-record-name\" [title]=\"group.RecordName\">{{ group.RecordName }}</div>\n                                        <span class=\"entity-badge\">{{ group.EntityName }}</span>\n                                    </div>\n                                </div>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(group.HighestScore)\">\n                                    {{ (group.HighestScore * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <div class=\"card-body\">\n                                @if (group.TopMatchSummaries.length > 0) {\n                                    <div class=\"match-summaries\">\n                                        @for (ms of group.TopMatchSummaries; track ms.Name) {\n                                            <div class=\"match-summary-row\">\n                                                <span class=\"match-score\">{{ (ms.Score * 100).toFixed(0) }}%</span>\n                                                <span class=\"match-name\">{{ ms.Name }}</span>\n                                            </div>\n                                        }\n                                        @if (group.MatchCount > group.TopMatchSummaries.length) {\n                                            <div class=\"match-summary-more\">+{{ group.MatchCount - group.TopMatchSummaries.length }} more</div>\n                                        }\n                                    </div>\n                                }\n                                <div class=\"card-meta-row\">\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-layer-group\"></i>\n                                        {{ group.MatchCount }} match{{ group.MatchCount !== 1 ? 'es' : '' }}\n                                    </span>\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-calendar\"></i>\n                                        {{ FormatDate(group.MatchedAt) }}\n                                    </span>\n                                </div>\n                            </div>\n                            <div class=\"card-actions\">\n                                <button class=\"action-btn approve-btn\"\n                                        [disabled]=\"IsSaving\"\n                                        (click)=\"ApproveMatch(group); $event.stopPropagation()\">\n                                    <i class=\"fa-solid fa-check\"></i> Approve\n                                </button>\n                                <button class=\"action-btn reject-btn\"\n                                        [disabled]=\"IsSaving\"\n                                        (click)=\"RejectMatch(group); $event.stopPropagation()\">\n                                    <i class=\"fa-solid fa-times\"></i> Reject\n                                </button>\n                            </div>\n                        </div>\n                    }\n                    @if (PendingGroups.length === 0) {\n                        <div class=\"column-empty\">\n                            <i class=\"fa-solid fa-check-circle\"></i>\n                            <span>No pending items</span>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <!-- Approved Column -->\n            <div class=\"kanban-column\" [class.drop-target-active]=\"DragOverColumn === 'Approved' && DraggedGroup?.ApprovalStatus !== 'Approved'\">\n                <div class=\"column-header column-header-approved\">\n                    <i class=\"fa-solid fa-check-circle\"></i>\n                    <span class=\"column-title\">Approved</span>\n                    <span class=\"column-count\">{{ ApprovedCount }}</span>\n                </div>\n                <div class=\"column-body\"\n                     (dragover)=\"OnDragOver($event, 'Approved')\"\n                     (dragleave)=\"OnDragLeave($event, 'Approved')\"\n                     (drop)=\"OnDrop($event, 'Approved')\">\n                    @for (group of ApprovedGroups; track group.DetailId) {\n                        <div class=\"kanban-card\"\n                             draggable=\"true\"\n                             (dragstart)=\"OnDragStart($event, group)\"\n                             (dragend)=\"OnDragEnd()\"\n                             (click)=\"OpenComparison(group)\">\n                            <div class=\"card-header\">\n                                <div class=\"card-header-left\">\n                                    <div class=\"card-icon\">\n                                        <i [class]=\"group.EntityIcon\"></i>\n                                    </div>\n                                    <div class=\"card-title-block\">\n                                        <div class=\"card-record-name\" [title]=\"group.RecordName\">{{ group.RecordName }}</div>\n                                        <span class=\"entity-badge\">{{ group.EntityName }}</span>\n                                    </div>\n                                </div>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(group.HighestScore)\">\n                                    {{ (group.HighestScore * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <div class=\"card-body\">\n                                @if (group.TopMatchSummaries.length > 0) {\n                                    <div class=\"match-summaries\">\n                                        @for (ms of group.TopMatchSummaries; track ms.Name) {\n                                            <div class=\"match-summary-row\">\n                                                <span class=\"match-score\">{{ (ms.Score * 100).toFixed(0) }}%</span>\n                                                <span class=\"match-name\">{{ ms.Name }}</span>\n                                            </div>\n                                        }\n                                        @if (group.MatchCount > group.TopMatchSummaries.length) {\n                                            <div class=\"match-summary-more\">+{{ group.MatchCount - group.TopMatchSummaries.length }} more</div>\n                                        }\n                                    </div>\n                                }\n                                <div class=\"card-meta-row\">\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-layer-group\"></i>\n                                        {{ group.MatchCount }} match{{ group.MatchCount !== 1 ? 'es' : '' }}\n                                    </span>\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-calendar\"></i>\n                                        {{ FormatDate(group.MatchedAt) }}\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                    @if (ApprovedGroups.length === 0) {\n                        <div class=\"column-empty\">\n                            <i class=\"fa-solid fa-inbox\"></i>\n                            <span>No approved items</span>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <!-- Rejected Column -->\n            <div class=\"kanban-column\" [class.drop-target-active]=\"DragOverColumn === 'Rejected' && DraggedGroup?.ApprovalStatus !== 'Rejected'\">\n                <div class=\"column-header column-header-rejected\">\n                    <i class=\"fa-solid fa-ban\"></i>\n                    <span class=\"column-title\">Rejected</span>\n                    <span class=\"column-count\">{{ RejectedCount }}</span>\n                </div>\n                <div class=\"column-body\"\n                     (dragover)=\"OnDragOver($event, 'Rejected')\"\n                     (dragleave)=\"OnDragLeave($event, 'Rejected')\"\n                     (drop)=\"OnDrop($event, 'Rejected')\">\n                    @for (group of RejectedGroups; track group.DetailId) {\n                        <div class=\"kanban-card\"\n                             draggable=\"true\"\n                             (dragstart)=\"OnDragStart($event, group)\"\n                             (dragend)=\"OnDragEnd()\"\n                             (click)=\"OpenComparison(group)\">\n                            <div class=\"card-header\">\n                                <div class=\"card-header-left\">\n                                    <div class=\"card-icon\">\n                                        <i [class]=\"group.EntityIcon\"></i>\n                                    </div>\n                                    <div class=\"card-title-block\">\n                                        <div class=\"card-record-name\" [title]=\"group.RecordName\">{{ group.RecordName }}</div>\n                                        <span class=\"entity-badge\">{{ group.EntityName }}</span>\n                                    </div>\n                                </div>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(group.HighestScore)\">\n                                    {{ (group.HighestScore * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <div class=\"card-body\">\n                                @if (group.TopMatchSummaries.length > 0) {\n                                    <div class=\"match-summaries\">\n                                        @for (ms of group.TopMatchSummaries; track ms.Name) {\n                                            <div class=\"match-summary-row\">\n                                                <span class=\"match-score\">{{ (ms.Score * 100).toFixed(0) }}%</span>\n                                                <span class=\"match-name\">{{ ms.Name }}</span>\n                                            </div>\n                                        }\n                                        @if (group.MatchCount > group.TopMatchSummaries.length) {\n                                            <div class=\"match-summary-more\">+{{ group.MatchCount - group.TopMatchSummaries.length }} more</div>\n                                        }\n                                    </div>\n                                }\n                                <div class=\"card-meta-row\">\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-layer-group\"></i>\n                                        {{ group.MatchCount }} match{{ group.MatchCount !== 1 ? 'es' : '' }}\n                                    </span>\n                                    <span class=\"card-meta-item\">\n                                        <i class=\"fa-solid fa-calendar\"></i>\n                                        {{ FormatDate(group.MatchedAt) }}\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                    @if (RejectedGroups.length === 0) {\n                        <div class=\"column-empty\">\n                            <i class=\"fa-solid fa-inbox\"></i>\n                            <span>No rejected items</span>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n\n    <!-- Saving overlay -->\n    @if (IsSaving) {\n        <div class=\"saving-overlay\">\n            <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n        </div>\n    }\n\n    <!-- \u2550\u2550\u2550 Comparison Slide-In Panel \u2550\u2550\u2550 -->\n    @if (ComparisonGroup) {\n        <div class=\"slide-backdrop\" [class.comparison-closing]=\"ComparisonClosing\" (click)=\"CloseComparison()\"></div>\n        <div class=\"comparison-panel\" [class.comparison-closing]=\"ComparisonClosing\" (click)=\"$event.stopPropagation()\">\n            <!-- Header -->\n            <div class=\"comparison-header\">\n                <div class=\"comparison-header-left\">\n                    <div class=\"comparison-entity-icon\">\n                        <i [class]=\"ComparisonGroup.EntityIcon\"></i>\n                    </div>\n                    <div>\n                        <div class=\"comparison-title\">{{ ComparisonGroup.RecordName }}</div>\n                        <span class=\"comparison-entity-badge\">{{ ComparisonGroup.EntityName }}</span>\n                        <span class=\"comparison-match-count\">\n                            {{ ComparisonGroup.MatchCount }} potential duplicate{{ ComparisonGroup.MatchCount !== 1 ? 's' : '' }}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"comparison-header-right\">\n                    <div class=\"comparison-toggle\">\n                        <button class=\"toggle-btn\" [class.toggle-active]=\"ComparisonShowAllFields\"\n                                (click)=\"ComparisonShowAllFields = true\">All Fields</button>\n                        <button class=\"toggle-btn\" [class.toggle-active]=\"!ComparisonShowAllFields\"\n                                (click)=\"ComparisonShowAllFields = false\">Differences Only</button>\n                    </div>\n                    <button class=\"comparison-close-btn\" (click)=\"CloseComparison()\" title=\"Close (Esc)\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n            </div>\n\n            <!-- Grid -->\n            @if (ComparisonLoading) {\n                <div class=\"comparison-loading\">\n                    <mj-loading text=\"Loading records for comparison...\" size=\"medium\"></mj-loading>\n                </div>\n            }\n            <div class=\"comparison-grid-wrapper\" [hidden]=\"ComparisonLoading\">\n                <div class=\"comparison-grid\"\n                     [style.grid-template-columns]=\"'160px repeat(' + (1 + ComparisonMatches.length) + ', minmax(180px, 1fr))'\">\n\n                    <!-- Corner cell -->\n                    <div class=\"grid-corner-cell\">Field</div>\n\n                    <!-- Source column header -->\n                    <div class=\"grid-col-header grid-col-source\">\n                        <span class=\"col-header-label\">Source</span>\n                        <span class=\"col-header-name\">{{ ComparisonGroup.RecordName }}</span>\n                        <div class=\"surviving-selector\">\n                            <input type=\"radio\" name=\"survivor\" class=\"surviving-radio\"\n                                   [checked]=\"SurvivorColumnIndex === 0\"\n                                   (change)=\"SetSurvivor(0)\">\n                            <span class=\"surviving-label\" [class.is-survivor]=\"SurvivorColumnIndex === 0\">\n                                {{ SurvivorColumnIndex === 0 ? 'Surviving Record' : 'Set as survivor' }}\n                            </span>\n                        </div>\n                        <button class=\"use-all-btn\" [class.all-selected]=\"AllFieldsSelectedFrom(0)\"\n                                (click)=\"UseAllFieldsFrom(0)\">\n                            <i class=\"fa-solid\" [class.fa-check-double]=\"AllFieldsSelectedFrom(0)\" [class.fa-clone]=\"!AllFieldsSelectedFrom(0)\"></i>\n                            {{ AllFieldsSelectedFrom(0) ? 'Using all fields' : 'Use all fields' }}\n                        </button>\n                        <!-- Dependencies Summary -->\n                        <div class=\"deps-summary\">\n                            <div class=\"deps-total\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                <span class=\"deps-total-number\">{{ GetTotalDeps(0) }}</span>\n                                {{ GetTotalDeps(0) === 1 ? 'dependency' : 'dependencies' }}\n                                @if (GetMaxDepsColumnIndex() === 0 && GetTotalDeps(0) > 0) {\n                                    <span class=\"deps-total-recommended\"><i class=\"fa-solid fa-star\"></i> Most deps</span>\n                                }\n                            </div>\n                            @if (GetGroupedDeps(0).length > 0) {\n                                <div class=\"deps-header\" (click)=\"ToggleDepsExpanded(0)\">\n                                    <span>{{ IsDepsExpanded(0) ? 'Hide details' : 'Show details' }}</span>\n                                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!IsDepsExpanded(0)\" [class.fa-chevron-up]=\"IsDepsExpanded(0)\"></i>\n                                </div>\n                                @if (IsDepsExpanded(0)) {\n                                    <div class=\"deps-detail-list\">\n                                        @for (dep of GetGroupedDeps(0); track dep.Entity) {\n                                            <div class=\"deps-detail-group\">\n                                                <div class=\"deps-detail-row\" (click)=\"ToggleDepEntityGroup(0, dep.Entity); $event.stopPropagation()\">\n                                                    <span class=\"deps-detail-entity\">\n                                                        <i class=\"fa-solid deps-expand-icon\"\n                                                           [class.fa-chevron-right]=\"!IsDepEntityGroupExpanded(0, dep.Entity)\"\n                                                           [class.fa-chevron-down]=\"IsDepEntityGroupExpanded(0, dep.Entity)\"></i>\n                                                        {{ dep.Entity }}\n                                                    </span>\n                                                    <span class=\"deps-detail-count\">{{ dep.Count }}</span>\n                                                </div>\n                                                @if (IsDepEntityGroupExpanded(0, dep.Entity)) {\n                                                    <div class=\"deps-records-list\">\n                                                        @if (IsDepRecordsLoading(0, dep.Entity)) {\n                                                            <div class=\"deps-record-loading\"><i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...</div>\n                                                        }\n                                                        @for (record of GetDepRecords(0, dep.Entity); track $index) {\n                                                            <div class=\"deps-record-row\" (click)=\"OpenDepRecord(record); $event.stopPropagation()\">\n                                                                <i class=\"fa-solid fa-arrow-up-right-from-square deps-record-icon\"></i>\n                                                                <span class=\"deps-record-name\">{{ record.Name }}</span>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </div>\n\n                    <!-- Match column headers -->\n                    @for (match of ComparisonMatches; track match.Match.ID; let mi = $index) {\n                        <div class=\"grid-col-header\"\n                             [class.match-approved]=\"match.Match.ApprovalStatus === 'Approved'\"\n                             [class.match-rejected]=\"match.Match.ApprovalStatus === 'Rejected'\">\n                            <div class=\"col-header-top\">\n                                <span class=\"col-header-name\">{{ match.Name }}</span>\n                                <span class=\"score-indicator\" [class]=\"GetScoreClass(match.Score)\">\n                                    {{ (match.Score * 100).toFixed(0) }}%\n                                </span>\n                            </div>\n                            <span class=\"col-header-diff-count\">{{ match.DiffCount }} difference{{ match.DiffCount !== 1 ? 's' : '' }}</span>\n                            <div class=\"surviving-selector\">\n                                <input type=\"radio\" name=\"survivor\" class=\"surviving-radio\"\n                                       [checked]=\"SurvivorColumnIndex === mi + 1\"\n                                       (change)=\"SetSurvivor(mi + 1)\">\n                                <span class=\"surviving-label\" [class.is-survivor]=\"SurvivorColumnIndex === mi + 1\">\n                                    {{ SurvivorColumnIndex === mi + 1 ? 'Surviving Record' : 'Set as survivor' }}\n                                </span>\n                            </div>\n                            <button class=\"use-all-btn\" [class.all-selected]=\"AllFieldsSelectedFrom(mi + 1)\"\n                                    (click)=\"UseAllFieldsFrom(mi + 1)\">\n                                <i class=\"fa-solid\" [class.fa-check-double]=\"AllFieldsSelectedFrom(mi + 1)\" [class.fa-clone]=\"!AllFieldsSelectedFrom(mi + 1)\"></i>\n                                {{ AllFieldsSelectedFrom(mi + 1) ? 'Using all fields' : 'Use all fields' }}\n                            </button>\n                            <!-- Dependencies Summary -->\n                            <div class=\"deps-summary\">\n                                <div class=\"deps-total\">\n                                    <i class=\"fa-solid fa-link\"></i>\n                                    <span class=\"deps-total-number\">{{ GetTotalDeps(mi + 1) }}</span>\n                                    {{ GetTotalDeps(mi + 1) === 1 ? 'dependency' : 'dependencies' }}\n                                    @if (GetMaxDepsColumnIndex() === mi + 1 && GetTotalDeps(mi + 1) > 0) {\n                                        <span class=\"deps-total-recommended\"><i class=\"fa-solid fa-star\"></i> Most deps</span>\n                                    }\n                                </div>\n                                @if (GetGroupedDeps(mi + 1).length > 0) {\n                                    <div class=\"deps-header\" (click)=\"ToggleDepsExpanded(mi + 1)\">\n                                        <span>{{ IsDepsExpanded(mi + 1) ? 'Hide details' : 'Show details' }}</span>\n                                        <i class=\"fa-solid\" [class.fa-chevron-down]=\"!IsDepsExpanded(mi + 1)\" [class.fa-chevron-up]=\"IsDepsExpanded(mi + 1)\"></i>\n                                    </div>\n                                    @if (IsDepsExpanded(mi + 1)) {\n                                        <div class=\"deps-detail-list\">\n                                            @for (dep of GetGroupedDeps(mi + 1); track dep.Entity) {\n                                                <div class=\"deps-detail-group\">\n                                                    <div class=\"deps-detail-row\" (click)=\"ToggleDepEntityGroup(mi + 1, dep.Entity); $event.stopPropagation()\">\n                                                        <span class=\"deps-detail-entity\">\n                                                            <i class=\"fa-solid deps-expand-icon\"\n                                                               [class.fa-chevron-right]=\"!IsDepEntityGroupExpanded(mi + 1, dep.Entity)\"\n                                                               [class.fa-chevron-down]=\"IsDepEntityGroupExpanded(mi + 1, dep.Entity)\"></i>\n                                                            {{ dep.Entity }}\n                                                        </span>\n                                                        <span class=\"deps-detail-count\">{{ dep.Count }}</span>\n                                                    </div>\n                                                    @if (IsDepEntityGroupExpanded(mi + 1, dep.Entity)) {\n                                                        <div class=\"deps-records-list\">\n                                                            @if (IsDepRecordsLoading(mi + 1, dep.Entity)) {\n                                                                <div class=\"deps-record-loading\"><i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...</div>\n                                                            }\n                                                            @for (record of GetDepRecords(mi + 1, dep.Entity); track $index) {\n                                                                <div class=\"deps-record-row\" (click)=\"OpenDepRecord(record); $event.stopPropagation()\">\n                                                                    <i class=\"fa-solid fa-arrow-up-right-from-square deps-record-icon\"></i>\n                                                                    <span class=\"deps-record-name\">{{ record.Name }}</span>\n                                                                </div>\n                                                            }\n                                                        </div>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                }\n                            </div>\n                            <!-- Per-match approval actions -->\n                            <div class=\"match-approval-actions\">\n                                @if (match.Match.ApprovalStatus === 'Pending') {\n                                    <button class=\"match-action-btn match-skip-btn\"\n                                            title=\"Skip this match (exclude from merge)\"\n                                            (click)=\"RejectIndividualMatch(match)\">\n                                        <i class=\"fa-solid fa-ban\"></i> Skip\n                                    </button>\n                                } @else {\n                                    <span class=\"match-status-badge\"\n                                          [class.status-approved]=\"match.Match.ApprovalStatus === 'Approved'\"\n                                          [class.status-rejected]=\"match.Match.ApprovalStatus === 'Rejected'\">\n                                        <i class=\"fa-solid\" [class.fa-check]=\"match.Match.ApprovalStatus === 'Approved'\"\n                                           [class.fa-times]=\"match.Match.ApprovalStatus === 'Rejected'\"></i>\n                                        {{ match.Match.ApprovalStatus === 'Rejected' ? 'Skipped' : match.Match.ApprovalStatus }}\n                                    </span>\n                                    @if (match.Match.ApprovalStatus === 'Rejected') {\n                                        <button class=\"match-action-btn match-undo-btn\"\n                                                title=\"Undo skip\"\n                                                (click)=\"UndoRejectIndividualMatch(match)\">\n                                            <i class=\"fa-solid fa-undo\"></i> Undo\n                                        </button>\n                                    }\n                                }\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Field rows -->\n                    @for (field of GetVisibleFields(); track field.FieldName; let odd = $odd) {\n                        <!-- Label cell -->\n                        <div class=\"grid-label-cell\" [class.grid-row-odd]=\"odd\">\n                            {{ field.DisplayName }}\n                        </div>\n                        <!-- Source value cell -->\n                        <div class=\"grid-value-cell grid-source-cell\"\n                             [class.grid-row-odd]=\"odd\"\n                             [class.has-diff-in-row]=\"field.HasDifference\"\n                             [class.field-selected]=\"field.SelectedColumnIndex === 0\"\n                             (click)=\"SelectFieldValue(field, 0)\">\n                            @if (field.SourceValue != null) {\n                                {{ field.SourceValue }}\n                            } @else {\n                                <span class=\"field-not-available\">(not available)</span>\n                            }\n                            @if (field.HasDifference || field.SelectedColumnIndex === 0) {\n                                <input type=\"radio\" [name]=\"'field-' + field.FieldName\" class=\"field-select-radio\"\n                                       [checked]=\"field.SelectedColumnIndex === 0\"\n                                       (click)=\"$event.stopPropagation()\"\n                                       (change)=\"SelectFieldValue(field, 0)\">\n                            }\n                        </div>\n                        <!-- Match value cells -->\n                        @for (matchVal of field.MatchValues; track $index; let mi = $index) {\n                            <div class=\"grid-value-cell\"\n                                 [class.grid-row-odd]=\"odd\"\n                                 [class.value-same]=\"AreValuesEqual(field.SourceValue, matchVal)\"\n                                 [class.value-different]=\"matchVal != null && field.SourceValue != null && !AreValuesEqual(field.SourceValue, matchVal)\"\n                                 [class.field-selected]=\"field.SelectedColumnIndex === mi + 1\"\n                                 (click)=\"matchVal != null ? SelectFieldValue(field, mi + 1) : null\">\n                                @if (matchVal != null) {\n                                    {{ matchVal }}\n                                    @if (field.HasDifference || field.SelectedColumnIndex === mi + 1) {\n                                        <input type=\"radio\" [name]=\"'field-' + field.FieldName\" class=\"field-select-radio\"\n                                               [checked]=\"field.SelectedColumnIndex === mi + 1\"\n                                               (click)=\"$event.stopPropagation()\"\n                                               (change)=\"SelectFieldValue(field, mi + 1)\">\n                                    }\n                                } @else {\n                                    <span class=\"field-not-available\">(not available)</span>\n                                }\n                            </div>\n                        }\n                    }\n                </div>\n            </div>\n\n            <!-- Footer -->\n            <div class=\"comparison-footer\">\n                <div class=\"comparison-footer-left\">\n                    <span class=\"comparison-summary\">\n                        Showing {{ GetVisibleFields().length }} of {{ ComparisonFields.length }} fields\n                    </span>\n                    <span class=\"merge-summary\">\n                        <i class=\"fa-solid fa-code-merge\"></i>\n                        Surviving: <strong>{{ SurvivorName() }}</strong>\n                        @if (CherryPickedCount() > 0) {\n                            &middot; {{ CherryPickedCount() }} field{{ CherryPickedCount() !== 1 ? 's' : '' }} cherry-picked\n                        }\n                    </span>\n                </div>\n                <div class=\"comparison-footer-right\">\n                    <button class=\"action-btn reject-btn\" [disabled]=\"IsSaving\"\n                            (click)=\"RejectMatch(ComparisonGroup!); CloseComparison()\">\n                        <i class=\"fa-solid fa-times\"></i> Reject All\n                    </button>\n                    <button class=\"action-btn merge-btn\" [disabled]=\"IsSaving || !HasMergeableMatches || !MergeEnabled\"\n                            (click)=\"OpenMergeConfirm()\"\n                            [title]=\"!MergeEnabled ? 'Merging is not enabled for this entity' : HasMergeableMatches ? 'Merge non-skipped records' : 'All matches have been skipped'\">\n                        <i class=\"fa-solid fa-code-merge\"></i> Merge Records\n                    </button>\n                    @if (!MergeEnabled) {\n                        <span class=\"merge-disabled-hint\"><i class=\"fa-solid fa-info-circle\"></i> Merging disabled for this entity</span>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n\n    <!-- \u2550\u2550\u2550 Merge Confirmation Panel \u2550\u2550\u2550 -->\n    @if (ShowMergeConfirm && ComparisonGroup) {\n        <div class=\"merge-confirm-backdrop\" (click)=\"CloseMergeConfirm()\">\n            <div class=\"merge-confirm-panel\" (click)=\"$event.stopPropagation()\">\n                <div class=\"merge-confirm-header\">\n                    <div class=\"merge-confirm-icon\"><i class=\"fa-solid fa-code-merge\"></i></div>\n                    <div>\n                        <div class=\"merge-confirm-title\">Confirm Record Merge</div>\n                        <div class=\"merge-confirm-subtitle\">This action cannot be undone. Please review carefully.</div>\n                    </div>\n                </div>\n\n                <div class=\"merge-confirm-body\">\n                    <!-- Surviving Record -->\n                    <div class=\"merge-survivor-card\">\n                        <div class=\"merge-survivor-label\"><i class=\"fa-solid fa-shield-halved\"></i> Surviving Record</div>\n                        <div class=\"merge-survivor-name\">{{ SurvivorName() }}</div>\n                        <div class=\"merge-survivor-pk\">\n                            <i class=\"fa-solid fa-key\"></i>\n                            {{ SurvivorKeyDisplay() }}\n                        </div>\n                        <div class=\"merge-survivor-detail\">This record's ID will be retained. All dependencies from merged records will be transferred here.</div>\n                    </div>\n\n                    <!-- Cherry-picked field overrides -->\n                    @if (GetCherryPickedFields().length > 0) {\n                        <div>\n                            <div class=\"merge-section-label\">Field Value Overrides ({{ GetCherryPickedFields().length }} field{{ GetCherryPickedFields().length !== 1 ? 's' : '' }})</div>\n                            @for (field of GetCherryPickedFields(); track field.FieldName) {\n                                <div class=\"merge-field-override\">\n                                    <span class=\"merge-field-name\">{{ field.DisplayName }}</span>\n                                    <span class=\"merge-field-value\">\"{{ field.Value }}\"</span>\n                                    <span class=\"merge-field-source\">from {{ field.SourceName }}</span>\n                                </div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Dependency transfer -->\n                    @if (GetNonSurvivorColumns().length > 0) {\n                        <div class=\"merge-deps-transfer\">\n                            <div class=\"merge-deps-transfer-label\"><i class=\"fa-solid fa-arrow-right-arrow-left\"></i> Dependencies to Transfer</div>\n                            @for (col of GetNonSurvivorColumns(); track col.ColumnIndex) {\n                                <div class=\"merge-deps-transfer-row\">\n                                    <i class=\"fa-solid fa-arrow-right\"></i>\n                                    <span>\n                                        @if (col.DepCount > 0) {\n                                            <strong>{{ col.DepCount }}</strong> {{ col.DepCount === 1 ? 'dependency' : 'dependencies' }} from <strong>{{ col.Name }}</strong> &rarr; {{ SurvivorName() }}\n                                        } @else {\n                                            <strong>0</strong> dependencies from <strong>{{ col.Name }}</strong>\n                                        }\n                                    </span>\n                                </div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Records to be deleted -->\n                    <div class=\"merge-delete-card\">\n                        <div class=\"merge-delete-label\"><i class=\"fa-solid fa-trash\"></i> Records to Delete After Merge</div>\n                        @for (col of GetNonSurvivorColumns(); track col.ColumnIndex) {\n                            <div class=\"merge-delete-item\">\n                                <span class=\"merge-delete-name\">{{ col.Name }}</span>\n                                <span class=\"merge-delete-deps\">\n                                    @if (col.DepCount > 0) {\n                                        {{ col.DepCount }} dep{{ col.DepCount !== 1 ? 's' : '' }} transferring\n                                    } @else {\n                                        no deps\n                                    }\n                                </span>\n                            </div>\n                        }\n                    </div>\n                </div>\n\n                <div class=\"merge-confirm-footer\">\n                    <button class=\"action-btn cancel-btn\" (click)=\"CloseMergeConfirm()\" [disabled]=\"IsMerging\">\n                        <i class=\"fa-solid fa-arrow-left\"></i> Back\n                    </button>\n                    <button class=\"action-btn confirm-merge-btn\" (click)=\"ExecuteMerge()\" [disabled]=\"IsMerging\">\n                        @if (IsMerging) {\n                            <i class=\"fa-solid fa-spinner fa-spin\"></i> Merging...\n                        } @else {\n                            <i class=\"fa-solid fa-code-merge\"></i> Confirm Merge ({{ GetNonSurvivorColumns().length + 1 }} records &rarr; 1)\n                        }\n                    </button>\n                </div>\n            </div>\n        </div>\n    }\n\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* ============================================================\n   Duplicate Detection Kanban Board - Resource Component Styles\n   All colors use MJ design tokens (--mj-*) exclusively.\n   ============================================================ */\n\napp-duplicate-detection-resource {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n}\n\n\n/* Entity-document select used in the [actions] slot. */\n.kh-doc-select {\n    width: auto;\n    min-width: 220px;\n    min-height: 32px;\n    padding: 4px 28px 4px 12px;\n    font-size: 0.8125rem;\n}\n\n/* ---- Detection Progress ---- */\n\n.detection-progress-section {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 8px;\n    padding: 14px 18px;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.progress-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n}\n\n.progress-stage {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\n.progress-percent {\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.progress-bar-track {\n    height: 6px;\n    border-radius: 3px;\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.progress-bar-fill {\n    height: 100%;\n    border-radius: 3px;\n    background: var(--mj-brand-primary);\n    transition: width 0.3s ease;\n}\n\n.progress-current-item {\n    display: block;\n    margin-top: 6px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* ---- Threshold Controls ---- */\n\n.threshold-controls {\n    display: flex;\n    gap: 24px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-status-info) 6%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-border-subtle);\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.threshold-slider-group {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.threshold-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n}\n\n.threshold-value {\n    margin-left: auto;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n}\n\n.threshold-slider {\n    width: 100%;\n    height: 4px;\n    appearance: none;\n    -webkit-appearance: none;\n    background: var(--mj-border-default);\n    border-radius: 2px;\n    outline: none;\n    cursor: pointer;\n}\n\n.threshold-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n\n.threshold-slider::-moz-range-thumb {\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n}\n\n.threshold-slider:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.threshold-hint {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n/* ---- Threshold Info (legacy) ---- */\n\n.threshold-info {\n    display: flex;\n    gap: 16px;\n    padding: 8px 14px;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-status-info) 8%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-info-border);\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.threshold-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-status-info-text);\n    font-weight: 500;\n}\n\n.threshold-item i {\n    font-size: 11px;\n}\n\n/* ---- KPI Strip ---- */\n\n.kpi-strip {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.kpi-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.kpi-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.kpi-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-top: 2px;\n}\n\n.kpi-pending .kpi-value {\n    color: var(--mj-status-warning);\n}\n\n.kpi-approved .kpi-value {\n    color: var(--mj-status-success);\n}\n\n.kpi-rejected .kpi-value {\n    color: var(--mj-status-error);\n}\n\n/* ---- Filter Bar ---- */\n\n.filter-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.filter-group {\n    display: flex;\n    align-items: flex-end;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.filter-select {\n    height: 34px;\n    padding: 4px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    outline: none;\n    min-width: 160px;\n}\n\n.filter-select:focus {\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-range {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.filter-label {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.filter-input {\n    height: 34px;\n    padding: 4px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    outline: none;\n    width: 100px;\n}\n\n.filter-input-score {\n    width: 80px;\n}\n\n.filter-input-date {\n    width: 140px;\n}\n\n.filter-input:focus {\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.clear-filters-btn {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    height: 34px;\n    padding: 0 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.clear-filters-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* ---- Loading & Empty States ---- */\n\n.loading-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 1;\n    min-height: 200px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex: 1;\n    min-height: 200px;\n    gap: 8px;\n}\n\n.empty-icon {\n    font-size: 48px;\n    color: var(--mj-text-disabled);\n}\n\n.empty-text {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.empty-subtext {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    margin: 0;\n}\n\n/* ---- Kanban Board ---- */\n\n.kanban-board {\n    display: flex;\n    gap: 16px;\n    flex: 1;\n    min-height: 0;\n    overflow-x: auto;\n}\n\n.kanban-column {\n    flex: 1;\n    min-width: 280px;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.column-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n\n.column-header-pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.column-header-pending i {\n    color: var(--mj-status-warning);\n}\n\n.column-header-approved {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n}\n\n.column-header-approved i {\n    color: var(--mj-status-success);\n}\n\n.column-header-rejected {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.column-header-rejected i {\n    color: var(--mj-status-error);\n}\n\n.column-title {\n    flex: 1;\n}\n\n.column-count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 24px;\n    height: 24px;\n    padding: 0 6px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.column-body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.column-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    padding: 32px 16px;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.column-empty i {\n    font-size: 24px;\n}\n\n/* ---- Kanban Cards ---- */\n\n.kanban-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: box-shadow 0.15s ease, border-color 0.15s ease;\n    flex-shrink: 0; /* Prevent cards from shrinking \u2014 column scrolls instead */\n}\n\n.kanban-card:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n/* Drag and Drop */\n.kanban-card[draggable=\"true\"] {\n    cursor: grab;\n}\n\n.kanban-card[draggable=\"true\"]:active {\n    cursor: grabbing;\n}\n\n.drop-target-active {\n    outline: 2px dashed var(--mj-brand-primary);\n    outline-offset: -2px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface-card)) !important;\n}\n\n.drop-target-active .column-body {\n    min-height: 100px;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 10px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    gap: 8px;\n}\n\n.card-header-left {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    min-width: 0;\n    flex: 1;\n}\n\n.card-icon {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n}\n\n.card-title-block {\n    min-width: 0;\n    flex: 1;\n}\n\n.card-record-name {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin-bottom: 2px;\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 1px 6px;\n    border-radius: 3px;\n    font-size: 10px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    letter-spacing: 0.2px;\n}\n\n/* Score indicator colors */\n\n.score-indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 40px;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 700;\n}\n\n.score-high {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n    border: 1px solid var(--mj-status-success-border);\n}\n\n.score-medium {\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n    border: 1px solid var(--mj-status-warning-border);\n}\n\n.score-low {\n    background: var(--mj-status-error-bg);\n    color: var(--mj-status-error-text);\n    border: 1px solid var(--mj-status-error-border);\n}\n\n.card-body {\n    padding: 10px 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.match-summaries {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.match-summary-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.match-score {\n    flex-shrink: 0;\n    font-weight: 600;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    min-width: 30px;\n}\n\n.match-name {\n    color: var(--mj-text-secondary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.match-summary-more {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n    padding-left: 38px;\n}\n\n.card-meta-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    border-top: 1px solid var(--mj-border-subtle);\n    padding-top: 6px;\n}\n\n.card-meta-item {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.card-meta-item i {\n    font-size: 10px;\n}\n    font-size: 12px;\n    max-width: 180px;\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\n   Comparison Slide-In Panel\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 */\n\n.slide-backdrop {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 9999;\n    animation: fadeIn 0.2s ease;\n}\n\n.slide-backdrop.comparison-closing {\n    animation: fadeOut 0.25s ease forwards;\n}\n\n@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }\n\n.comparison-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 82vw;\n    max-width: 1300px;\n    background: var(--mj-bg-surface);\n    border-left: 1px solid var(--mj-border-default);\n    box-shadow: -8px 0 40px rgba(0,0,0,0.4);\n    z-index: 10000;\n    display: flex;\n    flex-direction: column;\n    animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n}\n\n.comparison-panel.comparison-closing {\n    animation: slideOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }\n@keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }\n\n/* Header */\n.comparison-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    gap: 12px;\n}\n\n.comparison-header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.comparison-entity-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 1rem;\n    flex-shrink: 0;\n}\n\n.comparison-title {\n    font-size: 1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.comparison-entity-badge {\n    display: inline-block;\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 0.65rem;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    margin-right: 6px;\n}\n\n.comparison-match-count {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.comparison-header-right {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-shrink: 0;\n}\n\n/* Toggle */\n.comparison-toggle {\n    display: flex;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 5px 12px;\n    font-size: 0.7rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n}\n\n.toggle-btn:first-child {\n    border-right: 1px solid var(--mj-border-default);\n}\n\n.toggle-btn.toggle-active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.comparison-close-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n    transition: all 0.15s ease;\n}\n\n.comparison-close-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* Loading state */\n.comparison-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Grid wrapper */\n.comparison-grid-wrapper {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n}\n\n/* Grid */\n.comparison-grid {\n    display: grid;\n    min-width: 100%;\n}\n\n.comparison-grid > div {\n    padding: 8px 12px;\n    font-size: 0.78rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    border-right: 1px solid var(--mj-border-subtle);\n}\n\n/* Corner cell */\n.grid-corner-cell {\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 4;\n    background: var(--mj-bg-surface-elevated);\n    font-size: 0.65rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-muted);\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: 6px;\n}\n\n/* Column headers */\n.grid-col-header {\n    position: sticky;\n    top: 0;\n    z-index: 3;\n    background: var(--mj-bg-surface-elevated);\n    padding: 10px 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.grid-col-source {\n    border-left: 3px solid var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface-elevated));\n}\n\n.col-header-label {\n    font-size: 0.6rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-brand-primary);\n}\n\n.col-header-top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 6px;\n}\n\n.col-header-name {\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.col-header-diff-count {\n    font-size: 0.65rem;\n    color: var(--mj-status-warning-text);\n}\n\n/* Surviving record selector */\n.surviving-selector {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n.surviving-radio {\n    appearance: none;\n    width: 14px;\n    height: 14px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.surviving-radio:checked {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-brand-primary);\n    box-shadow: inset 0 0 0 2px var(--mj-bg-surface-elevated);\n}\n\n.surviving-label {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n}\n\n.surviving-label.is-survivor {\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n/* Use all fields button */\n.use-all-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.62rem;\n    cursor: pointer;\n    transition: all 0.12s ease;\n    margin-top: 2px;\n}\n\n.use-all-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.use-all-btn.all-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n/* Per-match actions */\n.comparison-match-actions {\n    display: flex;\n    gap: 4px;\n    margin-top: 3px;\n}\n\n.action-btn-sm {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid;\n    border-radius: 5px;\n    cursor: pointer;\n    font-size: 0.65rem;\n    transition: all 0.15s ease;\n}\n\n.approve-btn-sm {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n    border-color: var(--mj-status-success-border);\n}\n.approve-btn-sm:hover { background: rgba(34,197,94,0.25); }\n\n.reject-btn-sm {\n    background: var(--mj-status-error-bg);\n    color: var(--mj-status-error-text);\n    border-color: var(--mj-status-error-border);\n}\n.reject-btn-sm:hover { background: rgba(239,68,68,0.25); }\n\n.match-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 0.68rem;\n    font-weight: 500;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.status-approved {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.status-rejected {\n    background: var(--mj-status-error-bg);\n    color: var(--mj-status-error-text);\n}\n\n.match-approval-actions {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 6px;\n}\n\n.match-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 10px;\n    border-radius: 6px;\n    font-size: 0.7rem;\n    font-weight: 500;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.match-skip-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n.match-skip-btn:hover {\n    background: var(--mj-status-error-bg);\n    border-color: var(--mj-status-error);\n}\n\n.match-undo-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n}\n\n.match-undo-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.match-approved {\n    border-top: 3px solid var(--mj-status-success);\n}\n\n.match-rejected {\n    border-top: 3px solid var(--mj-status-error);\n    opacity: 0.6;\n}\n\n/* Label cells */\n.grid-label-cell {\n    position: sticky;\n    left: 0;\n    z-index: 2;\n    background: var(--mj-bg-surface);\n    font-size: 0.72rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n}\n\n.grid-row-odd {\n    background: color-mix(in srgb, var(--mj-bg-surface-sunken) 50%, var(--mj-bg-surface));\n}\n\n.grid-label-cell.grid-row-odd {\n    background: color-mix(in srgb, var(--mj-bg-surface-sunken) 50%, var(--mj-bg-surface));\n}\n\n/* Value cells */\n.grid-value-cell {\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n    line-height: 1.45;\n    word-break: break-word;\n    position: relative;\n    cursor: pointer;\n}\n\n.grid-source-cell {\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, var(--mj-bg-surface));\n    border-left: 3px solid transparent;\n}\n\n.grid-source-cell.grid-row-odd {\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, color-mix(in srgb, var(--mj-bg-surface-sunken) 50%, var(--mj-bg-surface)));\n}\n\n.grid-source-cell.has-diff-in-row {\n    font-weight: 600;\n}\n\n/* Diff highlighting */\n.value-same {\n    color: var(--mj-text-muted);\n}\n\n.value-different {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, transparent) !important;\n    border-left: 3px solid var(--mj-status-warning);\n    color: var(--mj-text-primary);\n}\n\n.field-not-available {\n    font-style: italic;\n    font-size: 0.72rem;\n    color: var(--mj-text-disabled);\n}\n\n/* Field selection radio */\n.field-select-radio {\n    position: absolute;\n    top: 50%;\n    right: 8px;\n    transform: translateY(-50%);\n    appearance: none;\n    width: 16px;\n    height: 16px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.12s ease;\n    opacity: 0.4;\n}\n\n.field-select-radio:hover {\n    opacity: 0.8;\n}\n\n.field-select-radio:checked {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-brand-primary);\n    box-shadow: inset 0 0 0 2.5px var(--mj-bg-surface);\n    opacity: 1;\n}\n\n.grid-value-cell.field-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)) !important;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.grid-value-cell.field-selected .field-select-radio {\n    opacity: 1;\n}\n\n/* Footer */\n.comparison-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.comparison-footer-left {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.comparison-summary {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.merge-summary {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.merge-summary i {\n    font-size: 0.65rem;\n}\n\n.comparison-footer-right {\n    display: flex;\n    gap: 8px;\n}\n\n.comparison-footer-right .action-btn {\n    flex: none;\n    padding: 7px 14px;\n}\n\n.merge-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.merge-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.card-actions {\n    display: flex;\n    gap: 8px;\n    padding: 10px 12px;\n    border-top: 1px solid var(--mj-border-subtle);\n}\n\n.action-btn {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.action-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.approve-btn {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text);\n    border-color: var(--mj-status-success-border);\n}\n\n.approve-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, var(--mj-bg-surface));\n}\n\n.reject-btn {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text);\n    border-color: var(--mj-status-error-border);\n}\n\n.reject-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n/* ---- Responsive ---- */\n\n@media (max-width: 768px) {\n    .kanban-board {\n        flex-direction: column;\n    }\n\n    .kanban-column {\n        min-width: auto;\n        max-height: 400px;\n    }\n}\n\n@media (max-width: 480px) {\n    .kpi-strip {\n        flex-direction: column;\n    }\n\n    .filter-bar {\n        flex-wrap: wrap;\n    }\n\n    .filter-group {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n\n    .filter-select {\n        min-width: auto;\n        width: 100%;\n    }\n\n    .filter-input {\n        width: 100%;\n    }\n\n    .card-actions {\n        flex-direction: column;\n    }\n\n    .action-btn {\n        width: 100%;\n    }\n}\n\n/* ---- Saving Overlay ---- */\n\n.saving-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-overlay);\n    z-index: 10;\n    border-radius: 8px;\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\n   Dependencies Summary (in column headers)\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 */\n\n.deps-summary {\n    margin-top: 6px;\n    padding: 6px 8px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 0.68rem;\n}\n\n.deps-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-weight: 600;\n}\n\n.deps-header i {\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n}\n\n.deps-header:hover {\n    color: var(--mj-text-primary);\n}\n\n.deps-total {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 0.72rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin-bottom: 2px;\n}\n\n.deps-total i {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n}\n\n.deps-total-number {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    padding: 0 6px;\n    border-radius: 8px;\n    font-size: 0.7rem;\n    font-weight: 700;\n}\n\n.deps-total-recommended {\n    font-size: 0.58rem;\n    color: var(--mj-status-success-text);\n    font-weight: 600;\n    margin-left: 4px;\n}\n\n.deps-total-recommended i {\n    color: var(--mj-status-success-text);\n}\n\n.deps-detail-list {\n    margin-top: 4px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.deps-detail-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 3px 0;\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    border-radius: 3px;\n    transition: background 0.1s ease;\n}\n\n.deps-detail-row:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.deps-detail-entity {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.deps-expand-icon {\n    font-size: 0.5rem;\n    width: 10px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n/* Individual dependency records list */\n.deps-records-list {\n    padding-left: 14px;\n    margin-bottom: 2px;\n}\n\n.deps-record-row {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    padding: 2px 4px;\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    border-radius: 3px;\n    transition: color 0.1s ease, background 0.1s ease;\n}\n\n.deps-record-row:hover {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.deps-record-icon {\n    font-size: 0.5rem;\n    flex-shrink: 0;\n}\n\n.deps-record-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 0.6rem;\n}\n\n.deps-record-loading {\n    padding: 3px 4px;\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n}\n\n.deps-record-loading i {\n    margin-right: 4px;\n}\n\n.deps-detail-count {\n    color: var(--mj-text-primary);\n    font-weight: 600;\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\n   Merge Confirmation Panel\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 */\n\n.merge-confirm-backdrop {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 20000;\n    animation: fadeIn 0.2s ease;\n}\n\n.merge-confirm-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 520px;\n    background: var(--mj-bg-surface);\n    border-left: 1px solid var(--mj-border-default);\n    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);\n    z-index: 20001;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.merge-confirm-header {\n    padding: 18px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.merge-confirm-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text);\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.merge-confirm-title {\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.merge-confirm-subtitle {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.merge-confirm-body {\n    padding: 20px 24px;\n    overflow-y: auto;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Surviving record card */\n\n.merge-survivor-card {\n    padding: 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 8px;\n}\n\n.merge-survivor-label {\n    font-size: 0.65rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-brand-primary);\n    margin-bottom: 4px;\n}\n\n.merge-survivor-label i {\n    margin-right: 4px;\n}\n\n.merge-survivor-name {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.merge-survivor-pk {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 4px;\n    padding: 4px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 4px;\n    font-size: 0.68rem;\n    font-family: monospace;\n    color: var(--mj-text-secondary);\n}\n\n.merge-survivor-pk i {\n    font-size: 0.6rem;\n    color: var(--mj-brand-primary);\n}\n\n.merge-survivor-detail {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* Cherry-picked fields section */\n\n.merge-section-label {\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-bottom: 6px;\n}\n\n.merge-field-override {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 0.78rem;\n}\n\n.merge-field-name {\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    min-width: 110px;\n    flex-shrink: 0;\n}\n\n.merge-field-value {\n    color: var(--mj-text-primary);\n}\n\n.merge-field-source {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n    margin-left: auto;\n    white-space: nowrap;\n}\n\n/* Dependency transfer summary */\n\n.merge-deps-transfer {\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.merge-deps-transfer-label {\n    font-size: 0.65rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--mj-brand-primary);\n    margin-bottom: 6px;\n}\n\n.merge-deps-transfer-label i {\n    margin-right: 4px;\n}\n\n.merge-deps-transfer-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 3px 0;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.merge-deps-transfer-row i {\n    color: var(--mj-brand-primary);\n    font-size: 0.65rem;\n    width: 14px;\n    text-align: center;\n}\n\n/* Records to delete */\n\n.merge-delete-card {\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 8px;\n}\n\n.merge-delete-label {\n    font-size: 0.65rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--mj-status-error-text);\n    margin-bottom: 6px;\n}\n\n.merge-delete-label i {\n    margin-right: 4px;\n}\n\n.merge-delete-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 0;\n    font-size: 0.78rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.merge-delete-item:last-child {\n    border-bottom: none;\n}\n\n.merge-delete-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.merge-delete-deps {\n    font-size: 0.65rem;\n    color: var(--mj-text-muted);\n}\n\n/* Confirm footer */\n\n.merge-confirm-footer {\n    padding: 14px 24px;\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 10px;\n}\n\n.cancel-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.cancel-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.confirm-merge-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.confirm-merge-btn:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.confirm-merge-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n/* ---- Responsive: Merge Confirm ---- */\n\n@media (max-width: 600px) {\n    .merge-confirm-panel {\n        width: 100%;\n    }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550 Merge Disabled Hint \u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.merge-disabled-hint {\n    font-size: 11.5px;\n    color: var(--mj-status-warning-text, #e65100);\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    margin-left: 4px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550 Merge Warning Banner (inline, non-blocking) \u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.merge-warning-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    margin-bottom: 12px;\n    border-radius: 6px;\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n    border: 1px solid var(--mj-status-warning-border);\n    font-size: 13px;\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.merge-warning-banner i {\n    font-size: 14px;\n    flex-shrink: 0;\n}\n"] }]
     }], null, { OnEscapeKey: [{
             type: HostListener,
             args: ['document:keydown.escape']