@memberjunction/ng-dashboards 5.11.0 → 5.13.0

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

@@ -700,11 +700,11 @@ export class SchedulingActivityComponent {
             i0.ɵɵconditional(ctx.IsLoading ? 23 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.IsLoading ? 24 : -1);
-        } }, dependencies: [i2.NgClass, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.LoadingComponent], styles: [".activity-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n\n\n.activity-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    min-width: 220px;\n    transition: border-color 0.2s;\n}\n\n.search-box[_ngcontent-%COMP%]:focus-within {\n    border-color: #0076b6;\n    box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.1);\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: #94a3b8; font-size: 0.85rem; }\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    border: none; outline: none; background: transparent;\n    font-size: 0.85rem; color: #0f172a; width: 100%;\n}\n\n.filter-select[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    font-size: 0.85rem;\n    color: #475569;\n    cursor: pointer;\n    outline: none;\n}\n\n.time-range-group[_ngcontent-%COMP%] {\n    display: flex;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.range-btn[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    border: none;\n    background: transparent;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #64748b;\n    cursor: pointer;\n    transition: all 0.2s;\n    border-right: 1px solid #e5e7eb;\n}\n\n.range-btn[_ngcontent-%COMP%]:last-child { border-right: none; }\n\n.range-btn[_ngcontent-%COMP%]:hover { background: #f3f4f6; }\n\n.range-btn.active[_ngcontent-%COMP%] {\n    background: #0076b6;\n    color: white;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n    transition: all 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n    border-color: #999;\n}\n\n.result-count[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: #94a3b8;\n    white-space: nowrap;\n}\n\n.loading-container[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n\n\n.type-cards-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.type-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 16px 20px;\n    background: white;\n    border-radius: 14px;\n    border: 1px solid #e2e8f0;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n    flex: 1;\n    min-width: 240px;\n    transition: all 0.2s ease;\n}\n\n.type-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.type-card-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    border-radius: 12px;\n    background: linear-gradient(135deg, #0076b6, #005a8c);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.type-card-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.type-card-name[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 0.9rem;\n}\n\n.type-card-stats[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: #64748b;\n    margin-top: 2px;\n}\n\n.type-card-stats[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n    margin: 0 4px;\n}\n\n.type-card-bar[_ngcontent-%COMP%] {\n    width: 60px;\n    height: 6px;\n    background: #f1f5f9;\n    border-radius: 3px;\n    overflow: hidden;\n}\n\n.type-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    border-radius: 3px;\n    transition: width 0.5s;\n}\n\n\n\n.panel[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 16px;\n    border: 1px solid #e2e8f0;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n    overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: #0f172a;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: #0076b6; }\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.table-container[_ngcontent-%COMP%] {\n    padding: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n\n\n.trend-chart[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    height: 220px;\n    align-items: flex-end;\n    padding-bottom: 50px;\n    overflow-x: auto;\n}\n\n.chart-column[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1;\n    min-width: 24px;\n    max-width: 40px;\n    height: 100%;\n}\n\n.bars-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 1px;\n    flex: 1;\n    justify-content: flex-end;\n    width: 100%;\n}\n\n.bar[_ngcontent-%COMP%] {\n    width: 100%;\n    border-radius: 3px 3px 0 0;\n    min-height: 2px;\n    transition: height 0.3s;\n}\n\n.success-bar[_ngcontent-%COMP%] {\n    background: linear-gradient(180deg, #34d399, #10b981);\n}\n\n.failure-bar[_ngcontent-%COMP%] {\n    background: linear-gradient(180deg, #f87171, #ef4444);\n    border-radius: 0;\n}\n\n.chart-label[_ngcontent-%COMP%] {\n    font-size: 0.6rem;\n    color: #94a3b8;\n    margin-top: 6px;\n    white-space: nowrap;\n    text-align: center;\n    transform: rotate(-45deg);\n    transform-origin: top center;\n    height: 40px;\n    overflow: visible;\n}\n\n.chart-label.hidden-label[_ngcontent-%COMP%] {\n    visibility: hidden;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n    margin-top: 12px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.legend-dot[_ngcontent-%COMP%] {\n    width: 10px;\n    height: 10px;\n    border-radius: 3px;\n}\n\n.legend-dot.success[_ngcontent-%COMP%] { background: #10b981; }\n.legend-dot.failure[_ngcontent-%COMP%] { background: #ef4444; }\n\n\n\n.data-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: #94a3b8;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    position: sticky;\n    top: 0;\n    background: #f9fafb;\n    z-index: 1;\n}\n\n.data-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 10px 16px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid #f1f5f9;\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: #f8fafc;\n}\n\n.cell-name[_ngcontent-%COMP%] { font-weight: 600; color: #0f172a; }\n.cell-meta[_ngcontent-%COMP%] { color: #64748b; }\n.cell-error[_ngcontent-%COMP%] { color: #ef4444; font-size: 0.8rem; max-width: 300px; }\n\n.exec-status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    white-space: nowrap;\n}\n\n.exec-status-badge.status-running[_ngcontent-%COMP%] { background: #dbeafe; color: #1d4ed8; }\n.exec-status-badge.status-success[_ngcontent-%COMP%] { background: #dcfce7; color: #166534; }\n.exec-status-badge.status-error[_ngcontent-%COMP%] { background: #fee2e2; color: #991b1b; }\n.exec-status-badge.status-warning[_ngcontent-%COMP%] { background: #fef3c7; color: #92400e; }\n\n\n\n.col-expand[_ngcontent-%COMP%] {\n    width: 32px;\n    text-align: center;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    color: #94a3b8;\n    transition: transform 0.2s ease;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.exec-row[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.exec-row[_ngcontent-%COMP%]:hover {\n    background: #f1f5f9;\n}\n\n.exec-row.expanded[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border-bottom-color: transparent;\n}\n\n.exec-detail-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 0 !important;\n    border-bottom: 1px solid #e2e8f0;\n}\n\n.exec-detail-content[_ngcontent-%COMP%] {\n    padding: 16px 20px 16px 48px;\n    background: #f8fafc;\n    border-top: 1px solid #f1f5f9;\n}\n\n.exec-detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 12px 24px;\n    margin-bottom: 14px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 600;\n    color: #94a3b8;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    color: #0f172a;\n}\n\n.detail-value.error-text[_ngcontent-%COMP%] {\n    color: #ef4444;\n    font-size: 0.8rem;\n    word-break: break-word;\n}\n\n.exec-detail-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    padding-top: 10px;\n    border-top: 1px solid #e5e7eb;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    background: #0076b6;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 0.8rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.detail-action-btn[_ngcontent-%COMP%]:hover {\n    background: #005a8c;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n    background: white;\n    color: #475569;\n    border: 1px solid #e2e8f0;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n    background: #f1f5f9;\n    border-color: #cbd5e1;\n}\n\n.empty-state-small[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 48px 16px;\n    color: #94a3b8;\n}\n\n.empty-state-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 2rem; color: #cbd5e1; }\n.empty-state-small[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { font-size: 0.85rem; }\n\n\n\n@media (max-width: 1024px) {\n    .type-cards-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n    .type-card[_ngcontent-%COMP%] {\n        min-width: auto;\n    }\n}\n\n@media (max-width: 768px) {\n    .activity-toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .toolbar-right[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        justify-content: space-between;\n    }\n    .search-box[_ngcontent-%COMP%] {\n        min-width: auto;\n        flex: 1;\n    }\n    .trend-chart[_ngcontent-%COMP%] {\n        height: 120px;\n    }\n    .data-table[_ngcontent-%COMP%] {\n        font-size: 0.8rem;\n    }\n}"], changeDetection: 0 });
+        } }, dependencies: [i2.NgClass, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.LoadingComponent], styles: [".activity-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n\n\n.activity-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    min-width: 220px;\n    transition: border-color 0.2s;\n}\n\n.search-box[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-size: 0.85rem; }\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    border: none; outline: none; background: transparent;\n    font-size: 0.85rem; color: var(--mj-text-primary); width: 100%;\n}\n\n.filter-select[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 0.85rem;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    outline: none;\n}\n\n.time-range-group[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.range-btn[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    border: none;\n    background: transparent;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n    border-right: 1px solid var(--mj-border-default);\n}\n\n.range-btn[_ngcontent-%COMP%]:last-child { border-right: none; }\n\n.range-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-sunken); }\n\n.range-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.result-count[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n.loading-container[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n\n\n.type-cards-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.type-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 14px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    flex: 1;\n    min-width: 240px;\n    transition: all 0.2s ease;\n}\n\n.type-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.type-card-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    border-radius: 12px;\n    background: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-inverse);\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.type-card-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.type-card-name[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.type-card-stats[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.type-card-stats[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n    margin: 0 4px;\n}\n\n.type-card-bar[_ngcontent-%COMP%] {\n    width: 60px;\n    height: 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 3px;\n    overflow: hidden;\n}\n\n.type-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    border-radius: 3px;\n    transition: width 0.5s;\n}\n\n\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.table-container[_ngcontent-%COMP%] {\n    padding: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n\n\n.trend-chart[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    height: 220px;\n    align-items: flex-end;\n    padding-bottom: 50px;\n    overflow-x: auto;\n}\n\n.chart-column[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1;\n    min-width: 24px;\n    max-width: 40px;\n    height: 100%;\n}\n\n.bars-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 1px;\n    flex: 1;\n    justify-content: flex-end;\n    width: 100%;\n}\n\n.bar[_ngcontent-%COMP%] {\n    width: 100%;\n    border-radius: 3px 3px 0 0;\n    min-height: 2px;\n    transition: height 0.3s;\n}\n\n.success-bar[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.failure-bar[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n    border-radius: 0;\n}\n\n.chart-label[_ngcontent-%COMP%] {\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n    white-space: nowrap;\n    text-align: center;\n    transform: rotate(-45deg);\n    transform-origin: top center;\n    height: 40px;\n    overflow: visible;\n}\n\n.chart-label.hidden-label[_ngcontent-%COMP%] {\n    visibility: hidden;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n    margin-top: 12px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.legend-dot[_ngcontent-%COMP%] {\n    width: 10px;\n    height: 10px;\n    border-radius: 3px;\n}\n\n.legend-dot.success[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.legend-dot.failure[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n\n\n\n.data-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    position: sticky;\n    top: 0;\n    background: var(--mj-bg-surface-sunken);\n    z-index: 1;\n}\n\n.data-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 10px 16px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.cell-name[_ngcontent-%COMP%] { font-weight: 600; color: var(--mj-text-primary); }\n.cell-meta[_ngcontent-%COMP%] { color: var(--mj-text-secondary); }\n.cell-error[_ngcontent-%COMP%] { color: var(--mj-status-error); font-size: 0.8rem; max-width: 300px; }\n\n.exec-status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    white-space: nowrap;\n}\n\n.exec-status-badge.status-running[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.exec-status-badge.status-success[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.exec-status-badge.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.exec-status-badge.status-warning[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n\n\n.col-expand[_ngcontent-%COMP%] {\n    width: 32px;\n    text-align: center;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.exec-row[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.exec-row[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.exec-row.expanded[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    border-bottom-color: transparent;\n}\n\n.exec-detail-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 0 !important;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.exec-detail-content[_ngcontent-%COMP%] {\n    padding: 16px 20px 16px 48px;\n    background: var(--mj-bg-surface-sunken);\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.exec-detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 12px 24px;\n    margin-bottom: 14px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n}\n\n.detail-value.error-text[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-size: 0.8rem;\n    word-break: break-word;\n}\n\n.exec-detail-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-size: 0.8rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.detail-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.empty-state-small[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 48px 16px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 2rem; color: var(--mj-border-strong); }\n.empty-state-small[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { font-size: 0.85rem; }\n\n\n\n@media (max-width: 1024px) {\n    .type-cards-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n    .type-card[_ngcontent-%COMP%] {\n        min-width: auto;\n    }\n}\n\n@media (max-width: 768px) {\n    .activity-toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .toolbar-right[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        justify-content: space-between;\n    }\n    .search-box[_ngcontent-%COMP%] {\n        min-width: auto;\n        flex: 1;\n    }\n    .trend-chart[_ngcontent-%COMP%] {\n        height: 120px;\n    }\n    .data-table[_ngcontent-%COMP%] {\n        font-size: 0.8rem;\n    }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SchedulingActivityComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-scheduling-activity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"activity-container\">\n  <!-- Toolbar -->\n  <div class=\"activity-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"search-box\">\n        <i class=\"fa-solid fa-search\"></i>\n        <input type=\"text\" placeholder=\"Search executions...\"\n          [value]=\"SearchTerm\"\n          (input)=\"OnSearchChange($any($event.target).value)\" />\n      </div>\n      <select class=\"filter-select\" [value]=\"StatusFilter\" (change)=\"OnStatusFilterChange($any($event.target).value)\">\n        <option value=\"\">All Statuses</option>\n        @for (s of StatusOptions.slice(1); track s) {\n          <option [value]=\"s\">{{s}}</option>\n        }\n      </select>\n      <select class=\"filter-select\" [value]=\"JobNameFilter\" (change)=\"OnJobNameFilterChange($any($event.target).value)\">\n        <option value=\"\">All Jobs</option>\n        @for (name of UniqueJobNames; track name) {\n          <option [value]=\"name\">{{name}}</option>\n        }\n      </select>\n    </div>\n    <div class=\"toolbar-right\">\n      <div class=\"time-range-group\">\n        @for (range of TimeRanges; track range) {\n          <button\n            class=\"range-btn\"\n            [class.active]=\"SelectedTimeRange === range.value\"\n            (click)=\"OnTimeRangeChange(range.value)\">\n            {{range.label}}\n          </button>\n        }\n      </div>\n      <button class=\"control-btn\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n    </div>\n  </div>\n\n  <!-- Loading -->\n  @if (IsLoading) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading activity...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  @if (!IsLoading) {\n    <div class=\"activity-content\">\n      <!-- Job Type Summary Cards -->\n      @if (JobTypes.length > 0) {\n        <div class=\"type-cards-row\">\n          @for (type of JobTypes; track type) {\n            <div class=\"type-card\">\n              <div class=\"type-card-icon\">\n                <i [class]=\"GetTypeIcon(type.typeName)\"></i>\n              </div>\n              <div class=\"type-card-info\">\n                <div class=\"type-card-name\">{{type.typeName}}</div>\n                <div class=\"type-card-stats\">\n                  <span>{{type.activeJobsCount}} active</span>\n                  <span class=\"dot\">&middot;</span>\n                  <span>{{type.totalRuns}} runs</span>\n                  <span class=\"dot\">&middot;</span>\n                  <span [style.color]=\"GetSuccessRateColor(type.successRate)\">\n                    {{FormatPercentage(type.successRate)}}\n                  </span>\n                </div>\n              </div>\n              <div class=\"type-card-bar\">\n                <div class=\"type-bar-fill\"\n                  [style.width]=\"(type.successRate * 100) + '%'\"\n                  [style.background]=\"GetSuccessRateColor(type.successRate)\">\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <!-- Execution Trends Chart -->\n      @if (Trends.length > 0) {\n        <div class=\"panel\">\n          <div class=\"panel-header\">\n            <div class=\"panel-title\">\n              <i class=\"fa-solid fa-chart-bar\"></i> Execution Trends\n            </div>\n            <span class=\"result-count\">{{FilteredExecutions.length}} executions</span>\n          </div>\n          <div class=\"panel-body chart-container\">\n            <div class=\"trend-chart\">\n              @for (trend of Trends; track trend; let i = $index) {\n                <div class=\"chart-column\">\n                  <div class=\"bars-wrapper\">\n                    <div class=\"bar success-bar\"\n                      [style.height]=\"GetBarHeight(trend.successes)\"\n                      [title]=\"trend.successes + ' successful'\">\n                    </div>\n                    @if (trend.failures > 0) {\n                      <div class=\"bar failure-bar\"\n                        [style.height]=\"GetBarHeight(trend.failures)\"\n                        [title]=\"trend.failures + ' failed'\">\n                      </div>\n                    }\n                  </div>\n                  <div class=\"chart-label\" [class.hidden-label]=\"!ShouldShowLabel(i)\" >{{FormatChartLabel(trend.timestamp)}}</div>\n                </div>\n              }\n            </div>\n            <div class=\"chart-legend\">\n              <span class=\"legend-item\"><span class=\"legend-dot success\"></span> Successful</span>\n              <span class=\"legend-item\"><span class=\"legend-dot failure\"></span> Failed</span>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Execution History Table -->\n      <div class=\"panel\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i> Execution History\n          </div>\n          <span class=\"result-count\">{{FilteredExecutions.length}} of {{Executions.length}}</span>\n        </div>\n        <div class=\"panel-body table-container\">\n          @if (FilteredExecutions.length === 0) {\n            <div class=\"empty-state-small\">\n              <i class=\"fa-solid fa-inbox\"></i>\n              <span>No executions found for this time range</span>\n            </div>\n          }\n          @if (FilteredExecutions.length > 0) {\n            <table class=\"data-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-expand\"></th>\n                  <th>Status</th>\n                  <th>Job Name</th>\n                  <th>Started</th>\n                  <th>Duration</th>\n                  <th>Error</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (exec of FilteredExecutions; track exec) {\n                  <tr class=\"exec-row\" [class.expanded]=\"IsExpanded(exec)\" (click)=\"ToggleExpand(exec)\">\n                    <td class=\"col-expand\">\n                      <i class=\"fa-solid fa-chevron-right expand-icon\"\n                      [class.rotated]=\"IsExpanded(exec)\"></i>\n                    </td>\n                    <td>\n                      <span class=\"exec-status-badge\" [ngClass]=\"GetStatusClass(exec.status)\">\n                        <i [class]=\"GetStatusIcon(exec.status)\"></i>\n                        {{exec.status}}\n                      </span>\n                    </td>\n                    <td class=\"cell-name\">{{exec.jobName}}</td>\n                    <td class=\"cell-meta\">{{FormatDateTime(exec.startedAt)}}</td>\n                    <td class=\"cell-meta\">{{FormatDuration(exec.duration)}}</td>\n                    <td class=\"cell-error\">{{TruncateError(exec.errorMessage)}}</td>\n                  </tr>\n                  @if (IsExpanded(exec)) {\n                    <tr class=\"exec-detail-row\">\n                      <td [attr.colspan]=\"6\">\n                        <div class=\"exec-detail-content\">\n                          <div class=\"exec-detail-grid\">\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Job Name</span>\n                              <span class=\"detail-value\">{{exec.jobName}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Started</span>\n                              <span class=\"detail-value\">{{FormatDateTime(exec.startedAt)}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Completed</span>\n                              <span class=\"detail-value\">{{exec.completedAt ? FormatDateTime(exec.completedAt) : '-'}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Duration</span>\n                              <span class=\"detail-value\">{{FormatDuration(exec.duration)}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Status</span>\n                              <span class=\"detail-value\">\n                                <span class=\"exec-status-badge\" [ngClass]=\"GetStatusClass(exec.status)\">\n                                  <i [class]=\"GetStatusIcon(exec.status)\"></i>\n                                  {{exec.status}}\n                                </span>\n                              </span>\n                            </div>\n                            @if (exec.errorMessage) {\n                              <div class=\"detail-item\">\n                                <span class=\"detail-label\">Error</span>\n                                <span class=\"detail-value error-text\">{{exec.errorMessage}}</span>\n                              </div>\n                            }\n                          </div>\n                          <div class=\"exec-detail-actions\">\n                            <button class=\"detail-action-btn\" (click)=\"OpenExecutionRecord(exec, $event)\">\n                              <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open Run Record\n                            </button>\n                            <button class=\"detail-action-btn secondary\" (click)=\"OpenJobRecord(exec, $event)\">\n                              <i class=\"fa-solid fa-briefcase\"></i> Open Job\n                            </button>\n                          </div>\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".activity-container {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.activity-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.toolbar-left {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.toolbar-right {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    min-width: 220px;\n    transition: border-color 0.2s;\n}\n\n.search-box:focus-within {\n    border-color: #0076b6;\n    box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.1);\n}\n\n.search-box i { color: #94a3b8; font-size: 0.85rem; }\n\n.search-box input {\n    border: none; outline: none; background: transparent;\n    font-size: 0.85rem; color: #0f172a; width: 100%;\n}\n\n.filter-select {\n    padding: 8px 14px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    font-size: 0.85rem;\n    color: #475569;\n    cursor: pointer;\n    outline: none;\n}\n\n.time-range-group {\n    display: flex;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.range-btn {\n    padding: 8px 14px;\n    border: none;\n    background: transparent;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #64748b;\n    cursor: pointer;\n    transition: all 0.2s;\n    border-right: 1px solid #e5e7eb;\n}\n\n.range-btn:last-child { border-right: none; }\n\n.range-btn:hover { background: #f3f4f6; }\n\n.range-btn.active {\n    background: #0076b6;\n    color: white;\n}\n\n.control-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n    transition: all 0.2s ease;\n}\n\n.control-btn:hover {\n    background: #f3f4f6;\n    border-color: #999;\n}\n\n.result-count {\n    font-size: 0.8rem;\n    color: #94a3b8;\n    white-space: nowrap;\n}\n\n.loading-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n/* \u2500\u2500 Type Summary Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.type-cards-row {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.type-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 16px 20px;\n    background: white;\n    border-radius: 14px;\n    border: 1px solid #e2e8f0;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n    flex: 1;\n    min-width: 240px;\n    transition: all 0.2s ease;\n}\n\n.type-card:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.type-card-icon {\n    width: 44px;\n    height: 44px;\n    border-radius: 12px;\n    background: linear-gradient(135deg, #0076b6, #005a8c);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.type-card-info {\n    flex: 1;\n}\n\n.type-card-name {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 0.9rem;\n}\n\n.type-card-stats {\n    font-size: 0.75rem;\n    color: #64748b;\n    margin-top: 2px;\n}\n\n.type-card-stats .dot {\n    margin: 0 4px;\n}\n\n.type-card-bar {\n    width: 60px;\n    height: 6px;\n    background: #f1f5f9;\n    border-radius: 3px;\n    overflow: hidden;\n}\n\n.type-bar-fill {\n    height: 100%;\n    border-radius: 3px;\n    transition: width 0.5s;\n}\n\n/* \u2500\u2500 Panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.panel {\n    background: white;\n    border-radius: 16px;\n    border: 1px solid #e2e8f0;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n    overflow: hidden;\n}\n\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.panel-title {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: #0f172a;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title i { color: #0076b6; }\n\n.panel-body {\n    padding: 20px;\n}\n\n.chart-container {\n    padding: 20px;\n}\n\n.table-container {\n    padding: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n/* \u2500\u2500 Trend Chart \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.trend-chart {\n    display: flex;\n    gap: 4px;\n    height: 220px;\n    align-items: flex-end;\n    padding-bottom: 50px;\n    overflow-x: auto;\n}\n\n.chart-column {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1;\n    min-width: 24px;\n    max-width: 40px;\n    height: 100%;\n}\n\n.bars-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 1px;\n    flex: 1;\n    justify-content: flex-end;\n    width: 100%;\n}\n\n.bar {\n    width: 100%;\n    border-radius: 3px 3px 0 0;\n    min-height: 2px;\n    transition: height 0.3s;\n}\n\n.success-bar {\n    background: linear-gradient(180deg, #34d399, #10b981);\n}\n\n.failure-bar {\n    background: linear-gradient(180deg, #f87171, #ef4444);\n    border-radius: 0;\n}\n\n.chart-label {\n    font-size: 0.6rem;\n    color: #94a3b8;\n    margin-top: 6px;\n    white-space: nowrap;\n    text-align: center;\n    transform: rotate(-45deg);\n    transform-origin: top center;\n    height: 40px;\n    overflow: visible;\n}\n\n.chart-label.hidden-label {\n    visibility: hidden;\n}\n\n.chart-legend {\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n    margin-top: 12px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 3px;\n}\n\n.legend-dot.success { background: #10b981; }\n.legend-dot.failure { background: #ef4444; }\n\n/* \u2500\u2500 Data Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.data-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table th {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: #94a3b8;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    position: sticky;\n    top: 0;\n    background: #f9fafb;\n    z-index: 1;\n}\n\n.data-table td {\n    padding: 10px 16px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid #f1f5f9;\n}\n\n.data-table tbody tr:hover {\n    background: #f8fafc;\n}\n\n.cell-name { font-weight: 600; color: #0f172a; }\n.cell-meta { color: #64748b; }\n.cell-error { color: #ef4444; font-size: 0.8rem; max-width: 300px; }\n\n.exec-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    white-space: nowrap;\n}\n\n.exec-status-badge.status-running { background: #dbeafe; color: #1d4ed8; }\n.exec-status-badge.status-success { background: #dcfce7; color: #166534; }\n.exec-status-badge.status-error { background: #fee2e2; color: #991b1b; }\n.exec-status-badge.status-warning { background: #fef3c7; color: #92400e; }\n\n/* \u2500\u2500 Expandable Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.col-expand {\n    width: 32px;\n    text-align: center;\n}\n\n.expand-icon {\n    font-size: 0.7rem;\n    color: #94a3b8;\n    transition: transform 0.2s ease;\n}\n\n.expand-icon.rotated {\n    transform: rotate(90deg);\n}\n\n.exec-row {\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.exec-row:hover {\n    background: #f1f5f9;\n}\n\n.exec-row.expanded {\n    background: #f8fafc;\n    border-bottom-color: transparent;\n}\n\n.exec-detail-row td {\n    padding: 0 !important;\n    border-bottom: 1px solid #e2e8f0;\n}\n\n.exec-detail-content {\n    padding: 16px 20px 16px 48px;\n    background: #f8fafc;\n    border-top: 1px solid #f1f5f9;\n}\n\n.exec-detail-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 12px 24px;\n    margin-bottom: 14px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.detail-label {\n    font-size: 0.7rem;\n    font-weight: 600;\n    color: #94a3b8;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.detail-value {\n    font-size: 0.85rem;\n    color: #0f172a;\n}\n\n.detail-value.error-text {\n    color: #ef4444;\n    font-size: 0.8rem;\n    word-break: break-word;\n}\n\n.exec-detail-actions {\n    display: flex;\n    gap: 8px;\n    padding-top: 10px;\n    border-top: 1px solid #e5e7eb;\n}\n\n.detail-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    background: #0076b6;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 0.8rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.detail-action-btn:hover {\n    background: #005a8c;\n}\n\n.detail-action-btn.secondary {\n    background: white;\n    color: #475569;\n    border: 1px solid #e2e8f0;\n}\n\n.detail-action-btn.secondary:hover {\n    background: #f1f5f9;\n    border-color: #cbd5e1;\n}\n\n.empty-state-small {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 48px 16px;\n    color: #94a3b8;\n}\n\n.empty-state-small i { font-size: 2rem; color: #cbd5e1; }\n.empty-state-small span { font-size: 0.85rem; }\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 1024px) {\n    .type-cards-row {\n        flex-direction: column;\n    }\n    .type-card {\n        min-width: auto;\n    }\n}\n\n@media (max-width: 768px) {\n    .activity-toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .toolbar-right {\n        flex-wrap: wrap;\n        justify-content: space-between;\n    }\n    .search-box {\n        min-width: auto;\n        flex: 1;\n    }\n    .trend-chart {\n        height: 120px;\n    }\n    .data-table {\n        font-size: 0.8rem;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-scheduling-activity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"activity-container\">\n  <!-- Toolbar -->\n  <div class=\"activity-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"search-box\">\n        <i class=\"fa-solid fa-search\"></i>\n        <input type=\"text\" placeholder=\"Search executions...\"\n          [value]=\"SearchTerm\"\n          (input)=\"OnSearchChange($any($event.target).value)\" />\n      </div>\n      <select class=\"filter-select\" [value]=\"StatusFilter\" (change)=\"OnStatusFilterChange($any($event.target).value)\">\n        <option value=\"\">All Statuses</option>\n        @for (s of StatusOptions.slice(1); track s) {\n          <option [value]=\"s\">{{s}}</option>\n        }\n      </select>\n      <select class=\"filter-select\" [value]=\"JobNameFilter\" (change)=\"OnJobNameFilterChange($any($event.target).value)\">\n        <option value=\"\">All Jobs</option>\n        @for (name of UniqueJobNames; track name) {\n          <option [value]=\"name\">{{name}}</option>\n        }\n      </select>\n    </div>\n    <div class=\"toolbar-right\">\n      <div class=\"time-range-group\">\n        @for (range of TimeRanges; track range) {\n          <button\n            class=\"range-btn\"\n            [class.active]=\"SelectedTimeRange === range.value\"\n            (click)=\"OnTimeRangeChange(range.value)\">\n            {{range.label}}\n          </button>\n        }\n      </div>\n      <button class=\"control-btn\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n    </div>\n  </div>\n\n  <!-- Loading -->\n  @if (IsLoading) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading activity...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  @if (!IsLoading) {\n    <div class=\"activity-content\">\n      <!-- Job Type Summary Cards -->\n      @if (JobTypes.length > 0) {\n        <div class=\"type-cards-row\">\n          @for (type of JobTypes; track type) {\n            <div class=\"type-card\">\n              <div class=\"type-card-icon\">\n                <i [class]=\"GetTypeIcon(type.typeName)\"></i>\n              </div>\n              <div class=\"type-card-info\">\n                <div class=\"type-card-name\">{{type.typeName}}</div>\n                <div class=\"type-card-stats\">\n                  <span>{{type.activeJobsCount}} active</span>\n                  <span class=\"dot\">&middot;</span>\n                  <span>{{type.totalRuns}} runs</span>\n                  <span class=\"dot\">&middot;</span>\n                  <span [style.color]=\"GetSuccessRateColor(type.successRate)\">\n                    {{FormatPercentage(type.successRate)}}\n                  </span>\n                </div>\n              </div>\n              <div class=\"type-card-bar\">\n                <div class=\"type-bar-fill\"\n                  [style.width]=\"(type.successRate * 100) + '%'\"\n                  [style.background]=\"GetSuccessRateColor(type.successRate)\">\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <!-- Execution Trends Chart -->\n      @if (Trends.length > 0) {\n        <div class=\"panel\">\n          <div class=\"panel-header\">\n            <div class=\"panel-title\">\n              <i class=\"fa-solid fa-chart-bar\"></i> Execution Trends\n            </div>\n            <span class=\"result-count\">{{FilteredExecutions.length}} executions</span>\n          </div>\n          <div class=\"panel-body chart-container\">\n            <div class=\"trend-chart\">\n              @for (trend of Trends; track trend; let i = $index) {\n                <div class=\"chart-column\">\n                  <div class=\"bars-wrapper\">\n                    <div class=\"bar success-bar\"\n                      [style.height]=\"GetBarHeight(trend.successes)\"\n                      [title]=\"trend.successes + ' successful'\">\n                    </div>\n                    @if (trend.failures > 0) {\n                      <div class=\"bar failure-bar\"\n                        [style.height]=\"GetBarHeight(trend.failures)\"\n                        [title]=\"trend.failures + ' failed'\">\n                      </div>\n                    }\n                  </div>\n                  <div class=\"chart-label\" [class.hidden-label]=\"!ShouldShowLabel(i)\" >{{FormatChartLabel(trend.timestamp)}}</div>\n                </div>\n              }\n            </div>\n            <div class=\"chart-legend\">\n              <span class=\"legend-item\"><span class=\"legend-dot success\"></span> Successful</span>\n              <span class=\"legend-item\"><span class=\"legend-dot failure\"></span> Failed</span>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Execution History Table -->\n      <div class=\"panel\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i> Execution History\n          </div>\n          <span class=\"result-count\">{{FilteredExecutions.length}} of {{Executions.length}}</span>\n        </div>\n        <div class=\"panel-body table-container\">\n          @if (FilteredExecutions.length === 0) {\n            <div class=\"empty-state-small\">\n              <i class=\"fa-solid fa-inbox\"></i>\n              <span>No executions found for this time range</span>\n            </div>\n          }\n          @if (FilteredExecutions.length > 0) {\n            <table class=\"data-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-expand\"></th>\n                  <th>Status</th>\n                  <th>Job Name</th>\n                  <th>Started</th>\n                  <th>Duration</th>\n                  <th>Error</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (exec of FilteredExecutions; track exec) {\n                  <tr class=\"exec-row\" [class.expanded]=\"IsExpanded(exec)\" (click)=\"ToggleExpand(exec)\">\n                    <td class=\"col-expand\">\n                      <i class=\"fa-solid fa-chevron-right expand-icon\"\n                      [class.rotated]=\"IsExpanded(exec)\"></i>\n                    </td>\n                    <td>\n                      <span class=\"exec-status-badge\" [ngClass]=\"GetStatusClass(exec.status)\">\n                        <i [class]=\"GetStatusIcon(exec.status)\"></i>\n                        {{exec.status}}\n                      </span>\n                    </td>\n                    <td class=\"cell-name\">{{exec.jobName}}</td>\n                    <td class=\"cell-meta\">{{FormatDateTime(exec.startedAt)}}</td>\n                    <td class=\"cell-meta\">{{FormatDuration(exec.duration)}}</td>\n                    <td class=\"cell-error\">{{TruncateError(exec.errorMessage)}}</td>\n                  </tr>\n                  @if (IsExpanded(exec)) {\n                    <tr class=\"exec-detail-row\">\n                      <td [attr.colspan]=\"6\">\n                        <div class=\"exec-detail-content\">\n                          <div class=\"exec-detail-grid\">\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Job Name</span>\n                              <span class=\"detail-value\">{{exec.jobName}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Started</span>\n                              <span class=\"detail-value\">{{FormatDateTime(exec.startedAt)}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Completed</span>\n                              <span class=\"detail-value\">{{exec.completedAt ? FormatDateTime(exec.completedAt) : '-'}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Duration</span>\n                              <span class=\"detail-value\">{{FormatDuration(exec.duration)}}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Status</span>\n                              <span class=\"detail-value\">\n                                <span class=\"exec-status-badge\" [ngClass]=\"GetStatusClass(exec.status)\">\n                                  <i [class]=\"GetStatusIcon(exec.status)\"></i>\n                                  {{exec.status}}\n                                </span>\n                              </span>\n                            </div>\n                            @if (exec.errorMessage) {\n                              <div class=\"detail-item\">\n                                <span class=\"detail-label\">Error</span>\n                                <span class=\"detail-value error-text\">{{exec.errorMessage}}</span>\n                              </div>\n                            }\n                          </div>\n                          <div class=\"exec-detail-actions\">\n                            <button class=\"detail-action-btn\" (click)=\"OpenExecutionRecord(exec, $event)\">\n                              <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open Run Record\n                            </button>\n                            <button class=\"detail-action-btn secondary\" (click)=\"OpenJobRecord(exec, $event)\">\n                              <i class=\"fa-solid fa-briefcase\"></i> Open Job\n                            </button>\n                          </div>\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".activity-container {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.activity-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.toolbar-left {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.toolbar-right {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    min-width: 220px;\n    transition: border-color 0.2s;\n}\n\n.search-box:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.search-box i { color: var(--mj-text-muted); font-size: 0.85rem; }\n\n.search-box input {\n    border: none; outline: none; background: transparent;\n    font-size: 0.85rem; color: var(--mj-text-primary); width: 100%;\n}\n\n.filter-select {\n    padding: 8px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 0.85rem;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    outline: none;\n}\n\n.time-range-group {\n    display: flex;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.range-btn {\n    padding: 8px 14px;\n    border: none;\n    background: transparent;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n    border-right: 1px solid var(--mj-border-default);\n}\n\n.range-btn:last-child { border-right: none; }\n\n.range-btn:hover { background: var(--mj-bg-surface-sunken); }\n\n.range-btn.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.control-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.control-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.result-count {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n.loading-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 300px;\n}\n\n/* \u2500\u2500 Type Summary Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.type-cards-row {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.type-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 14px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    flex: 1;\n    min-width: 240px;\n    transition: all 0.2s ease;\n}\n\n.type-card:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.type-card-icon {\n    width: 44px;\n    height: 44px;\n    border-radius: 12px;\n    background: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-inverse);\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.type-card-info {\n    flex: 1;\n}\n\n.type-card-name {\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.type-card-stats {\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.type-card-stats .dot {\n    margin: 0 4px;\n}\n\n.type-card-bar {\n    width: 60px;\n    height: 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 3px;\n    overflow: hidden;\n}\n\n.type-bar-fill {\n    height: 100%;\n    border-radius: 3px;\n    transition: width 0.5s;\n}\n\n/* \u2500\u2500 Panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.panel {\n    background: var(--mj-bg-surface-card);\n    border-radius: 16px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n}\n\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-title {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title i { color: var(--mj-brand-primary); }\n\n.panel-body {\n    padding: 20px;\n}\n\n.chart-container {\n    padding: 20px;\n}\n\n.table-container {\n    padding: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n/* \u2500\u2500 Trend Chart \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.trend-chart {\n    display: flex;\n    gap: 4px;\n    height: 220px;\n    align-items: flex-end;\n    padding-bottom: 50px;\n    overflow-x: auto;\n}\n\n.chart-column {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1;\n    min-width: 24px;\n    max-width: 40px;\n    height: 100%;\n}\n\n.bars-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 1px;\n    flex: 1;\n    justify-content: flex-end;\n    width: 100%;\n}\n\n.bar {\n    width: 100%;\n    border-radius: 3px 3px 0 0;\n    min-height: 2px;\n    transition: height 0.3s;\n}\n\n.success-bar {\n    background: var(--mj-status-success);\n}\n\n.failure-bar {\n    background: var(--mj-status-error);\n    border-radius: 0;\n}\n\n.chart-label {\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n    white-space: nowrap;\n    text-align: center;\n    transform: rotate(-45deg);\n    transform-origin: top center;\n    height: 40px;\n    overflow: visible;\n}\n\n.chart-label.hidden-label {\n    visibility: hidden;\n}\n\n.chart-legend {\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n    margin-top: 12px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 3px;\n}\n\n.legend-dot.success { background: var(--mj-status-success); }\n.legend-dot.failure { background: var(--mj-status-error); }\n\n/* \u2500\u2500 Data Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.data-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table th {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    position: sticky;\n    top: 0;\n    background: var(--mj-bg-surface-sunken);\n    z-index: 1;\n}\n\n.data-table td {\n    padding: 10px 16px;\n    font-size: 0.85rem;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.data-table tbody tr:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.cell-name { font-weight: 600; color: var(--mj-text-primary); }\n.cell-meta { color: var(--mj-text-secondary); }\n.cell-error { color: var(--mj-status-error); font-size: 0.8rem; max-width: 300px; }\n\n.exec-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    white-space: nowrap;\n}\n\n.exec-status-badge.status-running { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.exec-status-badge.status-success { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n.exec-status-badge.status-error { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--mj-status-error); }\n.exec-status-badge.status-warning { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n/* \u2500\u2500 Expandable Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.col-expand {\n    width: 32px;\n    text-align: center;\n}\n\n.expand-icon {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n}\n\n.expand-icon.rotated {\n    transform: rotate(90deg);\n}\n\n.exec-row {\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.exec-row:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.exec-row.expanded {\n    background: var(--mj-bg-surface-sunken);\n    border-bottom-color: transparent;\n}\n\n.exec-detail-row td {\n    padding: 0 !important;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.exec-detail-content {\n    padding: 16px 20px 16px 48px;\n    background: var(--mj-bg-surface-sunken);\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.exec-detail-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 12px 24px;\n    margin-bottom: 14px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.detail-label {\n    font-size: 0.7rem;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.detail-value {\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n}\n\n.detail-value.error-text {\n    color: var(--mj-status-error);\n    font-size: 0.8rem;\n    word-break: break-word;\n}\n\n.exec-detail-actions {\n    display: flex;\n    gap: 8px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-size: 0.8rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.detail-action-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.detail-action-btn.secondary {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn.secondary:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.empty-state-small {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 48px 16px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-small i { font-size: 2rem; color: var(--mj-border-strong); }\n.empty-state-small span { font-size: 0.85rem; }\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 1024px) {\n    .type-cards-row {\n        flex-direction: column;\n    }\n    .type-card {\n        min-width: auto;\n    }\n}\n\n@media (max-width: 768px) {\n    .activity-toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .toolbar-right {\n        flex-wrap: wrap;\n        justify-content: space-between;\n    }\n    .search-box {\n        min-width: auto;\n        flex: 1;\n    }\n    .trend-chart {\n        height: 120px;\n    }\n    .data-table {\n        font-size: 0.8rem;\n    }\n}\n"] }]
     }], () => [{ type: i1.SchedulingInstrumentationService }, { type: i0.ChangeDetectorRef }], { initialState: [{
             type: Input
         }], stateChange: [{

package/dist/Scheduling/components/scheduling-jobs.component.d.ts

@@ -11,18 +11,14 @@ export declare class SchedulingJobsComponent implements OnInit, OnDestroy {
     JobTypes: JobTypeStatistics[];
     IsLoading: boolean;
     SlideoutOpen: boolean;
-    SlideoutMode: 'create' | 'edit';
     SelectedJob: JobStatistics | null;
-    SlideoutWidth: number;
-    private resizeStartX;
-    private resizeStartWidth;
-    private isResizing;
+    DeleteConfirmJobId: string | null;
+    IsDeleting: boolean;
     SearchTerm: string;
     StatusFilter: string;
     TypeFilter: string;
     StatusOptions: string[];
     TypeOptions: string[];
-    private static readonly PANEL_WIDTH_KEY;
     private static readonly SEARCH_STATE_KEY;
     private searchSubject;
     private statusSubject;
@@ -43,14 +39,15 @@ export declare class SchedulingJobsComponent implements OnInit, OnDestroy {
     OnStatusFilterChange(status: string): void;
     OnTypeFilterChange(type: string): void;
     Refresh(): void;
-    OnResizeStart(event: MouseEvent): void;
-    private onResizeMove;
-    private onResizeEnd;
     OpenCreateSlideout(): void;
     OpenEditSlideout(job: JobStatistics): void;
     CloseSlideout(): void;
     OnSlideoutSaved(): void;
     ToggleJobStatus(job: JobStatistics, event: MouseEvent): Promise<void>;
+    ShowDeleteConfirm(job: JobStatistics, event: MouseEvent): void;
+    CancelDelete(event: MouseEvent): void;
+    ConfirmDelete(jobId: string, event: MouseEvent): Promise<void>;
+    IsDeleteConfirming(jobId: string): boolean;
     OpenEntityRecord(job: JobStatistics): void;
     GetStatusClass(status: string): string;
     GetSuccessRateColor(rate: number): string;

package/dist/Scheduling/components/scheduling-jobs.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scheduling-jobs.component.d.ts","sourceRoot":"","sources":["../../../src/Scheduling/components/scheduling-jobs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AAMtI,OAAO,EACL,gCAAgC,EAChC,aAAa,EACb,iBAAiB,EAClB,MAAM,gDAAgD,CAAC;;AAExD,qBAOa,uBAAwB,YAAW,MAAM,EAAE,SAAS;IAyC7D,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,GAAG;IAzCJ,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAC1C,WAAW,wCAA+C;IAE7D,IAAI,EAAE,aAAa,EAAE,CAAM;IAC3B,YAAY,EAAE,aAAa,EAAE,CAAM;IACnC,QAAQ,EAAE,iBAAiB,EAAE,CAAM;IACnC,SAAS,UAAQ;IAGjB,YAAY,UAAS;IACrB,YAAY,EAAE,QAAQ,GAAG,MAAM,CAAY;IAC3C,WAAW,EAAE,aAAa,GAAG,IAAI,CAAQ;IACzC,aAAa,SAAO;IAG3B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,UAAU,CAAS;IAGpB,UAAU,SAAM;IAChB,YAAY,SAAM;IAClB,UAAU,SAAM;IAEhB,aAAa,WAA8D;IAC3E,WAAW,EAAE,MAAM,EAAE,CAAQ;IAGpC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAmC;IAC1E,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAgC;IAExE,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,sBAAsB,CAAuB;IACrD,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,cAAc,CAAS;gBAGrB,iBAAiB,EAAE,gCAAgC,EACnD,GAAG,EAAE,iBAAiB;IAGhC,QAAQ,IAAI,IAAI;IAqBhB,WAAW,IAAI,IAAI;IAQnB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,wBAAwB;IAShC,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAkBb,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKlC,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK1C,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKtC,OAAO,IAAI,IAAI;IAKf,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAW7C,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,WAAW,CAUjB;IAEK,kBAAkB,IAAI,IAAI;IAO1B,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAO1C,aAAa,IAAI,IAAI;IAMrB,eAAe,IAAI,IAAI;IAKjB,eAAe,CAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAM3E,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAM1C,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAWtC,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAMzC,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAOrC,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM;IAQ1C,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI9C,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,SAAS;yCA3SN,uBAAuB;2CAAvB,uBAAuB;CAmTnC"}
+{"version":3,"file":"scheduling-jobs.component.d.ts","sourceRoot":"","sources":["../../../src/Scheduling/components/scheduling-jobs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AAMtI,OAAO,EACL,gCAAgC,EAChC,aAAa,EACb,iBAAiB,EAClB,MAAM,gDAAgD,CAAC;;AAExD,qBAOa,uBAAwB,YAAW,MAAM,EAAE,SAAS;IAqC7D,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,GAAG;IArCJ,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAC1C,WAAW,wCAA+C;IAE7D,IAAI,EAAE,aAAa,EAAE,CAAM;IAC3B,YAAY,EAAE,aAAa,EAAE,CAAM;IACnC,QAAQ,EAAE,iBAAiB,EAAE,CAAM;IACnC,SAAS,UAAQ;IAGjB,YAAY,UAAS;IACrB,WAAW,EAAE,aAAa,GAAG,IAAI,CAAQ;IAGzC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACzC,UAAU,UAAS;IAGnB,UAAU,SAAM;IAChB,YAAY,SAAM;IAClB,UAAU,SAAM;IAEhB,aAAa,WAA8D;IAC3E,WAAW,EAAE,MAAM,EAAE,CAAQ;IAGpC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAgC;IAExE,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,sBAAsB,CAAuB;IACrD,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,cAAc,CAAS;gBAGrB,iBAAiB,EAAE,gCAAgC,EACnD,GAAG,EAAE,iBAAiB;IAGhC,QAAQ,IAAI,IAAI;IAqBhB,WAAW,IAAI,IAAI;IAMnB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,wBAAwB;IAShC,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAkBb,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKlC,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK1C,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKtC,OAAO,IAAI,IAAI;IAIf,kBAAkB,IAAI,IAAI;IAM1B,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAM1C,aAAa,IAAI,IAAI;IAMrB,eAAe,IAAI,IAAI;IAKjB,eAAe,CAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAM3E,iBAAiB,CAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;IAM9D,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAM/B,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAiBpE,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAI1C,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAM1C,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAWtC,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAMzC,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAOrC,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM;IAQ1C,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI9C,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,SAAS;yCA/RN,uBAAuB;2CAAvB,uBAAuB;CAuSnC"}