@memberjunction/ng-dashboards 6.2.0-edge.3 → 6.2.0-edge.5

package/dist/Home/home-menus.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @fileoverview Placement and keyboard helpers for Home's fixed-position menus: the pin options menu and the
+ * Dashboards switcher. Pure, so they are tested without a browser.
+ */
+/** The trigger's box in viewport pixels. */
+export interface MenuAnchor {
+    Left: number;
+    Right: number;
+    Top: number;
+    Bottom: number;
+}
+/** The viewport size in pixels. */
+export interface MenuViewport {
+    Width: number;
+    Height: number;
+}
+/** Where a fixed-position menu goes, in viewport pixels. */
+export interface MenuPlacement {
+    Left: number;
+    Top: number;
+    /** The tallest the menu can be: the room on its side of the trigger, and never less than 120px. */
+    MaxHeight: number;
+}
+/** The box of an element, as a menu anchor. */
+export declare function MenuAnchorOf(element: Element): MenuAnchor;
+/**
+ * Places a menu under its trigger. 'right' lines up the right edges; when that passes the viewport's left margin, the
+ * menu lines up with the trigger's left edge instead. The menu stays inside the side margins. With a known height (the
+ * menu's full height), a menu that does not fit below opens above the trigger when it fits there. `MaxHeight` is the
+ * room on the side the menu opens to: down to the bottom margin, or up to the top margin.
+ */
+export declare function PlaceMenu(anchor: MenuAnchor, width: number, height: number, align: 'left' | 'right', viewport: MenuViewport): MenuPlacement;
+/**
+ * The menu row to focus for ArrowDown, ArrowUp, Home or End. `current` is the focused row, or -1 when focus is outside
+ * the rows (the filter box). Home and End only act on a row, so they still move the caret in the filter box.
+ */
+export declare function NextMenuFocusIndex(key: string, current: number, count: number): number | null;
+//# sourceMappingURL=home-menus.d.ts.map

package/dist/Home/home-menus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-menus.d.ts","sourceRoot":"","sources":["../../src/Home/home-menus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,4CAA4C;AAC5C,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,4DAA4D;AAC5D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,mGAAmG;IACnG,SAAS,EAAE,MAAM,CAAC;CACnB;AAOD,+CAA+C;AAC/C,wBAAgB,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,UAAU,CAGzD;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAG,aAAa,CAW3I;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgB7F"}

package/dist/Home/home-menus.js

@@ -0,0 +1,53 @@
+/**
+ * @fileoverview Placement and keyboard helpers for Home's fixed-position menus: the pin options menu and the
+ * Dashboards switcher. Pure, so they are tested without a browser.
+ */
+const MENU_GAP = 4;
+const VIEWPORT_MARGIN = 8;
+/** The smallest max height a menu gets, so a menu with little room stays usable. */
+const MENU_MIN_MAX_HEIGHT = 120;
+/** The box of an element, as a menu anchor. */
+export function MenuAnchorOf(element) {
+    const rect = element.getBoundingClientRect();
+    return { Left: rect.left, Right: rect.right, Top: rect.top, Bottom: rect.bottom };
+}
+/**
+ * Places a menu under its trigger. 'right' lines up the right edges; when that passes the viewport's left margin, the
+ * menu lines up with the trigger's left edge instead. The menu stays inside the side margins. With a known height (the
+ * menu's full height), a menu that does not fit below opens above the trigger when it fits there. `MaxHeight` is the
+ * room on the side the menu opens to: down to the bottom margin, or up to the top margin.
+ */
+export function PlaceMenu(anchor, width, height, align, viewport) {
+    let left = align === 'right' ? anchor.Right - width : anchor.Left;
+    if (align === 'right' && left < VIEWPORT_MARGIN) {
+        left = anchor.Left;
+    }
+    left = Math.max(VIEWPORT_MARGIN, Math.min(left, viewport.Width - width - VIEWPORT_MARGIN));
+    const below = anchor.Bottom + MENU_GAP;
+    const above = anchor.Top - MENU_GAP - height;
+    const opensAbove = height > 0 && below + height > viewport.Height - VIEWPORT_MARGIN && above >= VIEWPORT_MARGIN;
+    const room = opensAbove ? anchor.Top - MENU_GAP - VIEWPORT_MARGIN : viewport.Height - VIEWPORT_MARGIN - below;
+    return { Left: left, Top: opensAbove ? above : below, MaxHeight: Math.max(MENU_MIN_MAX_HEIGHT, room) };
+}
+/**
+ * The menu row to focus for ArrowDown, ArrowUp, Home or End. `current` is the focused row, or -1 when focus is outside
+ * the rows (the filter box). Home and End only act on a row, so they still move the caret in the filter box.
+ */
+export function NextMenuFocusIndex(key, current, count) {
+    if (count === 0) {
+        return null;
+    }
+    switch (key) {
+        case 'ArrowDown':
+            return current < 0 ? 0 : (current + 1) % count;
+        case 'ArrowUp':
+            return current < 0 ? count - 1 : (current - 1 + count) % count;
+        case 'Home':
+            return current < 0 ? null : 0;
+        case 'End':
+            return current < 0 ? null : count - 1;
+        default:
+            return null;
+    }
+}
+//# sourceMappingURL=home-menus.js.map

