@memberjunction/ng-dashboards 5.22.0 → 5.24.0

package/dist/Scheduling/components/scheduling-overview.component.js

@@ -3,30 +3,31 @@ import { interval } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/scheduling-instrumentation.service";
 import * as i2 from "@angular/common";
-import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-shared-generic";
 function SchedulingOverviewComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵelement(1, "mj-loading", 8);
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "mj-loading", 9);
     i0.ɵɵelementEnd();
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵelement(1, "i", 53);
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No recent executions");
     i0.ɵɵelementEnd()();
 } }
 function SchedulingOverviewComponent_Conditional_10_For_67_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43)(1, "div", 54);
-    i0.ɵɵelement(2, "i", 55);
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 55);
+    i0.ɵɵelement(2, "i", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 56)(4, "div", 57);
+    i0.ɵɵelementStart(3, "div", 57)(4, "div", 58);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 58);
+    i0.ɵɵelementStart(6, "div", 59);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 59);
+    i0.ɵɵelementStart(8, "div", 60);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -45,7 +46,7 @@ function SchedulingOverviewComponent_Conditional_10_For_67_Template(rf, ctx) { i
     i0.ɵɵtextInterpolate1(" ", exec_r1.status, " ");
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_74_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵelementStart(0, "span", 47);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -54,34 +55,34 @@ function SchedulingOverviewComponent_Conditional_10_Conditional_74_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r1.Alerts.length);
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_75_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 47);
+    i0.ɵɵelementStart(0, "span", 48);
     i0.ɵɵtext(1, "0");
     i0.ɵɵelementEnd();
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_77_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48);
-    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵelement(1, "i", 61);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No active alerts");
     i0.ɵɵelementEnd()();
 } }
 function SchedulingOverviewComponent_Conditional_10_For_79_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵelementStart(0, "button", 67);
     i0.ɵɵlistener("click", function SchedulingOverviewComponent_Conditional_10_For_79_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const alert_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ReleaseLock(alert_r4.jobId)); });
     i0.ɵɵtext(1, " Release ");
     i0.ɵɵelementEnd();
 } }
 function SchedulingOverviewComponent_Conditional_10_For_79_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵelement(1, "i", 61);
-    i0.ɵɵelementStart(2, "div", 62)(3, "div", 63);
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementStart(2, "div", 63)(3, "div", 64);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 64);
+    i0.ɵɵelementStart(5, "div", 65);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, SchedulingOverviewComponent_Conditional_10_For_79_Conditional_7_Template, 2, 0, "button", 65);
+    i0.ɵɵconditionalCreate(7, SchedulingOverviewComponent_Conditional_10_For_79_Conditional_7_Template, 2, 0, "button", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const alert_r4 = ctx.$implicit;
@@ -97,22 +98,22 @@ function SchedulingOverviewComponent_Conditional_10_For_79_Template(rf, ctx) { i
     i0.ɵɵconditional(alert_r4.type === "stale-lock" && alert_r4.jobId ? 7 : -1);
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_88_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵelement(1, "i", 67);
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No upcoming executions");
     i0.ɵɵelementEnd()();
 } }
 function SchedulingOverviewComponent_Conditional_10_For_90_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 68)(2, "div", 69);
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 69)(2, "div", 70);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 70);
+    i0.ɵɵelementStart(4, "div", 71);
     i0.ɵɵtext(5);
-    i0.ɵɵelementStart(6, "span", 71);
+    i0.ɵɵelementStart(6, "span", 72);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 72);
+    i0.ɵɵelementStart(8, "div", 73);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -131,30 +132,30 @@ function SchedulingOverviewComponent_Conditional_10_For_90_Template(rf, ctx) { i
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 80);
+    i0.ɵɵelementStart(0, "button", 81);
     i0.ɵɵlistener("click", function SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const lock_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ReleaseLock(lock_r7.jobId)); });
-    i0.ɵɵelement(1, "i", 81);
+    i0.ɵɵelement(1, "i", 82);
     i0.ɵɵtext(2, " Release ");
     i0.ɵɵelementEnd();
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 76);
+    i0.ɵɵelementStart(0, "tr")(1, "td", 77);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 77);
+    i0.ɵɵelementStart(3, "td", 78);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "td", 77);
+    i0.ɵɵelementStart(5, "td", 78);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "td", 77);
+    i0.ɵɵelementStart(7, "td", 78);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td")(10, "span", 78);
+    i0.ɵɵelementStart(9, "td")(10, "span", 79);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(12, "td");
-    i0.ɵɵconditionalCreate(13, SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Conditional_13_Template, 3, 0, "button", 79);
+    i0.ɵɵconditionalCreate(13, SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Conditional_13_Template, 3, 0, "button", 80);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const lock_r7 = ctx.$implicit;
@@ -176,14 +177,14 @@ function SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Templa
     i0.ɵɵconditional(lock_r7.isStale ? 13 : -1);
 } }
 function SchedulingOverviewComponent_Conditional_10_Conditional_91_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 37)(2, "div", 38);
-    i0.ɵɵelement(3, "i", 73);
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 38)(2, "div", 39);
+    i0.ɵɵelement(3, "i", 74);
     i0.ɵɵtext(4, " Active Locks ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 40);
+    i0.ɵɵelementStart(5, "span", 41);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 41)(8, "table", 74)(9, "thead")(10, "tr")(11, "th");
+    i0.ɵɵelementStart(7, "div", 42)(8, "table", 75)(9, "thead")(10, "tr")(11, "th");
     i0.ɵɵtext(12, "Job");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "th");
@@ -201,7 +202,7 @@ function SchedulingOverviewComponent_Conditional_10_Conditional_91_Template(rf,
     i0.ɵɵelement(21, "th");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(22, "tbody");
-    i0.ɵɵrepeaterCreate(23, SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Template, 14, 10, "tr", 75, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(23, SchedulingOverviewComponent_Conditional_10_Conditional_91_For_24_Template, 14, 10, "tr", 76, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -211,103 +212,103 @@ function SchedulingOverviewComponent_Conditional_10_Conditional_91_Template(rf,
     i0.ɵɵrepeater(ctx_r1.Locks);
 } }
 function SchedulingOverviewComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7)(1, "div", 9)(2, "div", 10);
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 10)(2, "div", 11);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 11);
-    i0.ɵɵelement(4, "circle", 12)(5, "circle", 13);
+    i0.ɵɵelementStart(3, "svg", 12);
+    i0.ɵɵelement(4, "circle", 13)(5, "circle", 14);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "div", 14);
+    i0.ɵɵelementStart(6, "div", 15);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 15)(9, "div", 16);
+    i0.ɵɵelementStart(8, "div", 16)(9, "div", 17);
     i0.ɵɵtext(10, "System Health");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 17)(12, "span");
-    i0.ɵɵelement(13, "i", 18);
+    i0.ɵɵelementStart(11, "div", 18)(12, "span");
+    i0.ɵɵelement(13, "i", 19);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "span");
-    i0.ɵɵelement(16, "i", 19);
+    i0.ɵɵelement(16, "i", 20);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "span");
-    i0.ɵɵelement(19, "i", 20);
+    i0.ɵɵelement(19, "i", 21);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(21, "div", 21)(22, "div", 22)(23, "div", 23);
-    i0.ɵɵelement(24, "i", 24);
+    i0.ɵɵelementStart(21, "div", 22)(22, "div", 23)(23, "div", 24);
+    i0.ɵɵelement(24, "i", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 25)(26, "div", 26);
+    i0.ɵɵelementStart(25, "div", 26)(26, "div", 27);
     i0.ɵɵtext(27);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 27);
