@memberjunction/ng-dashboards 5.21.0 → 5.23.0

package/dist/Testing/components/testing-runs-resource.component.d.ts

@@ -1,13 +1,19 @@
-import { OnInit, OnDestroy } from '@angular/core';
+import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { ResourceData } from '@memberjunction/core-entities';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { TestingDialogService } from '@memberjunction/ng-testing';
 import * as i0 from "@angular/core";
 /**
  * Testing Runs Resource - displays test execution history and monitoring
  */
 export declare class TestingRunsResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {
+    testingDialogService: TestingDialogService;
+    private cdr;
+    private destroy$;
+    constructor(testingDialogService: TestingDialogService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    OnPanelClosed(): void;
     GetResourceDisplayName(data: ResourceData): Promise<string>;
     GetResourceIconClass(data: ResourceData): Promise<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TestingRunsResourceComponent, never>;

package/dist/Testing/components/testing-runs-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing-runs-resource.component.d.ts","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;AAElE;;GAEG;AACH,qBAiBa,4BAA6B,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAElG,QAAQ,IAAI,IAAI;IAIhB,WAAW,IAAI,IAAI;IAGb,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAbpD,4BAA4B;2CAA5B,4BAA4B;CAgBxC"}
+{"version":3,"file":"testing-runs-resource.component.d.ts","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AAGzG,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;;AAElE;;GAEG;AACH,qBAmCa,4BAA6B,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAIzF,oBAAoB,EAAE,oBAAoB;IACjD,OAAO,CAAC,GAAG;IAJb,OAAO,CAAC,QAAQ,CAAuB;gBAG9B,oBAAoB,EAAE,oBAAoB,EACzC,GAAG,EAAE,iBAAiB;IAKhC,QAAQ,IAAI,IAAI;IAUhB,WAAW,IAAI,IAAI;IAKZ,aAAa,IAAI,IAAI;IAKtB,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAlCpD,4BAA4B;2CAA5B,4BAA4B;CAqCxC"}

package/dist/Testing/components/testing-runs-resource.component.js

@@ -4,19 +4,53 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
-import * as i1 from "./testing-runs.component";
+import * as i1 from "@memberjunction/ng-testing";
+import * as i2 from "@memberjunction/ng-versions";
+import * as i3 from "./testing-runs.component";
+function TestingRunsResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-slide-panel", 2);
+    i0.ɵɵlistener("Closed", function TestingRunsResourceComponent_Conditional_2_Template_mj_slide_panel_Closed_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPanelClosed()); });
+    i0.ɵɵelementStart(1, "app-test-run-dialog", 3);
+    i0.ɵɵlistener("PanelClose", function TestingRunsResourceComponent_Conditional_2_Template_app_test_run_dialog_PanelClose_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPanelClosed()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Title", (ctx_r1.testingDialogService.PanelOptions == null ? null : ctx_r1.testingDialogService.PanelOptions.testId) ? "Test Execution" : "Run Test")("Resizable", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("PanelMode", true)("selectedTestId", (ctx_r1.testingDialogService.PanelOptions == null ? null : ctx_r1.testingDialogService.PanelOptions.testId) ?? null)("selectedSuiteId", (ctx_r1.testingDialogService.PanelOptions == null ? null : ctx_r1.testingDialogService.PanelOptions.suiteId) ?? null)("runMode", (ctx_r1.testingDialogService.PanelOptions == null ? null : ctx_r1.testingDialogService.PanelOptions.mode) ?? "test");
+} }
 /**
  * Testing Runs Resource - displays test execution history and monitoring
  */
 let TestingRunsResourceComponent = class TestingRunsResourceComponent extends BaseResourceComponent {
+    testingDialogService;
+    cdr;
+    destroy$ = new Subject();
+    constructor(testingDialogService, cdr) {
+        super();
+        this.testingDialogService = testingDialogService;
+        this.cdr = cdr;
+    }
     ngOnInit() {
+        this.testingDialogService.PanelStateChanged$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.cdr.detectChanges();
+        });
         this.NotifyLoadComplete();
     }
     ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    OnPanelClosed() {
+        this.testingDialogService.ClosePanel();
+        this.cdr.markForCheck();
     }
     async GetResourceDisplayName(data) {
         return 'Runs';
@@ -24,12 +58,16 @@ let TestingRunsResourceComponent = class TestingRunsResourceComponent extends Ba
     async GetResourceIconClass(data) {
         return 'fa-solid fa-play-circle';
     }
-    static ɵfac = /*@__PURE__*/ (() => { let ɵTestingRunsResourceComponent_BaseFactory; return function TestingRunsResourceComponent_Factory(__ngFactoryType__) { return (ɵTestingRunsResourceComponent_BaseFactory || (ɵTestingRunsResourceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(TestingRunsResourceComponent)))(__ngFactoryType__ || TestingRunsResourceComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingRunsResourceComponent, selectors: [["mj-testing-runs-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 0, consts: [[1, "resource-container"]], template: function TestingRunsResourceComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function TestingRunsResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestingRunsResourceComponent)(i0.ɵɵdirectiveInject(i1.TestingDialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingRunsResourceComponent, selectors: [["mj-testing-runs-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "resource-container"], ["Mode", "slide", 3, "Title", "Resizable"], ["Mode", "slide", 3, "Closed", "Title", "Resizable"], [3, "PanelClose", "PanelMode", "selectedTestId", "selectedSuiteId", "runMode"]], template: function TestingRunsResourceComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "app-testing-runs");
             i0.ɵɵelementEnd();
-        } }, dependencies: [i1.TestingRunsComponent], styles: [".resource-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    }"] });
+            i0.ɵɵconditionalCreate(2, TestingRunsResourceComponent_Conditional_2_Template, 2, 6, "mj-slide-panel", 1);
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.testingDialogService.IsPanelOpen ? 2 : -1);
+        } }, dependencies: [i1.TestRunDialogComponent, i2.MjSlidePanelComponent, i3.TestingRunsComponent], styles: [".resource-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    }"], changeDetection: 0 });
 };
 TestingRunsResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'TestingRunsResource')