package/dist/Home/home-menus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-menus.js","sourceRoot":"","sources":["../../src/Home/home-menus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAwBH,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,eAAe,GAAG,CAAC,CAAC;AAC1B,oFAAoF;AACpF,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC,+CAA+C;AAC/C,MAAM,UAAU,YAAY,CAAC,OAAgB;IAC3C,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC7C,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AACpF,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,MAAkB,EAAE,KAAa,EAAE,MAAc,EAAE,KAAuB,EAAE,QAAsB;IAC1H,IAAI,IAAI,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;IAClE,IAAI,KAAK,KAAK,OAAO,IAAI,IAAI,GAAG,eAAe,EAAE,CAAC;QAChD,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACrB,CAAC;IACD,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,GAAG,KAAK,GAAG,eAAe,CAAC,CAAC,CAAC;IAC3F,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC;IACvC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,GAAG,CAAC,IAAI,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,eAAe,IAAI,KAAK,IAAI,eAAe,CAAC;IAChH,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,eAAe,GAAG,KAAK,CAAC;IAC9G,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,EAAE,CAAC;AACzG,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,GAAW,EAAE,OAAe,EAAE,KAAa;IAC5E,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,QAAQ,GAAG,EAAE,CAAC;QACZ,KAAK,WAAW;YACd,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC;QACjD,KAAK,SAAS;YACZ,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;QACjE,KAAK,MAAM;YACT,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAChC,KAAK,KAAK;YACR,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;QACxC;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC","sourcesContent":["/**\n * @fileoverview Placement and keyboard helpers for Home's fixed-position menus: the pin options menu and the\n * Dashboards switcher. Pure, so they are tested without a browser.\n */\n\n/** The trigger's box in viewport pixels. */\nexport interface MenuAnchor {\n  Left: number;\n  Right: number;\n  Top: number;\n  Bottom: number;\n}\n\n/** The viewport size in pixels. */\nexport interface MenuViewport {\n  Width: number;\n  Height: number;\n}\n\n/** Where a fixed-position menu goes, in viewport pixels. */\nexport interface MenuPlacement {\n  Left: number;\n  Top: number;\n  /** The tallest the menu can be: the room on its side of the trigger, and never less than 120px. */\n  MaxHeight: number;\n}\n\nconst MENU_GAP = 4;\nconst VIEWPORT_MARGIN = 8;\n/** The smallest max height a menu gets, so a menu with little room stays usable. */\nconst MENU_MIN_MAX_HEIGHT = 120;\n\n/** The box of an element, as a menu anchor. */\nexport function MenuAnchorOf(element: Element): MenuAnchor {\n  const rect = element.getBoundingClientRect();\n  return { Left: rect.left, Right: rect.right, Top: rect.top, Bottom: rect.bottom };\n}\n\n/**\n * Places a menu under its trigger. 'right' lines up the right edges; when that passes the viewport's left margin, the\n * menu lines up with the trigger's left edge instead. The menu stays inside the side margins. With a known height (the\n * menu's full height), a menu that does not fit below opens above the trigger when it fits there. `MaxHeight` is the\n * room on the side the menu opens to: down to the bottom margin, or up to the top margin.\n */\nexport function PlaceMenu(anchor: MenuAnchor, width: number, height: number, align: 'left' | 'right', viewport: MenuViewport): MenuPlacement {\n  let left = align === 'right' ? anchor.Right - width : anchor.Left;\n  if (align === 'right' && left < VIEWPORT_MARGIN) {\n    left = anchor.Left;\n  }\n  left = Math.max(VIEWPORT_MARGIN, Math.min(left, viewport.Width - width - VIEWPORT_MARGIN));\n  const below = anchor.Bottom + MENU_GAP;\n  const above = anchor.Top - MENU_GAP - height;\n  const opensAbove = height > 0 && below + height > viewport.Height - VIEWPORT_MARGIN && above >= VIEWPORT_MARGIN;\n  const room = opensAbove ? anchor.Top - MENU_GAP - VIEWPORT_MARGIN : viewport.Height - VIEWPORT_MARGIN - below;\n  return { Left: left, Top: opensAbove ? above : below, MaxHeight: Math.max(MENU_MIN_MAX_HEIGHT, room) };\n}\n\n/**\n * The menu row to focus for ArrowDown, ArrowUp, Home or End. `current` is the focused row, or -1 when focus is outside\n * the rows (the filter box). Home and End only act on a row, so they still move the caret in the filter box.\n */\nexport function NextMenuFocusIndex(key: string, current: number, count: number): number | null {\n  if (count === 0) {\n    return null;\n  }\n  switch (key) {\n    case 'ArrowDown':\n      return current < 0 ? 0 : (current + 1) % count;\n    case 'ArrowUp':\n      return current < 0 ? count - 1 : (current - 1 + count) % count;\n    case 'Home':\n      return current < 0 ? null : 0;\n    case 'End':\n      return current < 0 ? null : count - 1;\n    default:\n      return null;\n  }\n}\n"]}

package/dist/Home/home-pinned-dashboards.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Pure helpers for the dashboards pinned to Home: the type of a pin, the dashboard a pin opens, the
+ * names dashboard pins show, and the list, filter and lookup of the Dashboards switcher.
+ */
+import type { MJDashboardEntity } from '@memberjunction/core-entities';
+import type { HomeAppPinnedItem } from '@memberjunction/ng-shared';
+/** A dashboard the Dashboards switcher lists: a pinned Config dashboard the user can open. */
+export interface HomeSwitcherDashboard {
+    ID: string;
+    Name: string;
+}
+/**
+ * A pin's resource type: its stored ResourceType when that is a known type, else its configuration's resourceType,
+ * else a type read from its configuration keys (legacy pins). Unknown pins keep what they stored.
+ */
+export declare function ResolvePinResourceType(pin: HomeAppPinnedItem): string;
+/** The dashboard a Dashboards pin opens: its dashboardId, else its recordId (a pin of an app's default dashboard tab). Null for other pins. */
+export declare function DashboardIdOfPin(pin: HomeAppPinnedItem): string | null;
+/** The dashboard with this id (any letter case), or null. */
+export declare function FindDashboard<T extends {
+    ID: string;
+}>(dashboards: readonly T[], dashboardId: string | null): T | null;
+/** True for a dashboard Home shows in its dashboard view: a Config dashboard. Code dashboards open in a tab. */
+export declare function CanShowInHome(dashboard: Pick<MJDashboardEntity, 'Type'>): boolean;
+/** The names dashboard pins show, by pin id. A pin whose dashboard is not in `dashboards` is left out and shows its stored name. */
+export declare function BuildPinDashboardNames(pins: readonly HomeAppPinnedItem[], dashboards: readonly MJDashboardEntity[]): Map<string, string>;
+/** The pinned Config dashboards in pin order, each once. Pins whose dashboard is not in `dashboards` are left out. */
+export declare function BuildPinnedDashboards(pins: readonly HomeAppPinnedItem[], dashboards: readonly MJDashboardEntity[]): HomeSwitcherDashboard[];
+/** The dashboards whose name contains `query` (case-insensitive). An empty query keeps them all. */
+export declare function FilterSwitcherDashboards(dashboards: readonly HomeSwitcherDashboard[], query: string): HomeSwitcherDashboard[];
+/** A pinned dashboard by id (any letter case), else by name (exact, then partial). Null on a miss. */
+export declare function ResolvePinnedDashboardReference(reference: string, dashboards: readonly HomeSwitcherDashboard[]): HomeSwitcherDashboard | null;
+//# sourceMappingURL=home-pinned-dashboards.d.ts.map

package/dist/Home/home-pinned-dashboards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-pinned-dashboards.d.ts","sourceRoot":"","sources":["../../src/Home/home-pinned-dashboards.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,8FAA8F;AAC9F,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,iBAAiB,GAAG,MAAM,CAarE;AAED,+IAA+I;AAC/I,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAItE;AAED,6DAA6D;AAC7D,wBAAgB,aAAa,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,UAAU,EAAE,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAEtH;AAED,gHAAgH;AAChH,wBAAgB,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG,OAAO,CAEjF;AAED,oIAAoI;AACpI,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,SAAS,iBAAiB,EAAE,EAAE,UAAU,EAAE,SAAS,iBAAiB,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAOxI;AAED,sHAAsH;AACtH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,SAAS,iBAAiB,EAAE,EAAE,UAAU,EAAE,SAAS,iBAAiB,EAAE,GAAG,qBAAqB,EAAE,CAS3I;AAED,oGAAoG;AACpG,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,SAAS,qBAAqB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,qBAAqB,EAAE,CAG7H;AAED,sGAAsG;AACtG,wBAAgB,+BAA+B,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,qBAAqB,EAAE,GAAG,qBAAqB,GAAG,IAAI,CAE7I"}

