@memberjunction/ng-core-entity-forms 5.34.0 → 5.35.0

package/dist/lib/custom/Tests/test-suite-form.component.js

@@ -9,6 +9,7 @@ import * as d3 from 'd3';
 import { Subject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { CompositeKey, RunView } from '@memberjunction/core';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
@@ -19,10 +20,11 @@ import { TestingDialogService, TagsHelper, EvaluationPreferencesService } from '
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-ui-components";
-import * as i4 from "@memberjunction/ng-testing";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "@memberjunction/ng-versions";
+import * as i3 from "@angular/cdk/drag-drop";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "@memberjunction/ng-testing";
+import * as i6 from "@memberjunction/ng-shared-generic";
+import * as i7 from "@memberjunction/ng-versions";
 const _c0 = ["chartContainer"];
 const _c1 = () => [1, 2, 3, 4, 5];
 const _c2 = () => [1, 2, 3];
@@ -32,9 +34,15 @@ const _c5 = (a0, a1, a2) => ({ "high": a0, "medium": a1, "low": a2 });
 const _c6 = (a0, a1) => ({ "positive": a0, "negative": a1 });
 const _c7 = (a0, a1, a2) => ({ "fa-arrow-down": a0, "fa-arrow-up": a1, "fa-minus": a2 });
 const _c8 = (a0, a1) => ({ "improved": a0, "regressed": a1 });
-function MJTestSuiteFormComponentExtended_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 17);
-    i0.ɵɵelement(1, "i", 29);
+const _forTrack0 = ($index, $item) => $item.ID;
+function MJTestSuiteFormComponentExtended_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1, "\u25CF");
+    i0.ɵɵelementEnd();
+} }
+function MJTestSuiteFormComponentExtended_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
+    i0.ɵɵelement(1, "i", 33);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -42,8 +50,14 @@ function MJTestSuiteFormComponentExtended_Conditional_25_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.suiteTests.length, " tests ");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "p");
+function MJTestSuiteFormComponentExtended_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵelement(1, "i", 57);
+    i0.ɵɵtext(2, " Unsaved ");
+    i0.ɵɵelementEnd();
+} }
+function MJTestSuiteFormComponentExtended_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "p");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -51,8 +65,8 @@ function MJTestSuiteFormComponentExtended_Conditional_37_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.record.Description);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
+function MJTestSuiteFormComponentExtended_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 34);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -60,8 +74,8 @@ function MJTestSuiteFormComponentExtended_Conditional_46_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.suiteTests.length);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
+function MJTestSuiteFormComponentExtended_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 34);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -69,303 +83,468 @@ function MJTestSuiteFormComponentExtended_Conditional_50_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.suiteRuns.length);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_58_Template(rf, ctx) { if (rf & 1) {
+function MJTestSuiteFormComponentExtended_Conditional_60_For_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 73);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const opt_r3 = ctx.$implicit;
+    i0.ɵɵproperty("ngValue", opt_r3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(opt_r3);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_60_For_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 73);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const s_r4 = ctx.$implicit;
+    i0.ɵɵproperty("ngValue", s_r4.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(s_r4.Name);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_60_For_39_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 78);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementStart(2, "button", 90);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_60_For_39_Template_button_click_2_listener($event) { const tag_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.removeTag(tag_r7); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(3, "i", 91);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const tag_r7 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", tag_r7, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Remove tag " + tag_r7);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_60_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "div", 44)(2, "h3");
-    i0.ɵɵelement(3, "i", 45);
-    i0.ɵɵtext(4, " Suite Information");
+    i0.ɵɵelementStart(0, "div", 39)(1, "section", 58)(2, "header", 59)(3, "h3");
+    i0.ɵɵelement(4, "i", 60);
+    i0.ɵɵtext(5, " Details");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 46)(6, "div", 47)(7, "div", 48);
-    i0.ɵɵtext(8, "Name");
+    i0.ɵɵelementStart(6, "p", 61);
+    i0.ɵɵtext(7, "Edit any field \u2014 changes are saved with the bar at the bottom.");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 62)(9, "div", 63)(10, "label", 64);
+    i0.ɵɵtext(11, "Name ");
+    i0.ɵɵelementStart(12, "span", 65);
+    i0.ɵɵtext(13, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "input", 66);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_60_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Name, $event) || (ctx_r0.record.Name = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "div", 63)(16, "label", 67);
+    i0.ɵɵtext(17, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 49);
-    i0.ɵɵtext(10);
+    i0.ɵɵelementStart(18, "textarea", 68);
+    i0.ɵɵlistener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_60_Template_textarea_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.record.Description = $event || null); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 47)(12, "div", 48);
-    i0.ɵɵtext(13, "Status");
+    i0.ɵɵelementStart(19, "div", 69)(20, "label", 70);
+    i0.ɵɵtext(21, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 49)(15, "span", 50);
-    i0.ɵɵtext(16);
+    i0.ɵɵelementStart(22, "div", 71)(23, "select", 72);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_60_Template_select_ngModelChange_23_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Status, $event) || (ctx_r0.record.Status = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵrepeaterCreate(24, MJTestSuiteFormComponentExtended_Conditional_60_For_25_Template, 2, 2, "option", 73, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 47)(18, "div", 48);
-    i0.ɵɵtext(19, "Created");
+    i0.ɵɵelementStart(26, "div", 69)(27, "label", 74);
+    i0.ɵɵtext(28, "Parent Suite");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 49);
-    i0.ɵɵtext(21);
-    i0.ɵɵpipe(22, "date");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 47)(24, "div", 48);
-    i0.ɵɵtext(25, "Updated");
+    i0.ɵɵelementStart(29, "select", 75);
+    i0.ɵɵlistener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_60_Template_select_ngModelChange_29_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.record.ParentID = $event || null); });
+    i0.ɵɵelementStart(30, "option", 73);
+    i0.ɵɵtext(31, "\u2014 None (top-level) \u2014");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 49);
-    i0.ɵɵtext(27);
-    i0.ɵɵpipe(28, "date");
+    i0.ɵɵrepeaterCreate(32, MJTestSuiteFormComponentExtended_Conditional_60_For_33_Template, 2, 2, "option", 73, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 47)(30, "div", 48);
-    i0.ɵɵtext(31, "Max Execution Time");
+    i0.ɵɵelementStart(34, "div", 63)(35, "label", 76);
+    i0.ɵɵtext(36, "Tags");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "div", 77);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_60_Template_div_click_37_listener() { i0.ɵɵrestoreView(_r2); const tagInput_r5 = i0.ɵɵreference(41); return i0.ɵɵresetView(tagInput_r5.focus()); });
+    i0.ɵɵrepeaterCreate(38, MJTestSuiteFormComponentExtended_Conditional_60_For_39_Template, 4, 2, "span", 78, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(40, "input", 79, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_60_Template_input_ngModelChange_40_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.tagDraft, $event) || (ctx_r0.tagDraft = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function MJTestSuiteFormComponentExtended_Conditional_60_Template_input_keydown_40_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTagInputKeydown($event)); })("blur", function MJTestSuiteFormComponentExtended_Conditional_60_Template_input_blur_40_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.addTagFromDraft()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(42, "span", 80);
+    i0.ɵɵtext(43, "Press Enter or comma to add a tag. Backspace on empty input removes the last tag.");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(44, "section", 58)(45, "header", 59)(46, "h3");
+    i0.ɵɵelement(47, "i", 81);
+    i0.ɵɵtext(48, " Execution Settings");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(49, "div", 62)(50, "div", 69)(51, "label", 82);
+    i0.ɵɵtext(52, "Max Execution Time (ms)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "div", 49);
-    i0.ɵɵtext(33);
+    i0.ɵɵelementStart(53, "input", 83);
+    i0.ɵɵlistener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_60_Template_input_ngModelChange_53_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.record.MaxExecutionTimeMS = $event === "" || $event === null ? null : +$event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(54, "span", 80);
+    i0.ɵɵtext(55);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(34, "div", 51)(35, "h3");
-    i0.ɵɵelement(36, "i", 52);
-    i0.ɵɵtext(37, " Execution Settings");
+    i0.ɵɵelementStart(56, "section", 84)(57, "div", 85)(58, "div", 86)(59, "div", 87);
+    i0.ɵɵtext(60, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "div", 53)(39, "div", 54)(40, "label");
-    i0.ɵɵtext(41, "Max Execution Time (ms)");
+    i0.ɵɵelementStart(61, "div", 88);
+    i0.ɵɵtext(62);
+    i0.ɵɵpipe(63, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(64, "div", 86)(65, "div", 87);
+    i0.ɵɵtext(66, "Last updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "input", 55);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_58_Template_input_ngModelChange_42_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.MaxExecutionTimeMS, $event) || (ctx_r0.record.MaxExecutionTimeMS = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(67, "div", 88);
+    i0.ɵɵtext(68);
+    i0.ɵɵpipe(69, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(70, "div", 86)(71, "div", 87);
+    i0.ɵɵtext(72, "Suite ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "span", 56);
-    i0.ɵɵtext(44, "Default timeout for tests in this suite");
+    i0.ɵɵelementStart(73, "div", 89);
+    i0.ɵɵtext(74);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(10);
-    i0.ɵɵtextInterpolate(ctx_r0.record.Name);
+    i0.ɵɵadvance(14);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.Name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngModel", ctx_r0.record.Description);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass());
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.Status);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.record.Status);
+    i0.ɵɵrepeater(ctx_r0.statusOptions);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(22, 7, ctx_r0.record.__mj_CreatedAt, "medium"));
+    i0.ɵɵproperty("ngModel", ctx_r0.record.ParentID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngValue", null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.parentSuiteOptions);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(28, 10, ctx_r0.record.__mj_UpdatedAt, "medium"));
+    i0.ɵɵrepeater(ctx_r0.tags);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("placeholder", ctx_r0.tags.length === 0 ? "Add tags, press Enter or comma..." : "");
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.tagDraft);
+    i0.ɵɵadvance(13);
+    i0.ɵɵproperty("ngModel", ctx_r0.record.MaxExecutionTimeMS);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Default timeout for tests in this suite. Currently: ", ctx_r0.formatTimeout(ctx_r0.record.MaxExecutionTimeMS));
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(63, 12, ctx_r0.record.__mj_CreatedAt, "medium"));
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.formatTimeout(ctx_r0.record.MaxExecutionTimeMS));
-    i0.ɵɵadvance(9);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.MaxExecutionTimeMS);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(69, 15, ctx_r0.record.__mj_UpdatedAt, "medium"));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.record.ID);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 94);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.suiteTests.length);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_59_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61);
-    i0.ɵɵelement(1, "div", 62)(2, "div", 63);
-    i0.ɵɵelementStart(3, "div", 64);
-    i0.ɵɵelement(4, "div", 65)(5, "div", 66);
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_12_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 103);
+    i0.ɵɵelement(1, "div", 104)(2, "div", 105);
+    i0.ɵɵelementStart(3, "div", 106);
+    i0.ɵɵelement(4, "div", 107)(5, "div", 108);
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_59_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 60);
-    i0.ɵɵrepeaterCreate(2, MJTestSuiteFormComponentExtended_Conditional_59_Conditional_1_For_3_Template, 6, 0, "div", 61, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99)(1, "div", 102);
+    i0.ɵɵrepeaterCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_12_For_3_Template, 6, 0, "div", 103, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c1));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_59_Conditional_2_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelement(1, "i", 119);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const test_r4 = i0.ɵɵnextContext().$implicit;
+    const test_r11 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", test_r4.Status);
+    i0.ɵɵtextInterpolate1(" ", test_r11.Status);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_59_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_59_Conditional_2_For_2_Template_div_click_0_listener() { const test_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openTest(test_r4.TestID)); });
-    i0.ɵɵelementStart(1, "div", 69);
-    i0.ɵɵtext(2);
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 123);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Remove ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 120);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 121);
+    i0.ɵɵtext(2, "Remove from suite?");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 122);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Template_button_click_3_listener($event) { i0.ɵɵrestoreView(_r12); const test_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.confirmRemoveTest(test_r11, $event)); });
+    i0.ɵɵconditionalCreate(4, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Conditional_4_Template, 1, 0, "i", 123)(5, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Conditional_5_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 124);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Template_button_click_6_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.cancelRemoveTest($event)); });
+    i0.ɵɵtext(7, " Cancel ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r0.isRemovingTest);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isRemovingTest ? 4 : 5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r0.isRemovingTest);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 125);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const test_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.requestRemoveTest(test_r11, $event)); });
+    i0.ɵɵelement(1, "i", 91);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 70);
-    i0.ɵɵelement(4, "i", 29);
+    i0.ɵɵelementStart(2, "i", 126);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_13_Template_i_click_2_listener() { i0.ɵɵrestoreView(_r13); const test_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openTest(test_r11.TestID)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 71)(6, "div", 72);
-    i0.ɵɵtext(7);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 110)(1, "span", 111);
+    i0.ɵɵelement(2, "i", 112);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 73);
-    i0.ɵɵconditionalCreate(9, MJTestSuiteFormComponentExtended_Conditional_59_Conditional_2_For_2_Conditional_9_Template, 3, 1, "span");
+    i0.ɵɵelementStart(3, "div", 113);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 114);
+    i0.ɵɵelement(6, "i", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 115);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Template_div_click_7_listener() { const test_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openTest(test_r11.TestID)); });
+    i0.ɵɵelementStart(8, "div", 116);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 117);
+    i0.ɵɵconditionalCreate(11, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_11_Template, 3, 1, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(10, "i", 74);
+    i0.ɵɵconditionalCreate(12, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_12_Template, 8, 3, "div", 118)(13, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Conditional_13_Template, 3, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const test_r4 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(test_r4.Sequence);
+    const test_r11 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("cdkDragDisabled", ctx_r0.isReorderingTests || ctx_r0.isRemovingTest);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(test_r11.Sequence);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(test_r4.Test);
+    i0.ɵɵtextInterpolate(test_r11.Test);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(test_r4.Status ? 9 : -1);
+    i0.ɵɵconditional(test_r11.Status ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.confirmingRemoveSuiteTestId === test_r11.ID ? 12 : 13);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_59_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_59_Conditional_2_For_2_Template, 11, 3, "div", 67, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵlistener("cdkDropListDropped", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_Template_div_cdkDropListDropped_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onTestDrop($event)); });
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_For_2_Template, 14, 5, "div", 110, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.suiteTests);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_59_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 75);
-    i0.ɵɵelement(2, "i", 29);
+function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 127);
+    i0.ɵɵelement(2, "i", 33);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4, "No Tests in Suite");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6, "Add tests to this suite to start running them together.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 25);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_14_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAddTestsDialog()); });
+    i0.ɵɵelement(8, "i", 98);
+    i0.ɵɵtext(9, " Add tests ");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_59_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_59_Conditional_1_Template, 4, 1, "div", 57);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_59_Conditional_2_Template, 3, 0, "div", 58);
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_59_Conditional_3_Template, 7, 0, "div", 59);
+function MJTestSuiteFormComponentExtended_Conditional_61_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40)(1, "div", 92)(2, "div", 93)(3, "strong");
+    i0.ɵɵtext(4, "Suite tests");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_5_Template, 2, 1, "span", 94);
+    i0.ɵɵelementStart(6, "span", 95);
+    i0.ɵɵtext(7, "Drag to reorder \u00B7 Hover a row to remove");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 96)(9, "button", 97);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openAddTestsDialog()); });
+    i0.ɵɵelement(10, "i", 98);
+    i0.ɵɵtext(11, " Add tests ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(12, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_12_Template, 4, 1, "div", 99);
+    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_13_Template, 3, 0, "div", 100);
+    i0.ɵɵconditionalCreate(14, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_14_Template, 10, 0, "div", 101);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r0.testsLoaded ? 5 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", ctx_r0.isReorderingTests);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.loadingTests ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.loadingTests ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.loadingTests && ctx_r0.suiteTests.length > 0 ? 2 : -1);
+    i0.ɵɵconditional(!ctx_r0.loadingTests && ctx_r0.suiteTests.length > 0 ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.testsLoaded && !ctx_r0.loadingTests && ctx_r0.suiteTests.length === 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.testsLoaded && !ctx_r0.loadingTests && ctx_r0.suiteTests.length === 0 ? 14 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61);
-    i0.ɵɵelement(1, "div", 63);
-    i0.ɵɵelementStart(2, "div", 64);
-    i0.ɵɵelement(3, "div", 65)(4, "div", 66);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 103);
+    i0.ɵɵelement(1, "div", 105);
+    i0.ɵɵelementStart(2, "div", 106);
+    i0.ɵɵelement(3, "div", 107)(4, "div", 108);
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 60);
-    i0.ɵɵrepeaterCreate(2, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_1_For_3_Template, 5, 0, "div", 61, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99)(1, "div", 102);
+    i0.ɵɵrepeaterCreate(2, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_1_For_3_Template, 5, 0, "div", 103, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c2));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 92);
+    i0.ɵɵelement(1, "i", 145);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r6 = i0.ɵɵnextContext().$implicit;
+    const run_r16 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate3(" ", run_r6.PassedTests, "/", run_r6.TotalTests, " (", ctx_r0.getPassRate(run_r6).toFixed(0), "%) ");
+    i0.ɵɵtextInterpolate3(" ", run_r16.PassedTests, "/", run_r16.TotalTests, " (", ctx_r0.getPassRate(run_r16).toFixed(0), "%) ");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 93);
-    i0.ɵɵelement(1, "i", 80);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 146);
+    i0.ɵɵelement(1, "i", 132);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r6 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap("status-" + run_r6.Status.toLowerCase());
+    const run_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("status-" + run_r16.Status.toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-circle-check", run_r6.Status === "Completed")("fa-circle-xmark", run_r6.Status === "Failed")("fa-spinner", run_r6.Status === "Running")("fa-clock", run_r6.Status === "Pending")("fa-ban", run_r6.Status === "Cancelled");
+    i0.ɵɵclassProp("fa-circle-check", run_r16.Status === "Completed")("fa-circle-xmark", run_r16.Status === "Failed")("fa-spinner", run_r16.Status === "Running")("fa-clock", run_r16.Status === "Pending")("fa-ban", run_r16.Status === "Cancelled");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 89);
-    i0.ɵɵelement(1, "i", 94);
-    i0.ɵɵelementStart(2, "span", 95);
-    i0.ɵɵelement(3, "i", 96);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 141);
+    i0.ɵɵelement(1, "i", 147);
+    i0.ɵɵelementStart(2, "span", 148);
+    i0.ɵɵelement(3, "i", 149);
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 97);
-    i0.ɵɵelement(1, "i", 98);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const run_r6 = i0.ɵɵnextContext().$implicit;
+    const run_r16 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("high", ctx_r0.getPassRate(run_r6) >= 80)("medium", ctx_r0.getPassRate(run_r6) >= 50 && ctx_r0.getPassRate(run_r6) < 80)("low", ctx_r0.getPassRate(run_r6) < 50);
+    i0.ɵɵclassProp("high", ctx_r0.getPassRate(run_r16) >= 80)("medium", ctx_r0.getPassRate(run_r16) >= 50 && ctx_r0.getPassRate(run_r16) < 80)("low", ctx_r0.getPassRate(run_r16) < 50);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(run_r6).toFixed(0), "%");
+    i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(run_r16).toFixed(0), "%");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 99);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 152);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r7 = ctx.$implicit;
+    const tag_r17 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r7);
+    i0.ɵɵtextInterpolate(tag_r17);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_18_For_2_Template, 2, 1, "span", 99, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 143);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_18_For_2_Template, 2, 1, "span", 152, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r6 = i0.ɵɵnextContext().$implicit;
+    const run_r16 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.getRunTags(run_r6));
+    i0.ɵɵrepeater(ctx_r0.getRunTags(run_r16));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Template_div_click_0_listener() { const run_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openSuiteRun(run_r6.ID)); });
-    i0.ɵɵelementStart(1, "div", 79);
-    i0.ɵɵelement(2, "i", 80);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 81)(4, "div", 82)(5, "span", 83);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 130);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Template_div_click_0_listener() { const run_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openSuiteRun(run_r16.ID)); });
+    i0.ɵɵelementStart(1, "div", 131);
+    i0.ɵɵelement(2, "i", 132);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 133)(4, "div", 134)(5, "span", 135);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 84);
+    i0.ɵɵelementStart(7, "span", 136);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 85)(10, "span");
-    i0.ɵɵelement(11, "i", 86);
+    i0.ɵɵelementStart(9, "div", 137)(10, "span");
+    i0.ɵɵelement(11, "i", 138);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_13_Template, 3, 3, "span");
+    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_13_Template, 3, 3, "span");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 87);
-    i0.ɵɵconditionalCreate(15, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_15_Template, 2, 12, "span", 88);
-    i0.ɵɵconditionalCreate(16, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_16_Template, 4, 0, "span", 89);
-    i0.ɵɵconditionalCreate(17, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_17_Template, 4, 7, "span", 90);
+    i0.ɵɵelementStart(14, "div", 139);
+    i0.ɵɵconditionalCreate(15, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_15_Template, 2, 12, "span", 140);
+    i0.ɵɵconditionalCreate(16, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_16_Template, 4, 0, "span", 141);
+    i0.ɵɵconditionalCreate(17, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_17_Template, 4, 7, "span", 142);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(18, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Conditional_18_Template, 3, 0, "div", 91);
+    i0.ɵɵconditionalCreate(18, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Conditional_18_Template, 3, 0, "div", 143);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(19, "i", 74);
+    i0.ɵɵelement(19, "i", 144);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r6 = ctx.$implicit;
+    const run_r16 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.getRunStatusColor(run_r6.Status));
+    i0.ɵɵstyleProp("background-color", ctx_r0.getRunStatusColor(run_r16.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-check", run_r6.Status === "Completed")("fa-times", run_r6.Status === "Failed")("fa-spinner", run_r6.Status === "Running")("fa-clock", run_r6.Status === "Pending")("fa-ban", run_r6.Status === "Cancelled");
+    i0.ɵɵclassProp("fa-check", run_r16.Status === "Completed")("fa-times", run_r16.Status === "Failed")("fa-spinner", run_r16.Status === "Running")("fa-clock", run_r16.Status === "Pending")("fa-ban", run_r16.Status === "Cancelled");
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Run #", run_r6.ID.substring(0, 8));
+    i0.ɵɵtextInterpolate1("Run #", run_r16.ID.substring(0, 8));
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("color", ctx_r0.getRunStatusColor(run_r6.Status));
+    i0.ɵɵstyleProp("color", ctx_r0.getRunStatusColor(run_r16.Status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(run_r6.Status);
+    i0.ɵɵtextInterpolate(run_r16.Status);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.getRelativeTime(run_r6.StartedAt));
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getRelativeTime(run_r16.StartedAt));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(run_r6.TotalTests ? 13 : -1);
+    i0.ɵɵconditional(run_r16.TotalTests ? 13 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.evalPreferences.showExecution ? 15 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.evalPreferences.showHuman ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.evalPreferences.showAuto && run_r6.TotalTests ? 17 : -1);
+    i0.ɵɵconditional(ctx_r0.evalPreferences.showAuto && run_r16.TotalTests ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.getRunTags(run_r6).length > 0 ? 18 : -1);
+    i0.ɵɵconditional(ctx_r0.getRunTags(run_r16).length > 0 ? 18 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_For_2_Template, 20, 22, "div", 77, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 128);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_For_2_Template, 20, 22, "div", 129, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.suiteRuns);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 75);
-    i0.ɵɵelement(2, "i", 100);
+function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 127);
+    i0.ɵɵelement(2, "i", 153);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4, "No Suite Runs Yet");
@@ -373,17 +552,17 @@ function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_3_Template(
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6, "Run this suite to see execution history and results here.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 21);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_60_Conditional_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.runSuite()); });
-    i0.ɵɵelement(8, "i", 22);
+    i0.ɵɵelementStart(7, "button", 25);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.runSuite()); });
+    i0.ɵɵelement(8, "i", 26);
     i0.ɵɵtext(9, " Run Suite Now ");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_60_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_1_Template, 4, 1, "div", 57);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_2_Template, 3, 0, "div", 76);
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_60_Conditional_3_Template, 10, 0, "div", 59);
+function MJTestSuiteFormComponentExtended_Conditional_62_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_1_Template, 4, 1, "div", 99);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_2_Template, 3, 0, "div", 128);
+    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_3_Template, 10, 0, "div", 101);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -394,12 +573,12 @@ function MJTestSuiteFormComponentExtended_Conditional_60_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.runsLoaded && !ctx_r0.loadingRuns && ctx_r0.suiteRuns.length === 0 ? 3 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵelement(1, "mj-loading", 101);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "mj-loading", 154);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -408,10 +587,10 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" \u00B7 ", ctx_r0.selectedTags.length, " tags");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 112);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 165);
     i0.ɵɵtext(1);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_19_Conditional_2_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_19_Conditional_2_Template, 2, 1, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -420,8 +599,8 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.selectedTags.length > 0 ? 2 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 117);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 170);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -429,37 +608,37 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("(", ctx_r0.selectedTags.length, " selected)");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 122);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 175);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_For_9_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 121);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_For_9_Template_button_click_0_listener() { const tag_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.toggleTagFilter(tag_r13)); });
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_For_9_Conditional_1_Template, 1, 0, "i", 122);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 174);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_For_9_Template_button_click_0_listener() { const tag_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.toggleTagFilter(tag_r23)); });
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_For_9_Conditional_1_Template, 1, 0, "i", 175);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r13 = ctx.$implicit;
+    const tag_r23 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("active", ctx_r0.isTagSelected(tag_r13));
+    i0.ɵɵclassProp("active", ctx_r0.isTagSelected(tag_r23));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isTagSelected(tag_r13) ? 1 : -1);
+    i0.ɵɵconditional(ctx_r0.isTagSelected(tag_r23) ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", tag_r13, " ");
+    i0.ɵɵtextInterpolate1(" ", tag_r23, " ");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 114)(1, "label");
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 167)(1, "label");
     i0.ɵɵtext(2, "Filter by Tag ");
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_Conditional_3_Template, 2, 1, "span", 117);
+    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_Conditional_3_Template, 2, 1, "span", 170);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 118)(5, "button", 119);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleTagFilter(null)); });
-    i0.ɵɵelement(6, "i", 9);
+    i0.ɵɵelementStart(4, "div", 171)(5, "button", 172);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleTagFilter(null)); });
+    i0.ɵɵelement(6, "i", 11);
     i0.ɵɵtext(7, " All Tags ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(8, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_For_9_Template, 3, 4, "button", 120, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(8, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_For_9_Template, 3, 4, "button", 173, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -470,28 +649,28 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r0.uniqueTags);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 113)(1, "div", 114)(2, "label");
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 166)(1, "div", 167)(2, "label");
     i0.ɵɵtext(3, "Time Range");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 115)(5, "button", 116);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("7d")); });
+    i0.ɵɵelementStart(4, "div", 168)(5, "button", 169);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("7d")); });
     i0.ɵɵtext(6, "7 Days");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 116);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("30d")); });
+    i0.ɵɵelementStart(7, "button", 169);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("30d")); });
     i0.ɵɵtext(8, "30 Days");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 116);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("90d")); });
+    i0.ɵɵelementStart(9, "button", 169);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("90d")); });
     i0.ɵɵtext(10, "90 Days");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 116);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("all")); });
+    i0.ɵɵelementStart(11, "button", 169);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.setTimeRange("all")); });
     i0.ɵɵtext(12, "All Time");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Conditional_13_Template, 10, 3, "div", 114);
+    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Conditional_13_Template, 10, 3, "div", 167);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -506,37 +685,37 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.uniqueTags.length > 0 ? 13 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_For_60_For_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 145);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_For_60_For_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 198);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r16 = ctx.$implicit;
+    const tag_r26 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r16);
+    i0.ɵɵtextInterpolate(tag_r26);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_For_60_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 146);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_For_60_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 199);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const dp_r15 = i0.ɵɵnextContext().$implicit;
+    const dp_r25 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("+", dp_r15.tags.length - 2);
+    i0.ɵɵtextInterpolate1("+", dp_r25.tags.length - 2);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_For_60_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 140);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_For_60_Template_tr_click_0_listener() { const dp_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.openSuiteRun(dp_r15.runId)); });
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_For_60_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 193);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_For_60_Template_tr_click_0_listener() { const dp_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.openSuiteRun(dp_r25.runId)); });
     i0.ɵɵelementStart(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "td")(5, "span", 141);
+    i0.ɵɵelementStart(4, "td")(5, "span", 194);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "td")(8, "div", 142);
-    i0.ɵɵelement(9, "div", 143);
+    i0.ɵɵelementStart(7, "td")(8, "div", 195);
+    i0.ɵɵelement(9, "div", 196);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
@@ -549,86 +728,86 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵelementStart(16, "td");
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "td")(19, "div", 144);
-    i0.ɵɵrepeaterCreate(20, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_For_60_For_21_Template, 2, 1, "span", 145, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(22, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_For_60_Conditional_22_Template, 2, 1, "span", 146);
+    i0.ɵɵelementStart(18, "td")(19, "div", 197);
+    i0.ɵɵrepeaterCreate(20, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_For_60_For_21_Template, 2, 1, "span", 198, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(22, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_For_60_Conditional_22_Template, 2, 1, "span", 199);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const dp_r15 = ctx.$implicit;
+    const dp_r25 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 12, dp_r15.date, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 12, dp_r25.date, "short"));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", "status-" + dp_r15.status.toLowerCase());
+    i0.ɵɵproperty("ngClass", "status-" + dp_r25.status.toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(dp_r15.status);
+    i0.ɵɵtextInterpolate(dp_r25.status);
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("width", dp_r15.passRate, "%");
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(15, _c5, dp_r15.passRate >= 80, dp_r15.passRate >= 50 && dp_r15.passRate < 80, dp_r15.passRate < 50));
+    i0.ɵɵstyleProp("width", dp_r25.passRate, "%");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(15, _c5, dp_r25.passRate >= 80, dp_r25.passRate >= 50 && dp_r25.passRate < 80, dp_r25.passRate < 50));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", dp_r15.passRate.toFixed(0), "%");
+    i0.ɵɵtextInterpolate1("", dp_r25.passRate.toFixed(0), "%");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", dp_r15.passedTests, "/", dp_r15.totalTests);
+    i0.ɵɵtextInterpolate2("", dp_r25.passedTests, "/", dp_r25.totalTests);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.formatDuration(dp_r15.duration));
+    i0.ɵɵtextInterpolate(ctx_r0.formatDuration(dp_r25.duration));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.formatCost(dp_r15.cost));
+    i0.ɵɵtextInterpolate(ctx_r0.formatCost(dp_r25.cost));
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(dp_r15.tags.slice(0, 2));
+    i0.ɵɵrepeater(dp_r25.tags.slice(0, 2));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(dp_r15.tags.length > 2 ? 22 : -1);
+    i0.ɵɵconditional(dp_r25.tags.length > 2 ? 22 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_Conditional_61_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 139)(1, "p");
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_Conditional_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 192)(1, "p");
     i0.ɵɵtext(2, "No runs match the current filters.");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 123)(1, "div", 124)(2, "div", 125);
-    i0.ɵɵelement(3, "i", 100);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 176)(1, "div", 177)(2, "div", 178);
+    i0.ɵɵelement(3, "i", 153);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 126)(5, "div", 127);
+    i0.ɵɵelementStart(4, "div", 179)(5, "div", 180);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 128);
+    i0.ɵɵelementStart(7, "div", 181);
     i0.ɵɵtext(8, "Total Runs");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 124)(10, "div", 129);
-    i0.ɵɵelement(11, "i", 92);
+    i0.ɵɵelementStart(9, "div", 177)(10, "div", 182);
+    i0.ɵɵelement(11, "i", 145);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 126)(13, "div", 127);
+    i0.ɵɵelementStart(12, "div", 179)(13, "div", 180);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 128);
+    i0.ɵɵelementStart(15, "div", 181);
     i0.ɵɵtext(16, "Avg Pass Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 130);
-    i0.ɵɵelement(18, "i", 16);
+    i0.ɵɵelementStart(17, "div", 183);
+    i0.ɵɵelement(18, "i", 19);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(20, "div", 124)(21, "div", 131);
-    i0.ɵɵelement(22, "i", 96);
+    i0.ɵɵelementStart(20, "div", 177)(21, "div", 184);
+    i0.ɵɵelement(22, "i", 149);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 126)(24, "div", 127);
+    i0.ɵɵelementStart(23, "div", 179)(24, "div", 180);
     i0.ɵɵtext(25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 128);
+    i0.ɵɵelementStart(26, "div", 181);
     i0.ɵɵtext(27, "Avg Duration");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "div", 124)(29, "div", 132);
-    i0.ɵɵelement(30, "i", 133);
+    i0.ɵɵelementStart(28, "div", 177)(29, "div", 185);
+    i0.ɵɵelement(30, "i", 186);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "div", 126)(32, "div", 127);
+    i0.ɵɵelementStart(31, "div", 179)(32, "div", 180);
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "div", 128);
+    i0.ɵɵelementStart(34, "div", 181);
     i0.ɵɵtext(35, "Total Cost");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(36, "div", 134)(37, "h3");
-    i0.ɵɵelement(38, "i", 135);
+    i0.ɵɵelementStart(36, "div", 187)(37, "h3");
+    i0.ɵɵelement(38, "i", 188);
     i0.ɵɵtext(39, " Run History");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "div", 136)(41, "table", 137)(42, "thead")(43, "tr")(44, "th");
+    i0.ɵɵelementStart(40, "div", 189)(41, "table", 190)(42, "thead")(43, "tr")(44, "th");
     i0.ɵɵtext(45, "Date");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(46, "th");
@@ -650,9 +829,9 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵtext(57, "Tags");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(58, "tbody");
-    i0.ɵɵrepeaterCreate(59, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_For_60_Template, 23, 19, "tr", 138, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(59, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_For_60_Template, 23, 19, "tr", 191, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(61, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_Conditional_61_Template, 3, 0, "div", 139);
+    i0.ɵɵconditionalCreate(61, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_Conditional_61_Template, 3, 0, "div", 192);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -675,260 +854,260 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.getFilteredAnalyticsData().length === 0 ? 61 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵelement(1, "mj-loading", 148);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "mj-loading", 201);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 170);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.clearMatrixFilter()); });
-    i0.ɵɵelement(1, "i", 171);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 223);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.clearMatrixFilter()); });
+    i0.ɵɵelement(1, "i", 91);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 177);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 229);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r21 = ctx.$implicit;
+    const tag_r31 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r21);
+    i0.ɵɵtextInterpolate(tag_r31);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 178);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 230);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r20 = i0.ɵɵnextContext(2).$implicit;
+    const run_r30 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("+", run_r20.tags.length - 2);
+    i0.ɵɵtextInterpolate1("+", run_r30.tags.length - 2);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 174);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_For_2_Template, 2, 1, "span", 177, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Conditional_3_Template, 2, 1, "span", 178);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 226);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_For_2_Template, 2, 1, "span", 229, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Conditional_3_Template, 2, 1, "span", 230);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r20 = i0.ɵɵnextContext().$implicit;
+    const run_r30 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(run_r20.tags.slice(0, 2));
+    i0.ɵɵrepeater(run_r30.tags.slice(0, 2));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(run_r20.tags.length > 2 ? 3 : -1);
+    i0.ɵɵconditional(run_r30.tags.length > 2 ? 3 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 172);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", 224);
     i0.ɵɵpipe(1, "date");
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Template_th_click_0_listener() { const run_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.openSuiteRun(run_r20.runId)); });
-    i0.ɵɵelementStart(2, "div", 173);
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Template, 4, 1, "div", 174);
-    i0.ɵɵelementStart(4, "div", 175);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Template_th_click_0_listener() { const run_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.openSuiteRun(run_r30.runId)); });
+    i0.ɵɵelementStart(2, "div", 225);
+    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Conditional_3_Template, 4, 1, "div", 226);
+    i0.ɵɵelementStart(4, "div", 227);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 176);
+    i0.ɵɵelementStart(6, "div", 228);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const run_r20 = ctx.$implicit;
+    const run_r30 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("title", "Click to view suite run - " + i0.ɵɵpipeBind2(1, 5, run_r20.date, "medium"));
+    i0.ɵɵproperty("title", "Click to view suite run - " + i0.ɵɵpipeBind2(1, 5, run_r30.date, "medium"));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(run_r20.tags.length > 0 ? 3 : -1);
+    i0.ɵɵconditional(run_r30.tags.length > 0 ? 3 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.getRelativeTime(run_r20.date));
+    i0.ɵɵtextInterpolate(ctx_r0.getRelativeTime(run_r30.date));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(8, _c5, run_r20.passRate >= 80, run_r20.passRate >= 50 && run_r20.passRate < 80, run_r20.passRate < 50));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(8, _c5, run_r30.passRate >= 80, run_r30.passRate >= 50 && run_r30.passRate < 80, run_r30.passRate < 50));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", run_r20.passRate.toFixed(0), "% ");
+    i0.ɵɵtextInterpolate1(" ", run_r30.passRate.toFixed(0), "% ");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 192);
-    i0.ɵɵelement(1, "i", 80);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 244);
+    i0.ɵɵelement(1, "i", 132);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const result_r26 = i0.ɵɵnextContext();
+    const result_r36 = i0.ɵɵnextContext();
     const ctx_r0 = i0.ɵɵnextContext(7);
-    i0.ɵɵclassProp("cell-skipped-status", result_r26.status === "Skipped" || result_r26.status === "Pending");
-    i0.ɵɵproperty("ngClass", "status-" + result_r26.status.toLowerCase())("title", ctx_r0.getStatusTooltip(result_r26.status));
+    i0.ɵɵclassProp("cell-skipped-status", result_r36.status === "Skipped" || result_r36.status === "Pending");
+    i0.ɵɵproperty("ngClass", "status-" + result_r36.status.toLowerCase())("title", ctx_r0.getStatusTooltip(result_r36.status));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-check", result_r26.status === "Passed")("fa-times", result_r26.status === "Failed")("fa-exclamation", result_r26.status === "Error")("fa-hourglass-end", result_r26.status === "Timeout")("fa-forward", result_r26.status === "Skipped")("fa-spinner", result_r26.status === "Running")("fa-clock", result_r26.status === "Pending");
+    i0.ɵɵclassProp("fa-check", result_r36.status === "Passed")("fa-times", result_r36.status === "Failed")("fa-exclamation", result_r36.status === "Error")("fa-hourglass-end", result_r36.status === "Timeout")("fa-forward", result_r36.status === "Skipped")("fa-spinner", result_r36.status === "Running")("fa-clock", result_r36.status === "Pending");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 188);
-    i0.ɵɵelement(1, "i", 193);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 240);
+    i0.ɵɵelement(1, "i", 245);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 194);
-    i0.ɵɵelement(1, "i", 94);
-    i0.ɵɵelementStart(2, "span", 195);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 246);
+    i0.ɵɵelement(1, "i", 147);
+    i0.ɵɵelementStart(2, "span", 247);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const result_r26 = i0.ɵɵnextContext();
+    const result_r36 = i0.ɵɵnextContext();
     const ctx_r0 = i0.ɵɵnextContext(7);
-    i0.ɵɵclassProp("rating-low", result_r26.humanRating <= 4)("rating-medium", result_r26.humanRating >= 5 && result_r26.humanRating <= 6)("rating-good", result_r26.humanRating >= 7 && result_r26.humanRating <= 8)("rating-excellent", result_r26.humanRating >= 9);
-    i0.ɵɵproperty("title", ctx_r0.getHumanTooltip(result_r26.humanRating, result_r26.humanComments));
+    i0.ɵɵclassProp("rating-low", result_r36.humanRating <= 4)("rating-medium", result_r36.humanRating >= 5 && result_r36.humanRating <= 6)("rating-good", result_r36.humanRating >= 7 && result_r36.humanRating <= 8)("rating-excellent", result_r36.humanRating >= 9);
+    i0.ɵɵproperty("title", ctx_r0.getHumanTooltip(result_r36.humanRating, result_r36.humanComments));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(result_r26.humanRating);
+    i0.ɵɵtextInterpolate(result_r36.humanRating);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 196);
-    i0.ɵɵelement(1, "i", 98);
-    i0.ɵɵelementStart(2, "span", 197);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 248);
+    i0.ɵɵelement(1, "i", 151);
+    i0.ɵɵelementStart(2, "span", 249);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const result_r26 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("score-low", result_r26.score < 0.5)("score-medium", result_r26.score >= 0.5 && result_r26.score < 0.7)("score-good", result_r26.score >= 0.7 && result_r26.score < 0.85)("score-excellent", result_r26.score >= 0.85);
-    i0.ɵɵproperty("title", "Auto Score: " + (result_r26.score * 100).toFixed(0) + "% automated evaluation");
+    const result_r36 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("score-low", result_r36.score < 0.5)("score-medium", result_r36.score >= 0.5 && result_r36.score < 0.7)("score-good", result_r36.score >= 0.7 && result_r36.score < 0.85)("score-excellent", result_r36.score >= 0.85);
+    i0.ɵɵproperty("title", "Auto Score: " + (result_r36.score * 100).toFixed(0) + "% automated evaluation");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate((result_r26.score * 100).toFixed(0));
+    i0.ɵɵtextInterpolate((result_r36.score * 100).toFixed(0));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 191);
-    i0.ɵɵelement(1, "i", 98);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 243);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 185);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_1_Template, 2, 18, "span", 187);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_2_Template, 2, 0, "span", 188);
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_3_Template, 4, 10, "span", 189);
-    i0.ɵɵconditionalCreate(4, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_4_Template, 4, 10, "span", 190);
-    i0.ɵɵconditionalCreate(5, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_5_Template, 2, 0, "span", 191);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 237);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_1_Template, 2, 18, "span", 239);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_2_Template, 2, 0, "span", 240);
+    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_3_Template, 4, 10, "span", 241);
+    i0.ɵɵconditionalCreate(4, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_4_Template, 4, 10, "span", 242);
+    i0.ɵɵconditionalCreate(5, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Conditional_5_Template, 2, 0, "span", 243);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const result_r26 = ctx;
+    const result_r36 = ctx;
     const ctx_r0 = i0.ɵɵnextContext(7);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.evalPreferences.showExecution ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.evalPreferences.showHuman && !result_r26.humanRating ? 2 : -1);
+    i0.ɵɵconditional(ctx_r0.evalPreferences.showHuman && !result_r36.humanRating ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.evalPreferences.showHuman && result_r26.humanRating ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.evalPreferences.showHuman && result_r36.humanRating ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.evalPreferences.showAuto && result_r26.score != null ? 4 : -1);
+    i0.ɵɵconditional(ctx_r0.evalPreferences.showAuto && result_r36.score != null ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.evalPreferences.showAuto && result_r26.score == null ? 5 : -1);
+    i0.ɵɵconditional(ctx_r0.evalPreferences.showAuto && result_r36.score == null ? 5 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 186);
-    i0.ɵɵelement(1, "i", 198);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 238);
+    i0.ɵɵelement(1, "i", 250);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 184);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Template_td_click_0_listener($event) { const run_r25 = i0.ɵɵrestoreView(_r24).$implicit; const test_r23 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.onMatrixCellClick(ctx_r0.getTestResultForRun(run_r25.runId, test_r23.testId), $event)); });
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Template, 6, 5, "div", 185);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_2_Template, 2, 0, "span", 186);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 236);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Template_td_click_0_listener($event) { const run_r35 = i0.ɵɵrestoreView(_r34).$implicit; const test_r33 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.onMatrixCellClick(ctx_r0.getTestResultForRun(run_r35.runId, test_r33.testId), $event)); });
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_1_Template, 6, 5, "div", 237);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Conditional_2_Template, 2, 0, "span", 238);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_27_0;
     let tmp_28_0;
-    const run_r25 = ctx.$implicit;
-    const test_r23 = i0.ɵɵnextContext().$implicit;
+    const run_r35 = ctx.$implicit;
+    const test_r33 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("clickable", ctx_r0.getTestResultForRun(run_r25.runId, test_r23.testId))("cell-not-run", !ctx_r0.getTestResultForRun(run_r25.runId, test_r23.testId));
-    i0.ɵɵproperty("ngClass", ctx_r0.getMatrixCellClass(ctx_r0.getTestResultForRun(run_r25.runId, test_r23.testId)))("title", ((tmp_27_0 = ctx_r0.getTestResultForRun(run_r25.runId, test_r23.testId)) == null ? null : tmp_27_0.status) + " - Click to view test run" || "Not Run");
+    i0.ɵɵclassProp("clickable", ctx_r0.getTestResultForRun(run_r35.runId, test_r33.testId))("cell-not-run", !ctx_r0.getTestResultForRun(run_r35.runId, test_r33.testId));
+    i0.ɵɵproperty("ngClass", ctx_r0.getMatrixCellClass(ctx_r0.getTestResultForRun(run_r35.runId, test_r33.testId)))("title", ((tmp_27_0 = ctx_r0.getTestResultForRun(run_r35.runId, test_r33.testId)) == null ? null : tmp_27_0.status) + " - Click to view test run" || "Not Run");
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_28_0 = ctx_r0.getTestResultForRun(run_r25.runId, test_r23.testId)) ? 1 : -1, tmp_28_0);
+    i0.ɵɵconditional((tmp_28_0 = ctx_r0.getTestResultForRun(run_r35.runId, test_r33.testId)) ? 1 : -1, tmp_28_0);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.getTestResultForRun(run_r25.runId, test_r23.testId) ? 2 : -1);
+    i0.ɵɵconditional(!ctx_r0.getTestResultForRun(run_r35.runId, test_r33.testId) ? 2 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 179);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_Template_tr_click_0_listener() { const test_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectMatrixRow(test_r23.testId)); });
-    i0.ɵɵelementStart(1, "td", 180);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 231);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_Template_tr_click_0_listener() { const test_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectMatrixRow(test_r33.testId)); });
+    i0.ɵɵelementStart(1, "td", 232);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 181)(4, "span", 182);
+    i0.ɵɵelementStart(3, "td", 233)(4, "span", 234);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(6, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Template, 3, 8, "td", 183, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelement(8, "td", 169);
+    i0.ɵɵrepeaterCreate(6, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_For_7_Template, 3, 8, "td", 235, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelement(8, "td", 222);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const test_r23 = ctx.$implicit;
+    const test_r33 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("row-selected", ctx_r0.selectedMatrixTestId === test_r23.testId);
+    i0.ɵɵclassProp("row-selected", ctx_r0.selectedMatrixTestId === test_r33.testId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(test_r23.sequence);
+    i0.ɵɵtextInterpolate(test_r33.sequence);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", test_r23.testName);
+    i0.ɵɵproperty("title", test_r33.testName);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(test_r23.testName);
+    i0.ɵɵtextInterpolate(test_r33.testName);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.matrixData);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 200)(1, "span", 203);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 252)(1, "span", 255);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const run_r27 = i0.ɵɵnextContext().$implicit;
+    const run_r37 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", ctx_r0.getRunPassedCount(run_r27), "/", ctx_r0.getRunTotalCount(run_r27));
+    i0.ɵɵtextInterpolate2("", ctx_r0.getRunPassedCount(run_r37), "/", ctx_r0.getRunTotalCount(run_r37));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 204);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 256);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_16_0;
-    const run_r27 = i0.ɵɵnextContext(2).$implicit;
+    const run_r37 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate((tmp_16_0 = ctx_r0.getRunHumanAvg(run_r27)) == null ? null : tmp_16_0.toFixed(1));
+    i0.ɵɵtextInterpolate((tmp_16_0 = ctx_r0.getRunHumanAvg(run_r37)) == null ? null : tmp_16_0.toFixed(1));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 201);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Conditional_1_Template, 2, 1, "span", 204);
-    i0.ɵɵelementStart(2, "span", 205);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 253);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Conditional_1_Template, 2, 1, "span", 256);
+    i0.ɵɵelementStart(2, "span", 257);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const run_r27 = i0.ɵɵnextContext().$implicit;
+    const run_r37 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.getRunHumanAvg(run_r27) != null ? 1 : -1);
+    i0.ɵɵconditional(ctx_r0.getRunHumanAvg(run_r37) != null ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("(", ctx_r0.getRunHumanCount(run_r27), ")");
+    i0.ɵɵtextInterpolate1("(", ctx_r0.getRunHumanCount(run_r37), ")");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 204);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 256);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r27 = i0.ɵɵnextContext(2).$implicit;
+    const run_r37 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", (ctx_r0.getRunAutoAvg(run_r27) * 100).toFixed(0), "%");
+    i0.ɵɵtextInterpolate1("", (ctx_r0.getRunAutoAvg(run_r37) * 100).toFixed(0), "%");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 202);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Conditional_1_Template, 2, 1, "span", 204);
-    i0.ɵɵelementStart(2, "span", 205);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 254);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Conditional_1_Template, 2, 1, "span", 256);
+    i0.ɵɵelementStart(2, "span", 257);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const run_r27 = i0.ɵɵnextContext().$implicit;
+    const run_r37 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.getRunAutoAvg(run_r27) != null ? 1 : -1);
+    i0.ɵɵconditional(ctx_r0.getRunAutoAvg(run_r37) != null ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("(", ctx_r0.getRunAutoCount(run_r27), ")");
+    i0.ɵɵtextInterpolate1("(", ctx_r0.getRunAutoCount(run_r37), ")");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 168)(1, "div", 199);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_2_Template, 3, 2, "span", 200);
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Template, 4, 2, "span", 201);
-    i0.ɵɵconditionalCreate(4, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Template, 4, 2, "span", 202);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 221)(1, "div", 251);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_2_Template, 3, 2, "span", 252);
+    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_3_Template, 4, 2, "span", 253);
+    i0.ɵɵconditionalCreate(4, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Conditional_4_Template, 4, 2, "span", 254);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -939,50 +1118,50 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.evalPreferences.showAuto ? 4 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 147)(1, "div", 149)(2, "h3");
-    i0.ɵɵelement(3, "i", 106);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 200)(1, "div", 202)(2, "h3");
+    i0.ɵɵelement(3, "i", 159);
     i0.ɵɵtext(4, " Test Results Matrix");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 150)(6, "div", 151);
-    i0.ɵɵelement(7, "i", 152);
-    i0.ɵɵelementStart(8, "input", 153);
-    i0.ɵɵlistener("input", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Template_input_input_8_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onMatrixFilterInput($event)); });
+    i0.ɵɵelementStart(5, "div", 203)(6, "div", 204);
+    i0.ɵɵelement(7, "i", 205);
+    i0.ɵɵelementStart(8, "input", 206);
+    i0.ɵɵlistener("input", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Template_input_input_8_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onMatrixFilterInput($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Conditional_9_Template, 2, 0, "button", 154);
+    i0.ɵɵconditionalCreate(9, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Conditional_9_Template, 2, 0, "button", 207);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 155);
+    i0.ɵɵelementStart(10, "span", 208);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 156);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.exportMatrixToCSV()); });
-    i0.ɵɵelement(13, "i", 157);
+    i0.ɵɵelementStart(12, "button", 209);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.exportMatrixToCSV()); });
+    i0.ɵɵelement(13, "i", 210);
     i0.ɵɵtext(14, " Export ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 158)(16, "table", 159)(17, "thead")(18, "tr")(19, "th", 160);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Template_th_click_19_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleMatrixSort("sequence")); });
+    i0.ɵɵelementStart(15, "div", 211)(16, "table", 212)(17, "thead")(18, "tr")(19, "th", 213);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Template_th_click_19_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleMatrixSort("sequence")); });
     i0.ɵɵtext(20, " # ");
-    i0.ɵɵelement(21, "i", 16);
+    i0.ɵɵelement(21, "i", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "th", 161);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Template_th_click_22_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleMatrixSort("name")); });
+    i0.ɵɵelementStart(22, "th", 214);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Template_th_click_22_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleMatrixSort("name")); });
     i0.ɵɵtext(23, " Test ");
-    i0.ɵɵelement(24, "i", 16);
+    i0.ɵɵelement(24, "i", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(25, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_26_Template, 8, 12, "th", 162, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelement(27, "th", 163);
+    i0.ɵɵrepeaterCreate(25, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_26_Template, 8, 12, "th", 215, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelement(27, "th", 216);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(28, "tbody");
-    i0.ɵɵrepeaterCreate(29, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_30_Template, 9, 5, "tr", 164, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(29, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_30_Template, 9, 5, "tr", 217, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "tfoot")(32, "tr", 165);
-    i0.ɵɵelement(33, "td", 166);
-    i0.ɵɵelementStart(34, "td", 167)(35, "strong");
+    i0.ɵɵelementStart(31, "tfoot")(32, "tr", 218);
+    i0.ɵɵelement(33, "td", 219);
+    i0.ɵɵelementStart(34, "td", 220)(35, "strong");
     i0.ɵɵtext(36, "Totals");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(37, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_For_38_Template, 5, 3, "td", 168, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelement(39, "td", 169);
+    i0.ɵɵrepeaterCreate(37, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_For_38_Template, 5, 3, "td", 221, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelement(39, "td", 222);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -1005,9 +1184,9 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance(8);
     i0.ɵɵrepeater(ctx_r0.matrixData);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 75);
-    i0.ɵɵelement(2, "i", 106);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 127);
+    i0.ɵɵelement(2, "i", 159);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4, "No Matrix Data");
@@ -1016,10 +1195,10 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵtext(6, "No suite runs match the current filters.");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_0_Template, 2, 0, "div", 57);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_1_Template, 40, 7, "div", 147);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Conditional_2_Template, 7, 0, "div", 59);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_0_Template, 2, 0, "div", 99);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_1_Template, 40, 7, "div", 200);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Conditional_2_Template, 7, 0, "div", 101);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r0.loadingMatrix ? 0 : -1);
@@ -1028,37 +1207,37 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.loadingMatrix && ctx_r0.matrixLoaded && ctx_r0.matrixData.length === 0 ? 2 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵelement(1, "mj-loading", 207);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "mj-loading", 259);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206)(1, "div", 208)(2, "h3");
-    i0.ɵɵelement(3, "i", 107);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 258)(1, "div", 260)(2, "h3");
+    i0.ɵɵelement(3, "i", 160);
     i0.ɵɵtext(4, " Test Results Flow");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 209)(6, "span", 210);
-    i0.ɵɵelement(7, "i", 122);
+    i0.ɵɵelementStart(5, "div", 261)(6, "span", 262);
+    i0.ɵɵelement(7, "i", 175);
     i0.ɵɵtext(8, " Passed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 211);
-    i0.ɵɵelement(10, "i", 171);
+    i0.ɵɵelementStart(9, "span", 263);
+    i0.ɵɵelement(10, "i", 91);
     i0.ɵɵtext(11, " Failed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 212);
-    i0.ɵɵelement(13, "i", 213);
+    i0.ɵɵelementStart(12, "span", 264);
+    i0.ɵɵelement(13, "i", 265);
     i0.ɵɵtext(14, " Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 214);
-    i0.ɵɵelement(16, "i", 215);
+    i0.ɵɵelementStart(15, "span", 266);
+    i0.ɵɵelement(16, "i", 267);
     i0.ɵɵtext(17, " Skipped");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "div", 216);
-    i0.ɵɵelement(19, "div", 217, 0);
+    i0.ɵɵelementStart(18, "div", 268);
+    i0.ɵɵelement(19, "div", 269, 1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 218);
-    i0.ɵɵelement(22, "i", 45);
+    i0.ɵɵelementStart(21, "div", 270);
+    i0.ɵɵelement(22, "i", 119);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1066,9 +1245,9 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance(23);
     i0.ɵɵtextInterpolate1(" Interactive visualization showing test results across ", ctx_r0.matrixData.length, " runs. Hover over elements for details, click nodes to navigate. ");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 75);
-    i0.ɵɵelement(2, "i", 107);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 127);
+    i0.ɵɵelement(2, "i", 160);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4, "No Chart Data");
@@ -1077,10 +1256,10 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵtext(6, "No suite runs match the current filters.");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Conditional_0_Template, 2, 0, "div", 57);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Conditional_1_Template, 24, 1, "div", 206);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Conditional_2_Template, 7, 0, "div", 59);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Conditional_0_Template, 2, 0, "div", 99);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Conditional_1_Template, 24, 1, "div", 258);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Conditional_2_Template, 7, 0, "div", 101);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r0.loadingMatrix ? 0 : -1);
@@ -1089,40 +1268,40 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Condition
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.loadingMatrix && ctx_r0.matrixLoaded && ctx_r0.matrixData.length === 0 ? 2 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 102)(1, "div", 103)(2, "button", 104);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setAnalyticsView("summary")); });
-    i0.ɵɵelement(3, "i", 105);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 155)(1, "div", 156)(2, "button", 157);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setAnalyticsView("summary")); });
+    i0.ɵɵelement(3, "i", 158);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Summary");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "button", 104);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setAnalyticsView("matrix")); });
-    i0.ɵɵelement(7, "i", 106);
+    i0.ɵɵelementStart(6, "button", 157);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setAnalyticsView("matrix")); });
+    i0.ɵɵelement(7, "i", 159);
     i0.ɵɵelementStart(8, "span");
     i0.ɵɵtext(9, "Matrix");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "button", 104);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setAnalyticsView("chart")); });
-    i0.ɵɵelement(11, "i", 107);
+    i0.ɵɵelementStart(10, "button", 157);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setAnalyticsView("chart")); });
+    i0.ɵɵelement(11, "i", 160);
     i0.ɵɵelementStart(12, "span");
     i0.ɵɵtext(13, "Chart");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(14, "div", 108)(15, "div", 109);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFilters()); });
-    i0.ɵɵelementStart(16, "span", 110);
-    i0.ɵɵelement(17, "i", 111);
+    i0.ɵɵelementStart(14, "div", 161)(15, "div", 162);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFilters()); });
+    i0.ɵɵelementStart(16, "span", 163);
+    i0.ɵɵelement(17, "i", 164);
     i0.ɵɵtext(18, " Filters ");
-    i0.ɵɵconditionalCreate(19, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_19_Template, 3, 2, "span", 112);
+    i0.ɵɵconditionalCreate(19, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_19_Template, 3, 2, "span", 165);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(20, "i", 16);
+    i0.ɵɵelement(20, "i", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(21, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_21_Template, 14, 9, "div", 113);
+    i0.ɵɵconditionalCreate(21, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_21_Template, 14, 9, "div", 166);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(22, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_22_Template, 62, 15);
-    i0.ɵɵconditionalCreate(23, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_23_Template, 3, 3);
-    i0.ɵɵconditionalCreate(24, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Conditional_24_Template, 3, 3);
+    i0.ɵɵconditionalCreate(22, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_22_Template, 62, 15);
+    i0.ɵɵconditionalCreate(23, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_23_Template, 3, 3);
+    i0.ɵɵconditionalCreate(24, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Conditional_24_Template, 3, 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
@@ -1146,10 +1325,10 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Template(
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.analyticsView === "chart" ? 24 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 75);
-    i0.ɵɵelement(2, "i", 32);
+function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 127);
+    i0.ɵɵelement(2, "i", 36);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4, "No Analytics Data");
@@ -1157,17 +1336,17 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_3_Template(
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6, "Run this suite to start collecting analytics data.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 21);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_61_Conditional_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.runSuite()); });
-    i0.ɵɵelement(8, "i", 22);
+    i0.ɵɵelementStart(7, "button", 25);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_63_Conditional_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.runSuite()); });
+    i0.ɵɵelement(8, "i", 26);
     i0.ɵɵtext(9, " Run Suite Now ");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_61_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_1_Template, 2, 0, "div", 57);
-    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_2_Template, 25, 14);
-    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_61_Conditional_3_Template, 10, 0, "div", 59);
+function MJTestSuiteFormComponentExtended_Conditional_63_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_1_Template, 2, 0, "div", 99);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_2_Template, 25, 14);
+    i0.ɵɵconditionalCreate(3, MJTestSuiteFormComponentExtended_Conditional_63_Conditional_3_Template, 10, 0, "div", 101);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1178,75 +1357,75 @@ function MJTestSuiteFormComponentExtended_Conditional_61_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.loadingAnalytics && ctx_r0.analyticsLoaded && ctx_r0.analyticsData.length === 0 ? 3 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_For_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 234);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_For_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 286);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r31 = ctx.$implicit;
+    const tag_r41 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r31);
+    i0.ɵɵtextInterpolate(tag_r41);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 233);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_For_2_Conditional_8_For_2_Template, 2, 1, "span", 234, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 285);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_For_2_Conditional_8_For_2_Template, 2, 1, "span", 286, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r30 = i0.ɵɵnextContext().$implicit;
+    const run_r40 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.getRunTags(run_r30).slice(0, 2));
+    i0.ɵɵrepeater(ctx_r0.getRunTags(run_r40).slice(0, 2));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 228);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_For_2_Template_div_click_0_listener() { const run_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCompareRunA(run_r30)); });
-    i0.ɵɵelement(1, "div", 229);
-    i0.ɵɵelementStart(2, "div", 230)(3, "div", 231);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 280);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_For_2_Template_div_click_0_listener() { const run_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCompareRunA(run_r40)); });
+    i0.ɵɵelement(1, "div", 281);
+    i0.ɵɵelementStart(2, "div", 282)(3, "div", 283);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 232);
+    i0.ɵɵelementStart(6, "div", 284);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_For_2_Conditional_8_Template, 3, 0, "div", 233);
+    i0.ɵɵconditionalCreate(8, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_For_2_Conditional_8_Template, 3, 0, "div", 285);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r30 = ctx.$implicit;
+    const run_r40 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("selected", ctx_r0.IsCompareRunA(run_r30));
+    i0.ɵɵclassProp("selected", ctx_r0.IsCompareRunA(run_r40));
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.getRunStatusColor(run_r30.Status));
+    i0.ɵɵstyleProp("background-color", ctx_r0.getRunStatusColor(run_r40.Status));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 7, run_r30.StartedAt, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 7, run_r40.StartedAt, "short"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(run_r30).toFixed(0), "% pass");
+    i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(run_r40).toFixed(0), "% pass");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.getRunTags(run_r30).length > 0 ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.getRunTags(run_r40).length > 0 ? 8 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 221);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_For_2_Template, 9, 10, "div", 227, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 273);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_For_2_Template, 9, 10, "div", 279, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.suiteRuns);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 222)(1, "div", 235)(2, "span", 236);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 274)(1, "div", 287)(2, "span", 288);
     i0.ɵɵtext(3, "Selected:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 237);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.compareRunA = null; return i0.ɵɵresetView(ctx_r0.compareResults = []); });
+    i0.ɵɵelementStart(4, "button", 289);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r42); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.compareRunA = null; return i0.ɵɵresetView(ctx_r0.compareResults = []); });
     i0.ɵɵtext(5, "Clear");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 238)(7, "span");
+    i0.ɵɵelementStart(6, "div", 290)(7, "span");
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 239);
+    i0.ɵɵelementStart(10, "span", 291);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -1256,75 +1435,75 @@ function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_6_Template(
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(ctx_r0.compareRunA).toFixed(1), "%");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_For_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 234);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_For_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 286);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r35 = ctx.$implicit;
+    const tag_r45 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r35);
+    i0.ɵɵtextInterpolate(tag_r45);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 233);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_For_2_Conditional_8_For_2_Template, 2, 1, "span", 234, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 285);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_For_2_Conditional_8_For_2_Template, 2, 1, "span", 286, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r34 = i0.ɵɵnextContext().$implicit;
+    const run_r44 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.getRunTags(run_r34).slice(0, 2));
+    i0.ɵɵrepeater(ctx_r0.getRunTags(run_r44).slice(0, 2));
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 228);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_For_2_Template_div_click_0_listener() { const run_r34 = i0.ɵɵrestoreView(_r33).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(!ctx_r0.IsCompareRunA(run_r34) && ctx_r0.selectCompareRunB(run_r34)); });
-    i0.ɵɵelement(1, "div", 229);
-    i0.ɵɵelementStart(2, "div", 230)(3, "div", 231);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 280);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_For_2_Template_div_click_0_listener() { const run_r44 = i0.ɵɵrestoreView(_r43).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(!ctx_r0.IsCompareRunA(run_r44) && ctx_r0.selectCompareRunB(run_r44)); });
+    i0.ɵɵelement(1, "div", 281);
+    i0.ɵɵelementStart(2, "div", 282)(3, "div", 283);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 232);
+    i0.ɵɵelementStart(6, "div", 284);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_For_2_Conditional_8_Template, 3, 0, "div", 233);
+    i0.ɵɵconditionalCreate(8, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_For_2_Conditional_8_Template, 3, 0, "div", 285);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const run_r34 = ctx.$implicit;
+    const run_r44 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("selected", ctx_r0.IsCompareRunB(run_r34))("disabled", ctx_r0.IsCompareRunA(run_r34));
+    i0.ɵɵclassProp("selected", ctx_r0.IsCompareRunB(run_r44))("disabled", ctx_r0.IsCompareRunA(run_r44));
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.getRunStatusColor(run_r34.Status));
+    i0.ɵɵstyleProp("background-color", ctx_r0.getRunStatusColor(run_r44.Status));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 9, run_r34.StartedAt, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 9, run_r44.StartedAt, "short"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(run_r34).toFixed(0), "% pass");
+    i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(run_r44).toFixed(0), "% pass");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.getRunTags(run_r34).length > 0 ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.getRunTags(run_r44).length > 0 ? 8 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 221);
-    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_For_2_Template, 9, 12, "div", 240, i0.ɵɵrepeaterTrackByIdentity);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 273);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_For_2_Template, 9, 12, "div", 292, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.suiteRuns);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 222)(1, "div", 235)(2, "span", 236);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 274)(1, "div", 287)(2, "span", 288);
     i0.ɵɵtext(3, "Selected:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 237);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_13_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.compareRunB = null; return i0.ɵɵresetView(ctx_r0.compareResults = []); });
+    i0.ɵɵelementStart(4, "button", 289);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_13_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r46); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.compareRunB = null; return i0.ɵɵresetView(ctx_r0.compareResults = []); });
     i0.ɵɵtext(5, "Clear");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 238)(7, "span");
+    i0.ɵɵelementStart(6, "div", 290)(7, "span");
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 239);
+    i0.ɵɵelementStart(10, "span", 291);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -1334,168 +1513,168 @@ function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_13_Template
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate(ctx_r0.compareRunB).toFixed(1), "%");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 141);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 194);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const result_r37 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngClass", "status-" + result_r37.runA.status.toLowerCase());
+    const result_r47 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", "status-" + result_r47.runA.status.toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(result_r37.runA.status);
+    i0.ɵɵtextInterpolate(result_r47.runA.status);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 253);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 305);
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 141);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 194);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const result_r37 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngClass", "status-" + result_r37.runB.status.toLowerCase());
+    const result_r47 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", "status-" + result_r47.runB.status.toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(result_r37.runB.status);
+    i0.ɵɵtextInterpolate(result_r47.runB.status);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 253);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 305);
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 252);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 304);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const result_r37 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c6, result_r37.scoreDiff > 0, result_r37.scoreDiff < 0));
+    const result_r47 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c6, result_r47.scoreDiff > 0, result_r47.scoreDiff < 0));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", result_r37.scoreDiff > 0 ? "+" : "", "", (result_r37.scoreDiff * 100).toFixed(1), "% ");
+    i0.ɵɵtextInterpolate2(" ", result_r47.scoreDiff > 0 ? "+" : "", "", (result_r47.scoreDiff * 100).toFixed(1), "% ");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 254);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 306);
     i0.ɵɵtext(1, "-");
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 252);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 304);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const result_r37 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c6, result_r37.durationDiff < 0, result_r37.durationDiff > 0));
+    const result_r47 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c6, result_r47.durationDiff < 0, result_r47.durationDiff > 0));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", result_r37.durationDiff > 0 ? "+" : "", "", result_r37.durationDiff.toFixed(1), "s ");
+    i0.ɵɵtextInterpolate2(" ", result_r47.durationDiff > 0 ? "+" : "", "", result_r47.durationDiff.toFixed(1), "s ");
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 254);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 306);
     i0.ɵɵtext(1, "-");
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 255);
-    i0.ɵɵelement(1, "i", 258);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 307);
+    i0.ɵɵelement(1, "i", 310);
     i0.ɵɵtext(2, " Fixed ");
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 256);
-    i0.ɵɵelement(1, "i", 259);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 308);
+    i0.ɵɵelement(1, "i", 311);
     i0.ɵɵtext(2, " Broke ");
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 257);
-    i0.ɵɵelement(1, "i", 198);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 309);
+    i0.ɵɵelement(1, "i", 250);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 252)(1, "td", 181);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 304)(1, "td", 233);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "td");
-    i0.ɵɵconditionalCreate(4, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_4_Template, 2, 2, "span", 141);
-    i0.ɵɵconditionalCreate(5, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_5_Template, 2, 0, "span", 253);
+    i0.ɵɵconditionalCreate(4, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_4_Template, 2, 2, "span", 194);
+    i0.ɵɵconditionalCreate(5, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_5_Template, 2, 0, "span", 305);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "td");
-    i0.ɵɵconditionalCreate(7, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_7_Template, 2, 2, "span", 141);
-    i0.ɵɵconditionalCreate(8, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_8_Template, 2, 0, "span", 253);
+    i0.ɵɵconditionalCreate(7, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_7_Template, 2, 2, "span", 194);
+    i0.ɵɵconditionalCreate(8, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_8_Template, 2, 0, "span", 305);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "td");
-    i0.ɵɵconditionalCreate(10, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_10_Template, 2, 6, "span", 252);
-    i0.ɵɵconditionalCreate(11, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_11_Template, 2, 0, "span", 254);
+    i0.ɵɵconditionalCreate(10, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_10_Template, 2, 6, "span", 304);
+    i0.ɵɵconditionalCreate(11, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_11_Template, 2, 0, "span", 306);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "td");
-    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_13_Template, 2, 6, "span", 252);
-    i0.ɵɵconditionalCreate(14, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_14_Template, 2, 0, "span", 254);
+    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_13_Template, 2, 6, "span", 304);
+    i0.ɵɵconditionalCreate(14, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_14_Template, 2, 0, "span", 306);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "td");
-    i0.ɵɵconditionalCreate(16, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_16_Template, 3, 0, "span", 255);
-    i0.ɵɵconditionalCreate(17, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_17_Template, 3, 0, "span", 256);
-    i0.ɵɵconditionalCreate(18, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Conditional_18_Template, 2, 0, "span", 257);
+    i0.ɵɵconditionalCreate(16, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_16_Template, 3, 0, "span", 307);
+    i0.ɵɵconditionalCreate(17, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_17_Template, 3, 0, "span", 308);
+    i0.ɵɵconditionalCreate(18, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Conditional_18_Template, 2, 0, "span", 309);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const result_r37 = ctx.$implicit;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(13, _c8, result_r37.runA && result_r37.runB && result_r37.runA.status !== "Passed" && result_r37.runB.status === "Passed", result_r37.runA && result_r37.runB && result_r37.runA.status === "Passed" && result_r37.runB.status !== "Passed"));
+    const result_r47 = ctx.$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(13, _c8, result_r47.runA && result_r47.runB && result_r47.runA.status !== "Passed" && result_r47.runB.status === "Passed", result_r47.runA && result_r47.runB && result_r47.runA.status === "Passed" && result_r47.runB.status !== "Passed"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(result_r37.testName);
+    i0.ɵɵtextInterpolate(result_r47.testName);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(result_r37.runA ? 4 : -1);
+    i0.ɵɵconditional(result_r47.runA ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!result_r37.runA ? 5 : -1);
+    i0.ɵɵconditional(!result_r47.runA ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(result_r37.runB ? 7 : -1);
+    i0.ɵɵconditional(result_r47.runB ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!result_r37.runB ? 8 : -1);
+    i0.ɵɵconditional(!result_r47.runB ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(result_r37.scoreDiff != null ? 10 : -1);
+    i0.ɵɵconditional(result_r47.scoreDiff != null ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(result_r37.scoreDiff == null ? 11 : -1);
+    i0.ɵɵconditional(result_r47.scoreDiff == null ? 11 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(result_r37.durationDiff != null ? 13 : -1);
+    i0.ɵɵconditional(result_r47.durationDiff != null ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(result_r37.durationDiff == null ? 14 : -1);
+    i0.ɵɵconditional(result_r47.durationDiff == null ? 14 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(result_r37.runA && result_r37.runB && result_r37.runA.status !== "Passed" && result_r37.runB.status === "Passed" ? 16 : -1);
+    i0.ɵɵconditional(result_r47.runA && result_r47.runB && result_r47.runA.status !== "Passed" && result_r47.runB.status === "Passed" ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(result_r37.runA && result_r37.runB && result_r37.runA.status === "Passed" && result_r37.runB.status !== "Passed" ? 17 : -1);
+    i0.ɵɵconditional(result_r47.runA && result_r47.runB && result_r47.runA.status === "Passed" && result_r47.runB.status !== "Passed" ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!result_r37.statusChanged ? 18 : -1);
+    i0.ɵɵconditional(!result_r47.statusChanged ? 18 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 225)(1, "div", 241)(2, "div", 242)(3, "div", 243);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 277)(1, "div", 293)(2, "div", 294)(3, "div", 295);
     i0.ɵɵtext(4, "Pass Rate Change");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 244);
-    i0.ɵɵelement(6, "i", 16);
+    i0.ɵɵelementStart(5, "div", 296);
+    i0.ɵɵelement(6, "i", 19);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 242)(9, "div", 243);
+    i0.ɵɵelementStart(8, "div", 294)(9, "div", 295);
     i0.ɵɵtext(10, "Duration Change");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 244);
-    i0.ɵɵelement(12, "i", 16);
+    i0.ɵɵelementStart(11, "div", 296);
+    i0.ɵɵelement(12, "i", 19);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 245)(15, "div", 243);
+    i0.ɵɵelementStart(14, "div", 297)(15, "div", 295);
     i0.ɵɵtext(16, "Improved");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 246);
+    i0.ɵɵelementStart(17, "div", 298);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 247)(20, "div", 243);
+    i0.ɵɵelementStart(19, "div", 299)(20, "div", 295);
     i0.ɵɵtext(21, "Regressed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 246);
+    i0.ɵɵelementStart(22, "div", 298);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 248)(25, "h3");
-    i0.ɵɵelement(26, "i", 249);
+    i0.ɵɵelementStart(24, "div", 300)(25, "h3");
+    i0.ɵɵelement(26, "i", 301);
     i0.ɵɵtext(27, " Test-by-Test Comparison");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 250)(29, "table", 251)(30, "thead")(31, "tr")(32, "th");
+    i0.ɵɵelementStart(28, "div", 302)(29, "table", 303)(30, "thead")(31, "tr")(32, "th");
     i0.ɵɵtext(33, "Test");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(34, "th");
@@ -1514,7 +1693,7 @@ function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_Template
     i0.ɵɵtext(43, "Change");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(44, "tbody");
-    i0.ɵɵrepeaterCreate(45, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_For_46_Template, 19, 16, "tr", 252, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(45, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_For_46_Template, 19, 16, "tr", 304, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     let tmp_4_0;
@@ -1538,14 +1717,14 @@ function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_Template
     i0.ɵɵadvance(22);
     i0.ɵɵrepeater(ctx_r0.compareResults);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵelement(1, "mj-loading", 260);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "mj-loading", 312);
     i0.ɵɵelementEnd();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 226)(1, "div", 261);
-    i0.ɵɵelement(2, "i", 33);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 278)(1, "div", 313);
+    i0.ɵɵelement(2, "i", 37);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4, "Select Two Runs to Compare");
@@ -1554,10 +1733,10 @@ function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_16_Template
     i0.ɵɵtext(6, "Choose a baseline run (A) and a comparison run (B) from the lists above to see a detailed side-by-side comparison.");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 75);
-    i0.ɵɵelement(2, "i", 33);
+function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r48 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 127);
+    i0.ɵɵelement(2, "i", 37);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4, "Not Enough Runs to Compare");
@@ -1565,32 +1744,32 @@ function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_17_Template
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6, "You need at least 2 suite runs to use the comparison feature.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 21);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_62_Conditional_17_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.runSuite()); });
-    i0.ɵɵelement(8, "i", 22);
+    i0.ɵɵelementStart(7, "button", 25);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_64_Conditional_17_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r48); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.runSuite()); });
+    i0.ɵɵelement(8, "i", 26);
     i0.ɵɵtext(9, " Run Suite Now ");
     i0.ɵɵelementEnd()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_62_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39)(1, "div", 219)(2, "div", 220)(3, "h4");
+function MJTestSuiteFormComponentExtended_Conditional_64_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43)(1, "div", 271)(2, "div", 272)(3, "h4");
     i0.ɵɵtext(4, "Run A (Baseline)");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_5_Template, 3, 0, "div", 221);
-    i0.ɵɵconditionalCreate(6, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_6_Template, 12, 5, "div", 222);
+    i0.ɵɵconditionalCreate(5, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_5_Template, 3, 0, "div", 273);
+    i0.ɵɵconditionalCreate(6, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_6_Template, 12, 5, "div", 274);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 223);
-    i0.ɵɵelement(8, "i", 224);
+    i0.ɵɵelementStart(7, "div", 275);
+    i0.ɵɵelement(8, "i", 276);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 220)(10, "h4");
+    i0.ɵɵelementStart(9, "div", 272)(10, "h4");
     i0.ɵɵtext(11, "Run B (Compare)");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_12_Template, 3, 0, "div", 221);
-    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_13_Template, 12, 5, "div", 222);
+    i0.ɵɵconditionalCreate(12, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_12_Template, 3, 0, "div", 273);
+    i0.ɵɵconditionalCreate(13, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_13_Template, 12, 5, "div", 274);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_14_Template, 47, 23, "div", 225);
-    i0.ɵɵconditionalCreate(15, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_15_Template, 2, 0, "div", 57);
-    i0.ɵɵconditionalCreate(16, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_16_Template, 7, 0, "div", 226);
-    i0.ɵɵconditionalCreate(17, MJTestSuiteFormComponentExtended_Conditional_62_Conditional_17_Template, 10, 0, "div", 59);
+    i0.ɵɵconditionalCreate(14, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_14_Template, 47, 23, "div", 277);
+    i0.ɵɵconditionalCreate(15, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_15_Template, 2, 0, "div", 99);
+    i0.ɵɵconditionalCreate(16, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_16_Template, 7, 0, "div", 278);
+    i0.ɵɵconditionalCreate(17, MJTestSuiteFormComponentExtended_Conditional_64_Conditional_17_Template, 10, 0, "div", 101);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1611,50 +1790,59 @@ function MJTestSuiteFormComponentExtended_Conditional_62_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.runsLoaded && ctx_r0.suiteRuns.length < 2 ? 17 : -1);
 } }
-function MJTestSuiteFormComponentExtended_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42)(1, "div", 262);
-    i0.ɵɵelement(2, "i", 41);
+function MJTestSuiteFormComponentExtended_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+    const _r49 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 314);
+    i0.ɵɵelement(2, "i", 45);
     i0.ɵɵtext(3, " Shortcuts ");
-    i0.ɵɵelementStart(4, "button", 263);
-    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_65_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r39); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleShortcuts()); });
-    i0.ɵɵelement(5, "i", 171);
+    i0.ɵɵelementStart(4, "button", 315);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_67_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r49); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleShortcuts()); });
+    i0.ɵɵelement(5, "i", 91);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 264)(7, "div", 265)(8, "span");
-    i0.ɵɵtext(9, "Refresh");
+    i0.ɵɵelementStart(6, "div", 316)(7, "div", 317)(8, "span");
+    i0.ɵɵtext(9, "Save changes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 266)(11, "kbd");
+    i0.ɵɵelementStart(10, "span", 318)(11, "kbd");
     i0.ɵɵtext(12, "Cmd");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "kbd");
-    i0.ɵɵtext(14, "R");
+    i0.ɵɵtext(14, "S");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 265)(16, "span");
-    i0.ɵɵtext(17, "Run Suite");
+    i0.ɵɵelementStart(15, "div", 317)(16, "span");
+    i0.ɵɵtext(17, "Refresh");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 266)(19, "kbd");
+    i0.ɵɵelementStart(18, "span", 318)(19, "kbd");
     i0.ɵɵtext(20, "Cmd");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(21, "kbd");
-    i0.ɵɵtext(22, "Enter");
+    i0.ɵɵtext(22, "R");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(23, "div", 317)(24, "span");
+    i0.ɵɵtext(25, "Run Suite");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "span", 318)(27, "kbd");
+    i0.ɵɵtext(28, "Cmd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "kbd");
+    i0.ɵɵtext(30, "Enter");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "div", 265)(24, "span");
-    i0.ɵɵtext(25, "Switch Tabs");
+    i0.ɵɵelementStart(31, "div", 317)(32, "span");
+    i0.ɵɵtext(33, "Switch Tabs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "span", 266)(27, "kbd");
-    i0.ɵɵtext(28, "1");
+    i0.ɵɵelementStart(34, "span", 318)(35, "kbd");
+    i0.ɵɵtext(36, "1");
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(29, "-");
-    i0.ɵɵelementStart(30, "kbd");
-    i0.ɵɵtext(31, "5");
+    i0.ɵɵtext(37, "-");
+    i0.ɵɵelementStart(38, "kbd");
+    i0.ɵɵtext(39, "5");
     i0.ɵɵelementEnd()()()()();
 } }
-function MJTestSuiteFormComponentExtended_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-slide-panel", 267);
-    i0.ɵɵlistener("Closed", function MJTestSuiteFormComponentExtended_Conditional_66_Template_mj_slide_panel_Closed_0_listener() { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnPanelClosed()); });
-    i0.ɵɵelementStart(1, "app-test-run-dialog", 268);
-    i0.ɵɵlistener("PanelClose", function MJTestSuiteFormComponentExtended_Conditional_66_Template_app_test_run_dialog_PanelClose_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnPanelClosed()); });
+function MJTestSuiteFormComponentExtended_Conditional_68_Template(rf, ctx) { if (rf & 1) {
+    const _r50 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-slide-panel", 319);
+    i0.ɵɵlistener("Closed", function MJTestSuiteFormComponentExtended_Conditional_68_Template_mj_slide_panel_Closed_0_listener() { i0.ɵɵrestoreView(_r50); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnPanelClosed()); });
+    i0.ɵɵelementStart(1, "app-test-run-dialog", 320);
+    i0.ɵɵlistener("PanelClose", function MJTestSuiteFormComponentExtended_Conditional_68_Template_app_test_run_dialog_PanelClose_1_listener() { i0.ɵɵrestoreView(_r50); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnPanelClosed()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1662,6 +1850,247 @@ function MJTestSuiteFormComponentExtended_Conditional_66_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("PanelMode", true)("selectedTestId", (ctx_r0.testingDialogService.PanelOptions == null ? null : ctx_r0.testingDialogService.PanelOptions.testId) ?? null)("selectedSuiteId", (ctx_r0.testingDialogService.PanelOptions == null ? null : ctx_r0.testingDialogService.PanelOptions.suiteId) ?? null)("runMode", (ctx_r0.testingDialogService.PanelOptions == null ? null : ctx_r0.testingDialogService.PanelOptions.mode) ?? "suite");
 } }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r52 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 342);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r52); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.addTestsSearch = ""); });
+    i0.ɵɵelement(1, "i", 91);
+    i0.ɵɵelementEnd();
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "strong");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(2, " selected ");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.selectedTestIdsToAdd.size);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate2(" ", ctx_r0.filteredAvailableTests.length, " test", ctx_r0.filteredAvailableTests.length === 1 ? "" : "s", " available ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 336);
+    i0.ɵɵelement(1, "mj-loading", 343);
+    i0.ɵɵelementEnd();
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 145);
+    i0.ɵɵelementStart(1, "h4");
+    i0.ɵɵtext(2, "Everything's already in the suite");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "This suite contains every available test. Create a new test first to add more.");
+    i0.ɵɵelementEnd();
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 205);
+    i0.ɵɵelementStart(1, "h4");
+    i0.ɵɵtext(2, "No matches");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("No tests match \"", ctx_r0.addTestsSearch, "\".");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 337);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_24_Conditional_1_Template, 5, 0)(2, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_24_Conditional_2_Template, 5, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.availableTests.length === 0 ? 1 : 2);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 175);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 349);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r54 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r54.Description);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 351);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r54 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r54.Type);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r53 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 345);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Template_li_click_0_listener() { const t_r54 = i0.ɵɵrestoreView(_r53).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.toggleAddSelection(t_r54.ID)); });
+    i0.ɵɵelementStart(1, "span", 346);
+    i0.ɵɵconditionalCreate(2, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Conditional_2_Template, 1, 0, "i", 175);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 347)(4, "div", 348);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Conditional_6_Template, 2, 1, "div", 349);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 350);
+    i0.ɵɵconditionalCreate(8, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Conditional_8_Template, 2, 1, "span", 351);
+    i0.ɵɵelementStart(9, "span", 352);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const t_r54 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("picker-row--selected", ctx_r0.isAddSelected(t_r54.ID));
+    i0.ɵɵattribute("aria-checked", ctx_r0.isAddSelected(t_r54.ID));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.isAddSelected(t_r54.ID) ? 2 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(t_r54.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(t_r54.Description ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(t_r54.Type ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-status", t_r54.Status == null ? null : t_r54.Status.toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r54.Status);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 338);
+    i0.ɵɵrepeaterCreate(1, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_For_2_Template, 11, 9, "li", 344, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.filteredAvailableTests);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 123);
+    i0.ɵɵtext(1, " Adding\u2026 ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Add tests ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Add 1 test ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵtextInterpolate1(" Add ", ctx_r0.selectedTestIdsToAdd.size, " tests ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 175);
+    i0.ɵɵconditionalCreate(1, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Conditional_1_Template, 1, 0)(2, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Conditional_2_Template, 1, 0)(3, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Conditional_3_Template, 1, 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.selectedTestIdsToAdd.size === 0 ? 1 : ctx_r0.selectedTestIdsToAdd.size === 1 ? 2 : 3);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_69_Template(rf, ctx) { if (rf & 1) {
+    const _r51 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 321);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r51); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeAddTestsDialog()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 322);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r51); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 323)(3, "h2", 324);
+    i0.ɵɵelement(4, "i", 325);
+    i0.ɵɵtext(5, " Add tests to suite ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 326);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r51); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeAddTestsDialog()); });
+    i0.ɵɵelement(7, "i", 91);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 327);
+    i0.ɵɵelement(9, "i", 328);
+    i0.ɵɵelementStart(10, "input", 329, 2);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTestSuiteFormComponentExtended_Conditional_69_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r51); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.addTestsSearch, $event) || (ctx_r0.addTestsSearch = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_12_Template, 2, 0, "button", 330);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 331)(14, "span", 332);
+    i0.ɵɵconditionalCreate(15, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_15_Template, 3, 1)(16, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_16_Template, 1, 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 333)(18, "button", 334);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r51); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectAllFiltered()); });
+    i0.ɵɵtext(19, " Select all ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 334);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r51); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.clearAddSelection()); });
+    i0.ɵɵtext(21, " Clear ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "div", 335);
+    i0.ɵɵconditionalCreate(23, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_23_Template, 2, 0, "div", 336)(24, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_24_Template, 3, 1, "div", 337)(25, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_25_Template, 3, 0, "ul", 338);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 339)(27, "button", 340);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r51); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.confirmAddTests()); });
+    i0.ɵɵconditionalCreate(28, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_28_Template, 2, 0)(29, MJTestSuiteFormComponentExtended_Conditional_69_Conditional_29_Template, 4, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "button", 341);
+    i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Conditional_69_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r51); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeAddTestsDialog()); });
+    i0.ɵɵtext(31, " Cancel ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("disabled", ctx_r0.isAddingTests);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.addTestsSearch);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.addTestsSearch ? 12 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.selectedTestIdsToAdd.size > 0 ? 15 : !ctx_r0.loadingAvailableTests ? 16 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r0.loadingAvailableTests || ctx_r0.filteredAvailableTests.length === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r0.selectedTestIdsToAdd.size === 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.loadingAvailableTests ? 23 : ctx_r0.filteredAvailableTests.length === 0 ? 24 : 25);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", ctx_r0.selectedTestIdsToAdd.size === 0 || ctx_r0.isAddingTests);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isAddingTests ? 28 : 29);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r0.isAddingTests);
+} }
+function MJTestSuiteFormComponentExtended_Conditional_78_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.dirtyFieldNames[0], " edited ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.dirtyFieldNames.length, " fields edited ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_82_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 123);
+    i0.ɵɵtext(1, " Saving\u2026 ");
+} }
+function MJTestSuiteFormComponentExtended_Conditional_83_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 175);
+    i0.ɵɵtext(1, " Save changes ");
+    i0.ɵɵelementStart(2, "span", 353)(3, "kbd");
+    i0.ɵɵtext(4, "\u2318");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "kbd");
+    i0.ɵɵtext(6, "S");
+    i0.ɵɵelementEnd()();
+} }
 /** Settings key for keyboard shortcuts visibility */
 const SHORTCUTS_SETTINGS_KEY = '__mj.Testing.ShowKeyboardShortcuts';
 let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended extends MJTestSuiteFormComponent {
@@ -1715,6 +2144,23 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         // Matrix test name filter
         this.matrixTestFilter = '';
         this.matrixFilterSubject$ = new Subject();
+        // Edit state
+        this.isSaving = false;
+        this.parentSuiteOptions = [];
+        this.tagDraft = '';
+        this.statusOptions = ['Active', 'Pending', 'Disabled'];
+        // Add Tests picker state
+        this.showAddTestsDialog = false;
+        this.availableTests = [];
+        this.loadingAvailableTests = false;
+        this.selectedTestIdsToAdd = new Set();
+        this.addTestsSearch = '';
+        this.isAddingTests = false;
+        // Remove-confirm state (per-row inline confirm)
+        this.confirmingRemoveSuiteTestId = null;
+        this.isRemovingTest = false;
+        // Reorder state
+        this.isReorderingTests = false;
         // Service injections
         this.navigationService = inject(NavigationService);
         this.testingDialogService = inject(TestingDialogService);
@@ -1726,6 +2172,8 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
     async ngOnInit() {
         await super.ngOnInit();
         this.loadShortcutsSetting();
+        // Fire-and-forget: parent suite list for the edit form
+        this.loadParentSuiteOptions();
         // Subscribe to evaluation preferences
         this.evalPrefsService.preferences$
             .pipe(takeUntil(this.destroy$))
@@ -1762,6 +2210,14 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
     handleKeyboardShortcut(event) {
         if (!this.keyboardShortcutsEnabled)
             return;
+        // Cmd/Ctrl + S: Save (if dirty)
+        if ((event.metaKey || event.ctrlKey) && event.key === 's' && !event.shiftKey) {
+            if (this.isDirty) {
+                event.preventDefault();
+                this.saveChanges();
+            }
+            return;
+        }
         // Cmd/Ctrl + R: Refresh
         if ((event.metaKey || event.ctrlKey) && event.key === 'r' && !event.shiftKey) {
             event.preventDefault();
@@ -1774,8 +2230,8 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             this.runSuite();
             return;
         }
-        // Number keys for tabs (1-5)
-        if (!event.metaKey && !event.ctrlKey && !event.altKey) {
+        // Number keys for tabs (1-5) — skip when typing into form inputs
+        if (!event.metaKey && !event.ctrlKey && !event.altKey && !this.isTextInputFocused()) {
             switch (event.key) {
                 case '1':
                     this.changeTab('overview');
@@ -1795,6 +2251,20 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             }
         }
     }
+    // Warn before tab close / hard navigation when there are unsaved changes
+    handleBeforeUnload(event) {
+        if (this.isDirty) {
+            event.preventDefault();
+            event.returnValue = '';
+        }
+    }
+    isTextInputFocused() {
+        const el = document.activeElement;
+        if (!el)
+            return false;
+        const tag = el.tagName;
+        return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable;
+    }
     changeTab(tab) {
         this.activeTab = tab;
         if (tab === 'tests' && !this.testsLoaded)
@@ -3376,6 +3846,351 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
     IsCompareRunB(run) {
         return UUIDsEqual(this.compareRunB?.ID, run.ID);
     }
+    // ==========================================
+    // Edit / Save Methods
+    // ==========================================
+    /** True if the suite record has any unsaved field changes. */
+    get isDirty() {
+        return this.record?.Dirty === true;
+    }
+    /** Names of fields with pending edits, used by the save bar. */
+    get dirtyFieldNames() {
+        if (!this.record?.Fields)
+            return [];
+        return this.record.Fields.filter(f => f.Dirty).map(f => f.Name);
+    }
+    /** Parsed tags as a plain array — derived from record.Tags JSON. */
+    get tags() {
+        return TagsHelper.parseTags(this.record?.Tags);
+    }
+    /**
+     * Load all suites for the Parent Suite dropdown. Excludes the current
+     * suite (a suite cannot be its own parent).
+     */
+    async loadParentSuiteOptions() {
+        try {
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const result = await rv.RunView({
+                EntityName: 'MJ: Test Suites',
+                ExtraFilter: this.record?.ID ? `ID <> '${this.record.ID}'` : '',
+                OrderBy: 'Name',
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                this.parentSuiteOptions = result.Results || [];
+                this.cdr.markForCheck();
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load parent suite options:', error);
+        }
+    }
+    /** Save all pending changes on the suite record. */
+    async saveChanges() {
+        if (!this.isDirty || this.isSaving)
+            return;
+        this.isSaving = true;
+        this.cdr.markForCheck();
+        try {
+            const ok = await this.SaveRecord(false);
+            if (ok) {
+                SharedService.Instance.CreateSimpleNotification('Suite saved', 'success', 2000);
+            }
+            else {
+                const detail = this.record?.LatestResult?.CompleteMessage || this.record?.LatestResult?.Message || 'Save failed';
+                SharedService.Instance.CreateSimpleNotification(detail, 'error', 4000);
+            }
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : 'Save failed';
+            SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
+        }
+        finally {
+            this.isSaving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Discard all pending field changes on the suite. */
+    discardChanges() {
+        if (!this.isDirty)
+            return;
+        if (!confirm('Discard your unsaved changes?'))
+            return;
+        this.record.Revert();
+        this.tagDraft = '';
+        this.cdr.markForCheck();
+    }
+    /** Add a tag from tagDraft (called on Enter / comma / blur). */
+    addTagFromDraft() {
+        const raw = this.tagDraft.trim();
+        if (!raw)
+            return;
+        // Allow comma-separated entry: "alpha, beta" → two tags
+        const incoming = raw.split(',').map(t => t.trim()).filter(t => t.length > 0);
+        const existing = this.tags;
+        const merged = [...existing];
+        for (const t of incoming) {
+            if (!merged.includes(t))
+                merged.push(t);
+        }
+        this.record.Tags = TagsHelper.toJson(merged);
+        this.tagDraft = '';
+        this.cdr.markForCheck();
+    }
+    /** Remove a single tag. */
+    removeTag(tag) {
+        this.record.Tags = TagsHelper.removeTag(this.record.Tags, tag);
+        this.cdr.markForCheck();
+    }
+    /** Handle Enter / comma in the tag input to commit the draft tag. */
+    onTagInputKeydown(event) {
+        if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault();
+            this.addTagFromDraft();
+            return;
+        }
+        // Backspace on an empty draft pops the last chip
+        if (event.key === 'Backspace' && !this.tagDraft) {
+            const all = this.tags;
+            if (all.length > 0) {
+                event.preventDefault();
+                this.removeTag(all[all.length - 1]);
+            }
+        }
+    }
+    // ==========================================
+    // Suite Membership: Add / Remove / Reorder Tests
+    // ==========================================
+    /** Open the picker dialog and load tests not yet in this suite. */
+    async openAddTestsDialog() {
+        this.showAddTestsDialog = true;
+        this.selectedTestIdsToAdd = new Set();
+        this.addTestsSearch = '';
+        this.loadingAvailableTests = true;
+        this.cdr.markForCheck();
+        try {
+            if (!this.testsLoaded) {
+                await this.loadTests();
+            }
+            const existingTestIds = new Set(this.suiteTests.map(st => st.TestID));
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const result = await rv.RunView({
+                EntityName: 'MJ: Tests',
+                OrderBy: 'Name',
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                this.availableTests = (result.Results || []).filter(t => !existingTestIds.has(t.ID));
+            }
+            else {
+                SharedService.Instance.CreateSimpleNotification('Failed to load tests', 'error', 3000);
+            }
+        }
+        catch (err) {
+            console.error('Error loading available tests:', err);
+            SharedService.Instance.CreateSimpleNotification('Failed to load tests', 'error', 3000);
+        }
+        finally {
+            this.loadingAvailableTests = false;
+            this.cdr.markForCheck();
+        }
+    }
+    closeAddTestsDialog() {
+        if (this.isAddingTests)
+            return;
+        this.showAddTestsDialog = false;
+        this.selectedTestIdsToAdd = new Set();
+        this.addTestsSearch = '';
+        this.cdr.markForCheck();
+    }
+    toggleAddSelection(testId) {
+        if (this.selectedTestIdsToAdd.has(testId)) {
+            this.selectedTestIdsToAdd.delete(testId);
+        }
+        else {
+            this.selectedTestIdsToAdd.add(testId);
+        }
+        // Set mutation alone doesn't trigger OnPush — assign a new reference
+        this.selectedTestIdsToAdd = new Set(this.selectedTestIdsToAdd);
+        this.cdr.markForCheck();
+    }
+    isAddSelected(testId) {
+        return this.selectedTestIdsToAdd.has(testId);
+    }
+    /** Tests that match the picker search filter. */
+    get filteredAvailableTests() {
+        const q = this.addTestsSearch.trim().toLowerCase();
+        if (!q)
+            return this.availableTests;
+        return this.availableTests.filter(t => (t.Name || '').toLowerCase().includes(q) ||
+            (t.Description || '').toLowerCase().includes(q) ||
+            (t.Type || '').toLowerCase().includes(q));
+    }
+    selectAllFiltered() {
+        for (const t of this.filteredAvailableTests) {
+            this.selectedTestIdsToAdd.add(t.ID);
+        }
+        this.selectedTestIdsToAdd = new Set(this.selectedTestIdsToAdd);
+        this.cdr.markForCheck();
+    }
+    clearAddSelection() {
+        this.selectedTestIdsToAdd = new Set();
+        this.cdr.markForCheck();
+    }
+    /** Create suite-test rows for every selected test, appended after existing ones. */
+    async confirmAddTests() {
+        if (this.selectedTestIdsToAdd.size === 0 || this.isAddingTests)
+            return;
+        this.isAddingTests = true;
+        this.cdr.markForCheck();
+        const provider = this.ProviderToUse;
+        const startSequence = this.suiteTests.reduce((max, st) => Math.max(max, st.Sequence ?? 0), 0);
+        const idsToAdd = Array.from(this.selectedTestIdsToAdd);
+        // Snapshot test names from the picker so we can hydrate the joined "Test"
+        // column on the optimistic rows (BaseEntity's joined view fields aren't
+        // always populated through a TransactionGroup save).
+        const testNameById = new Map(this.availableTests.map(t => [t.ID, t.Name]));
+        try {
+            const tg = await provider.CreateTransactionGroup();
+            const newRows = [];
+            for (let i = 0; i < idsToAdd.length; i++) {
+                const row = await provider.GetEntityObject('MJ: Test Suite Tests', provider.CurrentUser);
+                row.NewRecord();
+                row.SuiteID = this.record.ID;
+                row.TestID = idsToAdd[i];
+                row.Sequence = startSequence + i + 1;
+                row.Status = 'Active';
+                row.TransactionGroup = tg;
+                await row.Save();
+                newRows.push(row);
+            }
+            const ok = await tg.Submit();
+            if (ok) {
+                // Optimistic UI update: append the saved rows immediately so the user
+                // sees the new tests right away. If the joined "Test" name field
+                // didn't come back from the save (TG quirk), hydrate it from the
+                // picker snapshot.
+                for (const row of newRows) {
+                    if (!row.Test) {
+                        const name = testNameById.get(row.TestID);
+                        if (name) {
+                            row.Set('Test', name);
+                        }
+                    }
+                }
+                this.suiteTests = [...this.suiteTests, ...newRows];
+                this.cdr.markForCheck();
+                SharedService.Instance.CreateSimpleNotification(idsToAdd.length === 1 ? 'Test added to suite' : `${idsToAdd.length} tests added to suite`, 'success', 2000);
+                this.showAddTestsDialog = false;
+                this.selectedTestIdsToAdd = new Set();
+                this.addTestsSearch = '';
+            }
+            else {
+                const failed = newRows.find(r => r.LatestResult && !r.LatestResult.Success);
+                const detail = failed?.LatestResult?.CompleteMessage || 'Failed to add tests';
+                SharedService.Instance.CreateSimpleNotification(detail, 'error', 4000);
+            }
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : 'Failed to add tests';
+            SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
+        }
+        finally {
+            this.isAddingTests = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Show the inline remove-confirm for one suite-test row. */
+    requestRemoveTest(suiteTest, event) {
+        if (event)
+            event.stopPropagation();
+        this.confirmingRemoveSuiteTestId = suiteTest.ID;
+        this.cdr.markForCheck();
+    }
+    cancelRemoveTest(event) {
+        if (event)
+            event.stopPropagation();
+        this.confirmingRemoveSuiteTestId = null;
+        this.cdr.markForCheck();
+    }
+    /** Delete the suite-test join row and refresh the list. */
+    async confirmRemoveTest(suiteTest, event) {
+        if (event)
+            event.stopPropagation();
+        if (this.isRemovingTest)
+            return;
+        this.isRemovingTest = true;
+        this.cdr.markForCheck();
+        try {
+            const ok = await suiteTest.Delete();
+            if (ok) {
+                this.suiteTests = this.suiteTests.filter(t => !UUIDsEqual(t.ID, suiteTest.ID));
+                SharedService.Instance.CreateSimpleNotification('Test removed from suite', 'success', 2000);
+            }
+            else {
+                const detail = suiteTest.LatestResult?.CompleteMessage || 'Failed to remove test';
+                SharedService.Instance.CreateSimpleNotification(detail, 'error', 4000);
+            }
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : 'Failed to remove test';
+            SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
+        }
+        finally {
+            this.isRemovingTest = false;
+            this.confirmingRemoveSuiteTestId = null;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Handle CDK drag-drop reordering — persists new Sequence values. */
+    async onTestDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        // Optimistic reorder
+        const reordered = [...this.suiteTests];
+        moveItemInArray(reordered, event.previousIndex, event.currentIndex);
+        this.suiteTests = reordered;
+        this.cdr.markForCheck();
+        // Compute which rows actually changed sequence (1-based contiguous numbering)
+        const dirty = [];
+        reordered.forEach((row, idx) => {
+            const newSeq = idx + 1;
+            if (row.Sequence !== newSeq) {
+                row.Sequence = newSeq;
+                dirty.push(row);
+            }
+        });
+        if (dirty.length === 0)
+            return;
+        this.isReorderingTests = true;
+        this.cdr.markForCheck();
+        const provider = this.ProviderToUse;
+        try {
+            const tg = await provider.CreateTransactionGroup();
+            for (const row of dirty) {
+                row.TransactionGroup = tg;
+                await row.Save();
+            }
+            const ok = await tg.Submit();
+            if (!ok) {
+                const failed = dirty.find(r => r.LatestResult && !r.LatestResult.Success);
+                const detail = failed?.LatestResult?.CompleteMessage || 'Failed to save new order';
+                SharedService.Instance.CreateSimpleNotification(detail, 'error', 4000);
+                this.testsLoaded = false;
+                await this.loadTests();
+            }
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : 'Failed to save new order';
+            SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
+            this.testsLoaded = false;
+            await this.loadTests();
+        }
+        finally {
+            this.isReorderingTests = false;
+            this.cdr.markForCheck();
+        }
+    }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJTestSuiteFormComponentExtended_BaseFactory; return function MJTestSuiteFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJTestSuiteFormComponentExtended_BaseFactory || (ɵMJTestSuiteFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJTestSuiteFormComponentExtended)))(__ngFactoryType__ || MJTestSuiteFormComponentExtended); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTestSuiteFormComponentExtended, selectors: [["mj-test-suite-form"]], viewQuery: function MJTestSuiteFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
@@ -3383,98 +4198,120 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartContainer = _t.first);
         } }, hostBindings: function MJTestSuiteFormComponentExtended_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("keydown", function MJTestSuiteFormComponentExtended_keydown_HostBindingHandler($event) { return ctx.handleKeyboardShortcut($event); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 67, vars: 37, consts: [["chartContainer", ""], [1, "test-suite-form"], [1, "suite-header"], ["aria-label", "Breadcrumb", 1, "breadcrumb"], ["href", "javascript:void(0)", 3, "click"], [1, "fas", "fa-vial"], [1, "breadcrumb-text"], [1, "current"], [1, "fas", "fa-chevron-right", "separator"], [1, "fas", "fa-layer-group"], [1, "header-content"], [1, "header-left"], [1, "suite-icon"], [1, "suite-info"], [1, "suite-meta"], [1, "status-badge", 3, "ngClass"], [1, "fas", 3, "ngClass"], [1, "test-count"], [1, "header-actions"], ["mjButton", "", "title", "Export to CSV", 3, "click"], [1, "fas", "fa-file-excel"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fas", "fa-play"], ["mjButton", "", 3, "click", "disabled"], [1, "suite-description"], [1, "tabs-container"], ["role", "tablist", 1, "tabs"], ["role", "tab", 1, "tab", 3, "click"], [1, "fas", "fa-th-large"], [1, "fas", "fa-flask"], [1, "tab-badge"], [1, "fas", "fa-history"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-balance-scale"], [1, "tab-content"], [1, "overview-tab"], [1, "tests-tab"], [1, "runs-tab"], [1, "analytics-tab"], [1, "compare-tab"], [1, "shortcuts-toggle", 3, "click", "title"], [1, "fas", "fa-keyboard"], [1, "keyboard-shortcuts"], ["Mode", "slide", 3, "Title", "Resizable"], [1, "info-section"], [1, "fas", "fa-info-circle"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "status-badge-inline", 3, "ngClass"], [1, "config-section"], [1, "fas", "fa-cogs"], [1, "config-grid"], [1, "config-item"], ["type", "number", "placeholder", "Default: 300000 (5 min)", 1, "config-input", 3, "ngModelChange", "ngModel"], [1, "config-hint"], [1, "loading-state"], [1, "tests-list"], [1, "empty-state"], [1, "skeleton-list"], [1, "skeleton-card"], [1, "skeleton-sequence"], [1, "skeleton-icon"], [1, "skeleton-content"], [1, "skeleton-line", "wide"], [1, "skeleton-line", "narrow"], [1, "test-item"], [1, "test-item", 3, "click"], [1, "test-sequence"], [1, "test-icon"], [1, "test-content"], [1, "test-name"], [1, "test-status"], [1, "fas", "fa-chevron-right"], [1, "empty-icon"], [1, "runs-list"], [1, "run-item"], [1, "run-item", 3, "click"], [1, "run-icon"], [1, "fas"], [1, "run-content"], [1, "run-header"], [1, "run-id"], [1, "run-status"], [1, "run-meta"], [1, "fas", "fa-calendar"], [1, "run-eval-metrics"], [1, "eval-metric", "status", 3, "class"], ["title", "Human evaluation", 1, "eval-metric", "human"], ["title", "Auto score (pass rate)", 1, "eval-metric", "auto", 3, "high", "medium", "low"], [1, "run-tags"], [1, "fas", "fa-check-circle"], [1, "eval-metric", "status"], [1, "fas", "fa-user"], [1, "eval-pending"], [1, "fas", "fa-clock"], ["title", "Auto score (pass rate)", 1, "eval-metric", "auto"], [1, "fas", "fa-robot"], [1, "tag-chip"], [1, "fas", "fa-play-circle"], ["text", "Loading analytics data..."], [1, "analytics-subnav"], [1, "subnav-tabs"], [1, "subnav-tab", 3, "click"], [1, "fas", "fa-chart-bar"], [1, "fas", "fa-th"], [1, "fas", "fa-project-diagram"], [1, "analytics-filters"], [1, "filters-header", 3, "click"], [1, "filters-title"], [1, "fas", "fa-filter"], [1, "filter-summary"], [1, "filters-content"], [1, "filter-group"], [1, "filter-buttons"], [1, "filter-btn", 3, "click"], [1, "filter-hint"], [1, "filter-buttons", "tag-filters"], [1, "filter-btn", "tag-btn", "all-tags-btn", 3, "click"], [1, "filter-btn", "tag-btn", 3, "active"], [1, "filter-btn", "tag-btn", 3, "click"], [1, "fas", "fa-check"], [1, "analytics-kpis"], [1, "kpi-card"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "success"], [1, "kpi-trend", 3, "ngClass"], [1, "kpi-icon", "info"], [1, "kpi-icon", "warning"], [1, "fas", "fa-dollar-sign"], [1, "analytics-table-section"], [1, "fas", "fa-table"], [1, "analytics-table-wrapper"], [1, "analytics-table"], [1, "clickable-row"], [1, "empty-state", "small"], [1, "clickable-row", 3, "click"], [1, "status-chip", 3, "ngClass"], [1, "pass-rate-cell"], [1, "pass-rate-bar", 3, "ngClass"], [1, "tag-cell"], [1, "tag-chip-table"], [1, "tag-more"], [1, "matrix-section"], ["text", "Loading test matrix..."], [1, "matrix-header"], [1, "matrix-header-right"], [1, "matrix-filter-input"], [1, "fas", "fa-search"], ["type", "text", "placeholder", "Filter tests...", 1, "filter-input", 3, "input", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], [1, "matrix-run-count"], ["mjButton", "", "title", "Export matrix to CSV", 3, "click", "disabled"], [1, "fas", "fa-download"], [1, "matrix-scroll-container"], [1, "test-matrix"], ["title", "Sort by sequence", 1, "seq-header", 3, "click"], ["title", "Sort by name", 1, "test-name-header", 3, "click"], [1, "run-header", 3, "title"], [1, "spacer-header"], [3, "row-selected"], [1, "totals-row"], [1, "seq-cell", "totals-label"], [1, "test-name-cell", "totals-label"], [1, "result-cell", "totals-cell"], [1, "spacer-cell"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fas", "fa-times"], [1, "run-header", 3, "click", "title"], [1, "run-header-content"], [1, "run-tags-header"], [1, "run-date"], [1, "run-pass-rate", 3, "ngClass"], [1, "tag-chip-header"], [1, "tag-more-header"], [3, "click"], [1, "seq-cell"], [1, "test-name-cell"], [1, "test-name", 3, "title"], [1, "result-cell", 3, "ngClass", "clickable", "cell-not-run", "title"], [1, "result-cell", 3, "click", "ngClass", "title"], [1, "cell-eval-stack"], [1, "cell-not-run-indicator"], [1, "cell-status", 3, "ngClass", "cell-skipped-status", "title"], ["title", "Human Review: No rating submitted yet", 1, "cell-human", "no-feedback"], [1, "cell-human", "has-feedback", 3, "rating-low", "rating-medium", "rating-good", "rating-excellent", "title"], [1, "cell-auto", "has-score", 3, "score-low", "score-medium", "score-good", "score-excellent", "title"], ["title", "Auto Score: No automated score available", 1, "cell-auto", "no-score"], [1, "cell-status", 3, "ngClass", "title"], [1, "fas", "fa-user-slash"], [1, "cell-human", "has-feedback", 3, "title"], [1, "rating-value"], [1, "cell-auto", "has-score", 3, "title"], [1, "score-value"], [1, "fas", "fa-minus"], [1, "cell-eval-stack", "totals-stack"], [1, "totals-status"], [1, "totals-human"], [1, "totals-auto"], [1, "pass-count"], [1, "avg-label"], [1, "count-label"], [1, "chart-section"], ["text", "Loading chart data..."], [1, "chart-header"], [1, "chart-legend"], [1, "legend-item", "chart-passed"], [1, "legend-item", "chart-failed"], [1, "legend-item", "chart-error"], [1, "fas", "fa-exclamation"], [1, "legend-item", "chart-skipped"], [1, "fas", "fa-forward"], [1, "chart-container"], [1, "d3-chart"], [1, "chart-info"], [1, "compare-selection"], [1, "compare-run-selector"], [1, "run-selector-list"], [1, "selected-run-preview"], [1, "compare-vs"], [1, "fas", "fa-exchange-alt"], [1, "compare-results"], [1, "compare-empty"], [1, "run-selector-item", 3, "selected"], [1, "run-selector-item", 3, "click"], [1, "selector-status"], [1, "selector-content"], [1, "selector-date"], [1, "selector-rate"], [1, "selector-tags"], [1, "tag-mini"], [1, "preview-header"], [1, "preview-label"], [1, "clear-btn", 3, "click"], [1, "preview-details"], [1, "preview-rate"], [1, "run-selector-item", 3, "selected", "disabled"], [1, "compare-summary"], [1, "compare-summary-card"], [1, "summary-label"], [1, "summary-value", 3, "ngClass"], [1, "compare-summary-card", "improved"], [1, "summary-value"], [1, "compare-summary-card", "regressed"], [1, "compare-table-section"], [1, "fas", "fa-list"], [1, "compare-table-wrapper"], [1, "compare-table"], [3, "ngClass"], [1, "status-chip", "status-missing"], [1, "muted"], [1, "change-indicator", "improved"], [1, "change-indicator", "regressed"], [1, "change-indicator", "unchanged"], [1, "fas", "fa-arrow-up"], [1, "fas", "fa-arrow-down"], ["text", "Loading comparison data..."], [1, "compare-empty-icon"], [1, "shortcuts-header"], ["title", "Hide shortcuts", 1, "shortcuts-close", 3, "click"], [1, "shortcut-list"], [1, "shortcut-item"], [1, "shortcut-keys"], ["Mode", "slide", 3, "Closed", "Title", "Resizable"], [3, "PanelClose", "PanelMode", "selectedTestId", "selectedSuiteId", "runMode"]], template: function MJTestSuiteFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "nav", 3)(3, "ol")(4, "li")(5, "a", 4);
+            i0.ɵɵlistener("keydown", function MJTestSuiteFormComponentExtended_keydown_HostBindingHandler($event) { return ctx.handleKeyboardShortcut($event); }, i0.ɵɵresolveDocument)("beforeunload", function MJTestSuiteFormComponentExtended_beforeunload_HostBindingHandler($event) { return ctx.handleBeforeUnload($event); }, i0.ɵɵresolveWindow);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 87, vars: 51, consts: [["tagInput", ""], ["chartContainer", ""], ["pickerSearch", ""], [1, "test-suite-form"], [1, "suite-header"], ["aria-label", "Breadcrumb", 1, "breadcrumb"], ["href", "javascript:void(0)", 3, "click"], [1, "fas", "fa-vial"], [1, "breadcrumb-text"], [1, "current"], [1, "fas", "fa-chevron-right", "separator"], [1, "fas", "fa-layer-group"], [1, "header-content"], [1, "header-left"], [1, "suite-icon"], [1, "suite-info"], ["title", "You have unsaved changes", "aria-label", "Unsaved changes", 1, "dirty-indicator"], [1, "suite-meta"], [1, "status-badge", 3, "ngClass"], [1, "fas", 3, "ngClass"], [1, "test-count"], ["title", "You have unsaved changes", 1, "unsaved-pill"], [1, "header-actions"], ["mjButton", "", "title", "Export to CSV", 3, "click"], [1, "fas", "fa-file-excel"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fas", "fa-play"], ["mjButton", "", 3, "click", "disabled"], [1, "suite-description"], [1, "tabs-container"], ["role", "tablist", 1, "tabs"], ["role", "tab", 1, "tab", 3, "click"], [1, "fas", "fa-th-large"], [1, "fas", "fa-flask"], [1, "tab-badge"], [1, "fas", "fa-history"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-balance-scale"], [1, "tab-content"], [1, "overview-tab"], [1, "tests-tab"], [1, "runs-tab"], [1, "analytics-tab"], [1, "compare-tab"], [1, "shortcuts-toggle", 3, "click", "title"], [1, "fas", "fa-keyboard"], [1, "keyboard-shortcuts"], ["Mode", "slide", 3, "Title", "Resizable"], ["role", "region", "aria-label", "Unsaved changes", 1, "save-bar"], [1, "save-bar-message"], ["aria-hidden", "true", 1, "save-bar-dot"], [1, "save-bar-text"], [1, "save-bar-fields"], [1, "save-bar-actions"], ["type", "button", "title", "Save changes (\u2318S)", 1, "save-bar-btn", "save-bar-btn--primary", 3, "click", "disabled"], ["type", "button", "title", "Discard changes", 1, "save-bar-btn", "save-bar-btn--ghost", 3, "click", "disabled"], [1, "fas", "fa-undo"], [1, "fas", "fa-circle"], [1, "edit-section"], [1, "edit-section-header"], [1, "fas", "fa-pen-to-square"], [1, "edit-section-sub"], [1, "edit-grid"], [1, "edit-field", "edit-field--full"], ["for", "suite-name"], [1, "required"], ["id", "suite-name", "type", "text", "placeholder", "e.g., Core Agent Test Suite", 1, "config-input", 3, "ngModelChange", "ngModel"], ["for", "suite-description"], ["id", "suite-description", "rows", "3", "placeholder", "What does this suite cover?", 1, "config-input", "config-textarea", 3, "ngModelChange", "ngModel"], [1, "edit-field"], ["for", "suite-status"], [1, "select-wrapper"], ["id", "suite-status", 1, "config-input", 3, "ngModelChange", "ngModel"], [3, "ngValue"], ["for", "suite-parent"], ["id", "suite-parent", 1, "config-input", 3, "ngModelChange", "ngModel"], ["for", "suite-tags"], [1, "tag-editor", 3, "click"], [1, "tag-chip-editable"], ["id", "suite-tags", "type", "text", 1, "tag-input-inline", 3, "ngModelChange", "keydown", "blur", "placeholder", "ngModel"], [1, "config-hint"], [1, "fas", "fa-cogs"], ["for", "suite-timeout"], ["id", "suite-timeout", "type", "number", "placeholder", "Default: 300000 (5 min)", 1, "config-input", 3, "ngModelChange", "ngModel"], [1, "meta-section"], [1, "meta-grid"], [1, "meta-item"], [1, "meta-label"], [1, "meta-value"], [1, "meta-value", "meta-mono"], ["type", "button", 1, "tag-remove", 3, "click"], [1, "fas", "fa-times"], [1, "tests-actionbar"], [1, "tests-actionbar-text"], [1, "tests-actionbar-count"], [1, "tests-actionbar-hint"], [1, "tests-actionbar-actions"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fas", "fa-plus"], [1, "loading-state"], ["cdkDropList", "", 1, "tests-list"], [1, "empty-state"], [1, "skeleton-list"], [1, "skeleton-card"], [1, "skeleton-sequence"], [1, "skeleton-icon"], [1, "skeleton-content"], [1, "skeleton-line", "wide"], [1, "skeleton-line", "narrow"], ["cdkDropList", "", 1, "tests-list", 3, "cdkDropListDropped"], ["cdkDrag", "", 1, "test-item", 3, "cdkDragDisabled"], ["cdkDragHandle", "", "title", "Drag to reorder", "aria-label", "Drag to reorder", 1, "test-drag-handle"], [1, "fas", "fa-grip-vertical"], [1, "test-sequence"], [1, "test-icon"], [1, "test-content", 3, "click"], [1, "test-name"], [1, "test-status"], [1, "test-remove-confirm"], [1, "fas", "fa-info-circle"], [1, "test-remove-confirm", 3, "click"], [1, "test-remove-confirm-text"], ["type", "button", 1, "test-remove-confirm-btn", "test-remove-confirm-btn--danger", 3, "click", "disabled"], [1, "fas", "fa-spinner", "fa-spin"], ["type", "button", 1, "test-remove-confirm-btn", "test-remove-confirm-btn--ghost", 3, "click", "disabled"], ["type", "button", "title", "Remove from suite", "aria-label", "Remove from suite", 1, "test-remove-btn", 3, "click"], [1, "fas", "fa-chevron-right", "test-chevron", 3, "click"], [1, "empty-icon"], [1, "runs-list"], [1, "run-item"], [1, "run-item", 3, "click"], [1, "run-icon"], [1, "fas"], [1, "run-content"], [1, "run-header"], [1, "run-id"], [1, "run-status"], [1, "run-meta"], [1, "fas", "fa-calendar"], [1, "run-eval-metrics"], [1, "eval-metric", "status", 3, "class"], ["title", "Human evaluation", 1, "eval-metric", "human"], ["title", "Auto score (pass rate)", 1, "eval-metric", "auto", 3, "high", "medium", "low"], [1, "run-tags"], [1, "fas", "fa-chevron-right"], [1, "fas", "fa-check-circle"], [1, "eval-metric", "status"], [1, "fas", "fa-user"], [1, "eval-pending"], [1, "fas", "fa-clock"], ["title", "Auto score (pass rate)", 1, "eval-metric", "auto"], [1, "fas", "fa-robot"], [1, "tag-chip"], [1, "fas", "fa-play-circle"], ["text", "Loading analytics data..."], [1, "analytics-subnav"], [1, "subnav-tabs"], [1, "subnav-tab", 3, "click"], [1, "fas", "fa-chart-bar"], [1, "fas", "fa-th"], [1, "fas", "fa-project-diagram"], [1, "analytics-filters"], [1, "filters-header", 3, "click"], [1, "filters-title"], [1, "fas", "fa-filter"], [1, "filter-summary"], [1, "filters-content"], [1, "filter-group"], [1, "filter-buttons"], [1, "filter-btn", 3, "click"], [1, "filter-hint"], [1, "filter-buttons", "tag-filters"], [1, "filter-btn", "tag-btn", "all-tags-btn", 3, "click"], [1, "filter-btn", "tag-btn", 3, "active"], [1, "filter-btn", "tag-btn", 3, "click"], [1, "fas", "fa-check"], [1, "analytics-kpis"], [1, "kpi-card"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "success"], [1, "kpi-trend", 3, "ngClass"], [1, "kpi-icon", "info"], [1, "kpi-icon", "warning"], [1, "fas", "fa-dollar-sign"], [1, "analytics-table-section"], [1, "fas", "fa-table"], [1, "analytics-table-wrapper"], [1, "analytics-table"], [1, "clickable-row"], [1, "empty-state", "small"], [1, "clickable-row", 3, "click"], [1, "status-chip", 3, "ngClass"], [1, "pass-rate-cell"], [1, "pass-rate-bar", 3, "ngClass"], [1, "tag-cell"], [1, "tag-chip-table"], [1, "tag-more"], [1, "matrix-section"], ["text", "Loading test matrix..."], [1, "matrix-header"], [1, "matrix-header-right"], [1, "matrix-filter-input"], [1, "fas", "fa-search"], ["type", "text", "placeholder", "Filter tests...", 1, "filter-input", 3, "input", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], [1, "matrix-run-count"], ["mjButton", "", "title", "Export matrix to CSV", 3, "click", "disabled"], [1, "fas", "fa-download"], [1, "matrix-scroll-container"], [1, "test-matrix"], ["title", "Sort by sequence", 1, "seq-header", 3, "click"], ["title", "Sort by name", 1, "test-name-header", 3, "click"], [1, "run-header", 3, "title"], [1, "spacer-header"], [3, "row-selected"], [1, "totals-row"], [1, "seq-cell", "totals-label"], [1, "test-name-cell", "totals-label"], [1, "result-cell", "totals-cell"], [1, "spacer-cell"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "run-header", 3, "click", "title"], [1, "run-header-content"], [1, "run-tags-header"], [1, "run-date"], [1, "run-pass-rate", 3, "ngClass"], [1, "tag-chip-header"], [1, "tag-more-header"], [3, "click"], [1, "seq-cell"], [1, "test-name-cell"], [1, "test-name", 3, "title"], [1, "result-cell", 3, "ngClass", "clickable", "cell-not-run", "title"], [1, "result-cell", 3, "click", "ngClass", "title"], [1, "cell-eval-stack"], [1, "cell-not-run-indicator"], [1, "cell-status", 3, "ngClass", "cell-skipped-status", "title"], ["title", "Human Review: No rating submitted yet", 1, "cell-human", "no-feedback"], [1, "cell-human", "has-feedback", 3, "rating-low", "rating-medium", "rating-good", "rating-excellent", "title"], [1, "cell-auto", "has-score", 3, "score-low", "score-medium", "score-good", "score-excellent", "title"], ["title", "Auto Score: No automated score available", 1, "cell-auto", "no-score"], [1, "cell-status", 3, "ngClass", "title"], [1, "fas", "fa-user-slash"], [1, "cell-human", "has-feedback", 3, "title"], [1, "rating-value"], [1, "cell-auto", "has-score", 3, "title"], [1, "score-value"], [1, "fas", "fa-minus"], [1, "cell-eval-stack", "totals-stack"], [1, "totals-status"], [1, "totals-human"], [1, "totals-auto"], [1, "pass-count"], [1, "avg-label"], [1, "count-label"], [1, "chart-section"], ["text", "Loading chart data..."], [1, "chart-header"], [1, "chart-legend"], [1, "legend-item", "chart-passed"], [1, "legend-item", "chart-failed"], [1, "legend-item", "chart-error"], [1, "fas", "fa-exclamation"], [1, "legend-item", "chart-skipped"], [1, "fas", "fa-forward"], [1, "chart-container"], [1, "d3-chart"], [1, "chart-info"], [1, "compare-selection"], [1, "compare-run-selector"], [1, "run-selector-list"], [1, "selected-run-preview"], [1, "compare-vs"], [1, "fas", "fa-exchange-alt"], [1, "compare-results"], [1, "compare-empty"], [1, "run-selector-item", 3, "selected"], [1, "run-selector-item", 3, "click"], [1, "selector-status"], [1, "selector-content"], [1, "selector-date"], [1, "selector-rate"], [1, "selector-tags"], [1, "tag-mini"], [1, "preview-header"], [1, "preview-label"], [1, "clear-btn", 3, "click"], [1, "preview-details"], [1, "preview-rate"], [1, "run-selector-item", 3, "selected", "disabled"], [1, "compare-summary"], [1, "compare-summary-card"], [1, "summary-label"], [1, "summary-value", 3, "ngClass"], [1, "compare-summary-card", "improved"], [1, "summary-value"], [1, "compare-summary-card", "regressed"], [1, "compare-table-section"], [1, "fas", "fa-list"], [1, "compare-table-wrapper"], [1, "compare-table"], [3, "ngClass"], [1, "status-chip", "status-missing"], [1, "muted"], [1, "change-indicator", "improved"], [1, "change-indicator", "regressed"], [1, "change-indicator", "unchanged"], [1, "fas", "fa-arrow-up"], [1, "fas", "fa-arrow-down"], ["text", "Loading comparison data..."], [1, "compare-empty-icon"], [1, "shortcuts-header"], ["title", "Hide shortcuts", 1, "shortcuts-close", 3, "click"], [1, "shortcut-list"], [1, "shortcut-item"], [1, "shortcut-keys"], ["Mode", "slide", 3, "Closed", "Title", "Resizable"], [3, "PanelClose", "PanelMode", "selectedTestId", "selectedSuiteId", "runMode"], [1, "picker-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "add-tests-dialog-title", 1, "picker-dialog", 3, "click"], [1, "picker-header"], ["id", "add-tests-dialog-title", 1, "picker-title"], [1, "fas", "fa-plus-circle"], ["type", "button", "aria-label", "Close", 1, "picker-close", 3, "click", "disabled"], [1, "picker-search"], [1, "fas", "fa-search", "picker-search-icon"], ["type", "text", "placeholder", "Search tests by name, description, or type...", "autofocus", "", 1, "picker-search-input", 3, "ngModelChange", "ngModel"], ["type", "button", "aria-label", "Clear search", 1, "picker-search-clear"], [1, "picker-toolbar"], [1, "picker-toolbar-status"], [1, "picker-toolbar-actions"], ["type", "button", 1, "picker-link-btn", 3, "click", "disabled"], [1, "picker-body"], [1, "picker-loading"], [1, "picker-empty"], [1, "picker-list"], [1, "picker-footer"], ["type", "button", 1, "picker-btn", "picker-btn--primary", 3, "click", "disabled"], ["type", "button", 1, "picker-btn", "picker-btn--ghost", 3, "click", "disabled"], ["type", "button", "aria-label", "Clear search", 1, "picker-search-clear", 3, "click"], ["text", "Loading tests..."], ["role", "checkbox", "tabindex", "0", 1, "picker-row", 3, "picker-row--selected"], ["role", "checkbox", "tabindex", "0", 1, "picker-row", 3, "click"], [1, "picker-check"], [1, "picker-row-main"], [1, "picker-row-name"], [1, "picker-row-desc"], [1, "picker-row-meta"], [1, "picker-row-pill"], [1, "picker-row-pill", "picker-row-pill--status"], [1, "save-bar-kbd"]], template: function MJTestSuiteFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "nav", 5)(3, "ol")(4, "li")(5, "a", 6);
             i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_a_click_5_listener() { return ctx.navigateToTestingDashboard(); });
-            i0.ɵɵelement(6, "i", 5);
-            i0.ɵɵelementStart(7, "span", 6);
+            i0.ɵɵelement(6, "i", 7);
+            i0.ɵɵelementStart(7, "span", 8);
             i0.ɵɵtext(8, "Testing");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(9, "li", 7);
-            i0.ɵɵelement(10, "i", 8)(11, "i", 9);
+            i0.ɵɵelementStart(9, "li", 9);
+            i0.ɵɵelement(10, "i", 10)(11, "i", 11);
             i0.ɵɵelementStart(12, "span");
             i0.ɵɵtext(13);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(14, "div", 10)(15, "div", 11)(16, "div", 12);
-            i0.ɵɵelement(17, "i", 9);
+            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14);
+            i0.ɵɵelement(17, "i", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 13)(19, "h1");
+            i0.ɵɵelementStart(18, "div", 15)(19, "h1");
             i0.ɵɵtext(20);
+            i0.ɵɵconditionalCreate(21, MJTestSuiteFormComponentExtended_Conditional_21_Template, 2, 0, "span", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "div", 14)(22, "span", 15);
-            i0.ɵɵelement(23, "i", 16);
-            i0.ɵɵtext(24);
+            i0.ɵɵelementStart(22, "div", 17)(23, "span", 18);
+            i0.ɵɵelement(24, "i", 19);
+            i0.ɵɵtext(25);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(25, MJTestSuiteFormComponentExtended_Conditional_25_Template, 3, 1, "span", 17);
+            i0.ɵɵconditionalCreate(26, MJTestSuiteFormComponentExtended_Conditional_26_Template, 3, 1, "span", 20);
+            i0.ɵɵconditionalCreate(27, MJTestSuiteFormComponentExtended_Conditional_27_Template, 3, 0, "span", 21);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(26, "div", 18);
-            i0.ɵɵelement(27, "app-evaluation-mode-toggle");
-            i0.ɵɵelementStart(28, "button", 19);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_28_listener() { return ctx.exportToExcel(); });
-            i0.ɵɵelement(29, "i", 20);
-            i0.ɵɵtext(30, " Export ");
+            i0.ɵɵelementStart(28, "div", 22);
+            i0.ɵɵelement(29, "app-evaluation-mode-toggle");
+            i0.ɵɵelementStart(30, "button", 23);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_30_listener() { return ctx.exportToExcel(); });
+            i0.ɵɵelement(31, "i", 24);
+            i0.ɵɵtext(32, " Export ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(31, "button", 21);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_31_listener() { return ctx.runSuite(); });
-            i0.ɵɵelement(32, "i", 22);
-            i0.ɵɵtext(33, " Run Suite ");
+            i0.ɵɵelementStart(33, "button", 25);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_33_listener() { return ctx.runSuite(); });
+            i0.ɵɵelement(34, "i", 26);
+            i0.ɵɵtext(35, " Run Suite ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "button", 23);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_34_listener() { return ctx.refresh(); });
-            i0.ɵɵelement(35, "i", 16);
-            i0.ɵɵtext(36);
+            i0.ɵɵelementStart(36, "button", 27);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_36_listener() { return ctx.refresh(); });
+            i0.ɵɵelement(37, "i", 19);
+            i0.ɵɵtext(38);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(37, MJTestSuiteFormComponentExtended_Conditional_37_Template, 3, 1, "div", 24);
+            i0.ɵɵconditionalCreate(39, MJTestSuiteFormComponentExtended_Conditional_39_Template, 3, 1, "div", 28);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "div", 25)(39, "div", 26)(40, "button", 27);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_40_listener() { return ctx.changeTab("overview"); });
-            i0.ɵɵelement(41, "i", 28);
-            i0.ɵɵtext(42, " Overview ");
+            i0.ɵɵelementStart(40, "div", 29)(41, "div", 30)(42, "button", 31);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_42_listener() { return ctx.changeTab("overview"); });
+            i0.ɵɵelement(43, "i", 32);
+            i0.ɵɵtext(44, " Overview ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(43, "button", 27);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_43_listener() { return ctx.changeTab("tests"); });
-            i0.ɵɵelement(44, "i", 29);
-            i0.ɵɵtext(45, " Tests ");
-            i0.ɵɵconditionalCreate(46, MJTestSuiteFormComponentExtended_Conditional_46_Template, 2, 1, "span", 30);
+            i0.ɵɵelementStart(45, "button", 31);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_45_listener() { return ctx.changeTab("tests"); });
+            i0.ɵɵelement(46, "i", 33);
+            i0.ɵɵtext(47, " Tests ");
+            i0.ɵɵconditionalCreate(48, MJTestSuiteFormComponentExtended_Conditional_48_Template, 2, 1, "span", 34);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(47, "button", 27);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_47_listener() { return ctx.changeTab("runs"); });
-            i0.ɵɵelement(48, "i", 31);
-            i0.ɵɵtext(49, " Runs ");
-            i0.ɵɵconditionalCreate(50, MJTestSuiteFormComponentExtended_Conditional_50_Template, 2, 1, "span", 30);
+            i0.ɵɵelementStart(49, "button", 31);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_49_listener() { return ctx.changeTab("runs"); });
+            i0.ɵɵelement(50, "i", 35);
+            i0.ɵɵtext(51, " Runs ");
+            i0.ɵɵconditionalCreate(52, MJTestSuiteFormComponentExtended_Conditional_52_Template, 2, 1, "span", 34);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(51, "button", 27);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_51_listener() { return ctx.changeTab("analytics"); });
-            i0.ɵɵelement(52, "i", 32);
-            i0.ɵɵtext(53, " Analytics ");
+            i0.ɵɵelementStart(53, "button", 31);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_53_listener() { return ctx.changeTab("analytics"); });
+            i0.ɵɵelement(54, "i", 36);
+            i0.ɵɵtext(55, " Analytics ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(54, "button", 27);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_54_listener() { return ctx.changeTab("compare"); });
-            i0.ɵɵelement(55, "i", 33);
-            i0.ɵɵtext(56, " Compare ");
+            i0.ɵɵelementStart(56, "button", 31);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_56_listener() { return ctx.changeTab("compare"); });
+            i0.ɵɵelement(57, "i", 37);
+            i0.ɵɵtext(58, " Compare ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(57, "div", 34);
-            i0.ɵɵconditionalCreate(58, MJTestSuiteFormComponentExtended_Conditional_58_Template, 45, 13, "div", 35);
-            i0.ɵɵconditionalCreate(59, MJTestSuiteFormComponentExtended_Conditional_59_Template, 4, 3, "div", 36);
-            i0.ɵɵconditionalCreate(60, MJTestSuiteFormComponentExtended_Conditional_60_Template, 4, 3, "div", 37);
-            i0.ɵɵconditionalCreate(61, MJTestSuiteFormComponentExtended_Conditional_61_Template, 4, 3, "div", 38);
-            i0.ɵɵconditionalCreate(62, MJTestSuiteFormComponentExtended_Conditional_62_Template, 18, 8, "div", 39);
+            i0.ɵɵelementStart(59, "div", 38);
+            i0.ɵɵconditionalCreate(60, MJTestSuiteFormComponentExtended_Conditional_60_Template, 75, 18, "div", 39);
+            i0.ɵɵconditionalCreate(61, MJTestSuiteFormComponentExtended_Conditional_61_Template, 15, 5, "div", 40);
+            i0.ɵɵconditionalCreate(62, MJTestSuiteFormComponentExtended_Conditional_62_Template, 4, 3, "div", 41);
+            i0.ɵɵconditionalCreate(63, MJTestSuiteFormComponentExtended_Conditional_63_Template, 4, 3, "div", 42);
+            i0.ɵɵconditionalCreate(64, MJTestSuiteFormComponentExtended_Conditional_64_Template, 18, 8, "div", 43);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(65, "button", 44);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_65_listener() { return ctx.toggleShortcuts(); });
+            i0.ɵɵelement(66, "i", 45);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(63, "button", 40);
-            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_63_listener() { return ctx.toggleShortcuts(); });
-            i0.ɵɵelement(64, "i", 41);
+            i0.ɵɵconditionalCreate(67, MJTestSuiteFormComponentExtended_Conditional_67_Template, 40, 0, "div", 46);
+            i0.ɵɵconditionalCreate(68, MJTestSuiteFormComponentExtended_Conditional_68_Template, 2, 6, "mj-slide-panel", 47);
+            i0.ɵɵconditionalCreate(69, MJTestSuiteFormComponentExtended_Conditional_69_Template, 32, 10);
+            i0.ɵɵelementStart(70, "div", 48)(71, "div", 49)(72, "span", 50);
+            i0.ɵɵtext(73, "\u25CF");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(65, MJTestSuiteFormComponentExtended_Conditional_65_Template, 32, 0, "div", 42);
-            i0.ɵɵconditionalCreate(66, MJTestSuiteFormComponentExtended_Conditional_66_Template, 2, 6, "mj-slide-panel", 43);
+            i0.ɵɵelementStart(74, "span", 51)(75, "strong");
+            i0.ɵɵtext(76, "Unsaved changes");
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(77, "span", 52);
+            i0.ɵɵconditionalCreate(78, MJTestSuiteFormComponentExtended_Conditional_78_Template, 1, 1)(79, MJTestSuiteFormComponentExtended_Conditional_79_Template, 1, 1);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(80, "div", 53)(81, "button", 54);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_81_listener() { return ctx.saveChanges(); });
+            i0.ɵɵconditionalCreate(82, MJTestSuiteFormComponentExtended_Conditional_82_Template, 2, 0)(83, MJTestSuiteFormComponentExtended_Conditional_83_Template, 7, 0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(84, "button", 55);
+            i0.ɵɵlistener("click", function MJTestSuiteFormComponentExtended_Template_button_click_84_listener() { return ctx.discardChanges(); });
+            i0.ɵɵelement(85, "i", 56);
+            i0.ɵɵtext(86, " Discard ");
+            i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(13);
             i0.ɵɵtextInterpolate(ctx.record.Name);
             i0.ɵɵadvance(3);
             i0.ɵɵstyleProp("background-color", ctx.getStatusColor());
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.record.Name);
+            i0.ɵɵtextInterpolate1(" ", ctx.record.Name, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isDirty ? 21 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getStatusClass());
             i0.ɵɵadvance();
@@ -3482,7 +4319,9 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.record.Status, " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.testsLoaded ? 25 : -1);
+            i0.ɵɵconditional(ctx.testsLoaded ? 26 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isDirty ? 27 : -1);
             i0.ɵɵadvance(9);
             i0.ɵɵproperty("disabled", ctx.isRefreshing);
             i0.ɵɵadvance();
@@ -3490,7 +4329,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.isRefreshing ? "Refreshing..." : "Refresh", " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.record.Description ? 37 : -1);
+            i0.ɵɵconditional(ctx.record.Description ? 39 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("active", ctx.activeTab === "overview");
             i0.ɵɵattribute("aria-selected", ctx.activeTab === "overview");
@@ -3498,35 +4337,52 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             i0.ɵɵclassProp("active", ctx.activeTab === "tests");
             i0.ɵɵattribute("aria-selected", ctx.activeTab === "tests");
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.testsLoaded ? 46 : -1);
+            i0.ɵɵconditional(ctx.testsLoaded ? 48 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("active", ctx.activeTab === "runs");
             i0.ɵɵattribute("aria-selected", ctx.activeTab === "runs");
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.runsLoaded ? 50 : -1);
+            i0.ɵɵconditional(ctx.runsLoaded ? 52 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("active", ctx.activeTab === "analytics");
             i0.ɵɵattribute("aria-selected", ctx.activeTab === "analytics");
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("active", ctx.activeTab === "compare");
             i0.ɵɵattribute("aria-selected", ctx.activeTab === "compare");
-            i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.activeTab === "overview" ? 58 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("has-savebar", ctx.isDirty);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.activeTab === "overview" ? 60 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "tests" ? 59 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "tests" ? 61 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "runs" ? 60 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "runs" ? 62 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "analytics" ? 61 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "analytics" ? 63 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "compare" ? 62 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "compare" ? 64 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("title", ctx.showShortcuts ? "Hide keyboard shortcuts" : "Show keyboard shortcuts");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showShortcuts ? 65 : -1);
+            i0.ɵɵconditional(ctx.showShortcuts ? 67 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.testingDialogService.IsPanelOpen ? 66 : -1);
-        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i4.TestRunDialogComponent, i4.EvaluationModeToggleComponent, i5.LoadingComponent, i6.MjSlidePanelComponent, i1.DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  --test-primary: var(--mj-brand-primary);\n  --test-primary-light: var(--mj-brand-primary);\n  --test-success: var(--mj-status-success);\n  --test-error: var(--mj-status-error);\n  --test-warning: var(--mj-status-warning);\n  --test-disabled: var(--mj-text-muted);\n  --test-bg: var(--mj-bg-surface-card);\n  --test-surface: var(--mj-bg-surface);\n  --test-border: var(--mj-border-default);\n  --test-text: var(--mj-text-primary);\n  --test-text-secondary: var(--mj-text-secondary);\n  --test-text-muted: var(--mj-text-disabled);\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: var(--mj-shadow-sm);\n  --test-shadow-md: var(--mj-shadow-md);\n  --test-shadow-lg: var(--mj-shadow-lg);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n.test-suite-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n\n\n.breadcrumb[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  text-decoration: none;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  margin: 0 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%] {\n  color: var(--test-text-secondary);\n  font-weight: 500;\n}\n\n.breadcrumb-text[_ngcontent-%COMP%] {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.suite-header[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.suite-icon[_ngcontent-%COMP%]:hover { transform: scale(1.05); }\n\n.suite-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n.suite-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  word-wrap: break-word;\n}\n\n.suite-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] { background: var(--test-success); }\n.status-badge.status-disabled[_ngcontent-%COMP%] { background: var(--test-disabled); }\n.status-badge.status-pending[_ngcontent-%COMP%] { background: var(--test-warning); }\n\n.status-badge-inline[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active[_ngcontent-%COMP%] { background: var(--test-success); }\n.status-badge-inline.status-disabled[_ngcontent-%COMP%] { background: var(--test-disabled); }\n.status-badge-inline.status-pending[_ngcontent-%COMP%] { background: var(--test-warning); }\n\n.test-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.suite-description[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.suite-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.tabs[_ngcontent-%COMP%]::-webkit-scrollbar { display: none; }\n\n.tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--test-primary);\n}\n\n.tab-shortcut[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.info-section[_ngcontent-%COMP%], .config-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 500;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.config-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-hint[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--test-text-muted);\n}\n\n\n\n.tests-tab[_ngcontent-%COMP%], .runs-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.loading-state[_ngcontent-%COMP%] { padding: 0; }\n\n.skeleton-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-sequence[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line[_ngcontent-%COMP%] {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide[_ngcontent-%COMP%] { width: 70%; }\n.skeleton-line.narrow[_ngcontent-%COMP%] { width: 40%; }\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n.tests-list[_ngcontent-%COMP%], .runs-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.test-item[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.test-item[_ngcontent-%COMP%]:hover, .run-item[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.test-sequence[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--test-text-secondary);\n  flex-shrink: 0;\n}\n\n.test-icon[_ngcontent-%COMP%], .run-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.test-icon[_ngcontent-%COMP%] {\n  background: var(--test-primary);\n}\n\n.test-content[_ngcontent-%COMP%], .run-content[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n.test-name[_ngcontent-%COMP%], .run-header[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-id[_ngcontent-%COMP%] { font-weight: 600; }\n\n.run-status[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.test-status[_ngcontent-%COMP%], .run-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.test-status[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.test-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.test-item[_ngcontent-%COMP%]:hover    > i[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%]:hover    > i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  color: var(--test-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 300px;\n}\n\n\n\n\n\n.shortcuts-toggle[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--test-text-secondary);\n}\n\n.shortcut-keys[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n\n\n@media (max-width: 1024px) {\n  .keyboard-shortcuts[_ngcontent-%COMP%], .shortcuts-toggle[_ngcontent-%COMP%] { display: none; }\n}\n\n@media (max-width: 768px) {\n  .suite-header[_ngcontent-%COMP%] { padding: 16px; }\n\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] { flex: 1; }\n\n  .tab-shortcut[_ngcontent-%COMP%] { display: none; }\n\n  .info-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n\n  .test-item[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%] { padding: 14px; }\n}\n\n@media (max-width: 480px) {\n  .suite-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n  }\n\n  .suite-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 16px; }\n\n  .tab-badge[_ngcontent-%COMP%] { display: none; }\n\n  .test-sequence[_ngcontent-%COMP%] { display: none; }\n}\n\n@media (hover: none) and (pointer: coarse) {\n  .test-item[_ngcontent-%COMP%]:active, .run-item[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    transform: scale(0.98);\n  }\n\n  .tab[_ngcontent-%COMP%] { min-height: 48px; }\n  .test-item[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%] { min-height: 64px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], *[_ngcontent-%COMP%]::before, *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n@media print {\n  .header-actions[_ngcontent-%COMP%], .tabs-container[_ngcontent-%COMP%], .keyboard-shortcuts[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n}\n\n\n\n\n\n.run-tags[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 8px;\n}\n\n.tag-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-mini[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n}\n\n.tag-more[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n\n\n.run-eval-metrics[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.eval-metric[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.eval-metric.status[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.eval-metric.status.status-completed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-metric.status.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-metric.status.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.status.status-pending[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human[_ngcontent-%COMP%]   .eval-pending[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.auto.high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n  color: var(--mj-status-success);\n}\n\n.eval-metric.auto.medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto.low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  color: var(--mj-status-error);\n}\n\n.tag-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.tag-chip-table[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n\n\n.analytics-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n\n\n.analytics-filters[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-bottom: 16px;\n  box-shadow: var(--test-shadow-sm);\n  overflow: hidden;\n}\n\n.analytics-filters.collapsed[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.filters-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.filters-header[_ngcontent-%COMP%]:hover {\n  background: var(--test-bg);\n}\n\n.filters-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n}\n\n.filters-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n  font-weight: 400;\n  color: var(--test-text-muted);\n  margin-left: 8px;\n}\n\n.filters-header[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 12px;\n}\n\n.filters-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 12px 16px 16px 16px;\n  border-top: 1px solid var(--test-border);\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.filter-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--test-primary);\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n  background: var(--test-primary);\n  border-color: var(--test-primary);\n  color: var(--mj-text-inverse);\n}\n\n.filter-btn.tag-btn[_ngcontent-%COMP%] {\n  padding: 6px 12px;\n  font-size: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.filter-btn.tag-btn[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.filter-btn.tag-btn.all-tags-btn[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.filter-btn.tag-btn.all-tags-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.filter-hint[_ngcontent-%COMP%] {\n  font-weight: 400;\n  font-size: 10px;\n  color: var(--test-primary);\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-filters[_ngcontent-%COMP%] {\n  max-height: 120px;\n  overflow-y: auto;\n}\n\n\n\n.analytics-kpis[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: var(--test-radius-md);\n  color: var(--test-primary);\n  font-size: 20px;\n}\n\n.kpi-icon.success[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-icon.info[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.kpi-icon.warning[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  margin-top: 2px;\n}\n\n.kpi-trend[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-top: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-secondary);\n}\n\n.kpi-trend.trend-up[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-trend.trend-down[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n\n\n.analytics-table-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.analytics-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.analytics-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.analytics-table-wrapper[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  margin: 0 -24px;\n  padding: 0 24px;\n}\n\n.analytics-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.analytics-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.analytics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.analytics-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.clickable-row[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.analytics-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.clickable-row[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.status-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-chip.status-completed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-passed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-failed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--test-error); }\n.status-chip.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-running[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--test-primary); }\n.status-chip.status-pending[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.status-chip.status-cancelled[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n.status-chip.status-missing[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--test-text-muted); }\n.status-chip.status-timeout[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-skipped[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n\n.pass-rate-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 100px;\n}\n\n.pass-rate-bar[_ngcontent-%COMP%] {\n  height: 6px;\n  border-radius: 3px;\n  background: var(--test-success);\n  transition: width 0.3s ease;\n  max-width: 60px;\n}\n\n.pass-rate-bar.medium[_ngcontent-%COMP%] { background: var(--test-warning); }\n.pass-rate-bar.low[_ngcontent-%COMP%] { background: var(--test-error); }\n\n\n\n.analytics-subnav[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 8px;\n  margin-bottom: 20px;\n  box-shadow: var(--test-shadow-sm);\n  display: inline-flex;\n}\n\n.subnav-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n}\n\n.subnav-tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border: none;\n  border-radius: var(--test-radius-sm);\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.subnav-tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.subnav-tab.active[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.subnav-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.matrix-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 16px;\n  box-shadow: var(--test-shadow-sm);\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 280px);\n  min-height: 300px;\n}\n\n.matrix-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 12px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid var(--test-border);\n  flex-shrink: 0;\n}\n\n.matrix-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.matrix-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.matrix-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.matrix-run-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  font-weight: 500;\n}\n\n\n\n.matrix-filter-input[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--test-border);\n  border-radius: 6px;\n  padding: 4px 10px;\n  min-width: 180px;\n}\n\n.matrix-filter-input[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.matrix-filter-input[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 12px;\n  color: var(--test-text);\n  width: 100%;\n}\n\n.matrix-filter-input[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  border: none;\n  background: none;\n  padding: 2px 4px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  border-radius: 3px;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n\n\n\n.matrix-scroll-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n}\n\n.test-matrix[_ngcontent-%COMP%] {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.test-matrix[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  display: table-header-group;\n}\n\n.test-matrix[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  display: table-row;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%] {\n  display: table-row-group;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  display: table-row;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%]   .seq-cell[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%]   .test-name-cell[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tfoot[_ngcontent-%COMP%] {\n  display: table-footer-group;\n}\n\n.test-matrix[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  display: table-cell;\n  border: 1px solid var(--test-border);\n  padding: 8px 12px;\n  text-align: center;\n  vertical-align: middle;\n}\n\n.test-matrix[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background: var(--test-bg);\n  font-weight: 600;\n  font-size: 11px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  border-bottom: 3px solid var(--mj-text-secondary) !important;\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   .seq-cell[_ngcontent-%COMP%] {\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  text-align: center;\n  position: sticky;\n  left: 0;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  border-right: 1px solid var(--test-border);\n  padding: 6px 4px !important;\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%] {\n  cursor: pointer;\n  font-weight: 600;\n  background: var(--test-bg);\n  z-index: 12; \n\n  top: 0;\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .seq-cell[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  z-index: 2;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  margin-left: 2px;\n  opacity: 0.6;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-header[_ngcontent-%COMP%] {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-bg);\n  z-index: 11;\n  border-right: 2px solid var(--test-border);\n  cursor: pointer;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  margin-left: 4px;\n  opacity: 0.6;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix[_ngcontent-%COMP%]   .run-header[_ngcontent-%COMP%] {\n  min-width: 120px;\n  width: 120px;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .spacer-header[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   .spacer-cell[_ngcontent-%COMP%] {\n  width: 100%;\n  min-width: 20px;\n  background: var(--test-bg);\n  border: none;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .spacer-cell[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n}\n\n.test-matrix[_ngcontent-%COMP%]   .run-header[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-header-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-pass-rate[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.run-pass-rate.high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.run-pass-rate.medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.run-pass-rate.low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.run-tags[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.tag-tiny[_ngcontent-%COMP%] {\n  font-size: 9px;\n  padding: 2px 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--test-primary);\n  border-radius: 8px;\n  white-space: nowrap;\n  max-width: 60px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.run-tags-header[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 3px;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.tag-chip-header[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 70px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-more-header[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--test-text-secondary);\n  padding: 2px 4px;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-cell[_ngcontent-%COMP%] {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-surface);\n  z-index: 2;\n  border-right: 2px solid var(--test-border);\n  padding: 6px 10px !important;\n}\n\n.test-name[_ngcontent-%COMP%] {\n  display: block;\n  white-space: nowrap;\n  font-weight: 500;\n  color: var(--test-text);\n  font-size: 12px;\n}\n\n.result-cell[_ngcontent-%COMP%] {\n  position: relative;\n  min-width: 120px;\n  width: 120px;\n  transition: var(--test-transition);\n}\n\n.result-cell.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.result-cell.clickable[_ngcontent-%COMP%]:hover {\n  transform: scale(1.1);\n  box-shadow: var(--mj-shadow-md);\n  z-index: 5;\n}\n\n.result-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.result-cell.cell-passed[_ngcontent-%COMP%], \n.result-cell.cell-failed[_ngcontent-%COMP%], \n.result-cell.cell-error[_ngcontent-%COMP%], \n.result-cell.cell-timeout[_ngcontent-%COMP%], \n.result-cell.cell-running[_ngcontent-%COMP%], \n.result-cell.cell-pending[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--test-text);\n}\n\n\n\n.result-cell.cell-skipped[_ngcontent-%COMP%] {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--test-disabled);\n}\n\n.result-cell.cell-none[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--test-text-muted);\n}\n\n.cell-score[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  margin-top: 2px;\n}\n\n\n\n.cell-eval-stack[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-wrap: nowrap;\n}\n\n.result-cell.multi-eval[_ngcontent-%COMP%] {\n  min-width: 120px;\n  width: auto;\n}\n\n\n\n.cell-status.status-timeout[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-status.status-pending[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.cell-human[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-size: 10px;\n}\n\n.cell-auto[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-auto.high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-none-indicator[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  opacity: 0.5;\n}\n\n.matrix-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.matrix-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.chart-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-skipped[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-disabled);\n}\n\n.chart-container[_ngcontent-%COMP%] {\n  min-height: 500px;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.d3-chart[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 500px;\n}\n\n.d3-chart[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n\n\n.d3-chart[_ngcontent-%COMP%]   .node[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .node[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n.d3-chart[_ngcontent-%COMP%]   .node-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  fill: var(--test-text);\n  pointer-events: none;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%] {\n  fill: none;\n  stroke-opacity: 0.4;\n  transition: stroke-opacity 0.2s ease;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%]:hover {\n  stroke-opacity: 0.8;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .tooltip[_ngcontent-%COMP%] {\n  position: absolute;\n  padding: 10px 14px;\n  background: var(--mj-bg-overlay);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 12px;\n  pointer-events: none;\n  z-index: 100;\n  box-shadow: var(--mj-shadow-lg);\n  max-width: 250px;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .tooltip-title[_ngcontent-%COMP%] {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .tooltip-value[_ngcontent-%COMP%] {\n  opacity: 0.8;\n}\n\n.chart-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n  margin-top: 16px;\n}\n\n.chart-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n\n\n\n\n.compare-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.compare-selection[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 24px;\n  align-items: flex-start;\n  margin-bottom: 24px;\n}\n\n.compare-run-selector[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-run-selector[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.run-selector-list[_ngcontent-%COMP%] {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.run-selector-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-selector-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-selector-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.run-selector-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.selector-status[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.selector-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.selector-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--test-text);\n}\n\n.selector-rate[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--test-text-secondary);\n}\n\n.selector-tags[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.selected-run-preview[_ngcontent-%COMP%] {\n  padding: 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-sm);\n  border: 1px solid var(--test-border);\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.preview-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-error);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover { text-decoration: underline; }\n\n.preview-details[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--test-text);\n}\n\n.preview-rate[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--test-success);\n}\n\n.compare-vs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: var(--test-bg);\n  border-radius: 50%;\n  color: var(--test-text-muted);\n  font-size: 16px;\n  align-self: center;\n  margin-top: 60px;\n}\n\n\n\n.compare-results[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.compare-summary[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.compare-summary-card[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  text-align: center;\n}\n\n.compare-summary-card[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n  margin-bottom: 8px;\n}\n\n.compare-summary-card[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.compare-summary-card[_ngcontent-%COMP%]   .summary-value.positive[_ngcontent-%COMP%] { color: var(--test-success); }\n.compare-summary-card[_ngcontent-%COMP%]   .summary-value.negative[_ngcontent-%COMP%] { color: var(--test-error); }\n\n.compare-summary-card.improved[_ngcontent-%COMP%] {\n  border-left: 4px solid var(--test-success);\n}\n\n.compare-summary-card.improved[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] { color: var(--test-success); }\n\n.compare-summary-card.regressed[_ngcontent-%COMP%] {\n  border-left: 4px solid var(--test-error);\n}\n\n.compare-summary-card.regressed[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] { color: var(--test-error); }\n\n\n\n.compare-table-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.compare-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.compare-table-wrapper[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.compare-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.compare-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.compare-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.compare-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.improved[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.compare-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.regressed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.test-name-cell[_ngcontent-%COMP%] {\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.positive[_ngcontent-%COMP%] { color: var(--test-success); }\n.negative[_ngcontent-%COMP%] { color: var(--test-error); }\n.muted[_ngcontent-%COMP%] { color: var(--test-text-muted); }\n\n.change-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.change-indicator.improved[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.change-indicator.regressed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.change-indicator.unchanged[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-muted);\n}\n\n\n\n.compare-empty[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 24px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-top: 24px;\n}\n\n.compare-empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin: 0 auto 20px;\n}\n\n.compare-empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--test-text-muted);\n}\n\n.compare-empty[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.compare-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n\n\n.empty-state.small[_ngcontent-%COMP%] {\n  padding: 32px 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n  .compare-selection[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .compare-vs[_ngcontent-%COMP%] {\n    margin: 0;\n    align-self: center;\n    justify-self: center;\n  }\n\n  .analytics-kpis[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 768px) {\n  .filter-buttons[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .filter-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    text-align: center;\n  }\n\n  .analytics-kpis[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .kpi-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .kpi-value[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .compare-summary[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .analytics-table-wrapper[_ngcontent-%COMP%], \n   .compare-table-wrapper[_ngcontent-%COMP%] {\n    margin: 0 -20px;\n    padding: 0 20px;\n  }\n\n  .run-selector-list[_ngcontent-%COMP%] {\n    max-height: 150px;\n  }\n}\n\n@media (max-width: 480px) {\n  .compare-summary[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .compare-summary-card[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .analytics-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .analytics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], \n   .compare-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .compare-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n}\n\n\n\n\n\n\n\n\n.cell-human[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-human.no-feedback[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-human.no-feedback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.cell-human.has-feedback[_ngcontent-%COMP%] {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-human.has-feedback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n}\n\n.cell-human.has-feedback[_ngcontent-%COMP%]   .rating-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: 11px;\n}\n\n\n\n.cell-human.rating-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-human.rating-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-human.rating-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-human.rating-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.cell-auto[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-auto.no-score[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-auto.no-score[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.cell-auto.has-score[_ngcontent-%COMP%] {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-auto.has-score[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n}\n\n.cell-auto.has-score[_ngcontent-%COMP%]   .score-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: 10px;\n}\n\n\n\n.cell-auto.score-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-auto.score-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.score-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.score-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.cell-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-timeout[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped[_ngcontent-%COMP%], \n.cell-status.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.result-cell.cell-not-run[_ngcontent-%COMP%] {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--mj-text-disabled);\n}\n\n.result-cell.cell-not-run[_ngcontent-%COMP%]   .cell-eval-stack[_ngcontent-%COMP%] {\n  opacity: 0.6;\n}\n\n.cell-not-run-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  color: var(--mj-text-disabled);\n  font-size: 11px;\n}\n\n\n\n\n\n.test-matrix[_ngcontent-%COMP%]   tfoot[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 0;\n  z-index: 2;\n}\n\n.totals-row[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-top: 2px solid var(--test-border);\n}\n\n.totals-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  font-weight: 600;\n}\n\n.totals-row[_ngcontent-%COMP%]   .totals-label[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.totals-row[_ngcontent-%COMP%]   .totals-cell[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.totals-stack[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.totals-status[_ngcontent-%COMP%], \n.totals-human[_ngcontent-%COMP%], \n.totals-auto[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.totals-status[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.totals-status[_ngcontent-%COMP%]   .pass-count[_ngcontent-%COMP%] {\n  font-weight: 700;\n}\n\n.totals-human[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.totals-human[_ngcontent-%COMP%]   .avg-label[_ngcontent-%COMP%] {\n  font-weight: 700;\n}\n\n.totals-human[_ngcontent-%COMP%]   .count-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n.totals-auto[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.totals-auto[_ngcontent-%COMP%]   .avg-label[_ngcontent-%COMP%] {\n  font-weight: 700;\n}\n\n.totals-auto[_ngcontent-%COMP%]   .count-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.8;\n}"], changeDetection: 0 }); }
+            i0.ɵɵconditional(ctx.testingDialogService.IsPanelOpen ? 68 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showAddTestsDialog ? 69 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("save-bar--visible", ctx.isDirty);
+            i0.ɵɵattribute("aria-hidden", !ctx.isDirty);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.dirtyFieldNames.length === 1 ? 78 : ctx.dirtyFieldNames.length > 1 ? 79 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("disabled", ctx.isSaving || !ctx.isDirty);
+            i0.ɵɵattribute("tabindex", ctx.isDirty ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isSaving ? 82 : 83);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.isSaving || !ctx.isDirty);
+            i0.ɵɵattribute("tabindex", ctx.isDirty ? 0 : -1);
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CdkDropList, i3.CdkDrag, i3.CdkDragHandle, i4.MJButtonDirective, i5.TestRunDialogComponent, i5.EvaluationModeToggleComponent, i6.LoadingComponent, i7.MjSlidePanelComponent, i1.DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  --test-primary: var(--mj-brand-primary);\n  --test-primary-light: var(--mj-brand-primary);\n  --test-success: var(--mj-status-success);\n  --test-error: var(--mj-status-error);\n  --test-warning: var(--mj-status-warning);\n  --test-disabled: var(--mj-text-muted);\n  --test-bg: var(--mj-bg-surface-card);\n  --test-surface: var(--mj-bg-surface);\n  --test-border: var(--mj-border-default);\n  --test-text: var(--mj-text-primary);\n  --test-text-secondary: var(--mj-text-secondary);\n  --test-text-muted: var(--mj-text-disabled);\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: var(--mj-shadow-sm);\n  --test-shadow-md: var(--mj-shadow-md);\n  --test-shadow-lg: var(--mj-shadow-lg);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n.test-suite-form[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n\n\n.breadcrumb[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  text-decoration: none;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  margin: 0 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%] {\n  color: var(--test-text-secondary);\n  font-weight: 500;\n}\n\n.breadcrumb-text[_ngcontent-%COMP%] {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.suite-header[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.suite-icon[_ngcontent-%COMP%]:hover { transform: scale(1.05); }\n\n.suite-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n.suite-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  word-wrap: break-word;\n}\n\n.suite-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] { background: var(--test-success); }\n.status-badge.status-disabled[_ngcontent-%COMP%] { background: var(--test-disabled); }\n.status-badge.status-pending[_ngcontent-%COMP%] { background: var(--test-warning); }\n\n.status-badge-inline[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active[_ngcontent-%COMP%] { background: var(--test-success); }\n.status-badge-inline.status-disabled[_ngcontent-%COMP%] { background: var(--test-disabled); }\n.status-badge-inline.status-pending[_ngcontent-%COMP%] { background: var(--test-warning); }\n\n.test-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.suite-description[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.suite-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.tabs[_ngcontent-%COMP%]::-webkit-scrollbar { display: none; }\n\n.tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--test-primary);\n}\n\n.tab-shortcut[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.info-section[_ngcontent-%COMP%], .config-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 500;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.config-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-hint[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--test-text-muted);\n}\n\n\n\n.tests-tab[_ngcontent-%COMP%], .runs-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.loading-state[_ngcontent-%COMP%] { padding: 0; }\n\n.skeleton-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-sequence[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line[_ngcontent-%COMP%] {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide[_ngcontent-%COMP%] { width: 70%; }\n.skeleton-line.narrow[_ngcontent-%COMP%] { width: 40%; }\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n.tests-list[_ngcontent-%COMP%], .runs-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.test-item[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.test-item[_ngcontent-%COMP%]:hover, .run-item[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.test-sequence[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--test-text-secondary);\n  flex-shrink: 0;\n}\n\n.test-icon[_ngcontent-%COMP%], .run-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.test-icon[_ngcontent-%COMP%] {\n  background: var(--test-primary);\n}\n\n.test-content[_ngcontent-%COMP%], .run-content[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n.test-name[_ngcontent-%COMP%], .run-header[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-id[_ngcontent-%COMP%] { font-weight: 600; }\n\n.run-status[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.test-status[_ngcontent-%COMP%], .run-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.test-status[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.test-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.test-item[_ngcontent-%COMP%]:hover    > i[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%]:hover    > i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  color: var(--test-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 300px;\n}\n\n\n\n\n\n.shortcuts-toggle[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--test-text-secondary);\n}\n\n.shortcut-keys[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n\n\n@media (max-width: 1024px) {\n  .keyboard-shortcuts[_ngcontent-%COMP%], .shortcuts-toggle[_ngcontent-%COMP%] { display: none; }\n}\n\n@media (max-width: 768px) {\n  .suite-header[_ngcontent-%COMP%] { padding: 16px; }\n\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] { flex: 1; }\n\n  .tab-shortcut[_ngcontent-%COMP%] { display: none; }\n\n  .info-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n\n  .test-item[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%] { padding: 14px; }\n}\n\n@media (max-width: 480px) {\n  .suite-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n  }\n\n  .suite-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 16px; }\n\n  .tab-badge[_ngcontent-%COMP%] { display: none; }\n\n  .test-sequence[_ngcontent-%COMP%] { display: none; }\n}\n\n@media (hover: none) and (pointer: coarse) {\n  .test-item[_ngcontent-%COMP%]:active, .run-item[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    transform: scale(0.98);\n  }\n\n  .tab[_ngcontent-%COMP%] { min-height: 48px; }\n  .test-item[_ngcontent-%COMP%], .run-item[_ngcontent-%COMP%] { min-height: 64px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], *[_ngcontent-%COMP%]::before, *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n@media print {\n  .header-actions[_ngcontent-%COMP%], .tabs-container[_ngcontent-%COMP%], .keyboard-shortcuts[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n}\n\n\n\n\n\n.run-tags[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 8px;\n}\n\n.tag-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-mini[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n}\n\n.tag-more[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n\n\n.run-eval-metrics[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.eval-metric[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.eval-metric.status[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.eval-metric.status.status-completed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-metric.status.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-metric.status.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.status.status-pending[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human[_ngcontent-%COMP%]   .eval-pending[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.auto.high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n  color: var(--mj-status-success);\n}\n\n.eval-metric.auto.medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto.low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  color: var(--mj-status-error);\n}\n\n.tag-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.tag-chip-table[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n\n\n.analytics-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n\n\n.analytics-filters[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-bottom: 16px;\n  box-shadow: var(--test-shadow-sm);\n  overflow: hidden;\n}\n\n.analytics-filters.collapsed[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.filters-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.filters-header[_ngcontent-%COMP%]:hover {\n  background: var(--test-bg);\n}\n\n.filters-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n}\n\n.filters-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n  font-weight: 400;\n  color: var(--test-text-muted);\n  margin-left: 8px;\n}\n\n.filters-header[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 12px;\n}\n\n.filters-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 12px 16px 16px 16px;\n  border-top: 1px solid var(--test-border);\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.filter-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--test-primary);\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n  background: var(--test-primary);\n  border-color: var(--test-primary);\n  color: var(--mj-text-inverse);\n}\n\n.filter-btn.tag-btn[_ngcontent-%COMP%] {\n  padding: 6px 12px;\n  font-size: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.filter-btn.tag-btn[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.filter-btn.tag-btn.all-tags-btn[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.filter-btn.tag-btn.all-tags-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.filter-hint[_ngcontent-%COMP%] {\n  font-weight: 400;\n  font-size: 10px;\n  color: var(--test-primary);\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-filters[_ngcontent-%COMP%] {\n  max-height: 120px;\n  overflow-y: auto;\n}\n\n\n\n.analytics-kpis[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: var(--test-radius-md);\n  color: var(--test-primary);\n  font-size: 20px;\n}\n\n.kpi-icon.success[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-icon.info[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.kpi-icon.warning[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  margin-top: 2px;\n}\n\n.kpi-trend[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-top: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-secondary);\n}\n\n.kpi-trend.trend-up[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-trend.trend-down[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n\n\n.analytics-table-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.analytics-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.analytics-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.analytics-table-wrapper[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  margin: 0 -24px;\n  padding: 0 24px;\n}\n\n.analytics-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.analytics-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.analytics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.analytics-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.clickable-row[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.analytics-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.clickable-row[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.status-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-chip.status-completed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-passed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-failed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--test-error); }\n.status-chip.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-running[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--test-primary); }\n.status-chip.status-pending[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.status-chip.status-cancelled[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n.status-chip.status-missing[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--test-text-muted); }\n.status-chip.status-timeout[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-skipped[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n\n.pass-rate-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 100px;\n}\n\n.pass-rate-bar[_ngcontent-%COMP%] {\n  height: 6px;\n  border-radius: 3px;\n  background: var(--test-success);\n  transition: width 0.3s ease;\n  max-width: 60px;\n}\n\n.pass-rate-bar.medium[_ngcontent-%COMP%] { background: var(--test-warning); }\n.pass-rate-bar.low[_ngcontent-%COMP%] { background: var(--test-error); }\n\n\n\n.analytics-subnav[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 8px;\n  margin-bottom: 20px;\n  box-shadow: var(--test-shadow-sm);\n  display: inline-flex;\n}\n\n.subnav-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n}\n\n.subnav-tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border: none;\n  border-radius: var(--test-radius-sm);\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.subnav-tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.subnav-tab.active[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.subnav-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.matrix-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 16px;\n  box-shadow: var(--test-shadow-sm);\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 280px);\n  min-height: 300px;\n}\n\n.matrix-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 12px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid var(--test-border);\n  flex-shrink: 0;\n}\n\n.matrix-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.matrix-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.matrix-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.matrix-run-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  font-weight: 500;\n}\n\n\n\n.matrix-filter-input[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--test-border);\n  border-radius: 6px;\n  padding: 4px 10px;\n  min-width: 180px;\n}\n\n.matrix-filter-input[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.matrix-filter-input[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 12px;\n  color: var(--test-text);\n  width: 100%;\n}\n\n.matrix-filter-input[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  border: none;\n  background: none;\n  padding: 2px 4px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  border-radius: 3px;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n\n\n\n.matrix-scroll-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n}\n\n.test-matrix[_ngcontent-%COMP%] {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.test-matrix[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  display: table-header-group;\n}\n\n.test-matrix[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  display: table-row;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%] {\n  display: table-row-group;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  display: table-row;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%]   .seq-cell[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.row-selected[_ngcontent-%COMP%]   .test-name-cell[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix[_ngcontent-%COMP%]   tfoot[_ngcontent-%COMP%] {\n  display: table-footer-group;\n}\n\n.test-matrix[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  display: table-cell;\n  border: 1px solid var(--test-border);\n  padding: 8px 12px;\n  text-align: center;\n  vertical-align: middle;\n}\n\n.test-matrix[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background: var(--test-bg);\n  font-weight: 600;\n  font-size: 11px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  border-bottom: 3px solid var(--mj-text-secondary) !important;\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   .seq-cell[_ngcontent-%COMP%] {\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  text-align: center;\n  position: sticky;\n  left: 0;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  border-right: 1px solid var(--test-border);\n  padding: 6px 4px !important;\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%] {\n  cursor: pointer;\n  font-weight: 600;\n  background: var(--test-bg);\n  z-index: 12; \n\n  top: 0;\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .seq-cell[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  z-index: 2;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  margin-left: 2px;\n  opacity: 0.6;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .seq-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-header[_ngcontent-%COMP%] {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-bg);\n  z-index: 11;\n  border-right: 2px solid var(--test-border);\n  cursor: pointer;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  margin-left: 4px;\n  opacity: 0.6;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix[_ngcontent-%COMP%]   .run-header[_ngcontent-%COMP%] {\n  min-width: 120px;\n  width: 120px;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n\n\n.test-matrix[_ngcontent-%COMP%]   .spacer-header[_ngcontent-%COMP%], \n.test-matrix[_ngcontent-%COMP%]   .spacer-cell[_ngcontent-%COMP%] {\n  width: 100%;\n  min-width: 20px;\n  background: var(--test-bg);\n  border: none;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .spacer-cell[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n}\n\n.test-matrix[_ngcontent-%COMP%]   .run-header[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-header-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-pass-rate[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.run-pass-rate.high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.run-pass-rate.medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.run-pass-rate.low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.run-tags[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.tag-tiny[_ngcontent-%COMP%] {\n  font-size: 9px;\n  padding: 2px 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--test-primary);\n  border-radius: 8px;\n  white-space: nowrap;\n  max-width: 60px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.run-tags-header[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 3px;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.tag-chip-header[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 70px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-more-header[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--test-text-secondary);\n  padding: 2px 4px;\n}\n\n.test-matrix[_ngcontent-%COMP%]   .test-name-cell[_ngcontent-%COMP%] {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-surface);\n  z-index: 2;\n  border-right: 2px solid var(--test-border);\n  padding: 6px 10px !important;\n}\n\n.test-name[_ngcontent-%COMP%] {\n  display: block;\n  white-space: nowrap;\n  font-weight: 500;\n  color: var(--test-text);\n  font-size: 12px;\n}\n\n.result-cell[_ngcontent-%COMP%] {\n  position: relative;\n  min-width: 120px;\n  width: 120px;\n  transition: var(--test-transition);\n}\n\n.result-cell.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.result-cell.clickable[_ngcontent-%COMP%]:hover {\n  transform: scale(1.1);\n  box-shadow: var(--mj-shadow-md);\n  z-index: 5;\n}\n\n.result-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.result-cell.cell-passed[_ngcontent-%COMP%], \n.result-cell.cell-failed[_ngcontent-%COMP%], \n.result-cell.cell-error[_ngcontent-%COMP%], \n.result-cell.cell-timeout[_ngcontent-%COMP%], \n.result-cell.cell-running[_ngcontent-%COMP%], \n.result-cell.cell-pending[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--test-text);\n}\n\n\n\n.result-cell.cell-skipped[_ngcontent-%COMP%] {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--test-disabled);\n}\n\n.result-cell.cell-none[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--test-text-muted);\n}\n\n.cell-score[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  margin-top: 2px;\n}\n\n\n\n.cell-eval-stack[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-wrap: nowrap;\n}\n\n.result-cell.multi-eval[_ngcontent-%COMP%] {\n  min-width: 120px;\n  width: auto;\n}\n\n\n\n.cell-status.status-timeout[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-status.status-pending[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.cell-human[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-size: 10px;\n}\n\n.cell-auto[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-auto.high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-none-indicator[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  opacity: 0.5;\n}\n\n.matrix-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.matrix-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.chart-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.chart-legend[_ngcontent-%COMP%]   .legend-item.chart-skipped[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-disabled);\n}\n\n.chart-container[_ngcontent-%COMP%] {\n  min-height: 500px;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.d3-chart[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 500px;\n}\n\n.d3-chart[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n\n\n.d3-chart[_ngcontent-%COMP%]   .node[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .node[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n.d3-chart[_ngcontent-%COMP%]   .node-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  fill: var(--test-text);\n  pointer-events: none;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%] {\n  fill: none;\n  stroke-opacity: 0.4;\n  transition: stroke-opacity 0.2s ease;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%]:hover {\n  stroke-opacity: 0.8;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .tooltip[_ngcontent-%COMP%] {\n  position: absolute;\n  padding: 10px 14px;\n  background: var(--mj-bg-overlay);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 12px;\n  pointer-events: none;\n  z-index: 100;\n  box-shadow: var(--mj-shadow-lg);\n  max-width: 250px;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .tooltip-title[_ngcontent-%COMP%] {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.d3-chart[_ngcontent-%COMP%]   .tooltip-value[_ngcontent-%COMP%] {\n  opacity: 0.8;\n}\n\n.chart-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n  margin-top: 16px;\n}\n\n.chart-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n\n\n\n\n.compare-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.compare-selection[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 24px;\n  align-items: flex-start;\n  margin-bottom: 24px;\n}\n\n.compare-run-selector[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-run-selector[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.run-selector-list[_ngcontent-%COMP%] {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.run-selector-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-selector-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-selector-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.run-selector-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.selector-status[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.selector-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.selector-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--test-text);\n}\n\n.selector-rate[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--test-text-secondary);\n}\n\n.selector-tags[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.selected-run-preview[_ngcontent-%COMP%] {\n  padding: 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-sm);\n  border: 1px solid var(--test-border);\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.preview-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-error);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover { text-decoration: underline; }\n\n.preview-details[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--test-text);\n}\n\n.preview-rate[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--test-success);\n}\n\n.compare-vs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: var(--test-bg);\n  border-radius: 50%;\n  color: var(--test-text-muted);\n  font-size: 16px;\n  align-self: center;\n  margin-top: 60px;\n}\n\n\n\n.compare-results[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.compare-summary[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.compare-summary-card[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  text-align: center;\n}\n\n.compare-summary-card[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n  margin-bottom: 8px;\n}\n\n.compare-summary-card[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.compare-summary-card[_ngcontent-%COMP%]   .summary-value.positive[_ngcontent-%COMP%] { color: var(--test-success); }\n.compare-summary-card[_ngcontent-%COMP%]   .summary-value.negative[_ngcontent-%COMP%] { color: var(--test-error); }\n\n.compare-summary-card.improved[_ngcontent-%COMP%] {\n  border-left: 4px solid var(--test-success);\n}\n\n.compare-summary-card.improved[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] { color: var(--test-success); }\n\n.compare-summary-card.regressed[_ngcontent-%COMP%] {\n  border-left: 4px solid var(--test-error);\n}\n\n.compare-summary-card.regressed[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] { color: var(--test-error); }\n\n\n\n.compare-table-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.compare-table-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.compare-table-wrapper[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.compare-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.compare-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.compare-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.compare-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.improved[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.compare-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.regressed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.test-name-cell[_ngcontent-%COMP%] {\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.positive[_ngcontent-%COMP%] { color: var(--test-success); }\n.negative[_ngcontent-%COMP%] { color: var(--test-error); }\n.muted[_ngcontent-%COMP%] { color: var(--test-text-muted); }\n\n.change-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.change-indicator.improved[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.change-indicator.regressed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.change-indicator.unchanged[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-muted);\n}\n\n\n\n.compare-empty[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 24px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-top: 24px;\n}\n\n.compare-empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin: 0 auto 20px;\n}\n\n.compare-empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--test-text-muted);\n}\n\n.compare-empty[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.compare-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n\n\n.empty-state.small[_ngcontent-%COMP%] {\n  padding: 32px 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n  .compare-selection[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .compare-vs[_ngcontent-%COMP%] {\n    margin: 0;\n    align-self: center;\n    justify-self: center;\n  }\n\n  .analytics-kpis[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 768px) {\n  .filter-buttons[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .filter-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    text-align: center;\n  }\n\n  .analytics-kpis[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .kpi-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .kpi-value[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .compare-summary[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .analytics-table-wrapper[_ngcontent-%COMP%], \n   .compare-table-wrapper[_ngcontent-%COMP%] {\n    margin: 0 -20px;\n    padding: 0 20px;\n  }\n\n  .run-selector-list[_ngcontent-%COMP%] {\n    max-height: 150px;\n  }\n}\n\n@media (max-width: 480px) {\n  .compare-summary[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .compare-summary-card[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .analytics-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .analytics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], \n   .compare-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .compare-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n}\n\n\n\n\n\n\n\n\n.cell-human[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-human.no-feedback[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-human.no-feedback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.cell-human.has-feedback[_ngcontent-%COMP%] {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-human.has-feedback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n}\n\n.cell-human.has-feedback[_ngcontent-%COMP%]   .rating-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: 11px;\n}\n\n\n\n.cell-human.rating-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-human.rating-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-human.rating-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-human.rating-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.cell-auto[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-auto.no-score[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-auto.no-score[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.cell-auto.has-score[_ngcontent-%COMP%] {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-auto.has-score[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n}\n\n.cell-auto.has-score[_ngcontent-%COMP%]   .score-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: 10px;\n}\n\n\n\n.cell-auto.score-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-auto.score-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.score-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.score-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.cell-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-timeout[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped[_ngcontent-%COMP%], \n.cell-status.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.result-cell.cell-not-run[_ngcontent-%COMP%] {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--mj-text-disabled);\n}\n\n.result-cell.cell-not-run[_ngcontent-%COMP%]   .cell-eval-stack[_ngcontent-%COMP%] {\n  opacity: 0.6;\n}\n\n.cell-not-run-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  color: var(--mj-text-disabled);\n  font-size: 11px;\n}\n\n\n\n\n\n.test-matrix[_ngcontent-%COMP%]   tfoot[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 0;\n  z-index: 2;\n}\n\n.totals-row[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-top: 2px solid var(--test-border);\n}\n\n.totals-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  font-weight: 600;\n}\n\n.totals-row[_ngcontent-%COMP%]   .totals-label[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.totals-row[_ngcontent-%COMP%]   .totals-cell[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.totals-stack[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.totals-status[_ngcontent-%COMP%], \n.totals-human[_ngcontent-%COMP%], \n.totals-auto[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.totals-status[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.totals-status[_ngcontent-%COMP%]   .pass-count[_ngcontent-%COMP%] {\n  font-weight: 700;\n}\n\n.totals-human[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.totals-human[_ngcontent-%COMP%]   .avg-label[_ngcontent-%COMP%] {\n  font-weight: 700;\n}\n\n.totals-human[_ngcontent-%COMP%]   .count-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n.totals-auto[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.totals-auto[_ngcontent-%COMP%]   .avg-label[_ngcontent-%COMP%] {\n  font-weight: 700;\n}\n\n.totals-auto[_ngcontent-%COMP%]   .count-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n\n\n\n\n\n.edit-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.edit-section-header[_ngcontent-%COMP%] {\n  margin: 0 0 18px 0;\n}\n\n.edit-section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.edit-section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.edit-section-sub[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.edit-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n}\n\n@media (max-width: 720px) {\n  .edit-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n.edit-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 0;\n}\n\n.edit-field--full[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.edit-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.edit-field[_ngcontent-%COMP%]   .required[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.config-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 72px;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.select-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.select-wrapper[_ngcontent-%COMP%]   select.config-input[_ngcontent-%COMP%] {\n  padding-right: 36px;\n  appearance: none;\n  background-color: var(--test-surface);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  background-size: 10px 7px;\n}\n\n\n\n.tag-editor[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  transition: var(--test-transition);\n  cursor: text;\n  min-height: 42px;\n  align-items: center;\n}\n\n.tag-editor[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tag-chip-editable[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 4px 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.tag-chip-editable[_ngcontent-%COMP%]   .tag-remove[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 10px;\n  transition: background 0.15s;\n}\n\n.tag-chip-editable[_ngcontent-%COMP%]   .tag-remove[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-input-inline[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 140px;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 13px;\n  color: var(--test-text);\n  padding: 4px 2px;\n}\n\n.tag-input-inline[_ngcontent-%COMP%]::placeholder {\n  color: var(--test-text-muted);\n}\n\n\n\n.meta-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--test-radius-md);\n  padding: 14px 18px;\n  border: 1px solid var(--test-border);\n}\n\n.meta-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 14px;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.meta-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.meta-mono[_ngcontent-%COMP%] {\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  font-size: 11px;\n}\n\n\n\n.dirty-indicator[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-left: 8px;\n  font-size: 14px;\n  color: var(--mj-status-warning);\n  line-height: 1;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n  vertical-align: middle;\n}\n\n@keyframes _ngcontent-%COMP%_pulseDot {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n.unsaved-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.unsaved-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 6px;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n}\n\n\n\n\n.tab-content.has-savebar[_ngcontent-%COMP%] {\n  padding-bottom: 84px;\n}\n\n\n\n\n\n\n.save-bar[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  right: 96px; \n\n  bottom: 16px;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px 16px 12px 20px;\n  background: var(--mj-bg-surface-elevated, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, var(--test-border));\n  border-radius: 14px;\n  box-shadow: 0 12px 32px color-mix(in srgb, var(--mj-status-warning) 10%, rgba(15, 23, 42, 0.18));\n  backdrop-filter: blur(8px);\n  \n\n\n\n  opacity: 0;\n  transform: translateY(calc(100% + 32px));\n  pointer-events: none;\n  transition:\n    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n}\n\n.save-bar--visible[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .save-bar[_ngcontent-%COMP%] {\n    transition: opacity 180ms ease-out;\n    transform: none;\n  }\n  .save-bar--visible[_ngcontent-%COMP%] {\n    transform: none;\n  }\n}\n\n.save-bar-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.save-bar-dot[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: 12px;\n  line-height: 1;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n}\n\n.save-bar-text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.save-bar-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.save-bar-fields[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.save-bar-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.save-bar-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: var(--test-transition);\n  font-family: inherit;\n}\n\n.save-bar-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.save-bar-btn--ghost[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.save-bar-btn--ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n  border-color: var(--test-text-muted);\n}\n\n.save-bar-kbd[_ngcontent-%COMP%] {\n  display: inline-flex;\n  gap: 3px;\n  margin-left: 6px;\n  opacity: 0.85;\n}\n\n.save-bar-kbd[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  background: color-mix(in srgb, white 18%, transparent);\n  border: 1px solid color-mix(in srgb, white 35%, transparent);\n  border-radius: 4px;\n  color: inherit;\n}\n\n@media (max-width: 640px) {\n  .save-bar[_ngcontent-%COMP%] {\n    left: 8px;\n    right: 8px;\n    bottom: 88px; \n\n    flex-direction: column;\n    align-items: stretch;\n    padding: 12px;\n  }\n  .save-bar-actions[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  .save-bar-kbd[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n\n\n\n.tests-actionbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  margin-bottom: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n}\n\n.tests-actionbar-text[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n\n.tests-actionbar-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.tests-actionbar-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 8px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.tests-actionbar-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.tests-actionbar-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n\n\n.tests-list[cdk-drop-list][_ngcontent-%COMP%]   .test-item[_ngcontent-%COMP%]:hover, \n.tests-list[_ngcontent-%COMP%]   .test-item.cdk-drag[_ngcontent-%COMP%]:hover {\n  transform: none;\n}\n\n\n\n.test-item.cdk-drag[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.test-item[_ngcontent-%COMP%]   .test-content[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n\n\n.test-drag-handle[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 28px;\n  border-radius: 4px;\n  color: var(--test-text-muted);\n  cursor: grab;\n  flex-shrink: 0;\n  transition: background 0.15s, color 0.15s;\n  user-select: none;\n}\n\n.test-drag-handle[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--test-primary);\n}\n\n.test-drag-handle[_ngcontent-%COMP%]:active, \n.cdk-drag-preview[_ngcontent-%COMP%]   .test-drag-handle[_ngcontent-%COMP%] {\n  cursor: grabbing;\n}\n\n\n\n.test-remove-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  opacity: 0;\n  transition: opacity 0.15s, background 0.15s, color 0.15s;\n}\n\n.test-item[_ngcontent-%COMP%]:hover   .test-remove-btn[_ngcontent-%COMP%], \n.test-remove-btn[_ngcontent-%COMP%]:focus-visible {\n  opacity: 1;\n}\n\n.test-remove-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n  color: var(--mj-status-error);\n}\n\n.test-chevron[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n\n\n.test-remove-confirm[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px 4px 12px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  flex-shrink: 0;\n}\n\n.test-remove-confirm-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-status-error-text, var(--mj-status-error));\n}\n\n.test-remove-confirm-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid transparent;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.test-remove-confirm-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.test-remove-confirm-btn--danger[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse, white);\n}\n\n.test-remove-confirm-btn--danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-error) 88%, black);\n}\n\n.test-remove-confirm-btn--ghost[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.test-remove-confirm-btn--ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n\n\n.cdk-drag-preview[_ngcontent-%COMP%] {\n  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);\n  border-radius: var(--test-radius-md);\n  background: var(--test-surface);\n  opacity: 0.95;\n}\n\n.cdk-drag-placeholder[_ngcontent-%COMP%] {\n  opacity: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border: 2px dashed var(--test-primary);\n  border-radius: var(--test-radius-md);\n}\n\n.cdk-drag-placeholder[_ngcontent-%COMP%]   *[_ngcontent-%COMP%] {\n  visibility: hidden;\n}\n\n.cdk-drag-animating[_ngcontent-%COMP%] {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.tests-list.cdk-drop-list-dragging[_ngcontent-%COMP%]   .test-item[_ngcontent-%COMP%]:not(.cdk-drag-placeholder) {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n\n\n\n.picker-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 23, 42, 0.45);\n  z-index: 200;\n  animation: _ngcontent-%COMP%_pickerFadeIn 180ms ease-out;\n  backdrop-filter: blur(2px);\n}\n\n@keyframes _ngcontent-%COMP%_pickerFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.picker-dialog[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: min(720px, calc(100vw - 32px));\n  max-height: min(80vh, 720px);\n  z-index: 201;\n  display: flex;\n  flex-direction: column;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);\n  animation: _ngcontent-%COMP%_pickerSlideUp 220ms cubic-bezier(0.16, 1, 0.3, 1);\n  overflow: hidden;\n}\n\n@keyframes _ngcontent-%COMP%_pickerSlideUp {\n  from {\n    opacity: 0;\n    transform: translate(-50%, calc(-50% + 16px));\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n.picker-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 18px 20px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.picker-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.picker-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.picker-close[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  transition: background 0.15s, color 0.15s;\n}\n\n.picker-close[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n.picker-close[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.picker-search[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 14px 20px 0 20px;\n}\n\n.picker-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 32px;\n  transform: translateY(-30%);\n  color: var(--test-text-muted);\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.picker-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 36px 10px 36px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  font-size: 14px;\n  color: var(--test-text);\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.picker-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.picker-search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  right: 32px;\n  transform: translateY(-30%);\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  font-size: 11px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.picker-search-clear[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n.picker-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.picker-toolbar-status[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.picker-toolbar-status[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 700;\n}\n\n.picker-toolbar-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n}\n\n.picker-link-btn[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--test-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  padding: 0;\n  font-family: inherit;\n}\n\n.picker-link-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  text-decoration: underline;\n}\n\n.picker-link-btn[_ngcontent-%COMP%]:disabled {\n  color: var(--test-text-muted);\n  cursor: not-allowed;\n}\n\n.picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 12px;\n  min-height: 200px;\n}\n\n.picker-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n}\n\n.picker-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--test-text-muted);\n}\n\n.picker-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 14px;\n  color: var(--test-text-muted);\n}\n\n.picker-empty[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n.picker-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n}\n\n.picker-list[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.picker-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.12s, border-color 0.12s;\n  border: 1px solid transparent;\n}\n\n.picker-row[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n}\n\n.picker-row[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.picker-row--selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--test-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.picker-row--selected[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--test-surface));\n}\n\n.picker-check[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 5px;\n  border: 1.5px solid var(--test-border);\n  background: var(--test-surface);\n  color: var(--mj-text-inverse, white);\n  font-size: 11px;\n  flex-shrink: 0;\n  transition: background 0.12s, border-color 0.12s;\n}\n\n.picker-row--selected[_ngcontent-%COMP%]   .picker-check[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.picker-row-main[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.picker-row-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.picker-row-desc[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-top: 2px;\n}\n\n.picker-row-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.picker-row-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n  color: var(--test-text-secondary);\n  border: 1px solid var(--test-border);\n}\n\n.picker-row-pill--status[data-status=\"active\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n.picker-row-pill--status[data-status=\"disabled\"][_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n  color: var(--test-text-muted);\n}\n\n.picker-row-pill--status[data-status=\"pending\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.picker-footer[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  padding: 14px 20px;\n  border-top: 1px solid var(--test-border);\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n}\n\n.picker-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.picker-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.picker-btn--primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n}\n\n.picker-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n\n.picker-btn--ghost[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.picker-btn--ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n@media (max-width: 640px) {\n  .picker-dialog[_ngcontent-%COMP%] {\n    width: calc(100vw - 16px);\n    max-height: calc(100vh - 32px);\n  }\n  .tests-actionbar[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .tests-actionbar-actions[_ngcontent-%COMP%] {\n    justify-content: flex-end;\n  }\n  .test-remove-btn[_ngcontent-%COMP%] {\n    opacity: 1; \n\n  }\n}"], changeDetection: 0 }); }
 };
 MJTestSuiteFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Test Suites')
@@ -3534,13 +4390,16 @@ MJTestSuiteFormComponentExtended = __decorate([
 export { MJTestSuiteFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTestSuiteFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-test-suite-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"test-suite-form\">\n  <!-- Header Section -->\n  <div class=\"suite-header\">\n    <!-- Breadcrumb Navigation -->\n    <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n      <ol>\n        <li>\n          <a href=\"javascript:void(0)\" (click)=\"navigateToTestingDashboard()\">\n            <i class=\"fas fa-vial\"></i>\n            <span class=\"breadcrumb-text\">Testing</span>\n          </a>\n        </li>\n        <li class=\"current\">\n          <i class=\"fas fa-chevron-right separator\"></i>\n          <i class=\"fas fa-layer-group\"></i>\n          <span>{{ record.Name }}</span>\n        </li>\n      </ol>\n    </nav>\n\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <div class=\"suite-icon\" [style.background-color]=\"getStatusColor()\">\n          <i class=\"fas fa-layer-group\"></i>\n        </div>\n        <div class=\"suite-info\">\n          <h1>{{ record.Name }}</h1>\n          <div class=\"suite-meta\">\n            <span class=\"status-badge\" [ngClass]=\"getStatusClass()\">\n              <i class=\"fas\" [ngClass]=\"record.Status === 'Active' ? 'fa-circle-check' : 'fa-circle-pause'\"></i>\n              {{ record.Status }}\n            </span>\n            @if (testsLoaded) {\n              <span class=\"test-count\">\n                <i class=\"fas fa-flask\"></i>\n                {{ suiteTests.length }} tests\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        <app-evaluation-mode-toggle></app-evaluation-mode-toggle>\n        <button mjButton (click)=\"exportToExcel()\" title=\"Export to CSV\">\n          <i class=\"fas fa-file-excel\"></i> Export\n        </button>\n        <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n          <i class=\"fas fa-play\"></i> Run Suite\n        </button>\n        <button mjButton (click)=\"refresh()\" [disabled]=\"isRefreshing\">\n          <i class=\"fas\" [ngClass]=\"isRefreshing ? 'fa-sync fa-spin' : 'fa-sync'\"></i>\n          {{ isRefreshing ? 'Refreshing...' : 'Refresh' }}\n        </button>\n      </div>\n    </div>\n    @if (record.Description) {\n      <div class=\"suite-description\">\n        <p>{{ record.Description }}</p>\n      </div>\n    }\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs-container\">\n    <div class=\"tabs\" role=\"tablist\">\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'overview'\"\n        (click)=\"changeTab('overview')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'overview'\">\n        <i class=\"fas fa-th-large\"></i> Overview\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'tests'\"\n        (click)=\"changeTab('tests')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'tests'\">\n        <i class=\"fas fa-flask\"></i> Tests\n        @if (testsLoaded) {\n          <span class=\"tab-badge\">{{ suiteTests.length }}</span>\n        }\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'runs'\"\n        (click)=\"changeTab('runs')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'runs'\">\n        <i class=\"fas fa-history\"></i> Runs\n        @if (runsLoaded) {\n          <span class=\"tab-badge\">{{ suiteRuns.length }}</span>\n        }\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'analytics'\"\n        (click)=\"changeTab('analytics')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'analytics'\">\n        <i class=\"fas fa-chart-line\"></i> Analytics\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'compare'\"\n        (click)=\"changeTab('compare')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'compare'\">\n        <i class=\"fas fa-balance-scale\"></i> Compare\n      </button>\n    </div>\n  </div>\n\n  <!-- Tab Content -->\n  <div class=\"tab-content\">\n    <!-- Overview Tab -->\n    @if (activeTab === 'overview') {\n      <div class=\"overview-tab\">\n        <div class=\"info-section\">\n          <h3><i class=\"fas fa-info-circle\"></i> Suite Information</h3>\n          <div class=\"info-grid\">\n            <div class=\"info-item\">\n              <div class=\"info-label\">Name</div>\n              <div class=\"info-value\">{{ record.Name }}</div>\n            </div>\n            <div class=\"info-item\">\n              <div class=\"info-label\">Status</div>\n              <div class=\"info-value\">\n                <span class=\"status-badge-inline\" [ngClass]=\"getStatusClass()\">{{ record.Status }}</span>\n              </div>\n            </div>\n            <div class=\"info-item\">\n              <div class=\"info-label\">Created</div>\n              <div class=\"info-value\">{{ record.__mj_CreatedAt | date:'medium' }}</div>\n            </div>\n            <div class=\"info-item\">\n              <div class=\"info-label\">Updated</div>\n              <div class=\"info-value\">{{ record.__mj_UpdatedAt | date:'medium' }}</div>\n            </div>\n            <div class=\"info-item\">\n              <div class=\"info-label\">Max Execution Time</div>\n              <div class=\"info-value\">{{ formatTimeout(record.MaxExecutionTimeMS) }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"config-section\">\n          <h3><i class=\"fas fa-cogs\"></i> Execution Settings</h3>\n          <div class=\"config-grid\">\n            <div class=\"config-item\">\n              <label>Max Execution Time (ms)</label>\n              <input type=\"number\" [(ngModel)]=\"record.MaxExecutionTimeMS\" class=\"config-input\" placeholder=\"Default: 300000 (5 min)\" />\n              <span class=\"config-hint\">Default timeout for tests in this suite</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Tests Tab -->\n    @if (activeTab === 'tests') {\n      <div class=\"tests-tab\">\n        <!-- Loading State -->\n        @if (loadingTests) {\n          <div class=\"loading-state\">\n            <div class=\"skeleton-list\">\n              @for (i of [1,2,3,4,5]; track i) {\n                <div class=\"skeleton-card\">\n                  <div class=\"skeleton-sequence\"></div>\n                  <div class=\"skeleton-icon\"></div>\n                  <div class=\"skeleton-content\">\n                    <div class=\"skeleton-line wide\"></div>\n                    <div class=\"skeleton-line narrow\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <!-- Tests List -->\n        @if (!loadingTests && suiteTests.length > 0) {\n          <div class=\"tests-list\">\n            @for (test of suiteTests; track test) {\n              <div class=\"test-item\" (click)=\"openTest(test.TestID)\">\n                <div class=\"test-sequence\">{{ test.Sequence }}</div>\n                <div class=\"test-icon\"><i class=\"fas fa-flask\"></i></div>\n                <div class=\"test-content\">\n                  <div class=\"test-name\">{{ test.Test }}</div>\n                  <div class=\"test-status\">\n                    @if (test.Status) {\n                      <span><i class=\"fas fa-info-circle\"></i> {{ test.Status }}</span>\n                    }\n                  </div>\n                </div>\n                <i class=\"fas fa-chevron-right\"></i>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty State -->\n        @if (testsLoaded && !loadingTests && suiteTests.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-flask\"></i>\n            </div>\n            <h4>No Tests in Suite</h4>\n            <p>Add tests to this suite to start running them together.</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Runs Tab -->\n    @if (activeTab === 'runs') {\n      <div class=\"runs-tab\">\n        <!-- Loading State -->\n        @if (loadingRuns) {\n          <div class=\"loading-state\">\n            <div class=\"skeleton-list\">\n              @for (i of [1,2,3]; track i) {\n                <div class=\"skeleton-card\">\n                  <div class=\"skeleton-icon\"></div>\n                  <div class=\"skeleton-content\">\n                    <div class=\"skeleton-line wide\"></div>\n                    <div class=\"skeleton-line narrow\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <!-- Runs List -->\n        @if (!loadingRuns && suiteRuns.length > 0) {\n          <div class=\"runs-list\">\n            @for (run of suiteRuns; track run) {\n              <div class=\"run-item\" (click)=\"openSuiteRun(run.ID)\">\n                <div class=\"run-icon\" [style.background-color]=\"getRunStatusColor(run.Status)\">\n                  <i class=\"fas\"\n                    [class.fa-check]=\"run.Status === 'Completed'\"\n                    [class.fa-times]=\"run.Status === 'Failed'\"\n                    [class.fa-spinner]=\"run.Status === 'Running'\"\n                    [class.fa-clock]=\"run.Status === 'Pending'\"\n                  [class.fa-ban]=\"run.Status === 'Cancelled'\"></i>\n                </div>\n                <div class=\"run-content\">\n                  <div class=\"run-header\">\n                    <span class=\"run-id\">Run #{{ run.ID.substring(0, 8) }}</span>\n                    <span class=\"run-status\" [style.color]=\"getRunStatusColor(run.Status)\">{{ run.Status }}</span>\n                  </div>\n                  <div class=\"run-meta\">\n                    <span><i class=\"fas fa-calendar\"></i> {{ getRelativeTime(run.StartedAt) }}</span>\n                    @if (run.TotalTests) {\n                      <span>\n                        <i class=\"fas fa-check-circle\"></i> {{ run.PassedTests }}/{{ run.TotalTests }}\n                        ({{ getPassRate(run).toFixed(0) }}%)\n                      </span>\n                    }\n                  </div>\n                  <!-- Evaluation metrics row -->\n                  <div class=\"run-eval-metrics\">\n                    <!-- Status badge -->\n                    @if (evalPreferences.showExecution) {\n                      <span class=\"eval-metric status\" [class]=\"'status-' + run.Status.toLowerCase()\">\n                        <i class=\"fas\"\n                          [class.fa-circle-check]=\"run.Status === 'Completed'\"\n                          [class.fa-circle-xmark]=\"run.Status === 'Failed'\"\n                          [class.fa-spinner]=\"run.Status === 'Running'\"\n                          [class.fa-clock]=\"run.Status === 'Pending'\"\n                        [class.fa-ban]=\"run.Status === 'Cancelled'\"></i>\n                      </span>\n                    }\n                    <!-- Human score (placeholder - need avg from suite run) -->\n                    @if (evalPreferences.showHuman) {\n                      <span class=\"eval-metric human\" title=\"Human evaluation\">\n                        <i class=\"fas fa-user\"></i>\n                        <span class=\"eval-pending\"><i class=\"fas fa-clock\"></i></span>\n                      </span>\n                    }\n                    <!-- Auto score (pass rate as proxy) -->\n                    @if (evalPreferences.showAuto && run.TotalTests) {\n                      <span class=\"eval-metric auto\"\n                        [class.high]=\"getPassRate(run) >= 80\"\n                        [class.medium]=\"getPassRate(run) >= 50 && getPassRate(run) < 80\"\n                        [class.low]=\"getPassRate(run) < 50\"\n                        title=\"Auto score (pass rate)\">\n                        <i class=\"fas fa-robot\"></i>\n                        <span>{{ getPassRate(run).toFixed(0) }}%</span>\n                      </span>\n                    }\n                  </div>\n                  <!-- Tags display -->\n                  @if (getRunTags(run).length > 0) {\n                    <div class=\"run-tags\">\n                      @for (tag of getRunTags(run); track tag) {\n                        <span class=\"tag-chip\">{{ tag }}</span>\n                      }\n                    </div>\n                  }\n                </div>\n                <i class=\"fas fa-chevron-right\"></i>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty State -->\n        @if (runsLoaded && !loadingRuns && suiteRuns.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-play-circle\"></i>\n            </div>\n            <h4>No Suite Runs Yet</h4>\n            <p>Run this suite to see execution history and results here.</p>\n            <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n              <i class=\"fas fa-play\"></i> Run Suite Now\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Analytics Tab -->\n    @if (activeTab === 'analytics') {\n      <div class=\"analytics-tab\">\n        <!-- Loading State -->\n        @if (loadingAnalytics) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading analytics data...\"></mj-loading>\n          </div>\n        }\n        @if (!loadingAnalytics && analyticsLoaded) {\n          <!-- View Toggle Sub-nav -->\n          <div class=\"analytics-subnav\">\n            <div class=\"subnav-tabs\">\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'summary'\"\n                (click)=\"setAnalyticsView('summary')\">\n                <i class=\"fas fa-chart-bar\"></i>\n                <span>Summary</span>\n              </button>\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'matrix'\"\n                (click)=\"setAnalyticsView('matrix')\">\n                <i class=\"fas fa-th\"></i>\n                <span>Matrix</span>\n              </button>\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'chart'\"\n                (click)=\"setAnalyticsView('chart')\">\n                <i class=\"fas fa-project-diagram\"></i>\n                <span>Chart</span>\n              </button>\n            </div>\n          </div>\n          <!-- Collapsible Filters (shared by both views) -->\n          <div class=\"analytics-filters\" [class.collapsed]=\"filtersCollapsed\">\n            <div class=\"filters-header\" (click)=\"toggleFilters()\">\n              <span class=\"filters-title\">\n                <i class=\"fas fa-filter\"></i>\n                Filters\n                @if (filtersCollapsed) {\n                  <span class=\"filter-summary\">\n                    {{ analyticsTimeRange === 'all' ? 'All Time' : analyticsTimeRange }}\n                    @if (selectedTags.length > 0) {\n                      <span> \u00B7 {{ selectedTags.length }} tags</span>\n                    }\n                  </span>\n                }\n              </span>\n              <i class=\"fas\" [ngClass]=\"filtersCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'\"></i>\n            </div>\n            @if (!filtersCollapsed) {\n              <div class=\"filters-content\">\n                <div class=\"filter-group\">\n                  <label>Time Range</label>\n                  <div class=\"filter-buttons\">\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '7d'\" (click)=\"setTimeRange('7d')\">7 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '30d'\" (click)=\"setTimeRange('30d')\">30 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '90d'\" (click)=\"setTimeRange('90d')\">90 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === 'all'\" (click)=\"setTimeRange('all')\">All Time</button>\n                  </div>\n                </div>\n                @if (uniqueTags.length > 0) {\n                  <div class=\"filter-group\">\n                    <label>Filter by Tag @if (selectedTags.length > 0) {\n                      <span class=\"filter-hint\">({{ selectedTags.length }} selected)</span>\n                    }</label>\n                    <div class=\"filter-buttons tag-filters\">\n                      <button class=\"filter-btn tag-btn all-tags-btn\"\n                        [class.active]=\"selectedTags.length === 0\"\n                        (click)=\"toggleTagFilter(null)\">\n                        <i class=\"fas fa-layer-group\"></i> All Tags\n                      </button>\n                      @for (tag of uniqueTags; track tag) {\n                        <button class=\"filter-btn tag-btn\"\n                          [class.active]=\"isTagSelected(tag)\"\n                          (click)=\"toggleTagFilter(tag)\">\n                          @if (isTagSelected(tag)) {\n                            <i class=\"fas fa-check\"></i>\n                          }\n                          {{ tag }}\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n          <!-- Summary View -->\n          @if (analyticsView === 'summary') {\n            <!-- KPI Cards -->\n            <div class=\"analytics-kpis\">\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon\"><i class=\"fas fa-play-circle\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ getTotalRuns() }}</div>\n                  <div class=\"kpi-label\">Total Runs</div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon success\"><i class=\"fas fa-check-circle\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ getAveragePassRate().toFixed(1) }}%</div>\n                  <div class=\"kpi-label\">Avg Pass Rate</div>\n                  <div class=\"kpi-trend\" [ngClass]=\"{'trend-up': getPassRateTrend().direction === 'up', 'trend-down': getPassRateTrend().direction === 'down'}\">\n                    <i class=\"fas\" [ngClass]=\"{'fa-arrow-up': getPassRateTrend().direction === 'up', 'fa-arrow-down': getPassRateTrend().direction === 'down', 'fa-minus': getPassRateTrend().direction === 'stable'}\"></i>\n                    {{ getPassRateTrend().value.toFixed(1) }}%\n                  </div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon info\"><i class=\"fas fa-clock\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ formatDuration(getAverageDuration()) }}</div>\n                  <div class=\"kpi-label\">Avg Duration</div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon warning\"><i class=\"fas fa-dollar-sign\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ formatCost(getTotalCost()) }}</div>\n                  <div class=\"kpi-label\">Total Cost</div>\n                </div>\n              </div>\n            </div>\n            <!-- Runs Table -->\n            <div class=\"analytics-table-section\">\n              <h3><i class=\"fas fa-table\"></i> Run History</h3>\n              <div class=\"analytics-table-wrapper\">\n                <table class=\"analytics-table\">\n                  <thead>\n                    <tr>\n                      <th>Date</th>\n                      <th>Status</th>\n                      <th>Pass Rate</th>\n                      <th>Tests</th>\n                      <th>Duration</th>\n                      <th>Cost</th>\n                      <th>Tags</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (dp of getFilteredAnalyticsData(); track dp) {\n                      <tr (click)=\"openSuiteRun(dp.runId)\" class=\"clickable-row\">\n                        <td>{{ dp.date | date:'short' }}</td>\n                        <td>\n                          <span class=\"status-chip\" [ngClass]=\"'status-' + dp.status.toLowerCase()\">{{ dp.status }}</span>\n                        </td>\n                        <td>\n                          <div class=\"pass-rate-cell\">\n                            <div class=\"pass-rate-bar\" [style.width.%]=\"dp.passRate\" [ngClass]=\"{'high': dp.passRate >= 80, 'medium': dp.passRate >= 50 && dp.passRate < 80, 'low': dp.passRate < 50}\"></div>\n                            <span>{{ dp.passRate.toFixed(0) }}%</span>\n                          </div>\n                        </td>\n                        <td>{{ dp.passedTests }}/{{ dp.totalTests }}</td>\n                        <td>{{ formatDuration(dp.duration) }}</td>\n                        <td>{{ formatCost(dp.cost) }}</td>\n                        <td>\n                          <div class=\"tag-cell\">\n                            @for (tag of dp.tags.slice(0, 2); track tag) {\n                              <span class=\"tag-chip-table\">{{ tag }}</span>\n                            }\n                            @if (dp.tags.length > 2) {\n                              <span class=\"tag-more\">+{{ dp.tags.length - 2 }}</span>\n                            }\n                          </div>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n              @if (getFilteredAnalyticsData().length === 0) {\n                <div class=\"empty-state small\">\n                  <p>No runs match the current filters.</p>\n                </div>\n              }\n            </div>\n          }\n          <!-- Matrix View -->\n          @if (analyticsView === 'matrix') {\n            <!-- Loading Matrix -->\n            @if (loadingMatrix) {\n              <div class=\"loading-state\">\n                <mj-loading text=\"Loading test matrix...\"></mj-loading>\n              </div>\n            }\n            <!-- Matrix Content -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length > 0) {\n              <div class=\"matrix-section\">\n                <div class=\"matrix-header\">\n                  <h3><i class=\"fas fa-th\"></i> Test Results Matrix</h3>\n                  <div class=\"matrix-header-right\">\n                    <div class=\"matrix-filter-input\">\n                      <i class=\"fas fa-search\"></i>\n                      <input type=\"text\"\n                        placeholder=\"Filter tests...\"\n                        [value]=\"matrixTestFilter\"\n                        (input)=\"onMatrixFilterInput($event)\"\n                        class=\"filter-input\">\n                      @if (matrixTestFilter) {\n                        <button class=\"clear-filter-btn\" (click)=\"clearMatrixFilter()\" title=\"Clear filter\">\n                          <i class=\"fas fa-times\"></i>\n                        </button>\n                      }\n                    </div>\n                    <span class=\"matrix-run-count\">{{ matrixData.length }} runs \u00B7 {{ getUniqueTestsFromMatrix().length }} tests</span>\n                    <button mjButton (click)=\"exportMatrixToCSV()\" [disabled]=\"matrixData.length === 0\" title=\"Export matrix to CSV\">\n                      <i class=\"fas fa-download\"></i> Export\n                    </button>\n                  </div>\n                </div>\n                <div class=\"matrix-scroll-container\">\n                  <table class=\"test-matrix\">\n                    <thead>\n                      <tr>\n                        <th class=\"seq-header\" (click)=\"toggleMatrixSort('sequence')\" title=\"Sort by sequence\">\n                          #\n                          <i class=\"fas\" [ngClass]=\"matrixSortBy === 'sequence' ? (matrixSortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'\"></i>\n                        </th>\n                        <th class=\"test-name-header\" (click)=\"toggleMatrixSort('name')\" title=\"Sort by name\">\n                          Test\n                          <i class=\"fas\" [ngClass]=\"matrixSortBy === 'name' ? (matrixSortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'\"></i>\n                        </th>\n                        @for (run of matrixData; track run) {\n                          <th class=\"run-header\" (click)=\"openSuiteRun(run.runId)\" [title]=\"'Click to view suite run - ' + (run.date | date:'medium')\">\n                            <div class=\"run-header-content\">\n                              @if (run.tags.length > 0) {\n                                <div class=\"run-tags-header\">\n                                  @for (tag of run.tags.slice(0, 2); track tag) {\n                                    <span class=\"tag-chip-header\">{{ tag }}</span>\n                                  }\n                                  @if (run.tags.length > 2) {\n                                    <span class=\"tag-more-header\">+{{ run.tags.length - 2 }}</span>\n                                  }\n                                </div>\n                              }\n                              <div class=\"run-date\">{{ getRelativeTime(run.date) }}</div>\n                              <div class=\"run-pass-rate\" [ngClass]=\"{'high': run.passRate >= 80, 'medium': run.passRate >= 50 && run.passRate < 80, 'low': run.passRate < 50}\">\n                                {{ run.passRate.toFixed(0) }}%\n                              </div>\n                            </div>\n                          </th>\n                        }\n                        <th class=\"spacer-header\"></th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (test of getUniqueTestsFromMatrix(); track test) {\n                        <tr\n                          [class.row-selected]=\"selectedMatrixTestId === test.testId\"\n                          (click)=\"selectMatrixRow(test.testId)\">\n                          <td class=\"seq-cell\">{{ test.sequence }}</td>\n                          <td class=\"test-name-cell\">\n                            <span class=\"test-name\" [title]=\"test.testName\">{{ test.testName }}</span>\n                          </td>\n                          @for (run of matrixData; track run) {\n                            <td class=\"result-cell\"\n                              [ngClass]=\"getMatrixCellClass(getTestResultForRun(run.runId, test.testId))\"\n                              [class.clickable]=\"getTestResultForRun(run.runId, test.testId)\"\n                              [class.cell-not-run]=\"!getTestResultForRun(run.runId, test.testId)\"\n                              [title]=\"getTestResultForRun(run.runId, test.testId)?.status + ' - Click to view test run' || 'Not Run'\"\n                              (click)=\"onMatrixCellClick(getTestResultForRun(run.runId, test.testId), $event)\">\n                              @if (getTestResultForRun(run.runId, test.testId); as result) {\n                                <div class=\"cell-eval-stack\">\n                                  <!-- Status indicator -->\n                                  @if (evalPreferences.showExecution) {\n                                    <span class=\"cell-status\"\n                                      [ngClass]=\"'status-' + result.status.toLowerCase()\"\n                                      [class.cell-skipped-status]=\"result.status === 'Skipped' || result.status === 'Pending'\"\n                                      [title]=\"getStatusTooltip(result.status)\">\n                                      <i class=\"fas\"\n                                        [class.fa-check]=\"result.status === 'Passed'\"\n                                        [class.fa-times]=\"result.status === 'Failed'\"\n                                        [class.fa-exclamation]=\"result.status === 'Error'\"\n                                        [class.fa-hourglass-end]=\"result.status === 'Timeout'\"\n                                        [class.fa-forward]=\"result.status === 'Skipped'\"\n                                        [class.fa-spinner]=\"result.status === 'Running'\"\n                                      [class.fa-clock]=\"result.status === 'Pending'\"></i>\n                                    </span>\n                                  }\n                                  <!-- Human score - slashed icon if no feedback, colored by rating if has feedback -->\n                                  @if (evalPreferences.showHuman && !result.humanRating) {\n                                    <span class=\"cell-human no-feedback\"\n                                      title=\"Human Review: No rating submitted yet\">\n                                      <i class=\"fas fa-user-slash\"></i>\n                                    </span>\n                                  }\n                                  @if (evalPreferences.showHuman && result.humanRating) {\n                                    <span class=\"cell-human has-feedback\"\n                                      [class.rating-low]=\"result.humanRating <= 4\"\n                                      [class.rating-medium]=\"result.humanRating >= 5 && result.humanRating <= 6\"\n                                      [class.rating-good]=\"result.humanRating >= 7 && result.humanRating <= 8\"\n                                      [class.rating-excellent]=\"result.humanRating >= 9\"\n                                      [title]=\"getHumanTooltip(result.humanRating, result.humanComments)\">\n                                      <i class=\"fas fa-user\"></i>\n                                      <span class=\"rating-value\">{{ result.humanRating }}</span>\n                                    </span>\n                                  }\n                                  <!-- Auto score - colored by percentage -->\n                                  @if (evalPreferences.showAuto && result.score != null) {\n                                    <span class=\"cell-auto has-score\"\n                                      [class.score-low]=\"result.score < 0.5\"\n                                      [class.score-medium]=\"result.score >= 0.5 && result.score < 0.7\"\n                                      [class.score-good]=\"result.score >= 0.7 && result.score < 0.85\"\n                                      [class.score-excellent]=\"result.score >= 0.85\"\n                                      [title]=\"'Auto Score: ' + (result.score * 100).toFixed(0) + '% automated evaluation'\">\n                                      <i class=\"fas fa-robot\"></i>\n                                      <span class=\"score-value\">{{ (result.score * 100).toFixed(0) }}</span>\n                                    </span>\n                                  }\n                                  @if (evalPreferences.showAuto && result.score == null) {\n                                    <span class=\"cell-auto no-score\"\n                                      title=\"Auto Score: No automated score available\">\n                                      <i class=\"fas fa-robot\"></i>\n                                    </span>\n                                  }\n                                </div>\n                              }\n                              @if (!getTestResultForRun(run.runId, test.testId)) {\n                                <span class=\"cell-not-run-indicator\">\n                                  <i class=\"fas fa-minus\"></i>\n                                </span>\n                              }\n                            </td>\n                          }\n                          <td class=\"spacer-cell\"></td>\n                        </tr>\n                      }\n                    </tbody>\n                    <!-- Footer row with totals -->\n                    <tfoot>\n                      <tr class=\"totals-row\">\n                        <td class=\"seq-cell totals-label\"></td>\n                        <td class=\"test-name-cell totals-label\">\n                          <strong>Totals</strong>\n                        </td>\n                        @for (run of matrixData; track run) {\n                          <td class=\"result-cell totals-cell\">\n                            <div class=\"cell-eval-stack totals-stack\">\n                              <!-- Status totals -->\n                              @if (evalPreferences.showExecution) {\n                                <span class=\"totals-status\">\n                                  <span class=\"pass-count\">{{ getRunPassedCount(run) }}/{{ getRunTotalCount(run) }}</span>\n                                </span>\n                              }\n                              <!-- Human totals -->\n                              @if (evalPreferences.showHuman) {\n                                <span class=\"totals-human\">\n                                  @if (getRunHumanAvg(run) != null) {\n                                    <span class=\"avg-label\">{{ getRunHumanAvg(run)?.toFixed(1) }}</span>\n                                  }\n                                  <span class=\"count-label\">({{ getRunHumanCount(run) }})</span>\n                                </span>\n                              }\n                              <!-- Auto totals -->\n                              @if (evalPreferences.showAuto) {\n                                <span class=\"totals-auto\">\n                                  @if (getRunAutoAvg(run) != null) {\n                                    <span class=\"avg-label\">{{ (getRunAutoAvg(run)! * 100).toFixed(0) }}%</span>\n                                  }\n                                  <span class=\"count-label\">({{ getRunAutoCount(run) }})</span>\n                                </span>\n                              }\n                            </div>\n                          </td>\n                        }\n                        <td class=\"spacer-cell\"></td>\n                      </tr>\n                    </tfoot>\n                  </table>\n                </div>\n              </div>\n            }\n            <!-- Empty Matrix State -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length === 0) {\n              <div class=\"empty-state\">\n                <div class=\"empty-icon\">\n                  <i class=\"fas fa-th\"></i>\n                </div>\n                <h4>No Matrix Data</h4>\n                <p>No suite runs match the current filters.</p>\n              </div>\n            }\n          }\n          <!-- Chart View -->\n          @if (analyticsView === 'chart') {\n            <!-- Loading Chart -->\n            @if (loadingMatrix) {\n              <div class=\"loading-state\">\n                <mj-loading text=\"Loading chart data...\"></mj-loading>\n              </div>\n            }\n            <!-- Chart Content -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length > 0) {\n              <div class=\"chart-section\">\n                <div class=\"chart-header\">\n                  <h3><i class=\"fas fa-project-diagram\"></i> Test Results Flow</h3>\n                  <div class=\"chart-legend\">\n                    <span class=\"legend-item chart-passed\"><i class=\"fas fa-check\"></i> Passed</span>\n                    <span class=\"legend-item chart-failed\"><i class=\"fas fa-times\"></i> Failed</span>\n                    <span class=\"legend-item chart-error\"><i class=\"fas fa-exclamation\"></i> Error</span>\n                    <span class=\"legend-item chart-skipped\"><i class=\"fas fa-forward\"></i> Skipped</span>\n                  </div>\n                </div>\n                <div class=\"chart-container\">\n                  <div #chartContainer class=\"d3-chart\"></div>\n                </div>\n                <div class=\"chart-info\">\n                  <i class=\"fas fa-info-circle\"></i>\n                  Interactive visualization showing test results across {{ matrixData.length }} runs.\n                  Hover over elements for details, click nodes to navigate.\n                </div>\n              </div>\n            }\n            <!-- Empty Chart State -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length === 0) {\n              <div class=\"empty-state\">\n                <div class=\"empty-icon\">\n                  <i class=\"fas fa-project-diagram\"></i>\n                </div>\n                <h4>No Chart Data</h4>\n                <p>No suite runs match the current filters.</p>\n              </div>\n            }\n          }\n        }\n        <!-- Empty State -->\n        @if (!loadingAnalytics && analyticsLoaded && analyticsData.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-chart-line\"></i>\n            </div>\n            <h4>No Analytics Data</h4>\n            <p>Run this suite to start collecting analytics data.</p>\n            <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n              <i class=\"fas fa-play\"></i> Run Suite Now\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Compare Tab -->\n    @if (activeTab === 'compare') {\n      <div class=\"compare-tab\">\n        <!-- Run Selection -->\n        <div class=\"compare-selection\">\n          <div class=\"compare-run-selector\">\n            <h4>Run A (Baseline)</h4>\n            @if (!loadingRuns && suiteRuns.length > 0) {\n              <div class=\"run-selector-list\">\n                @for (run of suiteRuns; track run) {\n                  <div class=\"run-selector-item\"\n                    [class.selected]=\"IsCompareRunA(run)\"\n                    (click)=\"selectCompareRunA(run)\">\n                    <div class=\"selector-status\" [style.background-color]=\"getRunStatusColor(run.Status)\"></div>\n                    <div class=\"selector-content\">\n                      <div class=\"selector-date\">{{ run.StartedAt | date:'short' }}</div>\n                      <div class=\"selector-rate\">{{ getPassRate(run).toFixed(0) }}% pass</div>\n                    </div>\n                    @if (getRunTags(run).length > 0) {\n                      <div class=\"selector-tags\">\n                        @for (tag of getRunTags(run).slice(0, 2); track tag) {\n                          <span class=\"tag-mini\">{{ tag }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (compareRunA) {\n              <div class=\"selected-run-preview\">\n                <div class=\"preview-header\">\n                  <span class=\"preview-label\">Selected:</span>\n                  <button class=\"clear-btn\" (click)=\"compareRunA = null; compareResults = []\">Clear</button>\n                </div>\n                <div class=\"preview-details\">\n                  <span>{{ compareRunA.StartedAt | date:'medium' }}</span>\n                  <span class=\"preview-rate\">{{ getPassRate(compareRunA).toFixed(1) }}%</span>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"compare-vs\"><i class=\"fas fa-exchange-alt\"></i></div>\n          <div class=\"compare-run-selector\">\n            <h4>Run B (Compare)</h4>\n            @if (!loadingRuns && suiteRuns.length > 0) {\n              <div class=\"run-selector-list\">\n                @for (run of suiteRuns; track run) {\n                  <div class=\"run-selector-item\"\n                    [class.selected]=\"IsCompareRunB(run)\"\n                    [class.disabled]=\"IsCompareRunA(run)\"\n                    (click)=\"!IsCompareRunA(run) && selectCompareRunB(run)\">\n                    <div class=\"selector-status\" [style.background-color]=\"getRunStatusColor(run.Status)\"></div>\n                    <div class=\"selector-content\">\n                      <div class=\"selector-date\">{{ run.StartedAt | date:'short' }}</div>\n                      <div class=\"selector-rate\">{{ getPassRate(run).toFixed(0) }}% pass</div>\n                    </div>\n                    @if (getRunTags(run).length > 0) {\n                      <div class=\"selector-tags\">\n                        @for (tag of getRunTags(run).slice(0, 2); track tag) {\n                          <span class=\"tag-mini\">{{ tag }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (compareRunB) {\n              <div class=\"selected-run-preview\">\n                <div class=\"preview-header\">\n                  <span class=\"preview-label\">Selected:</span>\n                  <button class=\"clear-btn\" (click)=\"compareRunB = null; compareResults = []\">Clear</button>\n                </div>\n                <div class=\"preview-details\">\n                  <span>{{ compareRunB.StartedAt | date:'medium' }}</span>\n                  <span class=\"preview-rate\">{{ getPassRate(compareRunB).toFixed(1) }}%</span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n        <!-- Comparison Results -->\n        @if (compareRunA && compareRunB && !loadingCompare) {\n          <div class=\"compare-results\">\n            <!-- Summary Cards -->\n            <div class=\"compare-summary\">\n              <div class=\"compare-summary-card\">\n                <div class=\"summary-label\">Pass Rate Change</div>\n                <div class=\"summary-value\" [ngClass]=\"{'positive': getComparePassRateDiff()! > 0, 'negative': getComparePassRateDiff()! < 0}\">\n                  <i class=\"fas\" [ngClass]=\"{'fa-arrow-up': getComparePassRateDiff()! > 0, 'fa-arrow-down': getComparePassRateDiff()! < 0, 'fa-minus': getComparePassRateDiff() === 0}\"></i>\n                  {{ getComparePassRateDiff()! > 0 ? '+' : '' }}{{ getComparePassRateDiff()?.toFixed(1) }}%\n                </div>\n              </div>\n              <div class=\"compare-summary-card\">\n                <div class=\"summary-label\">Duration Change</div>\n                <div class=\"summary-value\" [ngClass]=\"{'positive': getCompareDurationDiff()! < 0, 'negative': getCompareDurationDiff()! > 0}\">\n                  <i class=\"fas\" [ngClass]=\"{'fa-arrow-down': getCompareDurationDiff()! < 0, 'fa-arrow-up': getCompareDurationDiff()! > 0, 'fa-minus': getCompareDurationDiff() === 0}\"></i>\n                  {{ formatDuration(getAbsCompareDurationDiff()) }}\n                </div>\n              </div>\n              <div class=\"compare-summary-card improved\">\n                <div class=\"summary-label\">Improved</div>\n                <div class=\"summary-value\">{{ getCompareImprovedCount() }}</div>\n              </div>\n              <div class=\"compare-summary-card regressed\">\n                <div class=\"summary-label\">Regressed</div>\n                <div class=\"summary-value\">{{ getCompareRegressedCount() }}</div>\n              </div>\n            </div>\n            <!-- Detailed Comparison Table -->\n            <div class=\"compare-table-section\">\n              <h3><i class=\"fas fa-list\"></i> Test-by-Test Comparison</h3>\n              <div class=\"compare-table-wrapper\">\n                <table class=\"compare-table\">\n                  <thead>\n                    <tr>\n                      <th>Test</th>\n                      <th>Run A Status</th>\n                      <th>Run B Status</th>\n                      <th>Score Diff</th>\n                      <th>Duration Diff</th>\n                      <th>Change</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (result of compareResults; track result) {\n                      <tr [ngClass]=\"{'improved': result.runA && result.runB && result.runA.status !== 'Passed' && result.runB.status === 'Passed', 'regressed': result.runA && result.runB && result.runA.status === 'Passed' && result.runB.status !== 'Passed'}\">\n                        <td class=\"test-name-cell\">{{ result.testName }}</td>\n                        <td>\n                          @if (result.runA) {\n                            <span class=\"status-chip\" [ngClass]=\"'status-' + result.runA.status.toLowerCase()\">{{ result.runA.status }}</span>\n                          }\n                          @if (!result.runA) {\n                            <span class=\"status-chip status-missing\">N/A</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.runB) {\n                            <span class=\"status-chip\" [ngClass]=\"'status-' + result.runB.status.toLowerCase()\">{{ result.runB.status }}</span>\n                          }\n                          @if (!result.runB) {\n                            <span class=\"status-chip status-missing\">N/A</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.scoreDiff != null) {\n                            <span [ngClass]=\"{'positive': result.scoreDiff > 0, 'negative': result.scoreDiff < 0}\">\n                              {{ result.scoreDiff > 0 ? '+' : '' }}{{ (result.scoreDiff * 100).toFixed(1) }}%\n                            </span>\n                          }\n                          @if (result.scoreDiff == null) {\n                            <span class=\"muted\">-</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.durationDiff != null) {\n                            <span [ngClass]=\"{'positive': result.durationDiff < 0, 'negative': result.durationDiff > 0}\">\n                              {{ result.durationDiff > 0 ? '+' : '' }}{{ result.durationDiff.toFixed(1) }}s\n                            </span>\n                          }\n                          @if (result.durationDiff == null) {\n                            <span class=\"muted\">-</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.runA && result.runB && result.runA.status !== 'Passed' && result.runB.status === 'Passed') {\n                            <span class=\"change-indicator improved\">\n                              <i class=\"fas fa-arrow-up\"></i> Fixed\n                            </span>\n                          }\n                          @if (result.runA && result.runB && result.runA.status === 'Passed' && result.runB.status !== 'Passed') {\n                            <span class=\"change-indicator regressed\">\n                              <i class=\"fas fa-arrow-down\"></i> Broke\n                            </span>\n                          }\n                          @if (!result.statusChanged) {\n                            <span class=\"change-indicator unchanged\">\n                              <i class=\"fas fa-minus\"></i>\n                            </span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            </div>\n          </div>\n        }\n        <!-- Loading State for Compare -->\n        @if (loadingCompare) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading comparison data...\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!compareRunA || !compareRunB) {\n          <div class=\"compare-empty\">\n            <div class=\"compare-empty-icon\">\n              <i class=\"fas fa-balance-scale\"></i>\n            </div>\n            <h4>Select Two Runs to Compare</h4>\n            <p>Choose a baseline run (A) and a comparison run (B) from the lists above to see a detailed side-by-side comparison.</p>\n          </div>\n        }\n        <!-- No Runs State -->\n        @if (runsLoaded && suiteRuns.length < 2) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-balance-scale\"></i>\n            </div>\n            <h4>Not Enough Runs to Compare</h4>\n            <p>You need at least 2 suite runs to use the comparison feature.</p>\n            <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n              <i class=\"fas fa-play\"></i> Run Suite Now\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Keyboard Shortcuts Toggle Button -->\n  <button class=\"shortcuts-toggle\" (click)=\"toggleShortcuts()\" [title]=\"showShortcuts ? 'Hide keyboard shortcuts' : 'Show keyboard shortcuts'\">\n    <i class=\"fas fa-keyboard\"></i>\n  </button>\n\n  <!-- Keyboard Shortcuts Hint (Desktop Only) -->\n  @if (showShortcuts) {\n    <div class=\"keyboard-shortcuts\">\n      <div class=\"shortcuts-header\">\n        <i class=\"fas fa-keyboard\"></i>\n        Shortcuts\n        <button class=\"shortcuts-close\" (click)=\"toggleShortcuts()\" title=\"Hide shortcuts\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"shortcut-list\">\n        <div class=\"shortcut-item\">\n          <span>Refresh</span>\n          <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>R</kbd></span>\n        </div>\n        <div class=\"shortcut-item\">\n          <span>Run Suite</span>\n          <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>Enter</kbd></span>\n        </div>\n        <div class=\"shortcut-item\">\n          <span>Switch Tabs</span>\n          <span class=\"shortcut-keys\"><kbd>1</kbd>-<kbd>5</kbd></span>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Slide Panel for Suite Execution -->\n  @if (testingDialogService.IsPanelOpen) {\n    <mj-slide-panel\n      Mode=\"slide\"\n      [Title]=\"testingDialogService.PanelOptions?.suiteId ? 'Suite Execution' : 'Run Suite'\"\n      [Resizable]=\"true\"\n      (Closed)=\"OnPanelClosed()\">\n      <app-test-run-dialog\n        [PanelMode]=\"true\"\n        [selectedTestId]=\"testingDialogService.PanelOptions?.testId ?? null\"\n        [selectedSuiteId]=\"testingDialogService.PanelOptions?.suiteId ?? null\"\n        [runMode]=\"testingDialogService.PanelOptions?.mode ?? 'suite'\"\n        (PanelClose)=\"OnPanelClosed()\">\n      </app-test-run-dialog>\n    </mj-slide-panel>\n  }\n</div>\n", styles: ["/* ===========================\n   Test Suite Form - World-Class UX\n   =========================== */\n\n/* CSS Custom Properties for Theming - using :host for Angular encapsulation */\n:host {\n  --test-primary: var(--mj-brand-primary);\n  --test-primary-light: var(--mj-brand-primary);\n  --test-success: var(--mj-status-success);\n  --test-error: var(--mj-status-error);\n  --test-warning: var(--mj-status-warning);\n  --test-disabled: var(--mj-text-muted);\n  --test-bg: var(--mj-bg-surface-card);\n  --test-surface: var(--mj-bg-surface);\n  --test-border: var(--mj-border-default);\n  --test-text: var(--mj-text-primary);\n  --test-text-secondary: var(--mj-text-secondary);\n  --test-text-muted: var(--mj-text-disabled);\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: var(--mj-shadow-sm);\n  --test-shadow-md: var(--mj-shadow-md);\n  --test-shadow-lg: var(--mj-shadow-lg);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n.test-suite-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n/* Breadcrumb */\n.breadcrumb {\n  margin-bottom: 16px;\n}\n\n.breadcrumb ol {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n}\n\n.breadcrumb li {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.breadcrumb a {\n  color: var(--test-primary);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.breadcrumb a:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  text-decoration: none;\n}\n\n.breadcrumb .separator {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  margin: 0 4px;\n}\n\n.breadcrumb .current {\n  color: var(--test-text-secondary);\n  font-weight: 500;\n}\n\n.breadcrumb-text {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Header */\n.suite-header {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.suite-icon:hover { transform: scale(1.05); }\n\n.suite-info { flex: 1; min-width: 0; }\n\n.suite-info h1 {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  word-wrap: break-word;\n}\n\n.suite-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active { background: var(--test-success); }\n.status-badge.status-disabled { background: var(--test-disabled); }\n.status-badge.status-pending { background: var(--test-warning); }\n\n.status-badge-inline {\n  display: inline-flex;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active { background: var(--test-success); }\n.status-badge-inline.status-disabled { background: var(--test-disabled); }\n.status-badge-inline.status-pending { background: var(--test-warning); }\n\n.test-count {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.suite-description {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.suite-description p {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* Tabs */\n.tabs-container {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.tabs::-webkit-scrollbar { display: none; }\n\n.tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab-badge {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.tab.active .tab-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--test-primary);\n}\n\n.tab-shortcut {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Overview Tab */\n.overview-tab {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: fadeIn 0.3s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.info-section, .config-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section h3, .config-section h3 {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section h3 i, .config-section h3 i {\n  color: var(--test-primary);\n}\n\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 500;\n}\n\n.config-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.config-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item label {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.config-input:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-hint {\n  font-size: 11px;\n  color: var(--test-text-muted);\n}\n\n/* Tests Tab */\n.tests-tab, .runs-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.loading-state { padding: 0; }\n\n.skeleton-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-sequence {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide { width: 70%; }\n.skeleton-line.narrow { width: 40%; }\n\n@keyframes shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n.tests-list, .runs-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.test-item, .run-item {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.test-item:hover, .run-item:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.test-sequence {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--test-text-secondary);\n  flex-shrink: 0;\n}\n\n.test-icon, .run-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.test-icon {\n  background: var(--test-primary);\n}\n\n.test-content, .run-content { flex: 1; min-width: 0; }\n\n.test-name, .run-header {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-id { font-weight: 600; }\n\n.run-status {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.test-status, .run-meta {\n  display: flex;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.test-status span, .run-meta span {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.test-item > i, .run-item > i {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.test-item:hover > i, .run-item:hover > i {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n/* Empty States */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin-bottom: 20px;\n}\n\n.empty-icon i {\n  font-size: 36px;\n  color: var(--test-text-muted);\n}\n\n.empty-state h4 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 300px;\n}\n\n/* Keyboard Shortcuts */\n/* Keyboard shortcuts toggle button - visible when shortcuts are hidden */\n.shortcuts-toggle {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--test-text-secondary);\n}\n\n.shortcut-keys {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys kbd {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n  .keyboard-shortcuts, .shortcuts-toggle { display: none; }\n}\n\n@media (max-width: 768px) {\n  .suite-header { padding: 16px; }\n\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-actions {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions button { flex: 1; }\n\n  .tab-shortcut { display: none; }\n\n  .info-grid { grid-template-columns: 1fr; }\n\n  .test-item, .run-item { padding: 14px; }\n}\n\n@media (max-width: 480px) {\n  .suite-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n  }\n\n  .suite-info h1 { font-size: 16px; }\n\n  .tab-badge { display: none; }\n\n  .test-sequence { display: none; }\n}\n\n@media (hover: none) and (pointer: coarse) {\n  .test-item:active, .run-item:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    transform: scale(0.98);\n  }\n\n  .tab { min-height: 48px; }\n  .test-item, .run-item { min-height: 64px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n@media print {\n  .header-actions, .tabs-container, .keyboard-shortcuts {\n    display: none !important;\n  }\n}\n\n/* ===========================\n   Tags UI\n   =========================== */\n.run-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 8px;\n}\n\n.tag-chip {\n  display: inline-flex;\n  align-items: center;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-mini {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n}\n\n.tag-more {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n/* Evaluation metrics row for Runs list */\n.run-eval-metrics {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.eval-metric {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.eval-metric.status {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.eval-metric.status.status-completed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-metric.status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-metric.status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.status.status-pending {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human .eval-pending {\n  font-size: 9px;\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.auto.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n  color: var(--mj-status-success);\n}\n\n.eval-metric.auto.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  color: var(--mj-status-error);\n}\n\n.tag-cell {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.tag-chip-table {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ===========================\n   Analytics Tab\n   =========================== */\n.analytics-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n/* Collapsible filters */\n.analytics-filters {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-bottom: 16px;\n  box-shadow: var(--test-shadow-sm);\n  overflow: hidden;\n}\n\n.analytics-filters.collapsed {\n  margin-bottom: 12px;\n}\n\n.filters-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.filters-header:hover {\n  background: var(--test-bg);\n}\n\n.filters-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n}\n\n.filters-title i {\n  color: var(--test-primary);\n}\n\n.filter-summary {\n  font-weight: 400;\n  color: var(--test-text-muted);\n  margin-left: 8px;\n}\n\n.filters-header > i {\n  color: var(--test-text-muted);\n  font-size: 12px;\n}\n\n.filters-content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 12px 16px 16px 16px;\n  border-top: 1px solid var(--test-border);\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.filter-group label {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.filter-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.filter-btn {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn:hover {\n  border-color: var(--test-primary);\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.filter-btn.active {\n  background: var(--test-primary);\n  border-color: var(--test-primary);\n  color: var(--mj-text-inverse);\n}\n\n.filter-btn.tag-btn {\n  padding: 6px 12px;\n  font-size: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.filter-btn.tag-btn i.fa-check {\n  font-size: 10px;\n}\n\n.filter-btn.tag-btn.all-tags-btn {\n  font-weight: 600;\n}\n\n.filter-btn.tag-btn.all-tags-btn i {\n  font-size: 11px;\n}\n\n.filter-hint {\n  font-weight: 400;\n  font-size: 10px;\n  color: var(--test-primary);\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-filters {\n  max-height: 120px;\n  overflow-y: auto;\n}\n\n/* KPI Cards */\n.analytics-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.kpi-card {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: var(--test-radius-md);\n  color: var(--test-primary);\n  font-size: 20px;\n}\n\n.kpi-icon.success {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-icon.info {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.kpi-icon.warning {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.kpi-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n}\n\n.kpi-label {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  margin-top: 2px;\n}\n\n.kpi-trend {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-top: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-secondary);\n}\n\n.kpi-trend.trend-up {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-trend.trend-down {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n/* Analytics Table */\n.analytics-table-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.analytics-table-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.analytics-table-section h3 i {\n  color: var(--test-primary);\n}\n\n.analytics-table-wrapper {\n  overflow-x: auto;\n  margin: 0 -24px;\n  padding: 0 24px;\n}\n\n.analytics-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.analytics-table th {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.analytics-table td {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.analytics-table tbody tr.clickable-row {\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.analytics-table tbody tr.clickable-row:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.status-chip {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-chip.status-completed { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-passed { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-failed { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--test-error); }\n.status-chip.status-error { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-running { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--test-primary); }\n.status-chip.status-pending { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.status-chip.status-cancelled { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n.status-chip.status-missing { background: var(--mj-bg-surface-sunken); color: var(--test-text-muted); }\n.status-chip.status-timeout { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-skipped { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n\n.pass-rate-cell {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 100px;\n}\n\n.pass-rate-bar {\n  height: 6px;\n  border-radius: 3px;\n  background: var(--test-success);\n  transition: width 0.3s ease;\n  max-width: 60px;\n}\n\n.pass-rate-bar.medium { background: var(--test-warning); }\n.pass-rate-bar.low { background: var(--test-error); }\n\n/* Analytics Sub-navigation */\n.analytics-subnav {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 8px;\n  margin-bottom: 20px;\n  box-shadow: var(--test-shadow-sm);\n  display: inline-flex;\n}\n\n.subnav-tabs {\n  display: flex;\n  gap: 4px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n}\n\n.subnav-tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border: none;\n  border-radius: var(--test-radius-sm);\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.subnav-tab:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.subnav-tab.active {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.subnav-tab i {\n  font-size: 14px;\n}\n\n/* Matrix View */\n.matrix-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 16px;\n  box-shadow: var(--test-shadow-sm);\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 280px);\n  min-height: 300px;\n}\n\n.matrix-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 12px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid var(--test-border);\n  flex-shrink: 0;\n}\n\n.matrix-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.matrix-header h3 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.matrix-header h3 i {\n  color: var(--test-primary);\n}\n\n.matrix-run-count {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  font-weight: 500;\n}\n\n/* Matrix filter input */\n.matrix-filter-input {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--test-border);\n  border-radius: 6px;\n  padding: 4px 10px;\n  min-width: 180px;\n}\n\n.matrix-filter-input i.fa-search {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.matrix-filter-input .filter-input {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 12px;\n  color: var(--test-text);\n  width: 100%;\n}\n\n.matrix-filter-input .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn {\n  border: none;\n  background: none;\n  padding: 2px 4px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  border-radius: 3px;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n\n/* Scrollable matrix container with fixed height */\n.matrix-scroll-container {\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n}\n\n.test-matrix {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.test-matrix thead {\n  display: table-header-group;\n}\n\n.test-matrix thead tr {\n  display: table-row;\n}\n\n.test-matrix tbody {\n  display: table-row-group;\n}\n\n.test-matrix tbody tr {\n  display: table-row;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.test-matrix tbody tr:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.test-matrix tbody tr.row-selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix tbody tr.row-selected td {\n  border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.test-matrix tbody tr.row-selected .seq-cell,\n.test-matrix tbody tr.row-selected .test-name-cell {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix tfoot {\n  display: table-footer-group;\n}\n\n.test-matrix th,\n.test-matrix td {\n  display: table-cell;\n  border: 1px solid var(--test-border);\n  padding: 8px 12px;\n  text-align: center;\n  vertical-align: middle;\n}\n\n.test-matrix th {\n  background: var(--test-bg);\n  font-weight: 600;\n  font-size: 11px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  border-bottom: 3px solid var(--mj-text-secondary) !important;\n}\n\n/* Sequence column - shared styles */\n.test-matrix .seq-header,\n.test-matrix .seq-cell {\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  text-align: center;\n  position: sticky;\n  left: 0;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  border-right: 1px solid var(--test-border);\n  padding: 6px 4px !important;\n}\n\n/* Seq header - sticky top AND left, highest z-index */\n.test-matrix .seq-header {\n  cursor: pointer;\n  font-weight: 600;\n  background: var(--test-bg);\n  z-index: 12; /* Higher than other headers */\n  top: 0;\n}\n\n/* Seq body cells - sticky left only, lower z-index */\n.test-matrix .seq-cell {\n  background: var(--test-surface);\n  z-index: 2;\n}\n\n.test-matrix .seq-header i {\n  font-size: 9px;\n  margin-left: 2px;\n  opacity: 0.6;\n}\n\n.test-matrix .seq-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix .test-name-header {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-bg);\n  z-index: 11;\n  border-right: 2px solid var(--test-border);\n  cursor: pointer;\n}\n\n.test-matrix .test-name-header i {\n  font-size: 9px;\n  margin-left: 4px;\n  opacity: 0.6;\n}\n\n.test-matrix .test-name-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix .run-header {\n  min-width: 120px;\n  width: 120px;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n/* Spacer column absorbs extra width */\n.test-matrix .spacer-header,\n.test-matrix .spacer-cell {\n  width: 100%;\n  min-width: 20px;\n  background: var(--test-bg);\n  border: none;\n}\n\n.test-matrix .spacer-cell {\n  background: var(--test-surface);\n}\n\n.test-matrix .run-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-header-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-date {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-pass-rate {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.run-pass-rate.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.run-pass-rate.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.run-pass-rate.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.run-tags {\n  display: flex;\n  gap: 4px;\n}\n\n.tag-tiny {\n  font-size: 9px;\n  padding: 2px 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--test-primary);\n  border-radius: 8px;\n  white-space: nowrap;\n  max-width: 60px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Matrix column header tags - emphasized */\n.run-tags-header {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 3px;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.tag-chip-header {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 70px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-more-header {\n  font-size: 9px;\n  color: var(--test-text-secondary);\n  padding: 2px 4px;\n}\n\n.test-matrix .test-name-cell {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-surface);\n  z-index: 2;\n  border-right: 2px solid var(--test-border);\n  padding: 6px 10px !important;\n}\n\n.test-name {\n  display: block;\n  white-space: nowrap;\n  font-weight: 500;\n  color: var(--test-text);\n  font-size: 12px;\n}\n\n.result-cell {\n  position: relative;\n  min-width: 120px;\n  width: 120px;\n  transition: var(--test-transition);\n}\n\n.result-cell.clickable {\n  cursor: pointer;\n}\n\n.result-cell.clickable:hover {\n  transform: scale(1.1);\n  box-shadow: var(--mj-shadow-md);\n  z-index: 5;\n}\n\n.result-cell i {\n  font-size: 14px;\n}\n\n/* Completed cells have neutral white background - pills tell the story */\n.result-cell.cell-passed,\n.result-cell.cell-failed,\n.result-cell.cell-error,\n.result-cell.cell-timeout,\n.result-cell.cell-running,\n.result-cell.cell-pending {\n  background: var(--mj-bg-surface);\n  color: var(--test-text);\n}\n\n/* Skipped/not-run cells get hatched background */\n.result-cell.cell-skipped {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--test-disabled);\n}\n\n.result-cell.cell-none {\n  background: var(--mj-bg-surface-card);\n  color: var(--test-text-muted);\n}\n\n.cell-score {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  margin-top: 2px;\n}\n\n/* Matrix cell evaluation stack - shows multiple eval types horizontally */\n.cell-eval-stack {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-wrap: nowrap;\n}\n\n.result-cell.multi-eval {\n  min-width: 120px;\n  width: auto;\n}\n\n/* Add timeout status icon */\n.cell-status.status-timeout {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-status.status-pending {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.cell-human {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-size: 10px;\n}\n\n.cell-auto {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-auto.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-none-indicator {\n  color: var(--test-text-muted);\n  opacity: 0.5;\n}\n\n.matrix-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.matrix-info i {\n  color: var(--test-primary);\n}\n\n/* ===========================\n   Chart View\n   =========================== */\n.chart-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.chart-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.chart-header h3 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.chart-header h3 i {\n  color: var(--test-primary);\n}\n\n.chart-legend {\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.chart-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.chart-legend .legend-item.chart-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.chart-legend .legend-item.chart-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.chart-legend .legend-item.chart-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.chart-legend .legend-item.chart-skipped {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-disabled);\n}\n\n.chart-container {\n  min-height: 500px;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.d3-chart {\n  width: 100%;\n  height: 500px;\n}\n\n.d3-chart svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* D3 Chart Node Styles */\n.d3-chart .node {\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.d3-chart .node:hover {\n  transform: scale(1.05);\n}\n\n.d3-chart .node-label {\n  font-size: 11px;\n  font-weight: 500;\n  fill: var(--test-text);\n  pointer-events: none;\n}\n\n.d3-chart .link {\n  fill: none;\n  stroke-opacity: 0.4;\n  transition: stroke-opacity 0.2s ease;\n}\n\n.d3-chart .link:hover {\n  stroke-opacity: 0.8;\n}\n\n.d3-chart .tooltip {\n  position: absolute;\n  padding: 10px 14px;\n  background: var(--mj-bg-overlay);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 12px;\n  pointer-events: none;\n  z-index: 100;\n  box-shadow: var(--mj-shadow-lg);\n  max-width: 250px;\n}\n\n.d3-chart .tooltip-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.d3-chart .tooltip-value {\n  opacity: 0.8;\n}\n\n.chart-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n  margin-top: 16px;\n}\n\n.chart-info i {\n  color: var(--test-primary);\n}\n\n/* ===========================\n   Compare Tab\n   =========================== */\n.compare-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.compare-selection {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 24px;\n  align-items: flex-start;\n  margin-bottom: 24px;\n}\n\n.compare-run-selector {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-run-selector h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.run-selector-list {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.run-selector-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-selector-item:hover {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-selector-item.selected {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.run-selector-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.selector-status {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.selector-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.selector-date {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--test-text);\n}\n\n.selector-rate {\n  font-size: 11px;\n  color: var(--test-text-secondary);\n}\n\n.selector-tags {\n  display: flex;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.selected-run-preview {\n  padding: 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-sm);\n  border: 1px solid var(--test-border);\n}\n\n.preview-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.preview-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n}\n\n.clear-btn {\n  padding: 4px 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-error);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.clear-btn:hover { text-decoration: underline; }\n\n.preview-details {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--test-text);\n}\n\n.preview-rate {\n  font-weight: 600;\n  color: var(--test-success);\n}\n\n.compare-vs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: var(--test-bg);\n  border-radius: 50%;\n  color: var(--test-text-muted);\n  font-size: 16px;\n  align-self: center;\n  margin-top: 60px;\n}\n\n/* Compare Results */\n.compare-results {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.compare-summary {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.compare-summary-card {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  text-align: center;\n}\n\n.compare-summary-card .summary-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n  margin-bottom: 8px;\n}\n\n.compare-summary-card .summary-value {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.compare-summary-card .summary-value.positive { color: var(--test-success); }\n.compare-summary-card .summary-value.negative { color: var(--test-error); }\n\n.compare-summary-card.improved {\n  border-left: 4px solid var(--test-success);\n}\n\n.compare-summary-card.improved .summary-value { color: var(--test-success); }\n\n.compare-summary-card.regressed {\n  border-left: 4px solid var(--test-error);\n}\n\n.compare-summary-card.regressed .summary-value { color: var(--test-error); }\n\n/* Compare Table */\n.compare-table-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-table-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.compare-table-section h3 i {\n  color: var(--test-primary);\n}\n\n.compare-table-wrapper {\n  overflow-x: auto;\n}\n\n.compare-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.compare-table th {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.compare-table td {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.compare-table tbody tr.improved {\n  background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.compare-table tbody tr.regressed {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.test-name-cell {\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.positive { color: var(--test-success); }\n.negative { color: var(--test-error); }\n.muted { color: var(--test-text-muted); }\n\n.change-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.change-indicator.improved {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.change-indicator.regressed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.change-indicator.unchanged {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-muted);\n}\n\n/* Compare Empty State */\n.compare-empty {\n  text-align: center;\n  padding: 60px 24px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-top: 24px;\n}\n\n.compare-empty-icon {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin: 0 auto 20px;\n}\n\n.compare-empty-icon i {\n  font-size: 32px;\n  color: var(--test-text-muted);\n}\n\n.compare-empty h4 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.compare-empty p {\n  margin: 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n/* Small empty state variant */\n.empty-state.small {\n  padding: 32px 16px;\n}\n\n.empty-state.small p {\n  margin: 0;\n}\n\n/* ===========================\n   Responsive Analytics/Compare\n   =========================== */\n@media (max-width: 1024px) {\n  .compare-selection {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .compare-vs {\n    margin: 0;\n    align-self: center;\n    justify-self: center;\n  }\n\n  .analytics-kpis {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 768px) {\n  .filter-buttons {\n    flex-direction: column;\n  }\n\n  .filter-btn {\n    width: 100%;\n    text-align: center;\n  }\n\n  .analytics-kpis {\n    grid-template-columns: 1fr;\n  }\n\n  .kpi-card {\n    padding: 16px;\n  }\n\n  .kpi-value {\n    font-size: 20px;\n  }\n\n  .compare-summary {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .analytics-table-wrapper,\n  .compare-table-wrapper {\n    margin: 0 -20px;\n    padding: 0 20px;\n  }\n\n  .run-selector-list {\n    max-height: 150px;\n  }\n}\n\n@media (max-width: 480px) {\n  .compare-summary {\n    grid-template-columns: 1fr;\n  }\n\n  .compare-summary-card .summary-value {\n    font-size: 20px;\n  }\n\n  .analytics-table th,\n  .analytics-table td,\n  .compare-table th,\n  .compare-table td {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n}\n\n/* ===========================\n   Matrix Evaluation Indicators\n   =========================== */\n\n/* Human Feedback Indicators */\n.cell-human {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-human.no-feedback {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-human.no-feedback i {\n  font-size: 11px;\n}\n\n.cell-human.has-feedback {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-human.has-feedback i {\n  font-size: 9px;\n}\n\n.cell-human.has-feedback .rating-value {\n  font-weight: 700;\n  font-size: 11px;\n}\n\n/* Human rating color coding: red \u22644, yellow 5-6, light-green 7-8, green 9-10 */\n.cell-human.rating-low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-human.rating-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-human.rating-good {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-human.rating-excellent {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* Auto Score Indicators */\n.cell-auto {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-auto.no-score {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-auto.no-score i {\n  font-size: 11px;\n}\n\n.cell-auto.has-score {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-auto.has-score i {\n  font-size: 9px;\n}\n\n.cell-auto.has-score .score-value {\n  font-weight: 700;\n  font-size: 10px;\n}\n\n/* Auto score color coding (0-100%): red <50, yellow 50-69, light-green 70-84, green 85+ */\n.cell-auto.score-low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-auto.score-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.score-good {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.score-excellent {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* Status indicators in matrix cells */\n.cell-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-timeout {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped,\n.cell-status.status-pending {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Not-run / Skipped cells with hatch pattern */\n.result-cell.cell-not-run {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--mj-text-disabled);\n}\n\n.result-cell.cell-not-run .cell-eval-stack {\n  opacity: 0.6;\n}\n\n.cell-not-run-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  color: var(--mj-text-disabled);\n  font-size: 11px;\n}\n\n/* ===========================\n   Matrix Totals Footer Row\n   =========================== */\n.test-matrix tfoot {\n  position: sticky;\n  bottom: 0;\n  z-index: 2;\n}\n\n.totals-row {\n  background: var(--mj-bg-surface-sunken);\n  border-top: 2px solid var(--test-border);\n}\n\n.totals-row td {\n  padding: 10px 12px;\n  font-weight: 600;\n}\n\n.totals-row .totals-label {\n  background: var(--mj-bg-surface-sunken);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.totals-row .totals-cell {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.totals-stack {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.totals-status,\n.totals-human,\n.totals-auto {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.totals-status {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.totals-status .pass-count {\n  font-weight: 700;\n}\n\n.totals-human {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.totals-human .avg-label {\n  font-weight: 700;\n}\n\n.totals-human .count-label {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n.totals-auto {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.totals-auto .avg-label {\n  font-weight: 700;\n}\n\n.totals-auto .count-label {\n  font-size: 10px;\n  opacity: 0.8;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-test-suite-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"test-suite-form\">\n  <!-- Header Section -->\n  <div class=\"suite-header\">\n    <!-- Breadcrumb Navigation -->\n    <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n      <ol>\n        <li>\n          <a href=\"javascript:void(0)\" (click)=\"navigateToTestingDashboard()\">\n            <i class=\"fas fa-vial\"></i>\n            <span class=\"breadcrumb-text\">Testing</span>\n          </a>\n        </li>\n        <li class=\"current\">\n          <i class=\"fas fa-chevron-right separator\"></i>\n          <i class=\"fas fa-layer-group\"></i>\n          <span>{{ record.Name }}</span>\n        </li>\n      </ol>\n    </nav>\n\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <div class=\"suite-icon\" [style.background-color]=\"getStatusColor()\">\n          <i class=\"fas fa-layer-group\"></i>\n        </div>\n        <div class=\"suite-info\">\n          <h1>\n            {{ record.Name }}\n            @if (isDirty) {\n              <span class=\"dirty-indicator\" title=\"You have unsaved changes\" aria-label=\"Unsaved changes\">\u25CF</span>\n            }\n          </h1>\n          <div class=\"suite-meta\">\n            <span class=\"status-badge\" [ngClass]=\"getStatusClass()\">\n              <i class=\"fas\" [ngClass]=\"record.Status === 'Active' ? 'fa-circle-check' : 'fa-circle-pause'\"></i>\n              {{ record.Status }}\n            </span>\n            @if (testsLoaded) {\n              <span class=\"test-count\">\n                <i class=\"fas fa-flask\"></i>\n                {{ suiteTests.length }} tests\n              </span>\n            }\n            @if (isDirty) {\n              <span class=\"unsaved-pill\" title=\"You have unsaved changes\">\n                <i class=\"fas fa-circle\"></i> Unsaved\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        <app-evaluation-mode-toggle></app-evaluation-mode-toggle>\n        <button mjButton (click)=\"exportToExcel()\" title=\"Export to CSV\">\n          <i class=\"fas fa-file-excel\"></i> Export\n        </button>\n        <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n          <i class=\"fas fa-play\"></i> Run Suite\n        </button>\n        <button mjButton (click)=\"refresh()\" [disabled]=\"isRefreshing\">\n          <i class=\"fas\" [ngClass]=\"isRefreshing ? 'fa-sync fa-spin' : 'fa-sync'\"></i>\n          {{ isRefreshing ? 'Refreshing...' : 'Refresh' }}\n        </button>\n      </div>\n    </div>\n    @if (record.Description) {\n      <div class=\"suite-description\">\n        <p>{{ record.Description }}</p>\n      </div>\n    }\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs-container\">\n    <div class=\"tabs\" role=\"tablist\">\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'overview'\"\n        (click)=\"changeTab('overview')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'overview'\">\n        <i class=\"fas fa-th-large\"></i> Overview\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'tests'\"\n        (click)=\"changeTab('tests')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'tests'\">\n        <i class=\"fas fa-flask\"></i> Tests\n        @if (testsLoaded) {\n          <span class=\"tab-badge\">{{ suiteTests.length }}</span>\n        }\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'runs'\"\n        (click)=\"changeTab('runs')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'runs'\">\n        <i class=\"fas fa-history\"></i> Runs\n        @if (runsLoaded) {\n          <span class=\"tab-badge\">{{ suiteRuns.length }}</span>\n        }\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'analytics'\"\n        (click)=\"changeTab('analytics')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'analytics'\">\n        <i class=\"fas fa-chart-line\"></i> Analytics\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'compare'\"\n        (click)=\"changeTab('compare')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'compare'\">\n        <i class=\"fas fa-balance-scale\"></i> Compare\n      </button>\n    </div>\n  </div>\n\n  <!-- Tab Content -->\n  <div class=\"tab-content\" [class.has-savebar]=\"isDirty\">\n    <!-- Overview Tab -->\n    @if (activeTab === 'overview') {\n      <div class=\"overview-tab\">\n        <!-- Editable Details -->\n        <section class=\"edit-section\">\n          <header class=\"edit-section-header\">\n            <h3><i class=\"fas fa-pen-to-square\"></i> Details</h3>\n            <p class=\"edit-section-sub\">Edit any field \u2014 changes are saved with the bar at the bottom.</p>\n          </header>\n          <div class=\"edit-grid\">\n            <div class=\"edit-field edit-field--full\">\n              <label for=\"suite-name\">Name <span class=\"required\">*</span></label>\n              <input\n                id=\"suite-name\"\n                type=\"text\"\n                class=\"config-input\"\n                placeholder=\"e.g., Core Agent Test Suite\"\n                [(ngModel)]=\"record.Name\"\n              />\n            </div>\n\n            <div class=\"edit-field edit-field--full\">\n              <label for=\"suite-description\">Description</label>\n              <textarea\n                id=\"suite-description\"\n                class=\"config-input config-textarea\"\n                rows=\"3\"\n                placeholder=\"What does this suite cover?\"\n                [ngModel]=\"record.Description\"\n                (ngModelChange)=\"record.Description = $event || null\"\n              ></textarea>\n            </div>\n\n            <div class=\"edit-field\">\n              <label for=\"suite-status\">Status</label>\n              <div class=\"select-wrapper\">\n                <select\n                  id=\"suite-status\"\n                  class=\"config-input\"\n                  [(ngModel)]=\"record.Status\"\n                >\n                  @for (opt of statusOptions; track opt) {\n                    <option [ngValue]=\"opt\">{{ opt }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n\n            <div class=\"edit-field\">\n              <label for=\"suite-parent\">Parent Suite</label>\n              <select\n                id=\"suite-parent\"\n                class=\"config-input\"\n                [ngModel]=\"record.ParentID\"\n                (ngModelChange)=\"record.ParentID = $event || null\"\n              >\n                <option [ngValue]=\"null\">\u2014 None (top-level) \u2014</option>\n                @for (s of parentSuiteOptions; track s.ID) {\n                  <option [ngValue]=\"s.ID\">{{ s.Name }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"edit-field edit-field--full\">\n              <label for=\"suite-tags\">Tags</label>\n              <div class=\"tag-editor\" (click)=\"tagInput.focus()\">\n                @for (tag of tags; track tag) {\n                  <span class=\"tag-chip-editable\">\n                    {{ tag }}\n                    <button type=\"button\" class=\"tag-remove\" (click)=\"removeTag(tag); $event.stopPropagation()\" [attr.aria-label]=\"'Remove tag ' + tag\">\n                      <i class=\"fas fa-times\"></i>\n                    </button>\n                  </span>\n                }\n                <input\n                  #tagInput\n                  id=\"suite-tags\"\n                  type=\"text\"\n                  class=\"tag-input-inline\"\n                  [placeholder]=\"tags.length === 0 ? 'Add tags, press Enter or comma...' : ''\"\n                  [(ngModel)]=\"tagDraft\"\n                  (keydown)=\"onTagInputKeydown($event)\"\n                  (blur)=\"addTagFromDraft()\"\n                />\n              </div>\n              <span class=\"config-hint\">Press Enter or comma to add a tag. Backspace on empty input removes the last tag.</span>\n            </div>\n          </div>\n        </section>\n\n        <!-- Execution Settings -->\n        <section class=\"edit-section\">\n          <header class=\"edit-section-header\">\n            <h3><i class=\"fas fa-cogs\"></i> Execution Settings</h3>\n          </header>\n          <div class=\"edit-grid\">\n            <div class=\"edit-field\">\n              <label for=\"suite-timeout\">Max Execution Time (ms)</label>\n              <input\n                id=\"suite-timeout\"\n                type=\"number\"\n                class=\"config-input\"\n                placeholder=\"Default: 300000 (5 min)\"\n                [ngModel]=\"record.MaxExecutionTimeMS\"\n                (ngModelChange)=\"record.MaxExecutionTimeMS = $event === '' || $event === null ? null : +$event\"\n              />\n              <span class=\"config-hint\">Default timeout for tests in this suite. Currently: {{ formatTimeout(record.MaxExecutionTimeMS) }}</span>\n            </div>\n          </div>\n        </section>\n\n        <!-- Metadata (read-only) -->\n        <section class=\"meta-section\">\n          <div class=\"meta-grid\">\n            <div class=\"meta-item\">\n              <div class=\"meta-label\">Created</div>\n              <div class=\"meta-value\">{{ record.__mj_CreatedAt | date:'medium' }}</div>\n            </div>\n            <div class=\"meta-item\">\n              <div class=\"meta-label\">Last updated</div>\n              <div class=\"meta-value\">{{ record.__mj_UpdatedAt | date:'medium' }}</div>\n            </div>\n            <div class=\"meta-item\">\n              <div class=\"meta-label\">Suite ID</div>\n              <div class=\"meta-value meta-mono\">{{ record.ID }}</div>\n            </div>\n          </div>\n        </section>\n      </div>\n    }\n\n    <!-- Tests Tab -->\n    @if (activeTab === 'tests') {\n      <div class=\"tests-tab\">\n        <!-- Header: action bar -->\n        <div class=\"tests-actionbar\">\n          <div class=\"tests-actionbar-text\">\n            <strong>Suite tests</strong>\n            @if (testsLoaded) {\n              <span class=\"tests-actionbar-count\">{{ suiteTests.length }}</span>\n            }\n            <span class=\"tests-actionbar-hint\">Drag to reorder \u00B7 Hover a row to remove</span>\n          </div>\n          <div class=\"tests-actionbar-actions\">\n            <button mjButton variant=\"primary\" (click)=\"openAddTestsDialog()\" [disabled]=\"isReorderingTests\">\n              <i class=\"fas fa-plus\"></i> Add tests\n            </button>\n          </div>\n        </div>\n\n        <!-- Loading State -->\n        @if (loadingTests) {\n          <div class=\"loading-state\">\n            <div class=\"skeleton-list\">\n              @for (i of [1,2,3,4,5]; track i) {\n                <div class=\"skeleton-card\">\n                  <div class=\"skeleton-sequence\"></div>\n                  <div class=\"skeleton-icon\"></div>\n                  <div class=\"skeleton-content\">\n                    <div class=\"skeleton-line wide\"></div>\n                    <div class=\"skeleton-line narrow\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <!-- Tests List -->\n        @if (!loadingTests && suiteTests.length > 0) {\n          <div class=\"tests-list\" cdkDropList (cdkDropListDropped)=\"onTestDrop($event)\">\n            @for (test of suiteTests; track test.ID) {\n              <div class=\"test-item\" cdkDrag [cdkDragDisabled]=\"isReorderingTests || isRemovingTest\">\n                <span class=\"test-drag-handle\" cdkDragHandle title=\"Drag to reorder\" aria-label=\"Drag to reorder\">\n                  <i class=\"fas fa-grip-vertical\"></i>\n                </span>\n                <div class=\"test-sequence\">{{ test.Sequence }}</div>\n                <div class=\"test-icon\"><i class=\"fas fa-flask\"></i></div>\n                <div class=\"test-content\" (click)=\"openTest(test.TestID)\">\n                  <div class=\"test-name\">{{ test.Test }}</div>\n                  <div class=\"test-status\">\n                    @if (test.Status) {\n                      <span><i class=\"fas fa-info-circle\"></i> {{ test.Status }}</span>\n                    }\n                  </div>\n                </div>\n                <!-- Inline remove confirm OR hover-reveal X -->\n                @if (confirmingRemoveSuiteTestId === test.ID) {\n                  <div class=\"test-remove-confirm\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"test-remove-confirm-text\">Remove from suite?</span>\n                    <button\n                      type=\"button\"\n                      class=\"test-remove-confirm-btn test-remove-confirm-btn--danger\"\n                      (click)=\"confirmRemoveTest(test, $event)\"\n                      [disabled]=\"isRemovingTest\"\n                    >\n                      @if (isRemovingTest) {\n                        <i class=\"fas fa-spinner fa-spin\"></i>\n                      } @else {\n                        Remove\n                      }\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"test-remove-confirm-btn test-remove-confirm-btn--ghost\"\n                      (click)=\"cancelRemoveTest($event)\"\n                      [disabled]=\"isRemovingTest\"\n                    >\n                      Cancel\n                    </button>\n                  </div>\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"test-remove-btn\"\n                    title=\"Remove from suite\"\n                    aria-label=\"Remove from suite\"\n                    (click)=\"requestRemoveTest(test, $event)\"\n                  >\n                    <i class=\"fas fa-times\"></i>\n                  </button>\n                  <i class=\"fas fa-chevron-right test-chevron\" (click)=\"openTest(test.TestID)\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty State -->\n        @if (testsLoaded && !loadingTests && suiteTests.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-flask\"></i>\n            </div>\n            <h4>No Tests in Suite</h4>\n            <p>Add tests to this suite to start running them together.</p>\n            <button mjButton variant=\"primary\" (click)=\"openAddTestsDialog()\">\n              <i class=\"fas fa-plus\"></i> Add tests\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Runs Tab -->\n    @if (activeTab === 'runs') {\n      <div class=\"runs-tab\">\n        <!-- Loading State -->\n        @if (loadingRuns) {\n          <div class=\"loading-state\">\n            <div class=\"skeleton-list\">\n              @for (i of [1,2,3]; track i) {\n                <div class=\"skeleton-card\">\n                  <div class=\"skeleton-icon\"></div>\n                  <div class=\"skeleton-content\">\n                    <div class=\"skeleton-line wide\"></div>\n                    <div class=\"skeleton-line narrow\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <!-- Runs List -->\n        @if (!loadingRuns && suiteRuns.length > 0) {\n          <div class=\"runs-list\">\n            @for (run of suiteRuns; track run) {\n              <div class=\"run-item\" (click)=\"openSuiteRun(run.ID)\">\n                <div class=\"run-icon\" [style.background-color]=\"getRunStatusColor(run.Status)\">\n                  <i class=\"fas\"\n                    [class.fa-check]=\"run.Status === 'Completed'\"\n                    [class.fa-times]=\"run.Status === 'Failed'\"\n                    [class.fa-spinner]=\"run.Status === 'Running'\"\n                    [class.fa-clock]=\"run.Status === 'Pending'\"\n                  [class.fa-ban]=\"run.Status === 'Cancelled'\"></i>\n                </div>\n                <div class=\"run-content\">\n                  <div class=\"run-header\">\n                    <span class=\"run-id\">Run #{{ run.ID.substring(0, 8) }}</span>\n                    <span class=\"run-status\" [style.color]=\"getRunStatusColor(run.Status)\">{{ run.Status }}</span>\n                  </div>\n                  <div class=\"run-meta\">\n                    <span><i class=\"fas fa-calendar\"></i> {{ getRelativeTime(run.StartedAt) }}</span>\n                    @if (run.TotalTests) {\n                      <span>\n                        <i class=\"fas fa-check-circle\"></i> {{ run.PassedTests }}/{{ run.TotalTests }}\n                        ({{ getPassRate(run).toFixed(0) }}%)\n                      </span>\n                    }\n                  </div>\n                  <!-- Evaluation metrics row -->\n                  <div class=\"run-eval-metrics\">\n                    <!-- Status badge -->\n                    @if (evalPreferences.showExecution) {\n                      <span class=\"eval-metric status\" [class]=\"'status-' + run.Status.toLowerCase()\">\n                        <i class=\"fas\"\n                          [class.fa-circle-check]=\"run.Status === 'Completed'\"\n                          [class.fa-circle-xmark]=\"run.Status === 'Failed'\"\n                          [class.fa-spinner]=\"run.Status === 'Running'\"\n                          [class.fa-clock]=\"run.Status === 'Pending'\"\n                        [class.fa-ban]=\"run.Status === 'Cancelled'\"></i>\n                      </span>\n                    }\n                    <!-- Human score (placeholder - need avg from suite run) -->\n                    @if (evalPreferences.showHuman) {\n                      <span class=\"eval-metric human\" title=\"Human evaluation\">\n                        <i class=\"fas fa-user\"></i>\n                        <span class=\"eval-pending\"><i class=\"fas fa-clock\"></i></span>\n                      </span>\n                    }\n                    <!-- Auto score (pass rate as proxy) -->\n                    @if (evalPreferences.showAuto && run.TotalTests) {\n                      <span class=\"eval-metric auto\"\n                        [class.high]=\"getPassRate(run) >= 80\"\n                        [class.medium]=\"getPassRate(run) >= 50 && getPassRate(run) < 80\"\n                        [class.low]=\"getPassRate(run) < 50\"\n                        title=\"Auto score (pass rate)\">\n                        <i class=\"fas fa-robot\"></i>\n                        <span>{{ getPassRate(run).toFixed(0) }}%</span>\n                      </span>\n                    }\n                  </div>\n                  <!-- Tags display -->\n                  @if (getRunTags(run).length > 0) {\n                    <div class=\"run-tags\">\n                      @for (tag of getRunTags(run); track tag) {\n                        <span class=\"tag-chip\">{{ tag }}</span>\n                      }\n                    </div>\n                  }\n                </div>\n                <i class=\"fas fa-chevron-right\"></i>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty State -->\n        @if (runsLoaded && !loadingRuns && suiteRuns.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-play-circle\"></i>\n            </div>\n            <h4>No Suite Runs Yet</h4>\n            <p>Run this suite to see execution history and results here.</p>\n            <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n              <i class=\"fas fa-play\"></i> Run Suite Now\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Analytics Tab -->\n    @if (activeTab === 'analytics') {\n      <div class=\"analytics-tab\">\n        <!-- Loading State -->\n        @if (loadingAnalytics) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading analytics data...\"></mj-loading>\n          </div>\n        }\n        @if (!loadingAnalytics && analyticsLoaded) {\n          <!-- View Toggle Sub-nav -->\n          <div class=\"analytics-subnav\">\n            <div class=\"subnav-tabs\">\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'summary'\"\n                (click)=\"setAnalyticsView('summary')\">\n                <i class=\"fas fa-chart-bar\"></i>\n                <span>Summary</span>\n              </button>\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'matrix'\"\n                (click)=\"setAnalyticsView('matrix')\">\n                <i class=\"fas fa-th\"></i>\n                <span>Matrix</span>\n              </button>\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'chart'\"\n                (click)=\"setAnalyticsView('chart')\">\n                <i class=\"fas fa-project-diagram\"></i>\n                <span>Chart</span>\n              </button>\n            </div>\n          </div>\n          <!-- Collapsible Filters (shared by both views) -->\n          <div class=\"analytics-filters\" [class.collapsed]=\"filtersCollapsed\">\n            <div class=\"filters-header\" (click)=\"toggleFilters()\">\n              <span class=\"filters-title\">\n                <i class=\"fas fa-filter\"></i>\n                Filters\n                @if (filtersCollapsed) {\n                  <span class=\"filter-summary\">\n                    {{ analyticsTimeRange === 'all' ? 'All Time' : analyticsTimeRange }}\n                    @if (selectedTags.length > 0) {\n                      <span> \u00B7 {{ selectedTags.length }} tags</span>\n                    }\n                  </span>\n                }\n              </span>\n              <i class=\"fas\" [ngClass]=\"filtersCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'\"></i>\n            </div>\n            @if (!filtersCollapsed) {\n              <div class=\"filters-content\">\n                <div class=\"filter-group\">\n                  <label>Time Range</label>\n                  <div class=\"filter-buttons\">\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '7d'\" (click)=\"setTimeRange('7d')\">7 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '30d'\" (click)=\"setTimeRange('30d')\">30 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '90d'\" (click)=\"setTimeRange('90d')\">90 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === 'all'\" (click)=\"setTimeRange('all')\">All Time</button>\n                  </div>\n                </div>\n                @if (uniqueTags.length > 0) {\n                  <div class=\"filter-group\">\n                    <label>Filter by Tag @if (selectedTags.length > 0) {\n                      <span class=\"filter-hint\">({{ selectedTags.length }} selected)</span>\n                    }</label>\n                    <div class=\"filter-buttons tag-filters\">\n                      <button class=\"filter-btn tag-btn all-tags-btn\"\n                        [class.active]=\"selectedTags.length === 0\"\n                        (click)=\"toggleTagFilter(null)\">\n                        <i class=\"fas fa-layer-group\"></i> All Tags\n                      </button>\n                      @for (tag of uniqueTags; track tag) {\n                        <button class=\"filter-btn tag-btn\"\n                          [class.active]=\"isTagSelected(tag)\"\n                          (click)=\"toggleTagFilter(tag)\">\n                          @if (isTagSelected(tag)) {\n                            <i class=\"fas fa-check\"></i>\n                          }\n                          {{ tag }}\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n          <!-- Summary View -->\n          @if (analyticsView === 'summary') {\n            <!-- KPI Cards -->\n            <div class=\"analytics-kpis\">\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon\"><i class=\"fas fa-play-circle\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ getTotalRuns() }}</div>\n                  <div class=\"kpi-label\">Total Runs</div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon success\"><i class=\"fas fa-check-circle\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ getAveragePassRate().toFixed(1) }}%</div>\n                  <div class=\"kpi-label\">Avg Pass Rate</div>\n                  <div class=\"kpi-trend\" [ngClass]=\"{'trend-up': getPassRateTrend().direction === 'up', 'trend-down': getPassRateTrend().direction === 'down'}\">\n                    <i class=\"fas\" [ngClass]=\"{'fa-arrow-up': getPassRateTrend().direction === 'up', 'fa-arrow-down': getPassRateTrend().direction === 'down', 'fa-minus': getPassRateTrend().direction === 'stable'}\"></i>\n                    {{ getPassRateTrend().value.toFixed(1) }}%\n                  </div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon info\"><i class=\"fas fa-clock\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ formatDuration(getAverageDuration()) }}</div>\n                  <div class=\"kpi-label\">Avg Duration</div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon warning\"><i class=\"fas fa-dollar-sign\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ formatCost(getTotalCost()) }}</div>\n                  <div class=\"kpi-label\">Total Cost</div>\n                </div>\n              </div>\n            </div>\n            <!-- Runs Table -->\n            <div class=\"analytics-table-section\">\n              <h3><i class=\"fas fa-table\"></i> Run History</h3>\n              <div class=\"analytics-table-wrapper\">\n                <table class=\"analytics-table\">\n                  <thead>\n                    <tr>\n                      <th>Date</th>\n                      <th>Status</th>\n                      <th>Pass Rate</th>\n                      <th>Tests</th>\n                      <th>Duration</th>\n                      <th>Cost</th>\n                      <th>Tags</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (dp of getFilteredAnalyticsData(); track dp) {\n                      <tr (click)=\"openSuiteRun(dp.runId)\" class=\"clickable-row\">\n                        <td>{{ dp.date | date:'short' }}</td>\n                        <td>\n                          <span class=\"status-chip\" [ngClass]=\"'status-' + dp.status.toLowerCase()\">{{ dp.status }}</span>\n                        </td>\n                        <td>\n                          <div class=\"pass-rate-cell\">\n                            <div class=\"pass-rate-bar\" [style.width.%]=\"dp.passRate\" [ngClass]=\"{'high': dp.passRate >= 80, 'medium': dp.passRate >= 50 && dp.passRate < 80, 'low': dp.passRate < 50}\"></div>\n                            <span>{{ dp.passRate.toFixed(0) }}%</span>\n                          </div>\n                        </td>\n                        <td>{{ dp.passedTests }}/{{ dp.totalTests }}</td>\n                        <td>{{ formatDuration(dp.duration) }}</td>\n                        <td>{{ formatCost(dp.cost) }}</td>\n                        <td>\n                          <div class=\"tag-cell\">\n                            @for (tag of dp.tags.slice(0, 2); track tag) {\n                              <span class=\"tag-chip-table\">{{ tag }}</span>\n                            }\n                            @if (dp.tags.length > 2) {\n                              <span class=\"tag-more\">+{{ dp.tags.length - 2 }}</span>\n                            }\n                          </div>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n              @if (getFilteredAnalyticsData().length === 0) {\n                <div class=\"empty-state small\">\n                  <p>No runs match the current filters.</p>\n                </div>\n              }\n            </div>\n          }\n          <!-- Matrix View -->\n          @if (analyticsView === 'matrix') {\n            <!-- Loading Matrix -->\n            @if (loadingMatrix) {\n              <div class=\"loading-state\">\n                <mj-loading text=\"Loading test matrix...\"></mj-loading>\n              </div>\n            }\n            <!-- Matrix Content -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length > 0) {\n              <div class=\"matrix-section\">\n                <div class=\"matrix-header\">\n                  <h3><i class=\"fas fa-th\"></i> Test Results Matrix</h3>\n                  <div class=\"matrix-header-right\">\n                    <div class=\"matrix-filter-input\">\n                      <i class=\"fas fa-search\"></i>\n                      <input type=\"text\"\n                        placeholder=\"Filter tests...\"\n                        [value]=\"matrixTestFilter\"\n                        (input)=\"onMatrixFilterInput($event)\"\n                        class=\"filter-input\">\n                      @if (matrixTestFilter) {\n                        <button class=\"clear-filter-btn\" (click)=\"clearMatrixFilter()\" title=\"Clear filter\">\n                          <i class=\"fas fa-times\"></i>\n                        </button>\n                      }\n                    </div>\n                    <span class=\"matrix-run-count\">{{ matrixData.length }} runs \u00B7 {{ getUniqueTestsFromMatrix().length }} tests</span>\n                    <button mjButton (click)=\"exportMatrixToCSV()\" [disabled]=\"matrixData.length === 0\" title=\"Export matrix to CSV\">\n                      <i class=\"fas fa-download\"></i> Export\n                    </button>\n                  </div>\n                </div>\n                <div class=\"matrix-scroll-container\">\n                  <table class=\"test-matrix\">\n                    <thead>\n                      <tr>\n                        <th class=\"seq-header\" (click)=\"toggleMatrixSort('sequence')\" title=\"Sort by sequence\">\n                          #\n                          <i class=\"fas\" [ngClass]=\"matrixSortBy === 'sequence' ? (matrixSortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'\"></i>\n                        </th>\n                        <th class=\"test-name-header\" (click)=\"toggleMatrixSort('name')\" title=\"Sort by name\">\n                          Test\n                          <i class=\"fas\" [ngClass]=\"matrixSortBy === 'name' ? (matrixSortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'\"></i>\n                        </th>\n                        @for (run of matrixData; track run) {\n                          <th class=\"run-header\" (click)=\"openSuiteRun(run.runId)\" [title]=\"'Click to view suite run - ' + (run.date | date:'medium')\">\n                            <div class=\"run-header-content\">\n                              @if (run.tags.length > 0) {\n                                <div class=\"run-tags-header\">\n                                  @for (tag of run.tags.slice(0, 2); track tag) {\n                                    <span class=\"tag-chip-header\">{{ tag }}</span>\n                                  }\n                                  @if (run.tags.length > 2) {\n                                    <span class=\"tag-more-header\">+{{ run.tags.length - 2 }}</span>\n                                  }\n                                </div>\n                              }\n                              <div class=\"run-date\">{{ getRelativeTime(run.date) }}</div>\n                              <div class=\"run-pass-rate\" [ngClass]=\"{'high': run.passRate >= 80, 'medium': run.passRate >= 50 && run.passRate < 80, 'low': run.passRate < 50}\">\n                                {{ run.passRate.toFixed(0) }}%\n                              </div>\n                            </div>\n                          </th>\n                        }\n                        <th class=\"spacer-header\"></th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (test of getUniqueTestsFromMatrix(); track test) {\n                        <tr\n                          [class.row-selected]=\"selectedMatrixTestId === test.testId\"\n                          (click)=\"selectMatrixRow(test.testId)\">\n                          <td class=\"seq-cell\">{{ test.sequence }}</td>\n                          <td class=\"test-name-cell\">\n                            <span class=\"test-name\" [title]=\"test.testName\">{{ test.testName }}</span>\n                          </td>\n                          @for (run of matrixData; track run) {\n                            <td class=\"result-cell\"\n                              [ngClass]=\"getMatrixCellClass(getTestResultForRun(run.runId, test.testId))\"\n                              [class.clickable]=\"getTestResultForRun(run.runId, test.testId)\"\n                              [class.cell-not-run]=\"!getTestResultForRun(run.runId, test.testId)\"\n                              [title]=\"getTestResultForRun(run.runId, test.testId)?.status + ' - Click to view test run' || 'Not Run'\"\n                              (click)=\"onMatrixCellClick(getTestResultForRun(run.runId, test.testId), $event)\">\n                              @if (getTestResultForRun(run.runId, test.testId); as result) {\n                                <div class=\"cell-eval-stack\">\n                                  <!-- Status indicator -->\n                                  @if (evalPreferences.showExecution) {\n                                    <span class=\"cell-status\"\n                                      [ngClass]=\"'status-' + result.status.toLowerCase()\"\n                                      [class.cell-skipped-status]=\"result.status === 'Skipped' || result.status === 'Pending'\"\n                                      [title]=\"getStatusTooltip(result.status)\">\n                                      <i class=\"fas\"\n                                        [class.fa-check]=\"result.status === 'Passed'\"\n                                        [class.fa-times]=\"result.status === 'Failed'\"\n                                        [class.fa-exclamation]=\"result.status === 'Error'\"\n                                        [class.fa-hourglass-end]=\"result.status === 'Timeout'\"\n                                        [class.fa-forward]=\"result.status === 'Skipped'\"\n                                        [class.fa-spinner]=\"result.status === 'Running'\"\n                                      [class.fa-clock]=\"result.status === 'Pending'\"></i>\n                                    </span>\n                                  }\n                                  <!-- Human score - slashed icon if no feedback, colored by rating if has feedback -->\n                                  @if (evalPreferences.showHuman && !result.humanRating) {\n                                    <span class=\"cell-human no-feedback\"\n                                      title=\"Human Review: No rating submitted yet\">\n                                      <i class=\"fas fa-user-slash\"></i>\n                                    </span>\n                                  }\n                                  @if (evalPreferences.showHuman && result.humanRating) {\n                                    <span class=\"cell-human has-feedback\"\n                                      [class.rating-low]=\"result.humanRating <= 4\"\n                                      [class.rating-medium]=\"result.humanRating >= 5 && result.humanRating <= 6\"\n                                      [class.rating-good]=\"result.humanRating >= 7 && result.humanRating <= 8\"\n                                      [class.rating-excellent]=\"result.humanRating >= 9\"\n                                      [title]=\"getHumanTooltip(result.humanRating, result.humanComments)\">\n                                      <i class=\"fas fa-user\"></i>\n                                      <span class=\"rating-value\">{{ result.humanRating }}</span>\n                                    </span>\n                                  }\n                                  <!-- Auto score - colored by percentage -->\n                                  @if (evalPreferences.showAuto && result.score != null) {\n                                    <span class=\"cell-auto has-score\"\n                                      [class.score-low]=\"result.score < 0.5\"\n                                      [class.score-medium]=\"result.score >= 0.5 && result.score < 0.7\"\n                                      [class.score-good]=\"result.score >= 0.7 && result.score < 0.85\"\n                                      [class.score-excellent]=\"result.score >= 0.85\"\n                                      [title]=\"'Auto Score: ' + (result.score * 100).toFixed(0) + '% automated evaluation'\">\n                                      <i class=\"fas fa-robot\"></i>\n                                      <span class=\"score-value\">{{ (result.score * 100).toFixed(0) }}</span>\n                                    </span>\n                                  }\n                                  @if (evalPreferences.showAuto && result.score == null) {\n                                    <span class=\"cell-auto no-score\"\n                                      title=\"Auto Score: No automated score available\">\n                                      <i class=\"fas fa-robot\"></i>\n                                    </span>\n                                  }\n                                </div>\n                              }\n                              @if (!getTestResultForRun(run.runId, test.testId)) {\n                                <span class=\"cell-not-run-indicator\">\n                                  <i class=\"fas fa-minus\"></i>\n                                </span>\n                              }\n                            </td>\n                          }\n                          <td class=\"spacer-cell\"></td>\n                        </tr>\n                      }\n                    </tbody>\n                    <!-- Footer row with totals -->\n                    <tfoot>\n                      <tr class=\"totals-row\">\n                        <td class=\"seq-cell totals-label\"></td>\n                        <td class=\"test-name-cell totals-label\">\n                          <strong>Totals</strong>\n                        </td>\n                        @for (run of matrixData; track run) {\n                          <td class=\"result-cell totals-cell\">\n                            <div class=\"cell-eval-stack totals-stack\">\n                              <!-- Status totals -->\n                              @if (evalPreferences.showExecution) {\n                                <span class=\"totals-status\">\n                                  <span class=\"pass-count\">{{ getRunPassedCount(run) }}/{{ getRunTotalCount(run) }}</span>\n                                </span>\n                              }\n                              <!-- Human totals -->\n                              @if (evalPreferences.showHuman) {\n                                <span class=\"totals-human\">\n                                  @if (getRunHumanAvg(run) != null) {\n                                    <span class=\"avg-label\">{{ getRunHumanAvg(run)?.toFixed(1) }}</span>\n                                  }\n                                  <span class=\"count-label\">({{ getRunHumanCount(run) }})</span>\n                                </span>\n                              }\n                              <!-- Auto totals -->\n                              @if (evalPreferences.showAuto) {\n                                <span class=\"totals-auto\">\n                                  @if (getRunAutoAvg(run) != null) {\n                                    <span class=\"avg-label\">{{ (getRunAutoAvg(run)! * 100).toFixed(0) }}%</span>\n                                  }\n                                  <span class=\"count-label\">({{ getRunAutoCount(run) }})</span>\n                                </span>\n                              }\n                            </div>\n                          </td>\n                        }\n                        <td class=\"spacer-cell\"></td>\n                      </tr>\n                    </tfoot>\n                  </table>\n                </div>\n              </div>\n            }\n            <!-- Empty Matrix State -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length === 0) {\n              <div class=\"empty-state\">\n                <div class=\"empty-icon\">\n                  <i class=\"fas fa-th\"></i>\n                </div>\n                <h4>No Matrix Data</h4>\n                <p>No suite runs match the current filters.</p>\n              </div>\n            }\n          }\n          <!-- Chart View -->\n          @if (analyticsView === 'chart') {\n            <!-- Loading Chart -->\n            @if (loadingMatrix) {\n              <div class=\"loading-state\">\n                <mj-loading text=\"Loading chart data...\"></mj-loading>\n              </div>\n            }\n            <!-- Chart Content -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length > 0) {\n              <div class=\"chart-section\">\n                <div class=\"chart-header\">\n                  <h3><i class=\"fas fa-project-diagram\"></i> Test Results Flow</h3>\n                  <div class=\"chart-legend\">\n                    <span class=\"legend-item chart-passed\"><i class=\"fas fa-check\"></i> Passed</span>\n                    <span class=\"legend-item chart-failed\"><i class=\"fas fa-times\"></i> Failed</span>\n                    <span class=\"legend-item chart-error\"><i class=\"fas fa-exclamation\"></i> Error</span>\n                    <span class=\"legend-item chart-skipped\"><i class=\"fas fa-forward\"></i> Skipped</span>\n                  </div>\n                </div>\n                <div class=\"chart-container\">\n                  <div #chartContainer class=\"d3-chart\"></div>\n                </div>\n                <div class=\"chart-info\">\n                  <i class=\"fas fa-info-circle\"></i>\n                  Interactive visualization showing test results across {{ matrixData.length }} runs.\n                  Hover over elements for details, click nodes to navigate.\n                </div>\n              </div>\n            }\n            <!-- Empty Chart State -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length === 0) {\n              <div class=\"empty-state\">\n                <div class=\"empty-icon\">\n                  <i class=\"fas fa-project-diagram\"></i>\n                </div>\n                <h4>No Chart Data</h4>\n                <p>No suite runs match the current filters.</p>\n              </div>\n            }\n          }\n        }\n        <!-- Empty State -->\n        @if (!loadingAnalytics && analyticsLoaded && analyticsData.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-chart-line\"></i>\n            </div>\n            <h4>No Analytics Data</h4>\n            <p>Run this suite to start collecting analytics data.</p>\n            <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n              <i class=\"fas fa-play\"></i> Run Suite Now\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Compare Tab -->\n    @if (activeTab === 'compare') {\n      <div class=\"compare-tab\">\n        <!-- Run Selection -->\n        <div class=\"compare-selection\">\n          <div class=\"compare-run-selector\">\n            <h4>Run A (Baseline)</h4>\n            @if (!loadingRuns && suiteRuns.length > 0) {\n              <div class=\"run-selector-list\">\n                @for (run of suiteRuns; track run) {\n                  <div class=\"run-selector-item\"\n                    [class.selected]=\"IsCompareRunA(run)\"\n                    (click)=\"selectCompareRunA(run)\">\n                    <div class=\"selector-status\" [style.background-color]=\"getRunStatusColor(run.Status)\"></div>\n                    <div class=\"selector-content\">\n                      <div class=\"selector-date\">{{ run.StartedAt | date:'short' }}</div>\n                      <div class=\"selector-rate\">{{ getPassRate(run).toFixed(0) }}% pass</div>\n                    </div>\n                    @if (getRunTags(run).length > 0) {\n                      <div class=\"selector-tags\">\n                        @for (tag of getRunTags(run).slice(0, 2); track tag) {\n                          <span class=\"tag-mini\">{{ tag }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (compareRunA) {\n              <div class=\"selected-run-preview\">\n                <div class=\"preview-header\">\n                  <span class=\"preview-label\">Selected:</span>\n                  <button class=\"clear-btn\" (click)=\"compareRunA = null; compareResults = []\">Clear</button>\n                </div>\n                <div class=\"preview-details\">\n                  <span>{{ compareRunA.StartedAt | date:'medium' }}</span>\n                  <span class=\"preview-rate\">{{ getPassRate(compareRunA).toFixed(1) }}%</span>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"compare-vs\"><i class=\"fas fa-exchange-alt\"></i></div>\n          <div class=\"compare-run-selector\">\n            <h4>Run B (Compare)</h4>\n            @if (!loadingRuns && suiteRuns.length > 0) {\n              <div class=\"run-selector-list\">\n                @for (run of suiteRuns; track run) {\n                  <div class=\"run-selector-item\"\n                    [class.selected]=\"IsCompareRunB(run)\"\n                    [class.disabled]=\"IsCompareRunA(run)\"\n                    (click)=\"!IsCompareRunA(run) && selectCompareRunB(run)\">\n                    <div class=\"selector-status\" [style.background-color]=\"getRunStatusColor(run.Status)\"></div>\n                    <div class=\"selector-content\">\n                      <div class=\"selector-date\">{{ run.StartedAt | date:'short' }}</div>\n                      <div class=\"selector-rate\">{{ getPassRate(run).toFixed(0) }}% pass</div>\n                    </div>\n                    @if (getRunTags(run).length > 0) {\n                      <div class=\"selector-tags\">\n                        @for (tag of getRunTags(run).slice(0, 2); track tag) {\n                          <span class=\"tag-mini\">{{ tag }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (compareRunB) {\n              <div class=\"selected-run-preview\">\n                <div class=\"preview-header\">\n                  <span class=\"preview-label\">Selected:</span>\n                  <button class=\"clear-btn\" (click)=\"compareRunB = null; compareResults = []\">Clear</button>\n                </div>\n                <div class=\"preview-details\">\n                  <span>{{ compareRunB.StartedAt | date:'medium' }}</span>\n                  <span class=\"preview-rate\">{{ getPassRate(compareRunB).toFixed(1) }}%</span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n        <!-- Comparison Results -->\n        @if (compareRunA && compareRunB && !loadingCompare) {\n          <div class=\"compare-results\">\n            <!-- Summary Cards -->\n            <div class=\"compare-summary\">\n              <div class=\"compare-summary-card\">\n                <div class=\"summary-label\">Pass Rate Change</div>\n                <div class=\"summary-value\" [ngClass]=\"{'positive': getComparePassRateDiff()! > 0, 'negative': getComparePassRateDiff()! < 0}\">\n                  <i class=\"fas\" [ngClass]=\"{'fa-arrow-up': getComparePassRateDiff()! > 0, 'fa-arrow-down': getComparePassRateDiff()! < 0, 'fa-minus': getComparePassRateDiff() === 0}\"></i>\n                  {{ getComparePassRateDiff()! > 0 ? '+' : '' }}{{ getComparePassRateDiff()?.toFixed(1) }}%\n                </div>\n              </div>\n              <div class=\"compare-summary-card\">\n                <div class=\"summary-label\">Duration Change</div>\n                <div class=\"summary-value\" [ngClass]=\"{'positive': getCompareDurationDiff()! < 0, 'negative': getCompareDurationDiff()! > 0}\">\n                  <i class=\"fas\" [ngClass]=\"{'fa-arrow-down': getCompareDurationDiff()! < 0, 'fa-arrow-up': getCompareDurationDiff()! > 0, 'fa-minus': getCompareDurationDiff() === 0}\"></i>\n                  {{ formatDuration(getAbsCompareDurationDiff()) }}\n                </div>\n              </div>\n              <div class=\"compare-summary-card improved\">\n                <div class=\"summary-label\">Improved</div>\n                <div class=\"summary-value\">{{ getCompareImprovedCount() }}</div>\n              </div>\n              <div class=\"compare-summary-card regressed\">\n                <div class=\"summary-label\">Regressed</div>\n                <div class=\"summary-value\">{{ getCompareRegressedCount() }}</div>\n              </div>\n            </div>\n            <!-- Detailed Comparison Table -->\n            <div class=\"compare-table-section\">\n              <h3><i class=\"fas fa-list\"></i> Test-by-Test Comparison</h3>\n              <div class=\"compare-table-wrapper\">\n                <table class=\"compare-table\">\n                  <thead>\n                    <tr>\n                      <th>Test</th>\n                      <th>Run A Status</th>\n                      <th>Run B Status</th>\n                      <th>Score Diff</th>\n                      <th>Duration Diff</th>\n                      <th>Change</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (result of compareResults; track result) {\n                      <tr [ngClass]=\"{'improved': result.runA && result.runB && result.runA.status !== 'Passed' && result.runB.status === 'Passed', 'regressed': result.runA && result.runB && result.runA.status === 'Passed' && result.runB.status !== 'Passed'}\">\n                        <td class=\"test-name-cell\">{{ result.testName }}</td>\n                        <td>\n                          @if (result.runA) {\n                            <span class=\"status-chip\" [ngClass]=\"'status-' + result.runA.status.toLowerCase()\">{{ result.runA.status }}</span>\n                          }\n                          @if (!result.runA) {\n                            <span class=\"status-chip status-missing\">N/A</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.runB) {\n                            <span class=\"status-chip\" [ngClass]=\"'status-' + result.runB.status.toLowerCase()\">{{ result.runB.status }}</span>\n                          }\n                          @if (!result.runB) {\n                            <span class=\"status-chip status-missing\">N/A</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.scoreDiff != null) {\n                            <span [ngClass]=\"{'positive': result.scoreDiff > 0, 'negative': result.scoreDiff < 0}\">\n                              {{ result.scoreDiff > 0 ? '+' : '' }}{{ (result.scoreDiff * 100).toFixed(1) }}%\n                            </span>\n                          }\n                          @if (result.scoreDiff == null) {\n                            <span class=\"muted\">-</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.durationDiff != null) {\n                            <span [ngClass]=\"{'positive': result.durationDiff < 0, 'negative': result.durationDiff > 0}\">\n                              {{ result.durationDiff > 0 ? '+' : '' }}{{ result.durationDiff.toFixed(1) }}s\n                            </span>\n                          }\n                          @if (result.durationDiff == null) {\n                            <span class=\"muted\">-</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.runA && result.runB && result.runA.status !== 'Passed' && result.runB.status === 'Passed') {\n                            <span class=\"change-indicator improved\">\n                              <i class=\"fas fa-arrow-up\"></i> Fixed\n                            </span>\n                          }\n                          @if (result.runA && result.runB && result.runA.status === 'Passed' && result.runB.status !== 'Passed') {\n                            <span class=\"change-indicator regressed\">\n                              <i class=\"fas fa-arrow-down\"></i> Broke\n                            </span>\n                          }\n                          @if (!result.statusChanged) {\n                            <span class=\"change-indicator unchanged\">\n                              <i class=\"fas fa-minus\"></i>\n                            </span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            </div>\n          </div>\n        }\n        <!-- Loading State for Compare -->\n        @if (loadingCompare) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading comparison data...\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!compareRunA || !compareRunB) {\n          <div class=\"compare-empty\">\n            <div class=\"compare-empty-icon\">\n              <i class=\"fas fa-balance-scale\"></i>\n            </div>\n            <h4>Select Two Runs to Compare</h4>\n            <p>Choose a baseline run (A) and a comparison run (B) from the lists above to see a detailed side-by-side comparison.</p>\n          </div>\n        }\n        <!-- No Runs State -->\n        @if (runsLoaded && suiteRuns.length < 2) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fas fa-balance-scale\"></i>\n            </div>\n            <h4>Not Enough Runs to Compare</h4>\n            <p>You need at least 2 suite runs to use the comparison feature.</p>\n            <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n              <i class=\"fas fa-play\"></i> Run Suite Now\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Keyboard Shortcuts Toggle Button -->\n  <button class=\"shortcuts-toggle\" (click)=\"toggleShortcuts()\" [title]=\"showShortcuts ? 'Hide keyboard shortcuts' : 'Show keyboard shortcuts'\">\n    <i class=\"fas fa-keyboard\"></i>\n  </button>\n\n  <!-- Keyboard Shortcuts Hint (Desktop Only) -->\n  @if (showShortcuts) {\n    <div class=\"keyboard-shortcuts\">\n      <div class=\"shortcuts-header\">\n        <i class=\"fas fa-keyboard\"></i>\n        Shortcuts\n        <button class=\"shortcuts-close\" (click)=\"toggleShortcuts()\" title=\"Hide shortcuts\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"shortcut-list\">\n        <div class=\"shortcut-item\">\n          <span>Save changes</span>\n          <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>S</kbd></span>\n        </div>\n        <div class=\"shortcut-item\">\n          <span>Refresh</span>\n          <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>R</kbd></span>\n        </div>\n        <div class=\"shortcut-item\">\n          <span>Run Suite</span>\n          <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>Enter</kbd></span>\n        </div>\n        <div class=\"shortcut-item\">\n          <span>Switch Tabs</span>\n          <span class=\"shortcut-keys\"><kbd>1</kbd>-<kbd>5</kbd></span>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Slide Panel for Suite Execution -->\n  @if (testingDialogService.IsPanelOpen) {\n    <mj-slide-panel\n      Mode=\"slide\"\n      [Title]=\"testingDialogService.PanelOptions?.suiteId ? 'Suite Execution' : 'Run Suite'\"\n      [Resizable]=\"true\"\n      (Closed)=\"OnPanelClosed()\">\n      <app-test-run-dialog\n        [PanelMode]=\"true\"\n        [selectedTestId]=\"testingDialogService.PanelOptions?.testId ?? null\"\n        [selectedSuiteId]=\"testingDialogService.PanelOptions?.suiteId ?? null\"\n        [runMode]=\"testingDialogService.PanelOptions?.mode ?? 'suite'\"\n        (PanelClose)=\"OnPanelClosed()\">\n      </app-test-run-dialog>\n    </mj-slide-panel>\n  }\n\n  <!-- Add Tests Picker Dialog -->\n  @if (showAddTestsDialog) {\n    <div class=\"picker-backdrop\" (click)=\"closeAddTestsDialog()\"></div>\n    <div class=\"picker-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"add-tests-dialog-title\" (click)=\"$event.stopPropagation()\">\n      <div class=\"picker-header\">\n        <h2 id=\"add-tests-dialog-title\" class=\"picker-title\">\n          <i class=\"fas fa-plus-circle\"></i> Add tests to suite\n        </h2>\n        <button type=\"button\" class=\"picker-close\" (click)=\"closeAddTestsDialog()\" [disabled]=\"isAddingTests\" aria-label=\"Close\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n\n      <div class=\"picker-search\">\n        <i class=\"fas fa-search picker-search-icon\"></i>\n        <input\n          #pickerSearch\n          type=\"text\"\n          class=\"picker-search-input\"\n          placeholder=\"Search tests by name, description, or type...\"\n          [(ngModel)]=\"addTestsSearch\"\n          autofocus\n        />\n        @if (addTestsSearch) {\n          <button type=\"button\" class=\"picker-search-clear\" (click)=\"addTestsSearch = ''\" aria-label=\"Clear search\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        }\n      </div>\n\n      <div class=\"picker-toolbar\">\n        <span class=\"picker-toolbar-status\">\n          @if (selectedTestIdsToAdd.size > 0) {\n            <strong>{{ selectedTestIdsToAdd.size }}</strong> selected\n          } @else if (!loadingAvailableTests) {\n            {{ filteredAvailableTests.length }} test{{ filteredAvailableTests.length === 1 ? '' : 's' }} available\n          }\n        </span>\n        <div class=\"picker-toolbar-actions\">\n          <button type=\"button\" class=\"picker-link-btn\" (click)=\"selectAllFiltered()\" [disabled]=\"loadingAvailableTests || filteredAvailableTests.length === 0\">\n            Select all\n          </button>\n          <button type=\"button\" class=\"picker-link-btn\" (click)=\"clearAddSelection()\" [disabled]=\"selectedTestIdsToAdd.size === 0\">\n            Clear\n          </button>\n        </div>\n      </div>\n\n      <div class=\"picker-body\">\n        @if (loadingAvailableTests) {\n          <div class=\"picker-loading\">\n            <mj-loading text=\"Loading tests...\"></mj-loading>\n          </div>\n        } @else if (filteredAvailableTests.length === 0) {\n          <div class=\"picker-empty\">\n            @if (availableTests.length === 0) {\n              <i class=\"fas fa-check-circle\"></i>\n              <h4>Everything's already in the suite</h4>\n              <p>This suite contains every available test. Create a new test first to add more.</p>\n            } @else {\n              <i class=\"fas fa-search\"></i>\n              <h4>No matches</h4>\n              <p>No tests match \"{{ addTestsSearch }}\".</p>\n            }\n          </div>\n        } @else {\n          <ul class=\"picker-list\">\n            @for (t of filteredAvailableTests; track t.ID) {\n              <li\n                class=\"picker-row\"\n                [class.picker-row--selected]=\"isAddSelected(t.ID)\"\n                (click)=\"toggleAddSelection(t.ID)\"\n                role=\"checkbox\"\n                [attr.aria-checked]=\"isAddSelected(t.ID)\"\n                tabindex=\"0\"\n              >\n                <span class=\"picker-check\">\n                  @if (isAddSelected(t.ID)) {\n                    <i class=\"fas fa-check\"></i>\n                  }\n                </span>\n                <div class=\"picker-row-main\">\n                  <div class=\"picker-row-name\">{{ t.Name }}</div>\n                  @if (t.Description) {\n                    <div class=\"picker-row-desc\">{{ t.Description }}</div>\n                  }\n                </div>\n                <div class=\"picker-row-meta\">\n                  @if (t.Type) {\n                    <span class=\"picker-row-pill\">{{ t.Type }}</span>\n                  }\n                  <span class=\"picker-row-pill picker-row-pill--status\" [attr.data-status]=\"t.Status?.toLowerCase()\">{{ t.Status }}</span>\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n\n      <div class=\"picker-footer\">\n        <button\n          type=\"button\"\n          class=\"picker-btn picker-btn--primary\"\n          (click)=\"confirmAddTests()\"\n          [disabled]=\"selectedTestIdsToAdd.size === 0 || isAddingTests\"\n        >\n          @if (isAddingTests) {\n            <i class=\"fas fa-spinner fa-spin\"></i> Adding\u2026\n          } @else {\n            <i class=\"fas fa-check\"></i>\n            @if (selectedTestIdsToAdd.size === 0) {\n              Add tests\n            } @else if (selectedTestIdsToAdd.size === 1) {\n              Add 1 test\n            } @else {\n              Add {{ selectedTestIdsToAdd.size }} tests\n            }\n          }\n        </button>\n        <button\n          type=\"button\"\n          class=\"picker-btn picker-btn--ghost\"\n          (click)=\"closeAddTestsDialog()\"\n          [disabled]=\"isAddingTests\"\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Sticky Save Bar \u2014 always in the DOM so CSS transitions can fire reliably.\n       Visibility is controlled by the .save-bar--visible class, driven by isDirty. -->\n  <div\n    class=\"save-bar\"\n    [class.save-bar--visible]=\"isDirty\"\n    [attr.aria-hidden]=\"!isDirty\"\n    role=\"region\"\n    aria-label=\"Unsaved changes\"\n  >\n    <div class=\"save-bar-message\">\n      <span class=\"save-bar-dot\" aria-hidden=\"true\">\u25CF</span>\n      <span class=\"save-bar-text\">\n        <strong>Unsaved changes</strong>\n        <span class=\"save-bar-fields\">\n          @if (dirtyFieldNames.length === 1) {\n            {{ dirtyFieldNames[0] }} edited\n          } @else if (dirtyFieldNames.length > 1) {\n            {{ dirtyFieldNames.length }} fields edited\n          }\n        </span>\n      </span>\n    </div>\n    <div class=\"save-bar-actions\">\n      <button\n        type=\"button\"\n        class=\"save-bar-btn save-bar-btn--primary\"\n        (click)=\"saveChanges()\"\n        [disabled]=\"isSaving || !isDirty\"\n        [attr.tabindex]=\"isDirty ? 0 : -1\"\n        title=\"Save changes (\u2318S)\"\n      >\n        @if (isSaving) {\n          <i class=\"fas fa-spinner fa-spin\"></i> Saving\u2026\n        } @else {\n          <i class=\"fas fa-check\"></i> Save changes\n          <span class=\"save-bar-kbd\"><kbd>\u2318</kbd><kbd>S</kbd></span>\n        }\n      </button>\n      <button\n        type=\"button\"\n        class=\"save-bar-btn save-bar-btn--ghost\"\n        (click)=\"discardChanges()\"\n        [disabled]=\"isSaving || !isDirty\"\n        [attr.tabindex]=\"isDirty ? 0 : -1\"\n        title=\"Discard changes\"\n      >\n        <i class=\"fas fa-undo\"></i> Discard\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["/* ===========================\n   Test Suite Form - World-Class UX\n   =========================== */\n\n/* CSS Custom Properties for Theming - using :host for Angular encapsulation */\n:host {\n  --test-primary: var(--mj-brand-primary);\n  --test-primary-light: var(--mj-brand-primary);\n  --test-success: var(--mj-status-success);\n  --test-error: var(--mj-status-error);\n  --test-warning: var(--mj-status-warning);\n  --test-disabled: var(--mj-text-muted);\n  --test-bg: var(--mj-bg-surface-card);\n  --test-surface: var(--mj-bg-surface);\n  --test-border: var(--mj-border-default);\n  --test-text: var(--mj-text-primary);\n  --test-text-secondary: var(--mj-text-secondary);\n  --test-text-muted: var(--mj-text-disabled);\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: var(--mj-shadow-sm);\n  --test-shadow-md: var(--mj-shadow-md);\n  --test-shadow-lg: var(--mj-shadow-lg);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n.test-suite-form {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n/* Breadcrumb */\n.breadcrumb {\n  margin-bottom: 16px;\n}\n\n.breadcrumb ol {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n}\n\n.breadcrumb li {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.breadcrumb a {\n  color: var(--test-primary);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.breadcrumb a:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  text-decoration: none;\n}\n\n.breadcrumb .separator {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  margin: 0 4px;\n}\n\n.breadcrumb .current {\n  color: var(--test-text-secondary);\n  font-weight: 500;\n}\n\n.breadcrumb-text {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Header */\n.suite-header {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.suite-icon:hover { transform: scale(1.05); }\n\n.suite-info { flex: 1; min-width: 0; }\n\n.suite-info h1 {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  word-wrap: break-word;\n}\n\n.suite-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active { background: var(--test-success); }\n.status-badge.status-disabled { background: var(--test-disabled); }\n.status-badge.status-pending { background: var(--test-warning); }\n\n.status-badge-inline {\n  display: inline-flex;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active { background: var(--test-success); }\n.status-badge-inline.status-disabled { background: var(--test-disabled); }\n.status-badge-inline.status-pending { background: var(--test-warning); }\n\n.test-count {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.suite-description {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.suite-description p {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* Tabs */\n.tabs-container {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.tabs::-webkit-scrollbar { display: none; }\n\n.tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab-badge {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.tab.active .tab-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--test-primary);\n}\n\n.tab-shortcut {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Overview Tab */\n.overview-tab {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: fadeIn 0.3s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.info-section, .config-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section h3, .config-section h3 {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section h3 i, .config-section h3 i {\n  color: var(--test-primary);\n}\n\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 500;\n}\n\n.config-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.config-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item label {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.config-input:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-hint {\n  font-size: 11px;\n  color: var(--test-text-muted);\n}\n\n/* Tests Tab */\n.tests-tab, .runs-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.loading-state { padding: 0; }\n\n.skeleton-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-sequence {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide { width: 70%; }\n.skeleton-line.narrow { width: 40%; }\n\n@keyframes shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n.tests-list, .runs-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.test-item, .run-item {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.test-item:hover, .run-item:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.test-sequence {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--test-text-secondary);\n  flex-shrink: 0;\n}\n\n.test-icon, .run-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.test-icon {\n  background: var(--test-primary);\n}\n\n.test-content, .run-content { flex: 1; min-width: 0; }\n\n.test-name, .run-header {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-id { font-weight: 600; }\n\n.run-status {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.test-status, .run-meta {\n  display: flex;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.test-status span, .run-meta span {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.test-item > i, .run-item > i {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.test-item:hover > i, .run-item:hover > i {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n/* Empty States */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin-bottom: 20px;\n}\n\n.empty-icon i {\n  font-size: 36px;\n  color: var(--test-text-muted);\n}\n\n.empty-state h4 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 300px;\n}\n\n/* Keyboard Shortcuts */\n/* Keyboard shortcuts toggle button - visible when shortcuts are hidden */\n.shortcuts-toggle {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--test-text-secondary);\n}\n\n.shortcut-keys {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys kbd {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n  .keyboard-shortcuts, .shortcuts-toggle { display: none; }\n}\n\n@media (max-width: 768px) {\n  .suite-header { padding: 16px; }\n\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-actions {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions button { flex: 1; }\n\n  .tab-shortcut { display: none; }\n\n  .info-grid { grid-template-columns: 1fr; }\n\n  .test-item, .run-item { padding: 14px; }\n}\n\n@media (max-width: 480px) {\n  .suite-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n  }\n\n  .suite-info h1 { font-size: 16px; }\n\n  .tab-badge { display: none; }\n\n  .test-sequence { display: none; }\n}\n\n@media (hover: none) and (pointer: coarse) {\n  .test-item:active, .run-item:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    transform: scale(0.98);\n  }\n\n  .tab { min-height: 48px; }\n  .test-item, .run-item { min-height: 64px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n@media print {\n  .header-actions, .tabs-container, .keyboard-shortcuts {\n    display: none !important;\n  }\n}\n\n/* ===========================\n   Tags UI\n   =========================== */\n.run-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 8px;\n}\n\n.tag-chip {\n  display: inline-flex;\n  align-items: center;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-mini {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n}\n\n.tag-more {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n/* Evaluation metrics row for Runs list */\n.run-eval-metrics {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.eval-metric {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.eval-metric.status {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.eval-metric.status.status-completed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-metric.status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-metric.status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.status.status-pending {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human .eval-pending {\n  font-size: 9px;\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.auto.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n  color: var(--mj-status-success);\n}\n\n.eval-metric.auto.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  color: var(--mj-status-error);\n}\n\n.tag-cell {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.tag-chip-table {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ===========================\n   Analytics Tab\n   =========================== */\n.analytics-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n/* Collapsible filters */\n.analytics-filters {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-bottom: 16px;\n  box-shadow: var(--test-shadow-sm);\n  overflow: hidden;\n}\n\n.analytics-filters.collapsed {\n  margin-bottom: 12px;\n}\n\n.filters-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.filters-header:hover {\n  background: var(--test-bg);\n}\n\n.filters-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n}\n\n.filters-title i {\n  color: var(--test-primary);\n}\n\n.filter-summary {\n  font-weight: 400;\n  color: var(--test-text-muted);\n  margin-left: 8px;\n}\n\n.filters-header > i {\n  color: var(--test-text-muted);\n  font-size: 12px;\n}\n\n.filters-content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 12px 16px 16px 16px;\n  border-top: 1px solid var(--test-border);\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.filter-group label {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.filter-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.filter-btn {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn:hover {\n  border-color: var(--test-primary);\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.filter-btn.active {\n  background: var(--test-primary);\n  border-color: var(--test-primary);\n  color: var(--mj-text-inverse);\n}\n\n.filter-btn.tag-btn {\n  padding: 6px 12px;\n  font-size: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.filter-btn.tag-btn i.fa-check {\n  font-size: 10px;\n}\n\n.filter-btn.tag-btn.all-tags-btn {\n  font-weight: 600;\n}\n\n.filter-btn.tag-btn.all-tags-btn i {\n  font-size: 11px;\n}\n\n.filter-hint {\n  font-weight: 400;\n  font-size: 10px;\n  color: var(--test-primary);\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-filters {\n  max-height: 120px;\n  overflow-y: auto;\n}\n\n/* KPI Cards */\n.analytics-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.kpi-card {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: var(--test-radius-md);\n  color: var(--test-primary);\n  font-size: 20px;\n}\n\n.kpi-icon.success {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-icon.info {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.kpi-icon.warning {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.kpi-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n}\n\n.kpi-label {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  margin-top: 2px;\n}\n\n.kpi-trend {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-top: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-secondary);\n}\n\n.kpi-trend.trend-up {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-trend.trend-down {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n/* Analytics Table */\n.analytics-table-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.analytics-table-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.analytics-table-section h3 i {\n  color: var(--test-primary);\n}\n\n.analytics-table-wrapper {\n  overflow-x: auto;\n  margin: 0 -24px;\n  padding: 0 24px;\n}\n\n.analytics-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.analytics-table th {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.analytics-table td {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.analytics-table tbody tr.clickable-row {\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.analytics-table tbody tr.clickable-row:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.status-chip {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-chip.status-completed { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-passed { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-failed { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--test-error); }\n.status-chip.status-error { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-running { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--test-primary); }\n.status-chip.status-pending { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.status-chip.status-cancelled { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n.status-chip.status-missing { background: var(--mj-bg-surface-sunken); color: var(--test-text-muted); }\n.status-chip.status-timeout { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-skipped { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n\n.pass-rate-cell {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 100px;\n}\n\n.pass-rate-bar {\n  height: 6px;\n  border-radius: 3px;\n  background: var(--test-success);\n  transition: width 0.3s ease;\n  max-width: 60px;\n}\n\n.pass-rate-bar.medium { background: var(--test-warning); }\n.pass-rate-bar.low { background: var(--test-error); }\n\n/* Analytics Sub-navigation */\n.analytics-subnav {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 8px;\n  margin-bottom: 20px;\n  box-shadow: var(--test-shadow-sm);\n  display: inline-flex;\n}\n\n.subnav-tabs {\n  display: flex;\n  gap: 4px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n}\n\n.subnav-tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border: none;\n  border-radius: var(--test-radius-sm);\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.subnav-tab:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.subnav-tab.active {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.subnav-tab i {\n  font-size: 14px;\n}\n\n/* Matrix View */\n.matrix-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 16px;\n  box-shadow: var(--test-shadow-sm);\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 280px);\n  min-height: 300px;\n}\n\n.matrix-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 12px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid var(--test-border);\n  flex-shrink: 0;\n}\n\n.matrix-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.matrix-header h3 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.matrix-header h3 i {\n  color: var(--test-primary);\n}\n\n.matrix-run-count {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  font-weight: 500;\n}\n\n/* Matrix filter input */\n.matrix-filter-input {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--test-border);\n  border-radius: 6px;\n  padding: 4px 10px;\n  min-width: 180px;\n}\n\n.matrix-filter-input i.fa-search {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.matrix-filter-input .filter-input {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 12px;\n  color: var(--test-text);\n  width: 100%;\n}\n\n.matrix-filter-input .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn {\n  border: none;\n  background: none;\n  padding: 2px 4px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  border-radius: 3px;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n\n/* Scrollable matrix container with fixed height */\n.matrix-scroll-container {\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n}\n\n.test-matrix {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.test-matrix thead {\n  display: table-header-group;\n}\n\n.test-matrix thead tr {\n  display: table-row;\n}\n\n.test-matrix tbody {\n  display: table-row-group;\n}\n\n.test-matrix tbody tr {\n  display: table-row;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.test-matrix tbody tr:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.test-matrix tbody tr.row-selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix tbody tr.row-selected td {\n  border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.test-matrix tbody tr.row-selected .seq-cell,\n.test-matrix tbody tr.row-selected .test-name-cell {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix tfoot {\n  display: table-footer-group;\n}\n\n.test-matrix th,\n.test-matrix td {\n  display: table-cell;\n  border: 1px solid var(--test-border);\n  padding: 8px 12px;\n  text-align: center;\n  vertical-align: middle;\n}\n\n.test-matrix th {\n  background: var(--test-bg);\n  font-weight: 600;\n  font-size: 11px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  border-bottom: 3px solid var(--mj-text-secondary) !important;\n}\n\n/* Sequence column - shared styles */\n.test-matrix .seq-header,\n.test-matrix .seq-cell {\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  text-align: center;\n  position: sticky;\n  left: 0;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  border-right: 1px solid var(--test-border);\n  padding: 6px 4px !important;\n}\n\n/* Seq header - sticky top AND left, highest z-index */\n.test-matrix .seq-header {\n  cursor: pointer;\n  font-weight: 600;\n  background: var(--test-bg);\n  z-index: 12; /* Higher than other headers */\n  top: 0;\n}\n\n/* Seq body cells - sticky left only, lower z-index */\n.test-matrix .seq-cell {\n  background: var(--test-surface);\n  z-index: 2;\n}\n\n.test-matrix .seq-header i {\n  font-size: 9px;\n  margin-left: 2px;\n  opacity: 0.6;\n}\n\n.test-matrix .seq-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix .test-name-header {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-bg);\n  z-index: 11;\n  border-right: 2px solid var(--test-border);\n  cursor: pointer;\n}\n\n.test-matrix .test-name-header i {\n  font-size: 9px;\n  margin-left: 4px;\n  opacity: 0.6;\n}\n\n.test-matrix .test-name-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix .run-header {\n  min-width: 120px;\n  width: 120px;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n/* Spacer column absorbs extra width */\n.test-matrix .spacer-header,\n.test-matrix .spacer-cell {\n  width: 100%;\n  min-width: 20px;\n  background: var(--test-bg);\n  border: none;\n}\n\n.test-matrix .spacer-cell {\n  background: var(--test-surface);\n}\n\n.test-matrix .run-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-header-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-date {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-pass-rate {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.run-pass-rate.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.run-pass-rate.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.run-pass-rate.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.run-tags {\n  display: flex;\n  gap: 4px;\n}\n\n.tag-tiny {\n  font-size: 9px;\n  padding: 2px 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--test-primary);\n  border-radius: 8px;\n  white-space: nowrap;\n  max-width: 60px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Matrix column header tags - emphasized */\n.run-tags-header {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 3px;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.tag-chip-header {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 70px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-more-header {\n  font-size: 9px;\n  color: var(--test-text-secondary);\n  padding: 2px 4px;\n}\n\n.test-matrix .test-name-cell {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-surface);\n  z-index: 2;\n  border-right: 2px solid var(--test-border);\n  padding: 6px 10px !important;\n}\n\n.test-name {\n  display: block;\n  white-space: nowrap;\n  font-weight: 500;\n  color: var(--test-text);\n  font-size: 12px;\n}\n\n.result-cell {\n  position: relative;\n  min-width: 120px;\n  width: 120px;\n  transition: var(--test-transition);\n}\n\n.result-cell.clickable {\n  cursor: pointer;\n}\n\n.result-cell.clickable:hover {\n  transform: scale(1.1);\n  box-shadow: var(--mj-shadow-md);\n  z-index: 5;\n}\n\n.result-cell i {\n  font-size: 14px;\n}\n\n/* Completed cells have neutral white background - pills tell the story */\n.result-cell.cell-passed,\n.result-cell.cell-failed,\n.result-cell.cell-error,\n.result-cell.cell-timeout,\n.result-cell.cell-running,\n.result-cell.cell-pending {\n  background: var(--mj-bg-surface);\n  color: var(--test-text);\n}\n\n/* Skipped/not-run cells get hatched background */\n.result-cell.cell-skipped {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--test-disabled);\n}\n\n.result-cell.cell-none {\n  background: var(--mj-bg-surface-card);\n  color: var(--test-text-muted);\n}\n\n.cell-score {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  margin-top: 2px;\n}\n\n/* Matrix cell evaluation stack - shows multiple eval types horizontally */\n.cell-eval-stack {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-wrap: nowrap;\n}\n\n.result-cell.multi-eval {\n  min-width: 120px;\n  width: auto;\n}\n\n/* Add timeout status icon */\n.cell-status.status-timeout {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-status.status-pending {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.cell-human {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-size: 10px;\n}\n\n.cell-auto {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-auto.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-none-indicator {\n  color: var(--test-text-muted);\n  opacity: 0.5;\n}\n\n.matrix-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.matrix-info i {\n  color: var(--test-primary);\n}\n\n/* ===========================\n   Chart View\n   =========================== */\n.chart-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.chart-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.chart-header h3 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.chart-header h3 i {\n  color: var(--test-primary);\n}\n\n.chart-legend {\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.chart-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.chart-legend .legend-item.chart-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.chart-legend .legend-item.chart-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.chart-legend .legend-item.chart-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.chart-legend .legend-item.chart-skipped {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-disabled);\n}\n\n.chart-container {\n  min-height: 500px;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.d3-chart {\n  width: 100%;\n  height: 500px;\n}\n\n.d3-chart svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* D3 Chart Node Styles */\n.d3-chart .node {\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.d3-chart .node:hover {\n  transform: scale(1.05);\n}\n\n.d3-chart .node-label {\n  font-size: 11px;\n  font-weight: 500;\n  fill: var(--test-text);\n  pointer-events: none;\n}\n\n.d3-chart .link {\n  fill: none;\n  stroke-opacity: 0.4;\n  transition: stroke-opacity 0.2s ease;\n}\n\n.d3-chart .link:hover {\n  stroke-opacity: 0.8;\n}\n\n.d3-chart .tooltip {\n  position: absolute;\n  padding: 10px 14px;\n  background: var(--mj-bg-overlay);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 12px;\n  pointer-events: none;\n  z-index: 100;\n  box-shadow: var(--mj-shadow-lg);\n  max-width: 250px;\n}\n\n.d3-chart .tooltip-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.d3-chart .tooltip-value {\n  opacity: 0.8;\n}\n\n.chart-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n  margin-top: 16px;\n}\n\n.chart-info i {\n  color: var(--test-primary);\n}\n\n/* ===========================\n   Compare Tab\n   =========================== */\n.compare-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.compare-selection {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 24px;\n  align-items: flex-start;\n  margin-bottom: 24px;\n}\n\n.compare-run-selector {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-run-selector h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.run-selector-list {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.run-selector-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-selector-item:hover {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-selector-item.selected {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.run-selector-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.selector-status {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.selector-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.selector-date {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--test-text);\n}\n\n.selector-rate {\n  font-size: 11px;\n  color: var(--test-text-secondary);\n}\n\n.selector-tags {\n  display: flex;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.selected-run-preview {\n  padding: 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-sm);\n  border: 1px solid var(--test-border);\n}\n\n.preview-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.preview-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n}\n\n.clear-btn {\n  padding: 4px 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-error);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.clear-btn:hover { text-decoration: underline; }\n\n.preview-details {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--test-text);\n}\n\n.preview-rate {\n  font-weight: 600;\n  color: var(--test-success);\n}\n\n.compare-vs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: var(--test-bg);\n  border-radius: 50%;\n  color: var(--test-text-muted);\n  font-size: 16px;\n  align-self: center;\n  margin-top: 60px;\n}\n\n/* Compare Results */\n.compare-results {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.compare-summary {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.compare-summary-card {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  text-align: center;\n}\n\n.compare-summary-card .summary-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n  margin-bottom: 8px;\n}\n\n.compare-summary-card .summary-value {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.compare-summary-card .summary-value.positive { color: var(--test-success); }\n.compare-summary-card .summary-value.negative { color: var(--test-error); }\n\n.compare-summary-card.improved {\n  border-left: 4px solid var(--test-success);\n}\n\n.compare-summary-card.improved .summary-value { color: var(--test-success); }\n\n.compare-summary-card.regressed {\n  border-left: 4px solid var(--test-error);\n}\n\n.compare-summary-card.regressed .summary-value { color: var(--test-error); }\n\n/* Compare Table */\n.compare-table-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-table-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.compare-table-section h3 i {\n  color: var(--test-primary);\n}\n\n.compare-table-wrapper {\n  overflow-x: auto;\n}\n\n.compare-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.compare-table th {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.compare-table td {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.compare-table tbody tr.improved {\n  background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.compare-table tbody tr.regressed {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.test-name-cell {\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.positive { color: var(--test-success); }\n.negative { color: var(--test-error); }\n.muted { color: var(--test-text-muted); }\n\n.change-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.change-indicator.improved {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.change-indicator.regressed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.change-indicator.unchanged {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-muted);\n}\n\n/* Compare Empty State */\n.compare-empty {\n  text-align: center;\n  padding: 60px 24px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  margin-top: 24px;\n}\n\n.compare-empty-icon {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin: 0 auto 20px;\n}\n\n.compare-empty-icon i {\n  font-size: 32px;\n  color: var(--test-text-muted);\n}\n\n.compare-empty h4 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.compare-empty p {\n  margin: 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n/* Small empty state variant */\n.empty-state.small {\n  padding: 32px 16px;\n}\n\n.empty-state.small p {\n  margin: 0;\n}\n\n/* ===========================\n   Responsive Analytics/Compare\n   =========================== */\n@media (max-width: 1024px) {\n  .compare-selection {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .compare-vs {\n    margin: 0;\n    align-self: center;\n    justify-self: center;\n  }\n\n  .analytics-kpis {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 768px) {\n  .filter-buttons {\n    flex-direction: column;\n  }\n\n  .filter-btn {\n    width: 100%;\n    text-align: center;\n  }\n\n  .analytics-kpis {\n    grid-template-columns: 1fr;\n  }\n\n  .kpi-card {\n    padding: 16px;\n  }\n\n  .kpi-value {\n    font-size: 20px;\n  }\n\n  .compare-summary {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .analytics-table-wrapper,\n  .compare-table-wrapper {\n    margin: 0 -20px;\n    padding: 0 20px;\n  }\n\n  .run-selector-list {\n    max-height: 150px;\n  }\n}\n\n@media (max-width: 480px) {\n  .compare-summary {\n    grid-template-columns: 1fr;\n  }\n\n  .compare-summary-card .summary-value {\n    font-size: 20px;\n  }\n\n  .analytics-table th,\n  .analytics-table td,\n  .compare-table th,\n  .compare-table td {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n}\n\n/* ===========================\n   Matrix Evaluation Indicators\n   =========================== */\n\n/* Human Feedback Indicators */\n.cell-human {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-human.no-feedback {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-human.no-feedback i {\n  font-size: 11px;\n}\n\n.cell-human.has-feedback {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-human.has-feedback i {\n  font-size: 9px;\n}\n\n.cell-human.has-feedback .rating-value {\n  font-weight: 700;\n  font-size: 11px;\n}\n\n/* Human rating color coding: red \u22644, yellow 5-6, light-green 7-8, green 9-10 */\n.cell-human.rating-low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-human.rating-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-human.rating-good {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-human.rating-excellent {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* Auto Score Indicators */\n.cell-auto {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-auto.no-score {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-auto.no-score i {\n  font-size: 11px;\n}\n\n.cell-auto.has-score {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-auto.has-score i {\n  font-size: 9px;\n}\n\n.cell-auto.has-score .score-value {\n  font-weight: 700;\n  font-size: 10px;\n}\n\n/* Auto score color coding (0-100%): red <50, yellow 50-69, light-green 70-84, green 85+ */\n.cell-auto.score-low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-auto.score-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.score-good {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.score-excellent {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* Status indicators in matrix cells */\n.cell-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-timeout {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped,\n.cell-status.status-pending {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Not-run / Skipped cells with hatch pattern */\n.result-cell.cell-not-run {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--mj-text-disabled);\n}\n\n.result-cell.cell-not-run .cell-eval-stack {\n  opacity: 0.6;\n}\n\n.cell-not-run-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  color: var(--mj-text-disabled);\n  font-size: 11px;\n}\n\n/* ===========================\n   Matrix Totals Footer Row\n   =========================== */\n.test-matrix tfoot {\n  position: sticky;\n  bottom: 0;\n  z-index: 2;\n}\n\n.totals-row {\n  background: var(--mj-bg-surface-sunken);\n  border-top: 2px solid var(--test-border);\n}\n\n.totals-row td {\n  padding: 10px 12px;\n  font-weight: 600;\n}\n\n.totals-row .totals-label {\n  background: var(--mj-bg-surface-sunken);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.totals-row .totals-cell {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.totals-stack {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.totals-status,\n.totals-human,\n.totals-auto {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.totals-status {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.totals-status .pass-count {\n  font-weight: 700;\n}\n\n.totals-human {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.totals-human .avg-label {\n  font-weight: 700;\n}\n\n.totals-human .count-label {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n.totals-auto {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.totals-auto .avg-label {\n  font-weight: 700;\n}\n\n.totals-auto .count-label {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n/* ===========================\n   Editable Overview Form\n   =========================== */\n\n.edit-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.edit-section-header {\n  margin: 0 0 18px 0;\n}\n\n.edit-section-header h3 {\n  margin: 0 0 4px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.edit-section-header h3 i {\n  color: var(--test-primary);\n}\n\n.edit-section-sub {\n  margin: 0;\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.edit-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n}\n\n@media (max-width: 720px) {\n  .edit-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.edit-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 0;\n}\n\n.edit-field--full {\n  grid-column: 1 / -1;\n}\n\n.edit-field label {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.edit-field .required {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.config-textarea {\n  resize: vertical;\n  min-height: 72px;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\n.select-wrapper select.config-input {\n  padding-right: 36px;\n  appearance: none;\n  background-color: var(--test-surface);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  background-size: 10px 7px;\n}\n\n/* Tag editor (chips + inline input) */\n.tag-editor {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  transition: var(--test-transition);\n  cursor: text;\n  min-height: 42px;\n  align-items: center;\n}\n\n.tag-editor:focus-within {\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tag-chip-editable {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 4px 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.tag-chip-editable .tag-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 10px;\n  transition: background 0.15s;\n}\n\n.tag-chip-editable .tag-remove:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-input-inline {\n  flex: 1;\n  min-width: 140px;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 13px;\n  color: var(--test-text);\n  padding: 4px 2px;\n}\n\n.tag-input-inline::placeholder {\n  color: var(--test-text-muted);\n}\n\n/* Read-only metadata section */\n.meta-section {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--test-radius-md);\n  padding: 14px 18px;\n  border: 1px solid var(--test-border);\n}\n\n.meta-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 14px;\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.meta-label {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.meta-value {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.meta-mono {\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  font-size: 11px;\n}\n\n/* Dirty indicator next to the title */\n.dirty-indicator {\n  display: inline-block;\n  margin-left: 8px;\n  font-size: 14px;\n  color: var(--mj-status-warning);\n  line-height: 1;\n  animation: pulseDot 1.8s ease-in-out infinite;\n  vertical-align: middle;\n}\n\n@keyframes pulseDot {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n.unsaved-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.unsaved-pill i {\n  font-size: 6px;\n  animation: pulseDot 1.8s ease-in-out infinite;\n}\n\n/* Pad the bottom of the tab content when the save bar is visible\n   so the bar doesn't cover the last form field. */\n.tab-content.has-savebar {\n  padding-bottom: 84px;\n}\n\n/* ===========================\n   Sticky Save Bar\n   =========================== */\n\n.save-bar {\n  position: absolute;\n  left: 16px;\n  right: 96px; /* leaves room for the bottom-right chat launcher */\n  bottom: 16px;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px 16px 12px 20px;\n  background: var(--mj-bg-surface-elevated, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, var(--test-border));\n  border-radius: 14px;\n  box-shadow: 0 12px 32px color-mix(in srgb, var(--mj-status-warning) 10%, rgba(15, 23, 42, 0.18));\n  backdrop-filter: blur(8px);\n  /* Hidden / off-screen state by default. The .save-bar--visible class\n     animates it up into view. Using `transition` (not `animation`)\n     guarantees the change runs every time isDirty toggles. */\n  opacity: 0;\n  transform: translateY(calc(100% + 32px));\n  pointer-events: none;\n  transition:\n    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n}\n\n.save-bar--visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .save-bar {\n    transition: opacity 180ms ease-out;\n    transform: none;\n  }\n  .save-bar--visible {\n    transform: none;\n  }\n}\n\n.save-bar-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.save-bar-dot {\n  color: var(--mj-status-warning);\n  font-size: 12px;\n  line-height: 1;\n  animation: pulseDot 1.8s ease-in-out infinite;\n}\n\n.save-bar-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.save-bar-text strong {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.save-bar-fields {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.save-bar-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.save-bar-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: var(--test-transition);\n  font-family: inherit;\n}\n\n.save-bar-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.save-bar-btn--primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.save-bar-btn--primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n\n.save-bar-btn--primary:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.save-bar-btn--ghost {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.save-bar-btn--ghost:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n  border-color: var(--test-text-muted);\n}\n\n.save-bar-kbd {\n  display: inline-flex;\n  gap: 3px;\n  margin-left: 6px;\n  opacity: 0.85;\n}\n\n.save-bar-kbd kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  background: color-mix(in srgb, white 18%, transparent);\n  border: 1px solid color-mix(in srgb, white 35%, transparent);\n  border-radius: 4px;\n  color: inherit;\n}\n\n@media (max-width: 640px) {\n  .save-bar {\n    left: 8px;\n    right: 8px;\n    bottom: 88px; /* push above the chat launcher on small screens */\n    flex-direction: column;\n    align-items: stretch;\n    padding: 12px;\n  }\n  .save-bar-actions {\n    justify-content: space-between;\n  }\n  .save-bar-kbd {\n    display: none;\n  }\n}\n\n/* ===========================\n   Tests Tab \u2014 Action Bar + Drag/Remove\n   =========================== */\n\n.tests-actionbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  margin-bottom: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n}\n\n.tests-actionbar-text {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n\n.tests-actionbar-text strong {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.tests-actionbar-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 8px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.tests-actionbar-hint {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.tests-actionbar-actions {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n/* Override the default test-item hover translate so drag transforms don't fight it. */\n.tests-list[cdk-drop-list] .test-item:hover,\n.tests-list .test-item.cdk-drag:hover {\n  transform: none;\n}\n\n/* The whole row is draggable. .test-content keeps the click-to-open behavior. */\n.test-item.cdk-drag {\n  position: relative;\n}\n\n.test-item .test-content {\n  cursor: pointer;\n}\n\n/* Drag handle */\n.test-drag-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 28px;\n  border-radius: 4px;\n  color: var(--test-text-muted);\n  cursor: grab;\n  flex-shrink: 0;\n  transition: background 0.15s, color 0.15s;\n  user-select: none;\n}\n\n.test-drag-handle:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--test-primary);\n}\n\n.test-drag-handle:active,\n.cdk-drag-preview .test-drag-handle {\n  cursor: grabbing;\n}\n\n/* Remove (X) button \u2014 hover-revealed */\n.test-remove-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  opacity: 0;\n  transition: opacity 0.15s, background 0.15s, color 0.15s;\n}\n\n.test-item:hover .test-remove-btn,\n.test-remove-btn:focus-visible {\n  opacity: 1;\n}\n\n.test-remove-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n  color: var(--mj-status-error);\n}\n\n.test-chevron {\n  cursor: pointer;\n}\n\n/* Inline remove-confirm */\n.test-remove-confirm {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px 4px 12px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  flex-shrink: 0;\n}\n\n.test-remove-confirm-text {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-status-error-text, var(--mj-status-error));\n}\n\n.test-remove-confirm-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid transparent;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.test-remove-confirm-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.test-remove-confirm-btn--danger {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse, white);\n}\n\n.test-remove-confirm-btn--danger:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-error) 88%, black);\n}\n\n.test-remove-confirm-btn--ghost {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.test-remove-confirm-btn--ghost:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n/* CDK drag-drop visuals */\n.cdk-drag-preview {\n  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);\n  border-radius: var(--test-radius-md);\n  background: var(--test-surface);\n  opacity: 0.95;\n}\n\n.cdk-drag-placeholder {\n  opacity: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border: 2px dashed var(--test-primary);\n  border-radius: var(--test-radius-md);\n}\n\n.cdk-drag-placeholder * {\n  visibility: hidden;\n}\n\n.cdk-drag-animating {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.tests-list.cdk-drop-list-dragging .test-item:not(.cdk-drag-placeholder) {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* ===========================\n   Add Tests Picker Dialog\n   =========================== */\n\n.picker-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 23, 42, 0.45);\n  z-index: 200;\n  animation: pickerFadeIn 180ms ease-out;\n  backdrop-filter: blur(2px);\n}\n\n@keyframes pickerFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.picker-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: min(720px, calc(100vw - 32px));\n  max-height: min(80vh, 720px);\n  z-index: 201;\n  display: flex;\n  flex-direction: column;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);\n  animation: pickerSlideUp 220ms cubic-bezier(0.16, 1, 0.3, 1);\n  overflow: hidden;\n}\n\n@keyframes pickerSlideUp {\n  from {\n    opacity: 0;\n    transform: translate(-50%, calc(-50% + 16px));\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n.picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 18px 20px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.picker-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.picker-title i {\n  color: var(--test-primary);\n}\n\n.picker-close {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  transition: background 0.15s, color 0.15s;\n}\n\n.picker-close:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n.picker-close:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.picker-search {\n  position: relative;\n  padding: 14px 20px 0 20px;\n}\n\n.picker-search-icon {\n  position: absolute;\n  top: 50%;\n  left: 32px;\n  transform: translateY(-30%);\n  color: var(--test-text-muted);\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.picker-search-input {\n  width: 100%;\n  padding: 10px 36px 10px 36px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  font-size: 14px;\n  color: var(--test-text);\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.picker-search-input:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.picker-search-clear {\n  position: absolute;\n  top: 50%;\n  right: 32px;\n  transform: translateY(-30%);\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  font-size: 11px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.picker-search-clear:hover {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n.picker-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.picker-toolbar-status {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.picker-toolbar-status strong {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 700;\n}\n\n.picker-toolbar-actions {\n  display: flex;\n  gap: 14px;\n}\n\n.picker-link-btn {\n  border: none;\n  background: transparent;\n  color: var(--test-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  padding: 0;\n  font-family: inherit;\n}\n\n.picker-link-btn:hover:not(:disabled) {\n  text-decoration: underline;\n}\n\n.picker-link-btn:disabled {\n  color: var(--test-text-muted);\n  cursor: not-allowed;\n}\n\n.picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 12px;\n  min-height: 200px;\n}\n\n.picker-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n}\n\n.picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--test-text-muted);\n}\n\n.picker-empty i {\n  font-size: 32px;\n  margin-bottom: 14px;\n  color: var(--test-text-muted);\n}\n\n.picker-empty h4 {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n.picker-empty p {\n  margin: 0;\n  font-size: 13px;\n}\n\n.picker-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.picker-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.12s, border-color 0.12s;\n  border: 1px solid transparent;\n}\n\n.picker-row:hover {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n}\n\n.picker-row:focus-visible {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.picker-row--selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--test-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.picker-row--selected:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--test-surface));\n}\n\n.picker-check {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 5px;\n  border: 1.5px solid var(--test-border);\n  background: var(--test-surface);\n  color: var(--mj-text-inverse, white);\n  font-size: 11px;\n  flex-shrink: 0;\n  transition: background 0.12s, border-color 0.12s;\n}\n\n.picker-row--selected .picker-check {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.picker-row-main {\n  flex: 1;\n  min-width: 0;\n}\n\n.picker-row-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.picker-row-desc {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-top: 2px;\n}\n\n.picker-row-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.picker-row-pill {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n  color: var(--test-text-secondary);\n  border: 1px solid var(--test-border);\n}\n\n.picker-row-pill--status[data-status=\"active\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n.picker-row-pill--status[data-status=\"disabled\"] {\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n  color: var(--test-text-muted);\n}\n\n.picker-row-pill--status[data-status=\"pending\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.picker-footer {\n  display: flex;\n  gap: 8px;\n  padding: 14px 20px;\n  border-top: 1px solid var(--test-border);\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n}\n\n.picker-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.picker-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.picker-btn--primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n}\n\n.picker-btn--primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n\n.picker-btn--ghost {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.picker-btn--ghost:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n@media (max-width: 640px) {\n  .picker-dialog {\n    width: calc(100vw - 16px);\n    max-height: calc(100vh - 32px);\n  }\n  .tests-actionbar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .tests-actionbar-actions {\n    justify-content: flex-end;\n  }\n  .test-remove-btn {\n    opacity: 1; /* always visible on touch */\n  }\n}\n\n"] }]
     }], null, { chartContainer: [{
             type: ViewChild,
             args: ['chartContainer']
         }], handleKeyboardShortcut: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
+        }], handleBeforeUnload: [{
+            type: HostListener,
+            args: ['window:beforeunload', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTestSuiteFormComponentExtended, { className: "MJTestSuiteFormComponentExtended", filePath: "src/lib/custom/Tests/test-suite-form.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTestSuiteFormComponentExtended, { className: "MJTestSuiteFormComponentExtended", filePath: "src/lib/custom/Tests/test-suite-form.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=test-suite-form.component.js.map