+    i0.ɵɵelementStart(28, "div", 28);
     i0.ɵɵtext(29, "Active Jobs");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(30, "div", 22)(31, "div", 28);
-    i0.ɵɵelement(32, "i", 29);
+    i0.ɵɵelementStart(30, "div", 23)(31, "div", 29);
+    i0.ɵɵelement(32, "i", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "div", 25)(34, "div", 26);
+    i0.ɵɵelementStart(33, "div", 26)(34, "div", 27);
     i0.ɵɵtext(35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "div", 27);
+    i0.ɵɵelementStart(36, "div", 28);
     i0.ɵɵtext(37, "Due Next Hour");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(38, "div", 22)(39, "div", 30);
-    i0.ɵɵelement(40, "i", 31);
+    i0.ɵɵelementStart(38, "div", 23)(39, "div", 31);
+    i0.ɵɵelement(40, "i", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "div", 25)(42, "div", 26);
+    i0.ɵɵelementStart(41, "div", 26)(42, "div", 27);
     i0.ɵɵtext(43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "div", 27);
+    i0.ɵɵelementStart(44, "div", 28);
     i0.ɵɵtext(45, "Runs (24h)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "div", 32);
+    i0.ɵɵelementStart(46, "div", 33);
     i0.ɵɵtext(47);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(48, "div", 22)(49, "div", 33);
-    i0.ɵɵelement(50, "i", 34);
+    i0.ɵɵelementStart(48, "div", 23)(49, "div", 34);
+    i0.ɵɵelement(50, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(51, "div", 25)(52, "div", 26);
+    i0.ɵɵelementStart(51, "div", 26)(52, "div", 27);
     i0.ɵɵtext(53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "div", 27);
+    i0.ɵɵelementStart(54, "div", 28);
     i0.ɵɵtext(55, "Running Now");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(56, "div", 35)(57, "div", 36)(58, "div", 37)(59, "div", 38);
-    i0.ɵɵelement(60, "i", 39);
+    i0.ɵɵelementStart(56, "div", 36)(57, "div", 37)(58, "div", 38)(59, "div", 39);
+    i0.ɵɵelement(60, "i", 40);
     i0.ɵɵtext(61, " Live Executions ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "span", 40);
+    i0.ɵɵelementStart(62, "span", 41);
     i0.ɵɵtext(63);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(64, "div", 41);
-    i0.ɵɵconditionalCreate(65, SchedulingOverviewComponent_Conditional_10_Conditional_65_Template, 4, 0, "div", 42);
-    i0.ɵɵrepeaterCreate(66, SchedulingOverviewComponent_Conditional_10_For_67_Template, 10, 8, "div", 43, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(64, "div", 42);
+    i0.ɵɵconditionalCreate(65, SchedulingOverviewComponent_Conditional_10_Conditional_65_Template, 4, 0, "div", 43);
+    i0.ɵɵrepeaterCreate(66, SchedulingOverviewComponent_Conditional_10_For_67_Template, 10, 8, "div", 44, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(68, "div", 44)(69, "div", 36)(70, "div", 45)(71, "div", 38);
+    i0.ɵɵelementStart(68, "div", 45)(69, "div", 37)(70, "div", 46)(71, "div", 39);
     i0.ɵɵelement(72, "i");
     i0.ɵɵtext(73);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(74, SchedulingOverviewComponent_Conditional_10_Conditional_74_Template, 2, 1, "span", 46);
-    i0.ɵɵconditionalCreate(75, SchedulingOverviewComponent_Conditional_10_Conditional_75_Template, 2, 0, "span", 47);
+    i0.ɵɵconditionalCreate(74, SchedulingOverviewComponent_Conditional_10_Conditional_74_Template, 2, 1, "span", 47);
+    i0.ɵɵconditionalCreate(75, SchedulingOverviewComponent_Conditional_10_Conditional_75_Template, 2, 0, "span", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(76, "div", 41);
-    i0.ɵɵconditionalCreate(77, SchedulingOverviewComponent_Conditional_10_Conditional_77_Template, 4, 0, "div", 48);
-    i0.ɵɵrepeaterCreate(78, SchedulingOverviewComponent_Conditional_10_For_79_Template, 8, 6, "div", 49, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(76, "div", 42);
+    i0.ɵɵconditionalCreate(77, SchedulingOverviewComponent_Conditional_10_Conditional_77_Template, 4, 0, "div", 49);
+    i0.ɵɵrepeaterCreate(78, SchedulingOverviewComponent_Conditional_10_For_79_Template, 8, 6, "div", 50, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(80, "div", 36)(81, "div", 37)(82, "div", 38);
-    i0.ɵɵelement(83, "i", 50);
+    i0.ɵɵelementStart(80, "div", 37)(81, "div", 38)(82, "div", 39);
+    i0.ɵɵelement(83, "i", 51);
     i0.ɵɵtext(84, " Upcoming (24h) ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(85, "span", 40);
+    i0.ɵɵelementStart(85, "span", 41);
     i0.ɵɵtext(86);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(87, "div", 41);
-    i0.ɵɵconditionalCreate(88, SchedulingOverviewComponent_Conditional_10_Conditional_88_Template, 4, 0, "div", 42);
-    i0.ɵɵrepeaterCreate(89, SchedulingOverviewComponent_Conditional_10_For_90_Template, 10, 6, "div", 51, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(87, "div", 42);
+    i0.ɵɵconditionalCreate(88, SchedulingOverviewComponent_Conditional_10_Conditional_88_Template, 4, 0, "div", 43);
+    i0.ɵɵrepeaterCreate(89, SchedulingOverviewComponent_Conditional_10_For_90_Template, 10, 6, "div", 52, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(91, SchedulingOverviewComponent_Conditional_10_Conditional_91_Template, 25, 1, "div", 52);
+    i0.ɵɵconditionalCreate(91, SchedulingOverviewComponent_Conditional_10_Conditional_91_Template, 25, 1, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -563,34 +564,34 @@ export class SchedulingOverviewComponent {
         });
     }
     static ɵfac = function SchedulingOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SchedulingOverviewComponent)(i0.ɵɵdirectiveInject(i1.SchedulingInstrumentationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SchedulingOverviewComponent, selectors: [["app-scheduling-overview"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, standalone: false, decls: 11, vars: 5, consts: [[1, "overview-container"], [1, "overview-header"], [1, "header-controls"], [1, "control-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "fa-solid", "fa-rotate"], [1, "loading-container"], [1, "overview-content"], ["text", "Loading dashboard...", "size", "medium"], [1, "health-banner"], [1, "health-ring"], ["viewBox", "0 0 80 80", 1, "health-svg"], ["cx", "40", "cy", "40", "r", "36", "fill", "none", "stroke-width", "6", 1, "health-ring-track"], ["cx", "40", "cy", "40", "r", "36", "fill", "none", "stroke-width", "6", "stroke-linecap", "round", "transform", "rotate(-90 40 40)"], [1, "health-score"], [1, "health-details"], [1, "health-title"], [1, "health-stats"], [1, "fa-solid", "fa-check-circle", "status-success"], [1, "fa-solid", "fa-lock", "status-warning"], [1, "fa-solid", "fa-xmark-circle", "status-error"], [1, "kpi-grid"], [1, "kpi-card"], [1, "kpi-icon", "blue"], [1, "fa-solid", "fa-calendar-check"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "amber"], [1, "fa-solid", "fa-clock"], [1, "kpi-icon", "purple"], [1, "fa-solid", "fa-chart-bar"], [1, "kpi-sub"], [1, "kpi-icon", "green"], [1, "fa-solid", "fa-play"], [1, "panels-grid"], [1, "panel"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-bolt"], [1, "panel-badge"], [1, "panel-body"], [1, "empty-state-small"], [1, "execution-item"], [1, "right-column"], [1, "panel-header", 3, "ngClass"], [1, "panel-badge", "error"], [1, "panel-badge", "clear"], [1, "empty-state-small", "all-clear"], [1, "alert-item", 3, "ngClass"], [1, "fa-solid", "fa-calendar-day"], [1, "upcoming-item"], [1, "panel", 2, "margin-top", "20px"], [1, "fa-solid", "fa-inbox"], [1, "exec-status"], [3, "ngClass"], [1, "exec-details"], [1, "exec-name"], [1, "exec-meta"], [1, "exec-status-badge", 3, "ngClass"], [1, "fa-solid", "fa-circle-check"], [1, "alert-icon"], [1, "alert-content"], [1, "alert-title"], [1, "alert-message"], [1, "alert-action-btn"], [1, "alert-action-btn", 3, "click"], [1, "fa-solid", "fa-calendar-xmark"], [1, "upcoming-info"], [1, "upcoming-name"], [1, "upcoming-meta"], [1, "upcoming-type"], [1, "upcoming-countdown"], [1, "fa-solid", "fa-lock"], [1, "data-table"], [3, "stale-row"], [1, "cell-name"], [1, "cell-meta"], [1, "lock-status-badge"], [1, "release-btn"], [1, "release-btn", 3, "click"], [1, "fa-solid", "fa-lock-open"]], template: function SchedulingOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SchedulingOverviewComponent, selectors: [["app-scheduling-overview"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, standalone: false, decls: 11, vars: 4, consts: [[1, "overview-container"], [1, "overview-header"], [1, "header-controls"], ["mjButton", "", "variant", "secondary", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], ["mjButton", "", 3, "click", "variant"], [1, "fa-solid", "fa-rotate"], [1, "loading-container"], [1, "overview-content"], ["text", "Loading dashboard...", "size", "medium"], [1, "health-banner"], [1, "health-ring"], ["viewBox", "0 0 80 80", 1, "health-svg"], ["cx", "40", "cy", "40", "r", "36", "fill", "none", "stroke-width", "6", 1, "health-ring-track"], ["cx", "40", "cy", "40", "r", "36", "fill", "none", "stroke-width", "6", "stroke-linecap", "round", "transform", "rotate(-90 40 40)"], [1, "health-score"], [1, "health-details"], [1, "health-title"], [1, "health-stats"], [1, "fa-solid", "fa-check-circle", "status-success"], [1, "fa-solid", "fa-lock", "status-warning"], [1, "fa-solid", "fa-xmark-circle", "status-error"], [1, "kpi-grid"], [1, "kpi-card"], [1, "kpi-icon", "blue"], [1, "fa-solid", "fa-calendar-check"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "amber"], [1, "fa-solid", "fa-clock"], [1, "kpi-icon", "purple"], [1, "fa-solid", "fa-chart-bar"], [1, "kpi-sub"], [1, "kpi-icon", "green"], [1, "fa-solid", "fa-play"], [1, "panels-grid"], [1, "panel"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-bolt"], [1, "panel-badge"], [1, "panel-body"], [1, "empty-state-small"], [1, "execution-item"], [1, "right-column"], [1, "panel-header", 3, "ngClass"], [1, "panel-badge", "error"], [1, "panel-badge", "clear"], [1, "empty-state-small", "all-clear"], [1, "alert-item", 3, "ngClass"], [1, "fa-solid", "fa-calendar-day"], [1, "upcoming-item"], [1, "panel", 2, "margin-top", "20px"], [1, "fa-solid", "fa-inbox"], [1, "exec-status"], [3, "ngClass"], [1, "exec-details"], [1, "exec-name"], [1, "exec-meta"], [1, "exec-status-badge", 3, "ngClass"], [1, "fa-solid", "fa-circle-check"], [1, "alert-icon"], [1, "alert-content"], [1, "alert-title"], [1, "alert-message"], [1, "alert-action-btn"], [1, "alert-action-btn", 3, "click"], [1, "fa-solid", "fa-calendar-xmark"], [1, "upcoming-info"], [1, "upcoming-name"], [1, "upcoming-meta"], [1, "upcoming-type"], [1, "upcoming-countdown"], [1, "fa-solid", "fa-lock"], [1, "data-table"], [3, "stale-row"], [1, "cell-name"], [1, "cell-meta"], [1, "lock-status-badge"], [1, "release-btn"], [1, "release-btn", 3, "click"], [1, "fa-solid", "fa-lock-open"]], template: function SchedulingOverviewComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
             i0.ɵɵlistener("click", function SchedulingOverviewComponent_Template_button_click_3_listener() { return ctx.Refresh(); });
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵtext(5, " Refresh ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 3);
+            i0.ɵɵelementStart(6, "button", 5);
             i0.ɵɵlistener("click", function SchedulingOverviewComponent_Template_button_click_6_listener() { return ctx.ToggleAutoRefresh(); });
-            i0.ɵɵelement(7, "i", 5);
+            i0.ɵɵelement(7, "i", 6);
             i0.ɵɵtext(8);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(9, SchedulingOverviewComponent_Conditional_9_Template, 2, 0, "div", 6);
-            i0.ɵɵconditionalCreate(10, SchedulingOverviewComponent_Conditional_10_Template, 92, 29, "div", 7);
+            i0.ɵɵconditionalCreate(9, SchedulingOverviewComponent_Conditional_9_Template, 2, 0, "div", 7);
+            i0.ɵɵconditionalCreate(10, SchedulingOverviewComponent_Conditional_10_Template, 92, 29, "div", 8);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(6);
-            i0.ɵɵclassProp("active", ctx.AutoRefreshEnabled);
+            i0.ɵɵproperty("variant", ctx.AutoRefreshEnabled ? "primary" : "secondary");
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" Auto-Refresh: ", ctx.AutoRefreshEnabled ? "ON" : "OFF", " ");
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.IsLoading ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.IsLoading && ctx.Kpis ? 10 : -1);
-        } }, dependencies: [i2.NgClass, i3.LoadingComponent], styles: [".overview-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    height: 100%;\n}\n\n.overview-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    flex: 1;\n    min-height: 0;\n}\n\n\n\n.overview-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.control-btn.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.loading-container[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n\n\n.health-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    border-left: 4px solid var(--mj-status-success);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.health-ring[_ngcontent-%COMP%] {\n    position: relative;\n    width: 80px;\n    height: 80px;\n    flex-shrink: 0;\n}\n\n.health-svg[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.health-ring-track[_ngcontent-%COMP%] {\n    stroke: var(--mj-border-default);\n}\n\n.health-score[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 1.5rem;\n    font-weight: 800;\n}\n\n.health-details[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.health-title[_ngcontent-%COMP%] {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.health-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 20px;\n    font-size: 0.85rem;\n    color: var(--mj-text-secondary);\n}\n\n.health-stats[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.kpi-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2rem;\n    flex-shrink: 0;\n}\n\n.kpi-icon.blue[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); color: var(--mj-text-inverse); }\n.kpi-icon.purple[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.green[_ngcontent-%COMP%] { background: var(--mj-status-success); color: var(--mj-text-inverse); }\n\n.kpi-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n    font-size: 1.75rem;\n    font-weight: 800;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.kpi-sub[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    font-weight: 600;\n    margin-top: 2px;\n}\n\n\n\n.panels-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    flex: 1;\n    min-height: 300px;\n}\n\n.right-column[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header.alert-header[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-error);\n}\n\n.panel-header.clear-header[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-success);\n}\n\n.clear-header[_ngcontent-%COMP%]   .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.panel-badge.clear[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.all-clear[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success) !important;\n}\n\n.all-clear[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-weight: 500;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.alert-header[_ngcontent-%COMP%]   .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.panel-badge[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 700;\n    padding: 2px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.panel-badge.error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n}\n\n\n\n.execution-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.execution-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.exec-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.1rem;\n}\n\n.exec-details[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.exec-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.exec-meta[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.exec-status-badge[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n}\n\n\n\n.status-running[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.status-success[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.status-error[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.status-warning[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n\n.exec-status-badge.status-running[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.exec-status-badge.status-success[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.exec-status-badge.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.exec-status-badge.status-warning[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n\n\n.alert-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px;\n    border-radius: 10px;\n    margin-bottom: 8px;\n}\n\n.alert-item[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.alert-item.alert-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.alert-item.alert-warning[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.alert-icon[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    margin-top: 2px;\n}\n\n.alert-error[_ngcontent-%COMP%]   .alert-icon[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.alert-warning[_ngcontent-%COMP%]   .alert-icon[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n\n.alert-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.alert-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n}\n\n.alert-message[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.alert-action-btn[_ngcontent-%COMP%] {\n    padding: 4px 12px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: background 0.2s;\n}\n\n.alert-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\n}\n\n\n\n.upcoming-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.upcoming-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.upcoming-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.upcoming-meta[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.upcoming-type[_ngcontent-%COMP%] {\n    display: inline-flex;\n    padding: 1px 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n    font-size: 0.65rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-left: 6px;\n}\n\n.upcoming-countdown[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n}\n\n.upcoming-countdown.soon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n\n\n.empty-state-small[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 32px 16px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 2rem;\n    color: var(--mj-border-strong);\n}\n\n.empty-state-small[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n\n\n.data-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.cell-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.cell-meta[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n\n.stale-row[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.lock-status-badge[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.lock-status-badge.stale[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.release-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: transparent;\n    color: var(--mj-status-error);\n    border: 1px solid var(--mj-status-error);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.release-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-status-error);\n}\n\n\n\n@media (max-width: 1024px) {\n    .panels-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n    .health-banner[_ngcontent-%COMP%] {\n        flex-direction: column;\n        text-align: center;\n    }\n    .health-stats[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 8px;\n        align-items: center;\n    }\n    .data-table[_ngcontent-%COMP%] {\n        font-size: 0.8rem;\n    }\n}"], changeDetection: 0 });
+        } }, dependencies: [i2.NgClass, i3.MJButtonDirective, i4.LoadingComponent], styles: [".overview-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    height: 100%;\n}\n\n.overview-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    flex: 1;\n    min-height: 0;\n}\n\n\n\n.overview-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.control-btn.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.loading-container[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n\n\n.health-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    border-left: 4px solid var(--mj-status-success);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.health-ring[_ngcontent-%COMP%] {\n    position: relative;\n    width: 80px;\n    height: 80px;\n    flex-shrink: 0;\n}\n\n.health-svg[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.health-ring-track[_ngcontent-%COMP%] {\n    stroke: var(--mj-border-default);\n}\n\n.health-score[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 1.5rem;\n    font-weight: 800;\n}\n\n.health-details[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.health-title[_ngcontent-%COMP%] {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.health-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 20px;\n    font-size: 0.85rem;\n    color: var(--mj-text-secondary);\n}\n\n.health-stats[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.kpi-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2rem;\n    flex-shrink: 0;\n}\n\n.kpi-icon.blue[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); color: var(--mj-text-inverse); }\n.kpi-icon.purple[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.green[_ngcontent-%COMP%] { background: var(--mj-status-success); color: var(--mj-text-inverse); }\n\n.kpi-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n    font-size: 1.75rem;\n    font-weight: 800;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.kpi-sub[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    font-weight: 600;\n    margin-top: 2px;\n}\n\n\n\n.panels-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    flex: 1;\n    min-height: 300px;\n}\n\n.right-column[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header.alert-header[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-error);\n}\n\n.panel-header.clear-header[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-success);\n}\n\n.clear-header[_ngcontent-%COMP%]   .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.panel-badge.clear[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.all-clear[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success) !important;\n}\n\n.all-clear[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-weight: 500;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.alert-header[_ngcontent-%COMP%]   .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.panel-badge[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 700;\n    padding: 2px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.panel-badge.error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n}\n\n\n\n.execution-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.execution-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.exec-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.1rem;\n}\n\n.exec-details[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.exec-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.exec-meta[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.exec-status-badge[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n}\n\n\n\n.status-running[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.status-success[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.status-error[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.status-warning[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n\n.exec-status-badge.status-running[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.exec-status-badge.status-success[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.exec-status-badge.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.exec-status-badge.status-warning[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n\n\n.alert-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px;\n    border-radius: 10px;\n    margin-bottom: 8px;\n}\n\n.alert-item[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.alert-item.alert-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.alert-item.alert-warning[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.alert-icon[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    margin-top: 2px;\n}\n\n.alert-error[_ngcontent-%COMP%]   .alert-icon[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.alert-warning[_ngcontent-%COMP%]   .alert-icon[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n\n.alert-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.alert-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n}\n\n.alert-message[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.alert-action-btn[_ngcontent-%COMP%] {\n    padding: 4px 12px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: background 0.2s;\n}\n\n.alert-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\n}\n\n\n\n.upcoming-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.upcoming-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.upcoming-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.upcoming-meta[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.upcoming-type[_ngcontent-%COMP%] {\n    display: inline-flex;\n    padding: 1px 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n    font-size: 0.65rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-left: 6px;\n}\n\n.upcoming-countdown[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n}\n\n.upcoming-countdown.soon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n\n\n.empty-state-small[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 32px 16px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 2rem;\n    color: var(--mj-border-strong);\n}\n\n.empty-state-small[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n\n\n.data-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.cell-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.cell-meta[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n\n.stale-row[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.lock-status-badge[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.lock-status-badge.stale[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.release-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: transparent;\n    color: var(--mj-status-error);\n    border: 1px solid var(--mj-status-error);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.release-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-status-error);\n}\n\n\n\n@media (max-width: 1024px) {\n    .panels-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n    .health-banner[_ngcontent-%COMP%] {\n        flex-direction: column;\n        text-align: center;\n    }\n    .health-stats[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 8px;\n        align-items: center;\n    }\n    .data-table[_ngcontent-%COMP%] {\n        font-size: 0.8rem;\n    }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SchedulingOverviewComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-scheduling-overview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overview-container\">\n  <!-- Header Controls -->\n  <div class=\"overview-header\">\n    <div class=\"header-controls\">\n      <button class=\"control-btn\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n      <button class=\"control-btn\" [class.active]=\"AutoRefreshEnabled\" (click)=\"ToggleAutoRefresh()\">\n        <i class=\"fa-solid fa-rotate\"></i>\n        Auto-Refresh: {{AutoRefreshEnabled ? 'ON' : 'OFF'}}\n      </button>\n    </div>\n  </div>\n\n  @if (IsLoading) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading dashboard...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  @if (!IsLoading && Kpis) {\n    <div class=\"overview-content\">\n      <!-- Health Banner -->\n      <div class=\"health-banner\" [style.border-color]=\"GetHealthColor()\">\n        <div class=\"health-ring\">\n          <svg viewBox=\"0 0 80 80\" class=\"health-svg\">\n            <circle cx=\"40\" cy=\"40\" r=\"36\" fill=\"none\" class=\"health-ring-track\" stroke-width=\"6\"/>\n            <circle cx=\"40\" cy=\"40\" r=\"36\" fill=\"none\"\n              [attr.stroke]=\"GetHealthColor()\"\n              stroke-width=\"6\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"GetHealthStrokeDasharray()\"\n              transform=\"rotate(-90 40 40)\"/>\n          </svg>\n          <div class=\"health-score\" [style.color]=\"GetHealthColor()\">{{GetHealthScore()}}</div>\n        </div>\n        <div class=\"health-details\">\n          <div class=\"health-title\">System Health</div>\n          <div class=\"health-stats\">\n            <span><i class=\"fa-solid fa-check-circle status-success\"></i> {{Kpis.totalActiveJobs}} active</span>\n            <span><i class=\"fa-solid fa-lock status-warning\"></i> {{Kpis.lockedJobs}} locked</span>\n            <span><i class=\"fa-solid fa-xmark-circle status-error\"></i> {{Kpis.totalFailures7d}} failures (7d)</span>\n          </div>\n        </div>\n      </div>\n      <!-- KPI Cards -->\n      <div class=\"kpi-grid\">\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon blue\">\n            <i class=\"fa-solid fa-calendar-check\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.totalActiveJobs}}</div>\n            <div class=\"kpi-label\">Active Jobs</div>\n          </div>\n        </div>\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon amber\">\n            <i class=\"fa-solid fa-clock\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.jobsDueInNextHour}}</div>\n            <div class=\"kpi-label\">Due Next Hour</div>\n          </div>\n        </div>\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon purple\">\n            <i class=\"fa-solid fa-chart-bar\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.recentExecutions24h}}</div>\n            <div class=\"kpi-label\">Runs (24h)</div>\n            <div class=\"kpi-sub\" [style.color]=\"GetSuccessRateColor(Kpis.successRate24h)\">\n              {{FormatPercentage(Kpis.successRate24h)}} success\n            </div>\n          </div>\n        </div>\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon green\">\n            <i class=\"fa-solid fa-play\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.currentlyRunning}}</div>\n            <div class=\"kpi-label\">Running Now</div>\n          </div>\n        </div>\n      </div>\n      <!-- Two-Column Layout: Live Executions + Alerts/Upcoming -->\n      <div class=\"panels-grid\">\n        <!-- Live Executions -->\n        <div class=\"panel\">\n          <div class=\"panel-header\">\n            <div class=\"panel-title\">\n              <i class=\"fa-solid fa-bolt\"></i> Live Executions\n            </div>\n            <span class=\"panel-badge\">{{LiveExecutions.length}}</span>\n          </div>\n          <div class=\"panel-body\">\n            @if (LiveExecutions.length === 0) {\n              <div class=\"empty-state-small\">\n                <i class=\"fa-solid fa-inbox\"></i>\n                <span>No recent executions</span>\n              </div>\n            }\n            @for (exec of LiveExecutions; track exec) {\n              <div class=\"execution-item\">\n                <div class=\"exec-status\">\n                  <i [class]=\"GetStatusIcon(exec.status)\" [ngClass]=\"GetStatusClass(exec.status)\"></i>\n                </div>\n                <div class=\"exec-details\">\n                  <div class=\"exec-name\">{{exec.jobName}}</div>\n                  <div class=\"exec-meta\">{{FormatTimeAgo(exec.startedAt)}} &middot; {{FormatDuration(exec.duration)}}</div>\n                </div>\n                <div class=\"exec-status-badge\" [ngClass]=\"GetStatusClass(exec.status)\">\n                  {{exec.status}}\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n        <!-- Right Column: Alerts + Upcoming -->\n        <div class=\"right-column\">\n          <!-- Alerts -->\n          <div class=\"panel\">\n            <div class=\"panel-header\" [ngClass]=\"Alerts.length > 0 ? 'alert-header' : 'clear-header'\">\n              <div class=\"panel-title\">\n                <i [class]=\"Alerts.length > 0 ? 'fa-solid fa-triangle-exclamation' : 'fa-solid fa-shield-check'\"></i>\n                {{Alerts.length > 0 ? 'Alerts' : 'All Clear'}}\n              </div>\n              @if (Alerts.length > 0) {\n                <span class=\"panel-badge error\">{{Alerts.length}}</span>\n              }\n              @if (Alerts.length === 0) {\n                <span class=\"panel-badge clear\">0</span>\n              }\n            </div>\n            <div class=\"panel-body\">\n              @if (Alerts.length === 0) {\n                <div class=\"empty-state-small all-clear\">\n                  <i class=\"fa-solid fa-circle-check\"></i>\n                  <span>No active alerts</span>\n                </div>\n              }\n              @for (alert of Alerts; track alert) {\n                <div class=\"alert-item\" [ngClass]=\"'alert-' + alert.severity\">\n                  <i [class]=\"GetAlertIcon(alert.severity)\" class=\"alert-icon\"></i>\n                  <div class=\"alert-content\">\n                    <div class=\"alert-title\">{{alert.title}}</div>\n                    <div class=\"alert-message\">{{alert.message}}</div>\n                  </div>\n                  @if (alert.type === 'stale-lock' && alert.jobId) {\n                    <button\n                      class=\"alert-action-btn\"\n                      (click)=\"ReleaseLock(alert.jobId!)\">\n                      Release\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Upcoming -->\n          <div class=\"panel\">\n            <div class=\"panel-header\">\n              <div class=\"panel-title\">\n                <i class=\"fa-solid fa-calendar-day\"></i> Upcoming (24h)\n              </div>\n              <span class=\"panel-badge\">{{UpcomingExecutions.length}}</span>\n            </div>\n            <div class=\"panel-body\">\n              @if (UpcomingExecutions.length === 0) {\n                <div class=\"empty-state-small\">\n                  <i class=\"fa-solid fa-calendar-xmark\"></i>\n                  <span>No upcoming executions</span>\n                </div>\n              }\n              @for (upcoming of UpcomingExecutions; track upcoming) {\n                <div class=\"upcoming-item\">\n                  <div class=\"upcoming-info\">\n                    <div class=\"upcoming-name\">{{upcoming.jobName}}</div>\n                    <div class=\"upcoming-meta\">\n                      {{FormatDateTime(upcoming.nextRunAt)}}\n                      <span class=\"upcoming-type\">{{upcoming.jobType}}</span>\n                    </div>\n                  </div>\n                  <div class=\"upcoming-countdown\" [class.soon]=\"FormatTimeUntil(upcoming.nextRunAt).includes('m') && !FormatTimeUntil(upcoming.nextRunAt).includes('h')\">\n                    {{FormatTimeUntil(upcoming.nextRunAt)}}\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Locks Section -->\n      @if (Locks.length > 0) {\n        <div class=\"panel\" style=\"margin-top: 20px;\">\n          <div class=\"panel-header\">\n            <div class=\"panel-title\">\n              <i class=\"fa-solid fa-lock\"></i> Active Locks\n            </div>\n            <span class=\"panel-badge\">{{Locks.length}}</span>\n          </div>\n          <div class=\"panel-body\">\n            <table class=\"data-table\">\n              <thead>\n                <tr>\n                  <th>Job</th>\n                  <th>Locked By</th>\n                  <th>Locked At</th>\n                  <th>Expected Completion</th>\n                  <th>Status</th>\n                  <th></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (lock of Locks; track lock) {\n                  <tr [class.stale-row]=\"lock.isStale\">\n                    <td class=\"cell-name\">{{lock.jobName}}</td>\n                    <td class=\"cell-meta\">{{lock.lockedBy}}</td>\n                    <td class=\"cell-meta\">{{FormatTimeAgo(lock.lockedAt)}}</td>\n                    <td class=\"cell-meta\">{{FormatDateTime(lock.expectedCompletion)}}</td>\n                    <td>\n                      <span class=\"lock-status-badge\" [class.stale]=\"lock.isStale\">\n                        {{lock.isStale ? 'Stale' : 'Active'}}\n                      </span>\n                    </td>\n                    <td>\n                      @if (lock.isStale) {\n                        <button class=\"release-btn\" (click)=\"ReleaseLock(lock.jobId)\">\n                          <i class=\"fa-solid fa-lock-open\"></i> Release\n                        </button>\n                      }\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".overview-container {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    height: 100%;\n}\n\n.overview-content {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    flex: 1;\n    min-height: 0;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.overview-header {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n}\n\n.header-controls {\n    display: flex;\n    gap: 8px;\n}\n\n.control-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.control-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.control-btn.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.loading-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n/* \u2500\u2500 Health Banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.health-banner {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    border-left: 4px solid var(--mj-status-success);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.health-ring {\n    position: relative;\n    width: 80px;\n    height: 80px;\n    flex-shrink: 0;\n}\n\n.health-svg {\n    width: 100%;\n    height: 100%;\n}\n\n.health-ring-track {\n    stroke: var(--mj-border-default);\n}\n\n.health-score {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 1.5rem;\n    font-weight: 800;\n}\n\n.health-details {\n    flex: 1;\n}\n\n.health-title {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.health-stats {\n    display: flex;\n    gap: 20px;\n    font-size: 0.85rem;\n    color: var(--mj-text-secondary);\n}\n\n.health-stats span {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* \u2500\u2500 KPI Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.kpi-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    transition: all 0.2s ease;\n}\n\n.kpi-card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2rem;\n    flex-shrink: 0;\n}\n\n.kpi-icon.blue { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.amber { background: var(--mj-status-warning); color: var(--mj-text-inverse); }\n.kpi-icon.purple { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.green { background: var(--mj-status-success); color: var(--mj-text-inverse); }\n\n.kpi-content {\n    flex: 1;\n}\n\n.kpi-value {\n    font-size: 1.75rem;\n    font-weight: 800;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.kpi-sub {\n    font-size: 0.75rem;\n    font-weight: 600;\n    margin-top: 2px;\n}\n\n/* \u2500\u2500 Panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.panels-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    flex: 1;\n    min-height: 300px;\n}\n\n.right-column {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.panel {\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header.alert-header {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-error);\n}\n\n.panel-header.clear-header {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-success);\n}\n\n.clear-header .panel-title i {\n    color: var(--mj-status-success);\n}\n\n.panel-badge.clear {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.all-clear i {\n    color: var(--mj-status-success) !important;\n}\n\n.all-clear span {\n    color: var(--mj-status-success);\n    font-weight: 500;\n}\n\n.panel-title {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title i {\n    color: var(--mj-brand-primary);\n}\n\n.alert-header .panel-title i {\n    color: var(--mj-status-error);\n}\n\n.panel-badge {\n    font-size: 0.7rem;\n    font-weight: 700;\n    padding: 2px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.panel-badge.error {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.panel-body {\n    padding: 12px 20px;\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n}\n\n/* \u2500\u2500 Execution Items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.execution-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.execution-item:last-child {\n    border-bottom: none;\n}\n\n.exec-status i {\n    font-size: 1.1rem;\n}\n\n.exec-details {\n    flex: 1;\n}\n\n.exec-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.exec-meta {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.exec-status-badge {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n}\n\n/* Status Colors */\n.status-running { color: var(--mj-brand-primary); }\n.status-success { color: var(--mj-status-success); }\n.status-error { color: var(--mj-status-error); }\n.status-warning { color: var(--mj-status-warning); }\n\n.exec-status-badge.status-running { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.exec-status-badge.status-success { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.exec-status-badge.status-error { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.exec-status-badge.status-warning { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n/* \u2500\u2500 Alert Items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.alert-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px;\n    border-radius: 10px;\n    margin-bottom: 8px;\n}\n\n.alert-item:last-child {\n    margin-bottom: 0;\n}\n\n.alert-item.alert-error {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.alert-item.alert-warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.alert-icon {\n    font-size: 1rem;\n    margin-top: 2px;\n}\n\n.alert-error .alert-icon { color: var(--mj-status-error); }\n.alert-warning .alert-icon { color: var(--mj-status-warning); }\n\n.alert-content {\n    flex: 1;\n}\n\n.alert-title {\n    font-weight: 600;\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n}\n\n.alert-message {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.alert-action-btn {\n    padding: 4px 12px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: background 0.2s;\n}\n\n.alert-action-btn:hover {\n    background: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Upcoming Items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.upcoming-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.upcoming-item:last-child {\n    border-bottom: none;\n}\n\n.upcoming-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.upcoming-meta {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.upcoming-type {\n    display: inline-flex;\n    padding: 1px 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n    font-size: 0.65rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-left: 6px;\n}\n\n.upcoming-countdown {\n    font-size: 0.85rem;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n}\n\n.upcoming-countdown.soon {\n    color: var(--mj-status-warning);\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.empty-state-small {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 32px 16px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-small i {\n    font-size: 2rem;\n    color: var(--mj-border-strong);\n}\n\n.empty-state-small span {\n    font-size: 0.85rem;\n}\n\n/* \u2500\u2500 Data Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.data-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table th {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-table td {\n    padding: 10px 12px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.cell-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.cell-meta {\n    color: var(--mj-text-secondary);\n}\n\n.stale-row {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.lock-status-badge {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.lock-status-badge.stale {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.release-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: transparent;\n    color: var(--mj-status-error);\n    border: 1px solid var(--mj-status-error);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.release-btn:hover {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 1024px) {\n    .panels-grid {\n        grid-template-columns: 1fr;\n    }\n    .kpi-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .kpi-grid {\n        grid-template-columns: 1fr;\n    }\n    .health-banner {\n        flex-direction: column;\n        text-align: center;\n    }\n    .health-stats {\n        flex-direction: column;\n        gap: 8px;\n        align-items: center;\n    }\n    .data-table {\n        font-size: 0.8rem;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-scheduling-overview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overview-container\">\n  <!-- Header Controls -->\n  <div class=\"overview-header\">\n    <div class=\"header-controls\">\n      <button mjButton variant=\"secondary\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n      <button mjButton [variant]=\"AutoRefreshEnabled ? 'primary' : 'secondary'\" (click)=\"ToggleAutoRefresh()\">\n        <i class=\"fa-solid fa-rotate\"></i>\n        Auto-Refresh: {{AutoRefreshEnabled ? 'ON' : 'OFF'}}\n      </button>\n    </div>\n  </div>\n\n  @if (IsLoading) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading dashboard...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  @if (!IsLoading && Kpis) {\n    <div class=\"overview-content\">\n      <!-- Health Banner -->\n      <div class=\"health-banner\" [style.border-color]=\"GetHealthColor()\">\n        <div class=\"health-ring\">\n          <svg viewBox=\"0 0 80 80\" class=\"health-svg\">\n            <circle cx=\"40\" cy=\"40\" r=\"36\" fill=\"none\" class=\"health-ring-track\" stroke-width=\"6\"/>\n            <circle cx=\"40\" cy=\"40\" r=\"36\" fill=\"none\"\n              [attr.stroke]=\"GetHealthColor()\"\n              stroke-width=\"6\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"GetHealthStrokeDasharray()\"\n              transform=\"rotate(-90 40 40)\"/>\n          </svg>\n          <div class=\"health-score\" [style.color]=\"GetHealthColor()\">{{GetHealthScore()}}</div>\n        </div>\n        <div class=\"health-details\">\n          <div class=\"health-title\">System Health</div>\n          <div class=\"health-stats\">\n            <span><i class=\"fa-solid fa-check-circle status-success\"></i> {{Kpis.totalActiveJobs}} active</span>\n            <span><i class=\"fa-solid fa-lock status-warning\"></i> {{Kpis.lockedJobs}} locked</span>\n            <span><i class=\"fa-solid fa-xmark-circle status-error\"></i> {{Kpis.totalFailures7d}} failures (7d)</span>\n          </div>\n        </div>\n      </div>\n      <!-- KPI Cards -->\n      <div class=\"kpi-grid\">\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon blue\">\n            <i class=\"fa-solid fa-calendar-check\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.totalActiveJobs}}</div>\n            <div class=\"kpi-label\">Active Jobs</div>\n          </div>\n        </div>\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon amber\">\n            <i class=\"fa-solid fa-clock\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.jobsDueInNextHour}}</div>\n            <div class=\"kpi-label\">Due Next Hour</div>\n          </div>\n        </div>\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon purple\">\n            <i class=\"fa-solid fa-chart-bar\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.recentExecutions24h}}</div>\n            <div class=\"kpi-label\">Runs (24h)</div>\n            <div class=\"kpi-sub\" [style.color]=\"GetSuccessRateColor(Kpis.successRate24h)\">\n              {{FormatPercentage(Kpis.successRate24h)}} success\n            </div>\n          </div>\n        </div>\n        <div class=\"kpi-card\">\n          <div class=\"kpi-icon green\">\n            <i class=\"fa-solid fa-play\"></i>\n          </div>\n          <div class=\"kpi-content\">\n            <div class=\"kpi-value\">{{Kpis.currentlyRunning}}</div>\n            <div class=\"kpi-label\">Running Now</div>\n          </div>\n        </div>\n      </div>\n      <!-- Two-Column Layout: Live Executions + Alerts/Upcoming -->\n      <div class=\"panels-grid\">\n        <!-- Live Executions -->\n        <div class=\"panel\">\n          <div class=\"panel-header\">\n            <div class=\"panel-title\">\n              <i class=\"fa-solid fa-bolt\"></i> Live Executions\n            </div>\n            <span class=\"panel-badge\">{{LiveExecutions.length}}</span>\n          </div>\n          <div class=\"panel-body\">\n            @if (LiveExecutions.length === 0) {\n              <div class=\"empty-state-small\">\n                <i class=\"fa-solid fa-inbox\"></i>\n                <span>No recent executions</span>\n              </div>\n            }\n            @for (exec of LiveExecutions; track exec) {\n              <div class=\"execution-item\">\n                <div class=\"exec-status\">\n                  <i [class]=\"GetStatusIcon(exec.status)\" [ngClass]=\"GetStatusClass(exec.status)\"></i>\n                </div>\n                <div class=\"exec-details\">\n                  <div class=\"exec-name\">{{exec.jobName}}</div>\n                  <div class=\"exec-meta\">{{FormatTimeAgo(exec.startedAt)}} &middot; {{FormatDuration(exec.duration)}}</div>\n                </div>\n                <div class=\"exec-status-badge\" [ngClass]=\"GetStatusClass(exec.status)\">\n                  {{exec.status}}\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n        <!-- Right Column: Alerts + Upcoming -->\n        <div class=\"right-column\">\n          <!-- Alerts -->\n          <div class=\"panel\">\n            <div class=\"panel-header\" [ngClass]=\"Alerts.length > 0 ? 'alert-header' : 'clear-header'\">\n              <div class=\"panel-title\">\n                <i [class]=\"Alerts.length > 0 ? 'fa-solid fa-triangle-exclamation' : 'fa-solid fa-shield-check'\"></i>\n                {{Alerts.length > 0 ? 'Alerts' : 'All Clear'}}\n              </div>\n              @if (Alerts.length > 0) {\n                <span class=\"panel-badge error\">{{Alerts.length}}</span>\n              }\n              @if (Alerts.length === 0) {\n                <span class=\"panel-badge clear\">0</span>\n              }\n            </div>\n            <div class=\"panel-body\">\n              @if (Alerts.length === 0) {\n                <div class=\"empty-state-small all-clear\">\n                  <i class=\"fa-solid fa-circle-check\"></i>\n                  <span>No active alerts</span>\n                </div>\n              }\n              @for (alert of Alerts; track alert) {\n                <div class=\"alert-item\" [ngClass]=\"'alert-' + alert.severity\">\n                  <i [class]=\"GetAlertIcon(alert.severity)\" class=\"alert-icon\"></i>\n                  <div class=\"alert-content\">\n                    <div class=\"alert-title\">{{alert.title}}</div>\n                    <div class=\"alert-message\">{{alert.message}}</div>\n                  </div>\n                  @if (alert.type === 'stale-lock' && alert.jobId) {\n                    <button\n                      class=\"alert-action-btn\"\n                      (click)=\"ReleaseLock(alert.jobId!)\">\n                      Release\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Upcoming -->\n          <div class=\"panel\">\n            <div class=\"panel-header\">\n              <div class=\"panel-title\">\n                <i class=\"fa-solid fa-calendar-day\"></i> Upcoming (24h)\n              </div>\n              <span class=\"panel-badge\">{{UpcomingExecutions.length}}</span>\n            </div>\n            <div class=\"panel-body\">\n              @if (UpcomingExecutions.length === 0) {\n                <div class=\"empty-state-small\">\n                  <i class=\"fa-solid fa-calendar-xmark\"></i>\n                  <span>No upcoming executions</span>\n                </div>\n              }\n              @for (upcoming of UpcomingExecutions; track upcoming) {\n                <div class=\"upcoming-item\">\n                  <div class=\"upcoming-info\">\n                    <div class=\"upcoming-name\">{{upcoming.jobName}}</div>\n                    <div class=\"upcoming-meta\">\n                      {{FormatDateTime(upcoming.nextRunAt)}}\n                      <span class=\"upcoming-type\">{{upcoming.jobType}}</span>\n                    </div>\n                  </div>\n                  <div class=\"upcoming-countdown\" [class.soon]=\"FormatTimeUntil(upcoming.nextRunAt).includes('m') && !FormatTimeUntil(upcoming.nextRunAt).includes('h')\">\n                    {{FormatTimeUntil(upcoming.nextRunAt)}}\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Locks Section -->\n      @if (Locks.length > 0) {\n        <div class=\"panel\" style=\"margin-top: 20px;\">\n          <div class=\"panel-header\">\n            <div class=\"panel-title\">\n              <i class=\"fa-solid fa-lock\"></i> Active Locks\n            </div>\n            <span class=\"panel-badge\">{{Locks.length}}</span>\n          </div>\n          <div class=\"panel-body\">\n            <table class=\"data-table\">\n              <thead>\n                <tr>\n                  <th>Job</th>\n                  <th>Locked By</th>\n                  <th>Locked At</th>\n                  <th>Expected Completion</th>\n                  <th>Status</th>\n                  <th></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (lock of Locks; track lock) {\n                  <tr [class.stale-row]=\"lock.isStale\">\n                    <td class=\"cell-name\">{{lock.jobName}}</td>\n                    <td class=\"cell-meta\">{{lock.lockedBy}}</td>\n                    <td class=\"cell-meta\">{{FormatTimeAgo(lock.lockedAt)}}</td>\n                    <td class=\"cell-meta\">{{FormatDateTime(lock.expectedCompletion)}}</td>\n                    <td>\n                      <span class=\"lock-status-badge\" [class.stale]=\"lock.isStale\">\n                        {{lock.isStale ? 'Stale' : 'Active'}}\n                      </span>\n                    </td>\n                    <td>\n                      @if (lock.isStale) {\n                        <button class=\"release-btn\" (click)=\"ReleaseLock(lock.jobId)\">\n                          <i class=\"fa-solid fa-lock-open\"></i> Release\n                        </button>\n                      }\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".overview-container {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    height: 100%;\n}\n\n.overview-content {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    flex: 1;\n    min-height: 0;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.overview-header {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n}\n\n.header-controls {\n    display: flex;\n    gap: 8px;\n}\n\n.control-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.control-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.control-btn.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.loading-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n/* \u2500\u2500 Health Banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.health-banner {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    border-left: 4px solid var(--mj-status-success);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.health-ring {\n    position: relative;\n    width: 80px;\n    height: 80px;\n    flex-shrink: 0;\n}\n\n.health-svg {\n    width: 100%;\n    height: 100%;\n}\n\n.health-ring-track {\n    stroke: var(--mj-border-default);\n}\n\n.health-score {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 1.5rem;\n    font-weight: 800;\n}\n\n.health-details {\n    flex: 1;\n}\n\n.health-title {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.health-stats {\n    display: flex;\n    gap: 20px;\n    font-size: 0.85rem;\n    color: var(--mj-text-secondary);\n}\n\n.health-stats span {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* \u2500\u2500 KPI Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.kpi-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    transition: all 0.2s ease;\n}\n\n.kpi-card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2rem;\n    flex-shrink: 0;\n}\n\n.kpi-icon.blue { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.amber { background: var(--mj-status-warning); color: var(--mj-text-inverse); }\n.kpi-icon.purple { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n.kpi-icon.green { background: var(--mj-status-success); color: var(--mj-text-inverse); }\n\n.kpi-content {\n    flex: 1;\n}\n\n.kpi-value {\n    font-size: 1.75rem;\n    font-weight: 800;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.kpi-sub {\n    font-size: 0.75rem;\n    font-weight: 600;\n    margin-top: 2px;\n}\n\n/* \u2500\u2500 Panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.panels-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    flex: 1;\n    min-height: 300px;\n}\n\n.right-column {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.panel {\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header.alert-header {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-error);\n}\n\n.panel-header.clear-header {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    border-bottom-color: var(--mj-status-success);\n}\n\n.clear-header .panel-title i {\n    color: var(--mj-status-success);\n}\n\n.panel-badge.clear {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.all-clear i {\n    color: var(--mj-status-success) !important;\n}\n\n.all-clear span {\n    color: var(--mj-status-success);\n    font-weight: 500;\n}\n\n.panel-title {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title i {\n    color: var(--mj-brand-primary);\n}\n\n.alert-header .panel-title i {\n    color: var(--mj-status-error);\n}\n\n.panel-badge {\n    font-size: 0.7rem;\n    font-weight: 700;\n    padding: 2px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.panel-badge.error {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.panel-body {\n    padding: 12px 20px;\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n}\n\n/* \u2500\u2500 Execution Items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.execution-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.execution-item:last-child {\n    border-bottom: none;\n}\n\n.exec-status i {\n    font-size: 1.1rem;\n}\n\n.exec-details {\n    flex: 1;\n}\n\n.exec-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.exec-meta {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.exec-status-badge {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n}\n\n/* Status Colors */\n.status-running { color: var(--mj-brand-primary); }\n.status-success { color: var(--mj-status-success); }\n.status-error { color: var(--mj-status-error); }\n.status-warning { color: var(--mj-status-warning); }\n\n.exec-status-badge.status-running { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.exec-status-badge.status-success { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.exec-status-badge.status-error { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.exec-status-badge.status-warning { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n/* \u2500\u2500 Alert Items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.alert-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px;\n    border-radius: 10px;\n    margin-bottom: 8px;\n}\n\n.alert-item:last-child {\n    margin-bottom: 0;\n}\n\n.alert-item.alert-error {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.alert-item.alert-warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.alert-icon {\n    font-size: 1rem;\n    margin-top: 2px;\n}\n\n.alert-error .alert-icon { color: var(--mj-status-error); }\n.alert-warning .alert-icon { color: var(--mj-status-warning); }\n\n.alert-content {\n    flex: 1;\n}\n\n.alert-title {\n    font-weight: 600;\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n}\n\n.alert-message {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.alert-action-btn {\n    padding: 4px 12px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: background 0.2s;\n}\n\n.alert-action-btn:hover {\n    background: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Upcoming Items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.upcoming-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.upcoming-item:last-child {\n    border-bottom: none;\n}\n\n.upcoming-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.875rem;\n}\n\n.upcoming-meta {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.upcoming-type {\n    display: inline-flex;\n    padding: 1px 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n    font-size: 0.65rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-left: 6px;\n}\n\n.upcoming-countdown {\n    font-size: 0.85rem;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n}\n\n.upcoming-countdown.soon {\n    color: var(--mj-status-warning);\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.empty-state-small {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 32px 16px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-small i {\n    font-size: 2rem;\n    color: var(--mj-border-strong);\n}\n\n.empty-state-small span {\n    font-size: 0.85rem;\n}\n\n/* \u2500\u2500 Data Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.data-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table th {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-table td {\n    padding: 10px 12px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.cell-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.cell-meta {\n    color: var(--mj-text-secondary);\n}\n\n.stale-row {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.lock-status-badge {\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.lock-status-badge.stale {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.release-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    background: transparent;\n    color: var(--mj-status-error);\n    border: 1px solid var(--mj-status-error);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.release-btn:hover {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 1024px) {\n    .panels-grid {\n        grid-template-columns: 1fr;\n    }\n    .kpi-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .kpi-grid {\n        grid-template-columns: 1fr;\n    }\n    .health-banner {\n        flex-direction: column;\n        text-align: center;\n    }\n    .health-stats {\n        flex-direction: column;\n        gap: 8px;\n        align-items: center;\n    }\n    .data-table {\n        font-size: 0.8rem;\n    }\n}\n"] }]
     }], () => [{ type: i1.SchedulingInstrumentationService }, { type: i0.ChangeDetectorRef }], { initialState: [{
             type: Input
         }], stateChange: [{