package/dist/Home/home-pinned-dashboards.js

@@ -0,0 +1,76 @@
+import { UUIDsEqual } from '@memberjunction/global';
+import { ResolveNamedRecord } from './home-agent-context';
+const KNOWN_PIN_TYPES = ['Dashboards', 'User Views', 'Queries', 'Reports', 'Records', 'Custom', 'Actions'];
+/**
+ * A pin's resource type: its stored ResourceType when that is a known type, else its configuration's resourceType,
+ * else a type read from its configuration keys (legacy pins). Unknown pins keep what they stored.
+ */
+export function ResolvePinResourceType(pin) {
+    const config = pin.Configuration;
+    if (KNOWN_PIN_TYPES.includes(pin.ResourceType))
+        return pin.ResourceType;
+    const configType = config['resourceType'];
+    if (typeof configType === 'string' && KNOWN_PIN_TYPES.includes(configType))
+        return configType;
+    if (config['dashboardId'])
+        return 'Dashboards';
+    if (config['viewId'])
+        return 'User Views';
+    if (config['queryId'])
+        return 'Queries';
+    if (config['reportId'])
+        return 'Reports';
+    if ((config['Entity'] || config['entity']) && config['recordId'])
+        return 'Records';
+    if (config['actionId'])
+        return 'Actions';
+    if (config['navItemName'])
+        return 'Custom';
+    return pin.ResourceType;
+}
+/** The dashboard a Dashboards pin opens: its dashboardId, else its recordId (a pin of an app's default dashboard tab). Null for other pins. */
+export function DashboardIdOfPin(pin) {
+    if (ResolvePinResourceType(pin) !== 'Dashboards')
+        return null;
+    const id = pin.Configuration['dashboardId'] ?? pin.Configuration['recordId'];
+    return typeof id === 'string' && id.trim() ? id.trim() : null;
+}
+/** The dashboard with this id (any letter case), or null. */
+export function FindDashboard(dashboards, dashboardId) {
+    return dashboardId ? dashboards.find(d => UUIDsEqual(d.ID, dashboardId)) ?? null : null;
+}
+/** True for a dashboard Home shows in its dashboard view: a Config dashboard. Code dashboards open in a tab. */
+export function CanShowInHome(dashboard) {
+    return dashboard.Type === 'Config';
+}
+/** The names dashboard pins show, by pin id. A pin whose dashboard is not in `dashboards` is left out and shows its stored name. */
+export function BuildPinDashboardNames(pins, dashboards) {
+    const names = new Map();
+    for (const pin of pins) {
+        const dashboard = FindDashboard(dashboards, DashboardIdOfPin(pin));
+        if (dashboard)
+            names.set(pin.Id, dashboard.Name);
+    }
+    return names;
+}
+/** The pinned Config dashboards in pin order, each once. Pins whose dashboard is not in `dashboards` are left out. */
+export function BuildPinnedDashboards(pins, dashboards) {
+    const result = [];
+    for (const pin of pins) {
+        const dashboard = FindDashboard(dashboards, DashboardIdOfPin(pin));
+        if (dashboard && CanShowInHome(dashboard) && !FindDashboard(result, dashboard.ID)) {
+            result.push({ ID: dashboard.ID, Name: dashboard.Name });
+        }
+    }
+    return result;
+}
+/** The dashboards whose name contains `query` (case-insensitive). An empty query keeps them all. */
+export function FilterSwitcherDashboards(dashboards, query) {
+    const needle = query.trim().toLowerCase();
+    return needle ? dashboards.filter(d => d.Name.toLowerCase().includes(needle)) : [...dashboards];
+}
+/** A pinned dashboard by id (any letter case), else by name (exact, then partial). Null on a miss. */
+export function ResolvePinnedDashboardReference(reference, dashboards) {
+    return FindDashboard(dashboards, reference.trim()) ?? ResolveNamedRecord(reference, dashboards);
+}
+//# sourceMappingURL=home-pinned-dashboards.js.map