@@ -37,11 +75,28 @@ TestingRunsResourceComponent = __decorate([
 export { TestingRunsResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingRunsResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-testing-runs-resource', template: `
+        args: [{ standalone: false, selector: 'mj-testing-runs-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="resource-container">
       <app-testing-runs></app-testing-runs>
     </div>
+
+    <!-- Slide Panel for Test Execution -->
+    @if (testingDialogService.IsPanelOpen) {
+      <mj-slide-panel
+        Mode="slide"
+        [Title]="testingDialogService.PanelOptions?.testId ? 'Test Execution' : 'Run Test'"
+        [Resizable]="true"
+        (Closed)="OnPanelClosed()">
+        <app-test-run-dialog
+          [PanelMode]="true"
+          [selectedTestId]="testingDialogService.PanelOptions?.testId ?? null"
+          [selectedSuiteId]="testingDialogService.PanelOptions?.suiteId ?? null"
+          [runMode]="testingDialogService.PanelOptions?.mode ?? 'test'"
+          (PanelClose)="OnPanelClosed()">
+        </app-test-run-dialog>
+      </mj-slide-panel>
+    }
   `, styles: ["\n    .resource-container {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    }\n  "] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingRunsResourceComponent, { className: "TestingRunsResourceComponent", filePath: "src/Testing/components/testing-runs-resource.component.ts", lineNumber: 26 }); })();
+    }], () => [{ type: i1.TestingDialogService }, { type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingRunsResourceComponent, { className: "TestingRunsResourceComponent", filePath: "src/Testing/components/testing-runs-resource.component.ts", lineNumber: 47 }); })();
 //# sourceMappingURL=testing-runs-resource.component.js.map

package/dist/Testing/components/testing-runs-resource.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"testing-runs-resource.component.js","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs-resource.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;;AAElE;;GAEG;AAkBI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,qBAAqB;IAErE,QAAQ;QACN,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,WAAW;IACX,CAAC;IAED,KAAK,CAAC,sBAAsB,CAAC,IAAkB;QAC7C,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,KAAK,CAAC,oBAAoB,CAAC,IAAkB;QAC3C,OAAO,yBAAyB,CAAC;IACnC,CAAC;6RAfU,4BAA4B,yBAA5B,4BAA4B;6DAA5B,4BAA4B;YAZrC,8BAAgC;YAC9B,mCAAqC;YACvC,iBAAM;;;AAUG,4BAA4B;IAjBxC,aAAa,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;GAiB/C,4BAA4B,CAgBxC;;iFAhBY,4BAA4B;cAhBxC,SAAS;6BACI,KAAK,YACP,0BAA0B,YAC1B;;;;GAIT;;kFASU,4BAA4B","sourcesContent":["import { Component, OnInit, OnDestroy } from '@angular/core';\nimport { ResourceData } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\n\n/**\n * Testing Runs Resource - displays test execution history and monitoring\n */\n@RegisterClass(BaseResourceComponent, 'TestingRunsResource')\n@Component({\n  standalone: false,\n  selector: 'mj-testing-runs-resource',\n  template: `\n    <div class=\"resource-container\">\n      <app-testing-runs></app-testing-runs>\n    </div>\n  `,\n  styles: [`\n    .resource-container {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    }\n  `]\n})\nexport class TestingRunsResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n\n  ngOnInit(): void {\n    this.NotifyLoadComplete();\n  }\n\n  ngOnDestroy(): void {\n  }\n\n  async GetResourceDisplayName(data: ResourceData): Promise<string> {\n    return 'Runs';\n  }\n\n  async GetResourceIconClass(data: ResourceData): Promise<string> {\n    return 'fa-solid fa-play-circle';\n  }\n}\n"]}
+{"version":3,"file":"testing-runs-resource.component.js","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs-resource.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAwC,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACzG,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;;;;;;IAkB5D,yCAI6B;IAA3B,0MAAU,sBAAe,KAAC;IAC1B,8CAKiC;IAA/B,uNAAc,sBAAe,KAAC;IAElC,AADE,iBAAsB,EACP;;;IATf,AADA,mKAAmF,mBACjE;IAGhB,cAAkB;IAGlB,AADA,AADA,AADA,gCAAkB,uIACkD,yIACE,gIACT;;AAxBvE;;GAEG;AAoCI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,qBAAqB;IAI5D;IACC;IAJF,QAAQ,GAAG,IAAI,OAAO,EAAQ,CAAC;IAEvC,YACS,oBAA0C,EACzC,GAAsB;QAE9B,KAAK,EAAE,CAAC;QAHD,yBAAoB,GAApB,oBAAoB,CAAsB;QACzC,QAAG,GAAH,GAAG,CAAmB;IAGhC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,IAAI,CAC/C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB,CAAC,SAAS,CAAC,GAAG,EAAE;YACf,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAEM,aAAa;QAClB,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAC;QACvC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,sBAAsB,CAAC,IAAkB;QAC7C,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,KAAK,CAAC,oBAAoB,CAAC,IAAkB;QAC3C,OAAO,yBAAyB,CAAC;IACnC,CAAC;sHApCU,4BAA4B;6DAA5B,4BAA4B;YA7BrC,8BAAgC;YAC9B,mCAAqC;YACvC,iBAAM;YAGN,yGAAwC;;YAAxC,eAcC;YAdD,+DAcC;;;AAUQ,4BAA4B;IAnCxC,aAAa,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;GAmC/C,4BAA4B,CAqCxC;;iFArCY,4BAA4B;cAlCxC,SAAS;6BACI,KAAK,YACP,0BAA0B,mBACnB,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;GAqBT;;kFASU,4BAA4B","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ResourceData } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { TestingDialogService } from '@memberjunction/ng-testing';\n\n/**\n * Testing Runs Resource - displays test execution history and monitoring\n */\n@RegisterClass(BaseResourceComponent, 'TestingRunsResource')\n@Component({\n  standalone: false,\n  selector: 'mj-testing-runs-resource',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"resource-container\">\n      <app-testing-runs></app-testing-runs>\n    </div>\n\n    <!-- Slide Panel for Test Execution -->\n    @if (testingDialogService.IsPanelOpen) {\n      <mj-slide-panel\n        Mode=\"slide\"\n        [Title]=\"testingDialogService.PanelOptions?.testId ? 'Test Execution' : 'Run Test'\"\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 ?? 'test'\"\n          (PanelClose)=\"OnPanelClosed()\">\n        </app-test-run-dialog>\n      </mj-slide-panel>\n    }\n  `,\n  styles: [`\n    .resource-container {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    }\n  `]\n})\nexport class TestingRunsResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n  private destroy$ = new Subject<void>();\n\n  constructor(\n    public testingDialogService: TestingDialogService,\n    private cdr: ChangeDetectorRef\n  ) {\n    super();\n  }\n\n  ngOnInit(): void {\n    this.testingDialogService.PanelStateChanged$.pipe(\n      takeUntil(this.destroy$)\n    ).subscribe(() => {\n      this.cdr.detectChanges();\n    });\n\n    this.NotifyLoadComplete();\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  public OnPanelClosed(): void {\n    this.testingDialogService.ClosePanel();\n    this.cdr.markForCheck();\n  }\n\n  async GetResourceDisplayName(data: ResourceData): Promise<string> {\n    return 'Runs';\n  }\n\n  async GetResourceIconClass(data: ResourceData): Promise<string> {\n    return 'fa-solid fa-play-circle';\n  }\n}\n"]}

package/dist/Testing/components/testing-runs.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing-runs.component.d.ts","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"testing-runs.component.d.ts","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs.component.ts"],"names":[],"mappings":"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"}