package/dist/Home/home-pinned-dashboards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-pinned-dashboards.js","sourceRoot":"","sources":["../../src/Home/home-pinned-dashboards.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAQ1D,MAAM,eAAe,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAE3G;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CAAC,GAAsB;IAC3D,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;IACjC,IAAI,eAAe,CAAC,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC;QAAE,OAAO,GAAG,CAAC,YAAY,CAAC;IACxE,MAAM,UAAU,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAC1C,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC;QAAE,OAAO,UAAU,CAAC;IAC9F,IAAI,MAAM,CAAC,aAAa,CAAC;QAAE,OAAO,YAAY,CAAC;IAC/C,IAAI,MAAM,CAAC,QAAQ,CAAC;QAAE,OAAO,YAAY,CAAC;IAC1C,IAAI,MAAM,CAAC,SAAS,CAAC;QAAE,OAAO,SAAS,CAAC;IACxC,IAAI,MAAM,CAAC,UAAU,CAAC;QAAE,OAAO,SAAS,CAAC;IACzC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC;QAAE,OAAO,SAAS,CAAC;IACnF,IAAI,MAAM,CAAC,UAAU,CAAC;QAAE,OAAO,SAAS,CAAC;IACzC,IAAI,MAAM,CAAC,aAAa,CAAC;QAAE,OAAO,QAAQ,CAAC;IAC3C,OAAO,GAAG,CAAC,YAAY,CAAC;AAC1B,CAAC;AAED,+IAA+I;AAC/I,MAAM,UAAU,gBAAgB,CAAC,GAAsB;IACrD,IAAI,sBAAsB,CAAC,GAAG,CAAC,KAAK,YAAY;QAAE,OAAO,IAAI,CAAC;IAC9D,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC7E,OAAO,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AAChE,CAAC;AAED,6DAA6D;AAC7D,MAAM,UAAU,aAAa,CAA2B,UAAwB,EAAE,WAA0B;IAC1G,OAAO,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1F,CAAC;AAED,gHAAgH;AAChH,MAAM,UAAU,aAAa,CAAC,SAA0C;IACtE,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC;AACrC,CAAC;AAED,oIAAoI;AACpI,MAAM,UAAU,sBAAsB,CAAC,IAAkC,EAAE,UAAwC;IACjH,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkB,CAAC;IACxC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,SAAS,GAAG,aAAa,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;QACnE,IAAI,SAAS;YAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACnD,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,sHAAsH;AACtH,MAAM,UAAU,qBAAqB,CAAC,IAAkC,EAAE,UAAwC;IAChH,MAAM,MAAM,GAA4B,EAAE,CAAC;IAC3C,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,SAAS,GAAG,aAAa,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;QACnE,IAAI,SAAS,IAAI,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC;YAClF,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,oGAAoG;AACpG,MAAM,UAAU,wBAAwB,CAAC,UAA4C,EAAE,KAAa;IAClG,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC1C,OAAO,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;AAClG,CAAC;AAED,sGAAsG;AACtG,MAAM,UAAU,+BAA+B,CAAC,SAAiB,EAAE,UAA4C;IAC7G,OAAO,aAAa,CAAC,UAAU,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC,IAAI,kBAAkB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAClG,CAAC","sourcesContent":["/**\n * @fileoverview Pure helpers for the dashboards pinned to Home: the type of a pin, the dashboard a pin opens, the\n * names dashboard pins show, and the list, filter and lookup of the Dashboards switcher.\n */\nimport type { MJDashboardEntity } from '@memberjunction/core-entities';\nimport { UUIDsEqual } from '@memberjunction/global';\nimport type { HomeAppPinnedItem } from '@memberjunction/ng-shared';\nimport { ResolveNamedRecord } from './home-agent-context';\n\n/** A dashboard the Dashboards switcher lists: a pinned Config dashboard the user can open. */\nexport interface HomeSwitcherDashboard {\n  ID: string;\n  Name: string;\n}\n\nconst KNOWN_PIN_TYPES = ['Dashboards', 'User Views', 'Queries', 'Reports', 'Records', 'Custom', 'Actions'];\n\n/**\n * A pin's resource type: its stored ResourceType when that is a known type, else its configuration's resourceType,\n * else a type read from its configuration keys (legacy pins). Unknown pins keep what they stored.\n */\nexport function ResolvePinResourceType(pin: HomeAppPinnedItem): string {\n  const config = pin.Configuration;\n  if (KNOWN_PIN_TYPES.includes(pin.ResourceType)) return pin.ResourceType;\n  const configType = config['resourceType'];\n  if (typeof configType === 'string' && KNOWN_PIN_TYPES.includes(configType)) return configType;\n  if (config['dashboardId']) return 'Dashboards';\n  if (config['viewId']) return 'User Views';\n  if (config['queryId']) return 'Queries';\n  if (config['reportId']) return 'Reports';\n  if ((config['Entity'] || config['entity']) && config['recordId']) return 'Records';\n  if (config['actionId']) return 'Actions';\n  if (config['navItemName']) return 'Custom';\n  return pin.ResourceType;\n}\n\n/** The dashboard a Dashboards pin opens: its dashboardId, else its recordId (a pin of an app's default dashboard tab). Null for other pins. */\nexport function DashboardIdOfPin(pin: HomeAppPinnedItem): string | null {\n  if (ResolvePinResourceType(pin) !== 'Dashboards') return null;\n  const id = pin.Configuration['dashboardId'] ?? pin.Configuration['recordId'];\n  return typeof id === 'string' && id.trim() ? id.trim() : null;\n}\n\n/** The dashboard with this id (any letter case), or null. */\nexport function FindDashboard<T extends { ID: string }>(dashboards: readonly T[], dashboardId: string | null): T | null {\n  return dashboardId ? dashboards.find(d => UUIDsEqual(d.ID, dashboardId)) ?? null : null;\n}\n\n/** True for a dashboard Home shows in its dashboard view: a Config dashboard. Code dashboards open in a tab. */\nexport function CanShowInHome(dashboard: Pick<MJDashboardEntity, 'Type'>): boolean {\n  return dashboard.Type === 'Config';\n}\n\n/** The names dashboard pins show, by pin id. A pin whose dashboard is not in `dashboards` is left out and shows its stored name. */\nexport function BuildPinDashboardNames(pins: readonly HomeAppPinnedItem[], dashboards: readonly MJDashboardEntity[]): Map<string, string> {\n  const names = new Map<string, string>();\n  for (const pin of pins) {\n    const dashboard = FindDashboard(dashboards, DashboardIdOfPin(pin));\n    if (dashboard) names.set(pin.Id, dashboard.Name);\n  }\n  return names;\n}\n\n/** The pinned Config dashboards in pin order, each once. Pins whose dashboard is not in `dashboards` are left out. */\nexport function BuildPinnedDashboards(pins: readonly HomeAppPinnedItem[], dashboards: readonly MJDashboardEntity[]): HomeSwitcherDashboard[] {\n  const result: HomeSwitcherDashboard[] = [];\n  for (const pin of pins) {\n    const dashboard = FindDashboard(dashboards, DashboardIdOfPin(pin));\n    if (dashboard && CanShowInHome(dashboard) && !FindDashboard(result, dashboard.ID)) {\n      result.push({ ID: dashboard.ID, Name: dashboard.Name });\n    }\n  }\n  return result;\n}\n\n/** The dashboards whose name contains `query` (case-insensitive). An empty query keeps them all. */\nexport function FilterSwitcherDashboards(dashboards: readonly HomeSwitcherDashboard[], query: string): HomeSwitcherDashboard[] {\n  const needle = query.trim().toLowerCase();\n  return needle ? dashboards.filter(d => d.Name.toLowerCase().includes(needle)) : [...dashboards];\n}\n\n/** A pinned dashboard by id (any letter case), else by name (exact, then partial). Null on a miss. */\nexport function ResolvePinnedDashboardReference(reference: string, dashboards: readonly HomeSwitcherDashboard[]): HomeSwitcherDashboard | null {\n  return FindDashboard(dashboards, reference.trim()) ?? ResolveNamedRecord(reference, dashboards);\n}\n"]}

package/dist/Integration/components/overview/overview.component.js

@@ -739,7 +739,7 @@ let OverviewComponent = class OverviewComponent extends BaseResourceComponent {
             i0.ɵɵconditional(ctx.Notification ? 7 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.IsLoading ? 8 : ctx.Summaries.length === 0 ? 9 : 10);
-        } }, dependencies: [i1.MJPageLayoutComponent, i1.MJPageHeaderComponent, i1.MJPageBodyComponent, i1.MJStatBadgeComponent, i1.MJRefreshButtonComponent, i1.MJEmptyStateComponent, i2.LoadingComponent, i3.DecimalPipe], styles: ["\n\n\n.overview[_ngcontent-%COMP%] {\n  \n\n  max-width: 1440px;\n  margin: 0 auto;\n}\n\n\n\n\n\n\n.notification[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: _ngcontent-%COMP%_slideDown 0.25s ease-out;\n}\n.notification[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child { font-size: 16px; }\n.notification-message[_ngcontent-%COMP%] { flex: 1; }\n.notification-success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss[_ngcontent-%COMP%]:hover { opacity: 1; }\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n\n\n\n.metric-strip[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon[_ngcontent-%COMP%] {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue[_ngcontent-%COMP%]   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green[_ngcontent-%COMP%]  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n.metric-ring[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value[_ngcontent-%COMP%] {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n\n.pulse-dot[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n\n\n\n.section-heading[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 16px;\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  \n  flex-shrink: 0;\n  box-sizing: border-box;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n\n.pipeline-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card[_ngcontent-%COMP%] {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  \n\n\n  overflow: hidden;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n\n.status-dot[_ngcontent-%COMP%] {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green[_ngcontent-%COMP%]  { background: var(--mj-color-success-600); }\n.status-dot-amber[_ngcontent-%COMP%]  { background: var(--mj-status-warning); }\n.status-dot-red[_ngcontent-%COMP%]    { background: var(--mj-status-error); }\n.status-dot-gray[_ngcontent-%COMP%]   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: _ngcontent-%COMP%_dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes _ngcontent-%COMP%_dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n\n.pipeline-flow[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n\n.card-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.sparkline-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.spark-red[_ngcontent-%COMP%]   { background: var(--mj-status-error); }\n.spark-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.spark-gray[_ngcontent-%COMP%]  { background: var(--mj-color-neutral-300); }\n.sparkline-none[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n\n.card-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  \n\n  min-width: 0;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  \n  max-width: 100%;\n  box-sizing: border-box;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n.btn-sync[_ngcontent-%COMP%]:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n\n\n\n.bottom-split[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n\n.chart-panel[_ngcontent-%COMP%] {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n\n.feed-panel[_ngcontent-%COMP%] {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.feed-icon-red[_ngcontent-%COMP%]   { color: var(--mj-color-error-600); }\n.feed-icon-amber[_ngcontent-%COMP%] { color: var(--mj-color-warning-600); }\n\n.feed-details[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n\n\n\n@media (max-width: 1200px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n  .card-stats[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
+        } }, dependencies: [i1.MJPageLayoutComponent, i1.MJPageHeaderComponent, i1.MJPageBodyComponent, i1.MJStatBadgeComponent, i1.MJRefreshButtonComponent, i1.MJEmptyStateComponent, i2.LoadingComponent, i3.DecimalPipe], styles: ["\n\n\n.overview[_ngcontent-%COMP%] {\n  \n\n  max-width: 1440px;\n  margin: 0 auto;\n}\n\n\n\n\n\n\n.notification[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: _ngcontent-%COMP%_slideDown 0.25s ease-out;\n}\n.notification[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child { font-size: 16px; }\n.notification-message[_ngcontent-%COMP%] { flex: 1; }\n.notification-success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss[_ngcontent-%COMP%]:hover { opacity: 1; }\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n\n\n\n.metric-strip[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon[_ngcontent-%COMP%] {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue[_ngcontent-%COMP%]   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green[_ngcontent-%COMP%]  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n.metric-ring[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value[_ngcontent-%COMP%] {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n\n.pulse-dot[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n\n\n\n.section-heading[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 16px;\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  \n  flex-shrink: 0;\n  box-sizing: border-box;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-status-info-border);\n}\n\n.pipeline-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card[_ngcontent-%COMP%] {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  \n\n\n  overflow: hidden;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n\n.status-dot[_ngcontent-%COMP%] {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green[_ngcontent-%COMP%]  { background: var(--mj-color-success-600); }\n.status-dot-amber[_ngcontent-%COMP%]  { background: var(--mj-status-warning); }\n.status-dot-red[_ngcontent-%COMP%]    { background: var(--mj-status-error); }\n.status-dot-gray[_ngcontent-%COMP%]   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: _ngcontent-%COMP%_dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes _ngcontent-%COMP%_dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n\n.pipeline-flow[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n\n.card-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.sparkline-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.spark-red[_ngcontent-%COMP%]   { background: var(--mj-status-error); }\n.spark-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.spark-gray[_ngcontent-%COMP%]  { background: var(--mj-color-neutral-300); }\n.sparkline-none[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n\n.card-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  \n\n  min-width: 0;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  \n  max-width: 100%;\n  box-sizing: border-box;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-status-info-border);\n}\n.btn-sync[_ngcontent-%COMP%]:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n\n\n\n.bottom-split[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n\n.chart-panel[_ngcontent-%COMP%] {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n\n.feed-panel[_ngcontent-%COMP%] {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.feed-icon-red[_ngcontent-%COMP%]   { color: var(--mj-color-error-600); }\n.feed-icon-amber[_ngcontent-%COMP%] { color: var(--mj-color-warning-600); }\n\n.feed-details[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n\n\n\n@media (max-width: 1200px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n  .card-stats[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
 };
 OverviewComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'IntegrationOverview')