package/dist/Testing/components/testing-runs.component.js

@@ -433,7 +433,9 @@ export class TestingRunsComponent {
         }, 1000);
     }
     StartNewTest() {
-        this.testingDialogService.OpenTestRunDialog({ viewContainerRef: this.viewContainerRef });
+        console.log('[TestingRuns] StartNewTest called, service IsPanelOpen before:', this.testingDialogService.IsPanelOpen);
+        this.testingDialogService.OpenAsPanel();
+        console.log('[TestingRuns] After OpenAsPanel, IsPanelOpen:', this.testingDialogService.IsPanelOpen);
     }
     SelectRun(run) {
         this.SelectedRun = run;
@@ -451,7 +453,7 @@ export class TestingRunsComponent {
     RerunTest(run) {
         if (!run.testId)
             return;
-        this.testingDialogService.OpenTestDialog(run.testId, this.viewContainerRef);
+        this.testingDialogService.OpenTestPanel(run.testId);
     }
     async SubmitFeedback() {
         if (!this.SelectedRun)
@@ -736,7 +738,7 @@ export class TestingRunsComponent {
             i0.ɵɵconditional(i0.ɵɵpipeBind1(54, 14, ctx.instrumentationService.isLoading$) ? 53 : ((tmp_8_0 = i0.ɵɵpipeBind1(55, 16, ctx.FilteredRuns$)) == null ? null : tmp_8_0.length) === 0 ? 56 : 57);
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.SelectedRun ? 58 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i2.TestStatusBadgeComponent, i2.ScoreIndicatorComponent, i2.CostDisplayComponent, i2.EvaluationBadgeComponent, i2.ExecutionContextComponent, i4.LoadingComponent, i5.AsyncPipe], styles: ["\n\n\n\n\n    .runs-container[_ngcontent-%COMP%] {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      position: relative;\n    }\n\n    \n\n    .page-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n    }\n\n    .header-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 22px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 10px;\n    }\n\n    \n\n    .btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .btn-secondary[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    \n\n    .filter-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 14px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .filter-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .filter-chips[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n\n    .chip[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .chip[_ngcontent-%COMP%]:hover {\n      background: var(--mj-border-default);\n    }\n\n    .chip.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"running\"][_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"passed\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n    }\n\n    .chip.active[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    .chip.active[data-status=\"error\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-warning);\n      border-color: var(--mj-status-warning);\n    }\n\n    .result-count[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .filter-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .time-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      background: var(--mj-bg-surface);\n      cursor: pointer;\n    }\n\n    .time-select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .search-box[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      min-width: 220px;\n      transition: border-color 0.2s ease;\n    }\n\n    .search-box[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .clear-search[_ngcontent-%COMP%] {\n      border: none;\n      background: transparent;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px 4px;\n      border-radius: 4px;\n    }\n\n    .clear-search[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-muted);\n      background: var(--mj-border-default);\n    }\n\n    \n\n    .stats-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 14px;\n      margin-bottom: 20px;\n    }\n\n    .stat-card[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 16px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .stat-icon[_ngcontent-%COMP%] {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n    }\n\n    .stat-icon.total[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.pass[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n    .stat-icon.duration[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.cost[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n    .stat-body[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .stat-value[_ngcontent-%COMP%] {\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.1;\n    }\n\n    .stat-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-top: 2px;\n    }\n\n    \n\n    .runs-table-wrapper[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-row.is-selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .table-row.is-running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .table-row.is-running[_ngcontent-%COMP%]   .test-name-link[_ngcontent-%COMP%]::after {\n      content: '';\n      display: inline-block;\n      width: 8px;\n      height: 8px;\n      background: var(--mj-brand-primary);\n      border-radius: 50%;\n      margin-left: 8px;\n      animation: _ngcontent-%COMP%_pulse-dot 1.5s infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse-dot {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.3; }\n    }\n\n    .col[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      overflow: hidden;\n    }\n\n    .test-name-link[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .test-name-link[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-primary);\n      text-decoration: underline;\n    }\n\n    .col-actions[_ngcontent-%COMP%] {\n      gap: 6px;\n      justify-content: flex-end;\n    }\n\n    .icon-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 8px;\n      font-size: 13px;\n      transition: all 0.2s ease;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    \n\n    .table-loading[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n    }\n\n    .table-empty[_ngcontent-%COMP%] {\n      padding: 80px 40px;\n      text-align: center;\n    }\n\n    .table-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-strong);\n      margin-bottom: 16px;\n    }\n\n    .table-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      margin: 0 0 8px 0;\n    }\n\n    .empty-hint[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .detail-overlay[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 999;\n    }\n\n    \n\n    .detail-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 520px;\n      max-width: 90vw;\n      background: var(--mj-bg-surface);\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      animation: _ngcontent-%COMP%_slideIn 0.25s ease-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_slideIn {\n      from { transform: translateX(100%); }\n      to { transform: translateX(0); }\n    }\n\n    .detail-panel-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 20px 24px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-card);\n    }\n\n    .detail-title-section[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .detail-title-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-left: 12px;\n      transition: all 0.15s ease;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .detail-panel-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .detail-metrics[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      margin-bottom: 24px;\n    }\n\n    .detail-metric[_ngcontent-%COMP%] {\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .dm-label[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .dm-value[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      margin: 0 0 12px 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    \n\n    .existing-feedback[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 16px;\n      align-items: center;\n      padding: 14px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 8px;\n      font-size: 13px;\n    }\n\n    .feedback-label[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .feedback-value[_ngcontent-%COMP%] {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .feedback-comments[_ngcontent-%COMP%] {\n      width: 100%;\n      margin-top: 8px;\n      padding-top: 8px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      font-style: italic;\n    }\n\n    .feedback-form[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .feedback-form[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .rating-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n    }\n\n    .rating-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .rating-btn[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .rating-btn.selected[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .toggle-group[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .toggle-btn.active[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 10px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      resize: vertical;\n      box-sizing: border-box;\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .submit-feedback-btn[_ngcontent-%COMP%] {\n      align-self: flex-start;\n    }\n\n    \n\n    @media (max-width: 1400px) {\n      .stats-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-left[_ngcontent-%COMP%], .filter-right[_ngcontent-%COMP%] {\n        justify-content: center;\n      }\n\n      .table-header[_ngcontent-%COMP%], .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 120px 100px 100px 80px;\n      }\n\n      .col-eval[_ngcontent-%COMP%], .col-time[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .stats-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .detail-panel[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }"], changeDetection: 0 });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i2.TestStatusBadgeComponent, i2.ScoreIndicatorComponent, i2.CostDisplayComponent, i2.EvaluationBadgeComponent, i2.ExecutionContextComponent, i4.LoadingComponent, i5.AsyncPipe], styles: ["\n\n\n\n\n    .runs-container[_ngcontent-%COMP%] {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      position: relative;\n    }\n\n    \n\n    .page-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n    }\n\n    .header-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 22px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 10px;\n    }\n\n    \n\n    .btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .btn-secondary[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    \n\n    .filter-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 14px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .filter-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .filter-chips[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .chip[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .chip[_ngcontent-%COMP%]:hover {\n      background: var(--mj-border-default);\n    }\n\n    .chip.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"running\"][_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"passed\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n    }\n\n    .chip.active[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    .chip.active[data-status=\"error\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-warning);\n      border-color: var(--mj-status-warning);\n    }\n\n    .result-count[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .filter-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .time-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      background: var(--mj-bg-surface);\n      cursor: pointer;\n    }\n\n    .time-select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .search-box[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      min-width: 220px;\n      transition: border-color 0.2s ease;\n    }\n\n    .search-box[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .clear-search[_ngcontent-%COMP%] {\n      border: none;\n      background: transparent;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px 4px;\n      border-radius: 4px;\n    }\n\n    .clear-search[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-muted);\n      background: var(--mj-border-default);\n    }\n\n    \n\n    .stats-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 14px;\n      margin-bottom: 20px;\n    }\n\n    .stat-card[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 16px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .stat-icon[_ngcontent-%COMP%] {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n    }\n\n    .stat-icon.total[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.pass[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n    .stat-icon.duration[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.cost[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n    .stat-body[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .stat-value[_ngcontent-%COMP%] {\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.1;\n    }\n\n    .stat-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-top: 2px;\n    }\n\n    \n\n    .runs-table-wrapper[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-row.is-selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .table-row.is-running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .table-row.is-running[_ngcontent-%COMP%]   .test-name-link[_ngcontent-%COMP%]::after {\n      content: '';\n      display: inline-block;\n      width: 8px;\n      height: 8px;\n      background: var(--mj-brand-primary);\n      border-radius: 50%;\n      margin-left: 8px;\n      animation: _ngcontent-%COMP%_pulse-dot 1.5s infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse-dot {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.3; }\n    }\n\n    .col[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      overflow: hidden;\n    }\n\n    .test-name-link[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .test-name-link[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-primary);\n      text-decoration: underline;\n    }\n\n    .col-actions[_ngcontent-%COMP%] {\n      gap: 6px;\n      justify-content: flex-end;\n    }\n\n    .icon-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 8px;\n      font-size: 13px;\n      transition: all 0.2s ease;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    \n\n    .table-loading[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n    }\n\n    .table-empty[_ngcontent-%COMP%] {\n      padding: 80px 40px;\n      text-align: center;\n    }\n\n    .table-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-strong);\n      margin-bottom: 16px;\n    }\n\n    .table-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      margin: 0 0 8px 0;\n    }\n\n    .empty-hint[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .detail-overlay[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 999;\n    }\n\n    \n\n    .detail-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 520px;\n      max-width: 90vw;\n      background: var(--mj-bg-surface);\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      animation: _ngcontent-%COMP%_slideIn 0.25s ease-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_slideIn {\n      from { transform: translateX(100%); }\n      to { transform: translateX(0); }\n    }\n\n    .detail-panel-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 20px 24px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-card);\n    }\n\n    .detail-title-section[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .detail-title-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-left: 12px;\n      transition: all 0.15s ease;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .detail-panel-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .detail-metrics[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      margin-bottom: 24px;\n    }\n\n    .detail-metric[_ngcontent-%COMP%] {\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .dm-label[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .dm-value[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      margin: 0 0 12px 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    \n\n    .existing-feedback[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 16px;\n      align-items: center;\n      padding: 14px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 8px;\n      font-size: 13px;\n    }\n\n    .feedback-label[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .feedback-value[_ngcontent-%COMP%] {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .feedback-comments[_ngcontent-%COMP%] {\n      width: 100%;\n      margin-top: 8px;\n      padding-top: 8px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      font-style: italic;\n    }\n\n    .feedback-form[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .feedback-form[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .rating-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n    }\n\n    .rating-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .rating-btn[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .rating-btn.selected[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .toggle-group[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .toggle-btn.active[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 10px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      resize: vertical;\n      box-sizing: border-box;\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .submit-feedback-btn[_ngcontent-%COMP%] {\n      align-self: flex-start;\n    }\n\n    \n\n    @media (max-width: 1400px) {\n      .stats-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-left[_ngcontent-%COMP%], .filter-right[_ngcontent-%COMP%] {\n        justify-content: center;\n      }\n\n      .table-header[_ngcontent-%COMP%], .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 120px 100px 100px 80px;\n      }\n\n      .col-eval[_ngcontent-%COMP%], .col-time[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .stats-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .detail-panel[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }\n\n    @media (max-width: 480px) {\n      .table-header[_ngcontent-%COMP%], .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 80px 60px;\n      }\n\n      .col-score[_ngcontent-%COMP%], .col-duration[_ngcontent-%COMP%] {\n        display: none;\n      }\n\n      .chip[_ngcontent-%COMP%] {\n        min-height: 44px;\n        padding: 8px 14px;\n      }\n\n      .table-row[_ngcontent-%COMP%] {\n        min-height: 44px;\n      }\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingRunsComponent, [{
         type: Component,
@@ -1054,7 +1056,7 @@ export class TestingRunsComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    /* ==========================================\n       Testing Runs Component\n       ========================================== */\n\n    .runs-container {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      position: relative;\n    }\n\n    /* Page Header */\n    .page-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 22px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 10px;\n    }\n\n    /* Buttons */\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .btn-secondary {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    /* Filter Bar */\n    .filter-bar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 14px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .filter-left {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .filter-chips {\n      display: flex;\n      gap: 6px;\n    }\n\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .chip:hover {\n      background: var(--mj-border-default);\n    }\n\n    .chip.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"running\"] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"passed\"] {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n    }\n\n    .chip.active[data-status=\"failed\"] {\n      background: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    .chip.active[data-status=\"error\"] {\n      background: var(--mj-status-warning);\n      border-color: var(--mj-status-warning);\n    }\n\n    .result-count {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .filter-right {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .time-select {\n      padding: 8px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      background: var(--mj-bg-surface);\n      cursor: pointer;\n    }\n\n    .time-select:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .search-box {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      min-width: 220px;\n      transition: border-color 0.2s ease;\n    }\n\n    .search-box:focus-within {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .search-box i {\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-box input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .search-box input::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .clear-search {\n      border: none;\n      background: transparent;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px 4px;\n      border-radius: 4px;\n    }\n\n    .clear-search:hover {\n      color: var(--mj-text-muted);\n      background: var(--mj-border-default);\n    }\n\n    /* Stats Row */\n    .stats-row {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 14px;\n      margin-bottom: 20px;\n    }\n\n    .stat-card {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 16px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .stat-icon {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n    }\n\n    .stat-icon.total { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.pass { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n    .stat-icon.duration { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.cost { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n    .stat-body {\n      flex: 1;\n    }\n\n    .stat-value {\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.1;\n    }\n\n    .stat-label {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-top: 2px;\n    }\n\n    /* Runs Table */\n    .runs-table-wrapper {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      align-items: center;\n    }\n\n    .table-row:last-child {\n      border-bottom: none;\n    }\n\n    .table-row:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-row.is-selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .table-row.is-running {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .table-row.is-running .test-name-link::after {\n      content: '';\n      display: inline-block;\n      width: 8px;\n      height: 8px;\n      background: var(--mj-brand-primary);\n      border-radius: 50%;\n      margin-left: 8px;\n      animation: pulse-dot 1.5s infinite;\n    }\n\n    @keyframes pulse-dot {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.3; }\n    }\n\n    .col {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      overflow: hidden;\n    }\n\n    .test-name-link {\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .test-name-link:hover {\n      color: var(--mj-brand-primary);\n      text-decoration: underline;\n    }\n\n    .col-actions {\n      gap: 6px;\n      justify-content: flex-end;\n    }\n\n    .icon-btn {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 8px;\n      font-size: 13px;\n      transition: all 0.2s ease;\n    }\n\n    .icon-btn:hover {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    /* Table states */\n    .table-loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n    }\n\n    .table-empty {\n      padding: 80px 40px;\n      text-align: center;\n    }\n\n    .table-empty i {\n      font-size: 48px;\n      color: var(--mj-border-strong);\n      margin-bottom: 16px;\n    }\n\n    .table-empty p {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      margin: 0 0 8px 0;\n    }\n\n    .empty-hint {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    /* Detail Panel Overlay */\n    .detail-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 999;\n    }\n\n    /* Detail Panel */\n    .detail-panel {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 520px;\n      max-width: 90vw;\n      background: var(--mj-bg-surface);\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.25s ease-out;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateX(100%); }\n      to { transform: translateX(0); }\n    }\n\n    .detail-panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 20px 24px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-card);\n    }\n\n    .detail-title-section {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .detail-title-section h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .close-btn {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-left: 12px;\n      transition: all 0.15s ease;\n    }\n\n    .close-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .detail-panel-body {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .detail-metrics {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      margin-bottom: 24px;\n    }\n\n    .detail-metric {\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .dm-label {\n      display: block;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .dm-value {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-section {\n      margin-bottom: 24px;\n    }\n\n    .detail-section h4 {\n      font-size: 13px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      margin: 0 0 12px 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .detail-section h4 i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    /* Feedback Section */\n    .existing-feedback {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 16px;\n      align-items: center;\n      padding: 14px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 8px;\n      font-size: 13px;\n    }\n\n    .feedback-label {\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .feedback-value {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .feedback-comments {\n      width: 100%;\n      margin-top: 8px;\n      padding-top: 8px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      font-style: italic;\n    }\n\n    .feedback-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .feedback-form label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .rating-buttons {\n      display: flex;\n      gap: 4px;\n    }\n\n    .rating-btn {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .rating-btn:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .rating-btn.selected {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .toggle-group {\n      display: flex;\n      gap: 8px;\n    }\n\n    .toggle-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .toggle-btn.active {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .comments-row textarea {\n      width: 100%;\n      padding: 10px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      resize: vertical;\n      box-sizing: border-box;\n    }\n\n    .comments-row textarea:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .comments-row textarea::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .submit-feedback-btn {\n      align-self: flex-start;\n    }\n\n    /* Responsive */\n    @media (max-width: 1400px) {\n      .stats-row {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-left, .filter-right {\n        justify-content: center;\n      }\n\n      .table-header, .table-row {\n        grid-template-columns: 2fr 120px 100px 100px 80px;\n      }\n\n      .col-eval, .col-time {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .stats-row {\n        grid-template-columns: 1fr;\n      }\n\n      .detail-panel {\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }\n  "] }]
+  `, styles: ["\n    /* ==========================================\n       Testing Runs Component\n       ========================================== */\n\n    .runs-container {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      position: relative;\n    }\n\n    /* Page Header */\n    .page-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 22px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 10px;\n    }\n\n    /* Buttons */\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .btn-secondary {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    /* Filter Bar */\n    .filter-bar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 14px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .filter-left {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .filter-chips {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .chip:hover {\n      background: var(--mj-border-default);\n    }\n\n    .chip.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"running\"] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"passed\"] {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n    }\n\n    .chip.active[data-status=\"failed\"] {\n      background: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    .chip.active[data-status=\"error\"] {\n      background: var(--mj-status-warning);\n      border-color: var(--mj-status-warning);\n    }\n\n    .result-count {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .filter-right {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .time-select {\n      padding: 8px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      background: var(--mj-bg-surface);\n      cursor: pointer;\n    }\n\n    .time-select:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .search-box {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      min-width: 220px;\n      transition: border-color 0.2s ease;\n    }\n\n    .search-box:focus-within {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .search-box i {\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-box input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .search-box input::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .clear-search {\n      border: none;\n      background: transparent;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px 4px;\n      border-radius: 4px;\n    }\n\n    .clear-search:hover {\n      color: var(--mj-text-muted);\n      background: var(--mj-border-default);\n    }\n\n    /* Stats Row */\n    .stats-row {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 14px;\n      margin-bottom: 20px;\n    }\n\n    .stat-card {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 16px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .stat-icon {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n    }\n\n    .stat-icon.total { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.pass { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n    .stat-icon.duration { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.cost { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n    .stat-body {\n      flex: 1;\n    }\n\n    .stat-value {\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.1;\n    }\n\n    .stat-label {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-top: 2px;\n    }\n\n    /* Runs Table */\n    .runs-table-wrapper {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      align-items: center;\n    }\n\n    .table-row:last-child {\n      border-bottom: none;\n    }\n\n    .table-row:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-row.is-selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .table-row.is-running {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .table-row.is-running .test-name-link::after {\n      content: '';\n      display: inline-block;\n      width: 8px;\n      height: 8px;\n      background: var(--mj-brand-primary);\n      border-radius: 50%;\n      margin-left: 8px;\n      animation: pulse-dot 1.5s infinite;\n    }\n\n    @keyframes pulse-dot {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.3; }\n    }\n\n    .col {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      overflow: hidden;\n    }\n\n    .test-name-link {\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .test-name-link:hover {\n      color: var(--mj-brand-primary);\n      text-decoration: underline;\n    }\n\n    .col-actions {\n      gap: 6px;\n      justify-content: flex-end;\n    }\n\n    .icon-btn {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 8px;\n      font-size: 13px;\n      transition: all 0.2s ease;\n    }\n\n    .icon-btn:hover {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    /* Table states */\n    .table-loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n    }\n\n    .table-empty {\n      padding: 80px 40px;\n      text-align: center;\n    }\n\n    .table-empty i {\n      font-size: 48px;\n      color: var(--mj-border-strong);\n      margin-bottom: 16px;\n    }\n\n    .table-empty p {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      margin: 0 0 8px 0;\n    }\n\n    .empty-hint {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    /* Detail Panel Overlay */\n    .detail-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 999;\n    }\n\n    /* Detail Panel */\n    .detail-panel {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 520px;\n      max-width: 90vw;\n      background: var(--mj-bg-surface);\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.25s ease-out;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateX(100%); }\n      to { transform: translateX(0); }\n    }\n\n    .detail-panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 20px 24px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-card);\n    }\n\n    .detail-title-section {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .detail-title-section h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .close-btn {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-left: 12px;\n      transition: all 0.15s ease;\n    }\n\n    .close-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .detail-panel-body {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .detail-metrics {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      margin-bottom: 24px;\n    }\n\n    .detail-metric {\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .dm-label {\n      display: block;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .dm-value {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-section {\n      margin-bottom: 24px;\n    }\n\n    .detail-section h4 {\n      font-size: 13px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      margin: 0 0 12px 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .detail-section h4 i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    /* Feedback Section */\n    .existing-feedback {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 16px;\n      align-items: center;\n      padding: 14px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 8px;\n      font-size: 13px;\n    }\n\n    .feedback-label {\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .feedback-value {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .feedback-comments {\n      width: 100%;\n      margin-top: 8px;\n      padding-top: 8px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      font-style: italic;\n    }\n\n    .feedback-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .feedback-form label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .rating-buttons {\n      display: flex;\n      gap: 4px;\n    }\n\n    .rating-btn {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .rating-btn:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .rating-btn.selected {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .toggle-group {\n      display: flex;\n      gap: 8px;\n    }\n\n    .toggle-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .toggle-btn.active {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .comments-row textarea {\n      width: 100%;\n      padding: 10px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      resize: vertical;\n      box-sizing: border-box;\n    }\n\n    .comments-row textarea:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .comments-row textarea::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .submit-feedback-btn {\n      align-self: flex-start;\n    }\n\n    /* Responsive */\n    @media (max-width: 1400px) {\n      .stats-row {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-left, .filter-right {\n        justify-content: center;\n      }\n\n      .table-header, .table-row {\n        grid-template-columns: 2fr 120px 100px 100px 80px;\n      }\n\n      .col-eval, .col-time {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .stats-row {\n        grid-template-columns: 1fr;\n      }\n\n      .detail-panel {\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }\n\n    @media (max-width: 480px) {\n      .table-header, .table-row {\n        grid-template-columns: 1fr 80px 60px;\n      }\n\n      .col-score, .col-duration {\n        display: none;\n      }\n\n      .chip {\n        min-height: 44px;\n        padding: 8px 14px;\n      }\n\n      .table-row {\n        min-height: 44px;\n      }\n    }\n  "] }]
     }], () => [{ type: i1.TestingInstrumentationService }, { type: i2.TestingDialogService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }], { initialState: [{
             type: Input
         }], stateChange: [{
@@ -1063,5 +1065,5 @@ export class TestingRunsComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingRunsComponent, { className: "TestingRunsComponent", filePath: "src/Testing/components/testing-runs.component.ts", lineNumber: 1103 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingRunsComponent, { className: "TestingRunsComponent", filePath: "src/Testing/components/testing-runs.component.ts", lineNumber: 1123 }); })();
 //# sourceMappingURL=testing-runs.component.js.map