@@ -747,7 +747,7 @@ OverviewComponent = __decorate([
 export { OverviewComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverviewComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-integration-overview', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Integration Overview\"\n    Icon=\"fa-solid fa-gauge-high\"\n    Subtitle=\"Health, throughput, and activity across all integrations\">\n    @if (Summaries.length > 0) {\n      <div meta>\n        <mj-stat-badge [Count]=\"KPIs.TotalIntegrations\" Label=\"integrations\"></mj-stat-badge>\n      </div>\n    }\n    <div actions>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"Refresh()\"></mj-refresh-button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n<div class=\"overview\">\n  <!-- Notification Banner -->\n  @if (Notification) {\n    <div class=\"notification\" [class.notification-success]=\"Notification.Type === 'success'\"\n         [class.notification-error]=\"Notification.Type === 'error'\">\n      @if (Notification.Type === 'success') {\n        <i class=\"fa-solid fa-circle-check\"></i>\n      } @else {\n        <i class=\"fa-solid fa-circle-xmark\"></i>\n      }\n      <span class=\"notification-message\">{{ Notification.Message }}</span>\n      <button class=\"notification-dismiss\" (click)=\"DismissNotification()\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n  }\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading integrations...\" size=\"medium\"></mj-loading>\n  } @else if (Summaries.length === 0) {\n    <mj-empty-state Icon=\"fa-solid fa-plug-circle-xmark\"\n      Title=\"No Integrations Configured\"\n      Message=\"Set up your first integration using the Connection Studio to start syncing data.\" />\n  } @else {\n    <!-- ====================================================================\n         SECTION 1: Metric Strip\n         ==================================================================== -->\n    <div class=\"metric-strip\">\n      <!-- Total Pipelines -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-blue\">\n          <i class=\"fa-solid fa-diagram-project\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ KPIs.TotalIntegrations }}</span>\n          <span class=\"metric-label\">Total Pipelines</span>\n        </div>\n      </div>\n\n      <!-- Records Today -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-green\">\n          <i class=\"fa-solid fa-database\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatNumber(KPIs.RecordsSyncedToday) }}</span>\n          <span class=\"metric-label\">Records Today</span>\n        </div>\n      </div>\n\n      <!-- Success Rate (with conic gradient ring) -->\n      <div class=\"metric-card\">\n        <div class=\"metric-ring\" [style.background]=\"SuccessRateGradient\">\n          <div class=\"metric-ring-inner\">\n            <span class=\"metric-ring-value\">{{ SuccessRate }}%</span>\n          </div>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value metric-value-indigo\">{{ SuccessRate }}%</span>\n          <span class=\"metric-label\">Success Rate</span>\n        </div>\n      </div>\n\n      <!-- Active Now -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-emerald\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          @if (ActiveCount > 0) {\n            <span class=\"pulse-dot\"></span>\n          }\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ ActiveCount }}</span>\n          <span class=\"metric-label\">Active Now</span>\n        </div>\n      </div>\n\n      <!-- Avg Duration -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-orange\">\n          <i class=\"fa-solid fa-clock\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatDuration(KPIs.AverageSyncDurationMs) }}</span>\n          <span class=\"metric-label\">Avg Duration</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ====================================================================\n         SECTION 2: Pipeline Health Grid\n         ==================================================================== -->\n    <div class=\"section-heading\">\n      <h3><i class=\"fa-solid fa-heart-pulse\"></i> Pipeline Health</h3>\n      <button class=\"refresh-btn\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n    </div>\n\n    <div class=\"pipeline-grid\">\n      @for (summary of Summaries; track summary.Integration.ID) {\n        <div [class]=\"GetCardBorderClass(summary.StatusColor)\">\n          <!-- Card Header -->\n          <div class=\"card-header\">\n            <div class=\"card-header-left\">\n              <div class=\"card-icon-wrap\">\n                <i [class]=\"GetIntegrationIcon(summary)\"></i>\n              </div>\n              <div class=\"card-title-wrap\">\n                <span class=\"card-title\">{{ summary.Integration.Name }}</span>\n                <span class=\"card-subtitle\">{{ summary.SourceType?.Name ?? 'Custom' }}</span>\n              </div>\n            </div>\n            <div [class]=\"GetStatusDotClass(summary.StatusColor)\"\n                 [title]=\"GetStatusLabel(summary.StatusColor)\">\n              @if (summary.LatestRun?.Status === 'In Progress') {\n                <span class=\"dot-pulse\"></span>\n              }\n            </div>\n          </div>\n\n          <!-- Pipeline Flow Visual -->\n          <div class=\"pipeline-flow\">\n            <div class=\"flow-node\">\n              <i [class]=\"GetIntegrationIcon(summary)\"></i>\n            </div>\n            <div class=\"flow-arrow\">\n              <div class=\"flow-line\"></div>\n              <span class=\"flow-count\">{{ GetEntityMapCount(summary.Integration.ID) }} maps</span>\n              <div class=\"flow-line\"></div>\n            </div>\n            <div class=\"flow-node flow-node-mj\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n            </div>\n          </div>\n\n          <!-- Stats Row -->\n          <div class=\"card-stats\">\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Last sync</span>\n              <span class=\"stat-value\">{{ summary.RelativeTime }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Records</span>\n              <span class=\"stat-value\">{{ FormatNumber(summary.LatestRun?.TotalRecords ?? 0) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Duration</span>\n              <span class=\"stat-value\">{{ FormatDuration(summary.DurationMs) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Errors</span>\n              <span class=\"stat-value\" [class.stat-error]=\"summary.TotalErrors > 0\">\n                {{ summary.TotalErrors }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Sparkline (last 5 runs) -->\n          <div class=\"sparkline-row\">\n            <span class=\"sparkline-label\">Recent runs</span>\n            <div class=\"sparkline-dots\">\n              @for (run of summary.RecentRuns; track run.ID) {\n                <span [class]=\"GetSparklineDotClass(run)\"\n                      [title]=\"GetSparklineTooltip(run)\"></span>\n              }\n              @if (summary.RecentRuns.length === 0) {\n                <span class=\"sparkline-none\">No runs</span>\n              }\n            </div>\n          </div>\n\n          <!-- Card Footer -->\n          <div class=\"card-footer\">\n            @if (IsRunning(summary.Integration.ID)) {\n              <button class=\"btn-sync btn-sync-disabled\" disabled>\n                <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n              </button>\n            } @else {\n              <button class=\"btn-sync\"\n                      (click)=\"RunSync(summary.Integration.ID)\"\n                      [disabled]=\"!summary.Integration.IsActive || RunningIntegrationID !== null\">\n                <i class=\"fa-solid fa-play\"></i> Sync Now\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- ====================================================================\n         SECTION 3: Bottom - Bar Chart & Activity Feed\n         ==================================================================== -->\n    <div class=\"bottom-split\">\n      <!-- Bar Chart (left, 60%) -->\n      <div class=\"chart-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-chart-bar\"></i> Records Synced (7 days)</h3>\n        @if (DailyCounts.length === 0) {\n          <p class=\"empty-hint\">No data available.</p>\n        } @else {\n          <div class=\"bar-chart\">\n            @for (day of DailyCounts; track day.Date) {\n              <div class=\"bar-column\">\n                <div class=\"bar-count\">{{ FormatNumber(day.Records) }}</div>\n                <div class=\"bar-fill\" [style.height.%]=\"BarHeight(day.Records)\"></div>\n                <div class=\"bar-day\">{{ day.Label }}</div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Activity Feed (right, 40%) -->\n      <div class=\"feed-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-stream\"></i> Recent Activity</h3>\n        @if (ActivityFeed.length === 0) {\n          <p class=\"empty-hint\">No recent activity.</p>\n        } @else {\n          <div class=\"feed-list\">\n            @for (item of ActivityFeed; track item.RunID) {\n              <div class=\"feed-item\">\n                <i [class]=\"ActivityStatusIcon(item.Status)\"\n                   [class.feed-icon-green]=\"item.StatusColor === 'green'\"\n                   [class.feed-icon-red]=\"item.StatusColor === 'red'\"\n                   [class.feed-icon-amber]=\"item.StatusColor === 'amber'\">\n                </i>\n                <div class=\"feed-details\">\n                  <span class=\"feed-name\">{{ item.IntegrationName }}</span>\n                  <span class=\"feed-meta\">{{ item.TotalRecords | number }} records &middot; {{ item.RelativeTime }}</span>\n                </div>\n                <span class=\"feed-badge\" [class]=\"'feed-badge-' + item.StatusColor\">\n                  {{ item.Status }}\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* ==========================================================================\n   Integration Overview - Root\n   ========================================================================== */\n.overview {\n  /* padding + flex/scroll now owned by <mj-page-body>; keep max-width for\n     comfortable reading on ultra-wide displays. */\n  max-width: 1440px;\n  margin: 0 auto;\n}\n\n/* Slot passthrough now in <mj-page-header>; stat badges now via <mj-stat-badge>. */\n\n/* ==========================================================================\n   Notification Banner\n   ========================================================================== */\n.notification {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: slideDown 0.25s ease-out;\n}\n.notification i:first-child { font-size: 16px; }\n.notification-message { flex: 1; }\n.notification-success {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss:hover { opacity: 1; }\n\n@keyframes slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n/* ==========================================================================\n   Empty State\n   ========================================================================== */\n\n/* ==========================================================================\n   SECTION 1: Metric Strip\n   ========================================================================== */\n.metric-strip {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo { color: var(--mj-color-indigo-500); }\n\n.metric-label {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Conic gradient ring for success rate */\n.metric-ring {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n/* Pulse dot for active syncs */\n.pulse-dot {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n/* ==========================================================================\n   SECTION 2: Pipeline Health Grid\n   ========================================================================== */\n.section-heading {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 16px;\n}\n.section-heading h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading h3 i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  /* Don't let the button shrink/overflow the heading row on narrow widths. */\n  flex-shrink: 0;\n  box-sizing: border-box;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n\n.pipeline-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  /* Clip children to the card's rounded border so footer buttons (.btn-sync)\n     and any flush-edge content can't poke past the rounded corners. box-shadow\n     is drawn outside the border-box, so the hover shadow below is unaffected. */\n  overflow: hidden;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n/* Card Header */\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n/* Status Dot */\n.status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green  { background: var(--mj-color-success-600); }\n.status-dot-amber  { background: var(--mj-status-warning); }\n.status-dot-red    { background: var(--mj-status-error); }\n.status-dot-gray   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n/* Pipeline Flow Visual */\n.pipeline-flow {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n/* Card Stats */\n.card-stats {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error {\n  color: var(--mj-status-error);\n}\n\n/* Sparkline Row */\n.sparkline-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green { background: var(--mj-color-success-600); }\n.spark-red   { background: var(--mj-status-error); }\n.spark-amber { background: var(--mj-status-warning); }\n.spark-gray  { background: var(--mj-color-neutral-300); }\n.sparkline-none {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n/* Card Footer */\n.card-footer {\n  display: flex;\n  justify-content: flex-end;\n  /* min-width:0 lets the footer shrink so its button is bounded by the card's\n     content box and can't be pushed past the right/bottom padding edge. */\n  min-width: 0;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  /* Keep the button bounded by its container so it stays inside the card. */\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n.btn-sync:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n/* ==========================================================================\n   SECTION 3: Bottom Split - Chart + Feed\n   ========================================================================== */\n.bottom-split {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n/* Bar Chart Panel (left, 60%) */\n.chart-panel {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n/* Activity Feed Panel (right, 40%) */\n.feed-panel {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green { color: var(--mj-color-success-600); }\n.feed-icon-red   { color: var(--mj-color-error-600); }\n.feed-icon-amber { color: var(--mj-color-warning-600); }\n\n.feed-details {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n/* ==========================================================================\n   Responsive\n   ========================================================================== */\n@media (max-width: 1200px) {\n  .pipeline-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split {\n    flex-direction: column;\n  }\n  .card-stats {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview {\n    padding: 16px;\n  }\n  .metric-strip {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-integration-overview', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Integration Overview\"\n    Icon=\"fa-solid fa-gauge-high\"\n    Subtitle=\"Health, throughput, and activity across all integrations\">\n    @if (Summaries.length > 0) {\n      <div meta>\n        <mj-stat-badge [Count]=\"KPIs.TotalIntegrations\" Label=\"integrations\"></mj-stat-badge>\n      </div>\n    }\n    <div actions>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"Refresh()\"></mj-refresh-button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n<div class=\"overview\">\n  <!-- Notification Banner -->\n  @if (Notification) {\n    <div class=\"notification\" [class.notification-success]=\"Notification.Type === 'success'\"\n         [class.notification-error]=\"Notification.Type === 'error'\">\n      @if (Notification.Type === 'success') {\n        <i class=\"fa-solid fa-circle-check\"></i>\n      } @else {\n        <i class=\"fa-solid fa-circle-xmark\"></i>\n      }\n      <span class=\"notification-message\">{{ Notification.Message }}</span>\n      <button class=\"notification-dismiss\" (click)=\"DismissNotification()\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n  }\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading integrations...\" size=\"medium\"></mj-loading>\n  } @else if (Summaries.length === 0) {\n    <mj-empty-state Icon=\"fa-solid fa-plug-circle-xmark\"\n      Title=\"No Integrations Configured\"\n      Message=\"Set up your first integration using the Connection Studio to start syncing data.\" />\n  } @else {\n    <!-- ====================================================================\n         SECTION 1: Metric Strip\n         ==================================================================== -->\n    <div class=\"metric-strip\">\n      <!-- Total Pipelines -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-blue\">\n          <i class=\"fa-solid fa-diagram-project\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ KPIs.TotalIntegrations }}</span>\n          <span class=\"metric-label\">Total Pipelines</span>\n        </div>\n      </div>\n\n      <!-- Records Today -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-green\">\n          <i class=\"fa-solid fa-database\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatNumber(KPIs.RecordsSyncedToday) }}</span>\n          <span class=\"metric-label\">Records Today</span>\n        </div>\n      </div>\n\n      <!-- Success Rate (with conic gradient ring) -->\n      <div class=\"metric-card\">\n        <div class=\"metric-ring\" [style.background]=\"SuccessRateGradient\">\n          <div class=\"metric-ring-inner\">\n            <span class=\"metric-ring-value\">{{ SuccessRate }}%</span>\n          </div>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value metric-value-indigo\">{{ SuccessRate }}%</span>\n          <span class=\"metric-label\">Success Rate</span>\n        </div>\n      </div>\n\n      <!-- Active Now -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-emerald\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          @if (ActiveCount > 0) {\n            <span class=\"pulse-dot\"></span>\n          }\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ ActiveCount }}</span>\n          <span class=\"metric-label\">Active Now</span>\n        </div>\n      </div>\n\n      <!-- Avg Duration -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-orange\">\n          <i class=\"fa-solid fa-clock\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatDuration(KPIs.AverageSyncDurationMs) }}</span>\n          <span class=\"metric-label\">Avg Duration</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ====================================================================\n         SECTION 2: Pipeline Health Grid\n         ==================================================================== -->\n    <div class=\"section-heading\">\n      <h3><i class=\"fa-solid fa-heart-pulse\"></i> Pipeline Health</h3>\n      <button class=\"refresh-btn\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n    </div>\n\n    <div class=\"pipeline-grid\">\n      @for (summary of Summaries; track summary.Integration.ID) {\n        <div [class]=\"GetCardBorderClass(summary.StatusColor)\">\n          <!-- Card Header -->\n          <div class=\"card-header\">\n            <div class=\"card-header-left\">\n              <div class=\"card-icon-wrap\">\n                <i [class]=\"GetIntegrationIcon(summary)\"></i>\n              </div>\n              <div class=\"card-title-wrap\">\n                <span class=\"card-title\">{{ summary.Integration.Name }}</span>\n                <span class=\"card-subtitle\">{{ summary.SourceType?.Name ?? 'Custom' }}</span>\n              </div>\n            </div>\n            <div [class]=\"GetStatusDotClass(summary.StatusColor)\"\n                 [title]=\"GetStatusLabel(summary.StatusColor)\">\n              @if (summary.LatestRun?.Status === 'In Progress') {\n                <span class=\"dot-pulse\"></span>\n              }\n            </div>\n          </div>\n\n          <!-- Pipeline Flow Visual -->\n          <div class=\"pipeline-flow\">\n            <div class=\"flow-node\">\n              <i [class]=\"GetIntegrationIcon(summary)\"></i>\n            </div>\n            <div class=\"flow-arrow\">\n              <div class=\"flow-line\"></div>\n              <span class=\"flow-count\">{{ GetEntityMapCount(summary.Integration.ID) }} maps</span>\n              <div class=\"flow-line\"></div>\n            </div>\n            <div class=\"flow-node flow-node-mj\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n            </div>\n          </div>\n\n          <!-- Stats Row -->\n          <div class=\"card-stats\">\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Last sync</span>\n              <span class=\"stat-value\">{{ summary.RelativeTime }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Records</span>\n              <span class=\"stat-value\">{{ FormatNumber(summary.LatestRun?.TotalRecords ?? 0) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Duration</span>\n              <span class=\"stat-value\">{{ FormatDuration(summary.DurationMs) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Errors</span>\n              <span class=\"stat-value\" [class.stat-error]=\"summary.TotalErrors > 0\">\n                {{ summary.TotalErrors }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Sparkline (last 5 runs) -->\n          <div class=\"sparkline-row\">\n            <span class=\"sparkline-label\">Recent runs</span>\n            <div class=\"sparkline-dots\">\n              @for (run of summary.RecentRuns; track run.ID) {\n                <span [class]=\"GetSparklineDotClass(run)\"\n                      [title]=\"GetSparklineTooltip(run)\"></span>\n              }\n              @if (summary.RecentRuns.length === 0) {\n                <span class=\"sparkline-none\">No runs</span>\n              }\n            </div>\n          </div>\n\n          <!-- Card Footer -->\n          <div class=\"card-footer\">\n            @if (IsRunning(summary.Integration.ID)) {\n              <button class=\"btn-sync btn-sync-disabled\" disabled>\n                <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n              </button>\n            } @else {\n              <button class=\"btn-sync\"\n                      (click)=\"RunSync(summary.Integration.ID)\"\n                      [disabled]=\"!summary.Integration.IsActive || RunningIntegrationID !== null\">\n                <i class=\"fa-solid fa-play\"></i> Sync Now\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- ====================================================================\n         SECTION 3: Bottom - Bar Chart & Activity Feed\n         ==================================================================== -->\n    <div class=\"bottom-split\">\n      <!-- Bar Chart (left, 60%) -->\n      <div class=\"chart-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-chart-bar\"></i> Records Synced (7 days)</h3>\n        @if (DailyCounts.length === 0) {\n          <p class=\"empty-hint\">No data available.</p>\n        } @else {\n          <div class=\"bar-chart\">\n            @for (day of DailyCounts; track day.Date) {\n              <div class=\"bar-column\">\n                <div class=\"bar-count\">{{ FormatNumber(day.Records) }}</div>\n                <div class=\"bar-fill\" [style.height.%]=\"BarHeight(day.Records)\"></div>\n                <div class=\"bar-day\">{{ day.Label }}</div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Activity Feed (right, 40%) -->\n      <div class=\"feed-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-stream\"></i> Recent Activity</h3>\n        @if (ActivityFeed.length === 0) {\n          <p class=\"empty-hint\">No recent activity.</p>\n        } @else {\n          <div class=\"feed-list\">\n            @for (item of ActivityFeed; track item.RunID) {\n              <div class=\"feed-item\">\n                <i [class]=\"ActivityStatusIcon(item.Status)\"\n                   [class.feed-icon-green]=\"item.StatusColor === 'green'\"\n                   [class.feed-icon-red]=\"item.StatusColor === 'red'\"\n                   [class.feed-icon-amber]=\"item.StatusColor === 'amber'\">\n                </i>\n                <div class=\"feed-details\">\n                  <span class=\"feed-name\">{{ item.IntegrationName }}</span>\n                  <span class=\"feed-meta\">{{ item.TotalRecords | number }} records &middot; {{ item.RelativeTime }}</span>\n                </div>\n                <span class=\"feed-badge\" [class]=\"'feed-badge-' + item.StatusColor\">\n                  {{ item.Status }}\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* ==========================================================================\n   Integration Overview - Root\n   ========================================================================== */\n.overview {\n  /* padding + flex/scroll now owned by <mj-page-body>; keep max-width for\n     comfortable reading on ultra-wide displays. */\n  max-width: 1440px;\n  margin: 0 auto;\n}\n\n/* Slot passthrough now in <mj-page-header>; stat badges now via <mj-stat-badge>. */\n\n/* ==========================================================================\n   Notification Banner\n   ========================================================================== */\n.notification {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: slideDown 0.25s ease-out;\n}\n.notification i:first-child { font-size: 16px; }\n.notification-message { flex: 1; }\n.notification-success {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss:hover { opacity: 1; }\n\n@keyframes slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n/* ==========================================================================\n   Empty State\n   ========================================================================== */\n\n/* ==========================================================================\n   SECTION 1: Metric Strip\n   ========================================================================== */\n.metric-strip {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo { color: var(--mj-color-indigo-500); }\n\n.metric-label {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Conic gradient ring for success rate */\n.metric-ring {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n/* Pulse dot for active syncs */\n.pulse-dot {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n/* ==========================================================================\n   SECTION 2: Pipeline Health Grid\n   ========================================================================== */\n.section-heading {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 16px;\n}\n.section-heading h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading h3 i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  /* Don't let the button shrink/overflow the heading row on narrow widths. */\n  flex-shrink: 0;\n  box-sizing: border-box;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-status-info-border);\n}\n\n.pipeline-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  /* Clip children to the card's rounded border so footer buttons (.btn-sync)\n     and any flush-edge content can't poke past the rounded corners. box-shadow\n     is drawn outside the border-box, so the hover shadow below is unaffected. */\n  overflow: hidden;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n/* Card Header */\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n/* Status Dot */\n.status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green  { background: var(--mj-color-success-600); }\n.status-dot-amber  { background: var(--mj-status-warning); }\n.status-dot-red    { background: var(--mj-status-error); }\n.status-dot-gray   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n/* Pipeline Flow Visual */\n.pipeline-flow {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n/* Card Stats */\n.card-stats {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error {\n  color: var(--mj-status-error);\n}\n\n/* Sparkline Row */\n.sparkline-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green { background: var(--mj-color-success-600); }\n.spark-red   { background: var(--mj-status-error); }\n.spark-amber { background: var(--mj-status-warning); }\n.spark-gray  { background: var(--mj-color-neutral-300); }\n.sparkline-none {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n/* Card Footer */\n.card-footer {\n  display: flex;\n  justify-content: flex-end;\n  /* min-width:0 lets the footer shrink so its button is bounded by the card's\n     content box and can't be pushed past the right/bottom padding edge. */\n  min-width: 0;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  /* Keep the button bounded by its container so it stays inside the card. */\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-status-info-border);\n}\n.btn-sync:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n/* ==========================================================================\n   SECTION 3: Bottom Split - Chart + Feed\n   ========================================================================== */\n.bottom-split {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n/* Bar Chart Panel (left, 60%) */\n.chart-panel {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n/* Activity Feed Panel (right, 40%) */\n.feed-panel {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green { color: var(--mj-color-success-600); }\n.feed-icon-red   { color: var(--mj-color-error-600); }\n.feed-icon-amber { color: var(--mj-color-warning-600); }\n\n.feed-details {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n/* ==========================================================================\n   Responsive\n   ========================================================================== */\n@media (max-width: 1200px) {\n  .pipeline-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split {\n    flex-direction: column;\n  }\n  .card-stats {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview {\n    padding: 16px;\n  }\n  .metric-strip {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverviewComponent, { className: "OverviewComponent", filePath: "src/Integration/components/overview/overview.component.ts", lineNumber: 41 }); })();
 export function LoadOverviewComponent() {