@memberjunction/ng-dashboards 5.50.0 → 6.1.0-edge.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/LICENSE +7 -0
  2. package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
  3. package/dist/AI/components/agents/agent-configuration.component.js +59 -63
  4. package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
  5. package/dist/AI/components/models/model-management.component.d.ts.map +1 -1
  6. package/dist/AI/components/models/model-management.component.js +67 -70
  7. package/dist/AI/components/models/model-management.component.js.map +1 -1
  8. package/dist/AI/components/prompts/prompt-management.component.d.ts.map +1 -1
  9. package/dist/AI/components/prompts/prompt-management.component.js +55 -59
  10. package/dist/AI/components/prompts/prompt-management.component.js.map +1 -1
  11. package/dist/AI/components/system/system-configuration.component.d.ts.map +1 -1
  12. package/dist/AI/components/system/system-configuration.component.js +59 -63
  13. package/dist/AI/components/system/system-configuration.component.js.map +1 -1
  14. package/dist/Admin/base-admin-container.component.d.ts.map +1 -1
  15. package/dist/Admin/base-admin-container.component.js +15 -0
  16. package/dist/Admin/base-admin-container.component.js.map +1 -1
  17. package/dist/DevTools/lazy-module-status.component.d.ts +5 -7
  18. package/dist/DevTools/lazy-module-status.component.d.ts.map +1 -1
  19. package/dist/DevTools/lazy-module-status.component.js +5 -8
  20. package/dist/DevTools/lazy-module-status.component.js.map +1 -1
  21. package/dist/Home/home-application.d.ts +5 -0
  22. package/dist/Home/home-application.d.ts.map +1 -1
  23. package/dist/Home/home-application.js +9 -0
  24. package/dist/Home/home-application.js.map +1 -1
  25. package/dist/SystemDiagnostics/system-diagnostics.component.d.ts +7 -3
  26. package/dist/SystemDiagnostics/system-diagnostics.component.d.ts.map +1 -1
  27. package/dist/SystemDiagnostics/system-diagnostics.component.js +22 -21
  28. package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
  29. package/dist/ai-dashboards.module.d.ts +1 -1
  30. package/dist/ai-dashboards.module.d.ts.map +1 -1
  31. package/dist/ai-dashboards.module.js +4 -1
  32. package/dist/ai-dashboards.module.js.map +1 -1
  33. package/dist/public-api.d.ts +1 -0
  34. package/dist/public-api.d.ts.map +1 -1
  35. package/dist/public-api.js +1 -0
  36. package/dist/public-api.js.map +1 -1
  37. package/package.json +69 -67
package/dist/SystemDiagnostics/system-diagnostics.component.js CHANGED
@@ -18,10 +18,9 @@ import { validateEnumParam, validateNonNegativeNumberParam } from '../shared/age
18
18
  import { buildSystemDiagnosticsAgentContext, VALID_DIAGNOSTICS_SECTIONS, VALID_PERF_TABS, VALID_TELEMETRY_CATEGORIES, } from './system-diagnostics-agent-context';
19
19
  import * as d3 from 'd3';
20
20
  import * as i0 from "@angular/core";
21
- import * as i1 from "@angular/router";
22
- import * as i2 from "@angular/forms";
23
- import * as i3 from "@memberjunction/ng-ui-components";
24
- import * as i4 from "@angular/common";
21
+ import * as i1 from "@angular/forms";
22
+ import * as i2 from "@memberjunction/ng-ui-components";
23
+ import * as i3 from "@angular/common";
25
24
  const _c0 = ["perfChart"];
26
25
  const _forTrack0 = ($index, $item) => $item.className;
27
26
  const _forTrack1 = ($index, $item) => $item.entityName;
@@ -2073,7 +2072,6 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
2073
2072
  static { SystemDiagnosticsComponent_1 = this; }
2074
2073
  cdr;
2075
2074
  ngZone;
2076
- route;
2077
2075
  destroy$ = new Subject();
2078
2076
  // User settings persistence
2079
2077
  metadata = this.ProviderToUse;
@@ -2157,11 +2155,10 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
2157
2155
  isRefreshing: false
2158
2156
  };
2159
2157
  isRefreshingSingleEngine = null;
2160
- constructor(cdr, ngZone, route) {
2158
+ constructor(cdr, ngZone) {
2161
2159
  super();
2162
2160
  this.cdr = cdr;
2163
2161
  this.ngZone = ngZone;
2164
- this.route = route;
2165
2162
  }
2166
2163
  async ngOnInit() {
2167
2164
  super.ngOnInit();
@@ -2169,15 +2166,10 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
2169
2166
  await this.loadUserPreferences();
2170
2167
  // Apply query params (override preferences if present)
2171
2168
  this.applyQueryParams();
2172
- // Subscribe to query param changes
2173
- this.route.queryParams
2174
- .pipe(takeUntil(this.destroy$))
2175
- .subscribe(() => {
2176
- // Only apply if we've already loaded settings
2177
- if (this.settingsLoaded) {
2178
- this.applyQueryParams();
2179
- }
2180
- });
2169
+ // Back/forward and deep-link changes arrive via OnQueryParamsChanged below — the shell
2170
+ // owns URL sync, so a resource component must never subscribe to Router events itself.
2171
+ // (Explorer CACHES and reuses resource components, so a one-shot read in ngOnInit is not
2172
+ // enough either: a re-focused tab never re-runs it.)
2181
2173
  this.refreshData();
2182
2174
  this.NotifyLoadComplete();
2183
2175
  }
@@ -4492,12 +4484,21 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4492
4484
  // this.router.navigate(['/entities', entityName]);
4493
4485
  }
4494
4486
  // === Deep Linking via Query Parameters ===
4487
+ /**
4488
+ * Back/forward, deep link, or Home-pin restore. The framework calls this whenever the tab's
4489
+ * query params change after initial load — the replacement for a `route.queryParams`
4490
+ * subscription, which desyncs from the shell's cached-component lifecycle.
4491
+ */
4492
+ OnQueryParamsChanged(_params, _source) {
4493
+ if (this.settingsLoaded)
4494
+ this.applyQueryParams();
4495
+ }
4495
4496
  /**
4496
4497
  * Apply query parameters to component state (deep linking support)
4497
4498
  * Query params take precedence over saved preferences
4498
4499
  */
4499
4500
  applyQueryParams() {
4500
- const params = this.route.snapshot.queryParams;
4501
+ const params = this.GetQueryParams();
4501
4502
  // Section: ?section=engines|redundant|performance|cache
4502
4503
  if (params['section']) {
4503
4504
  const section = params['section'];
@@ -4664,7 +4665,7 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4664
4665
  async GetResourceIconClass(data) {
4665
4666
  return 'fa-solid fa-stethoscope';
4666
4667
  }
4667
- static ɵfac = function SystemDiagnosticsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SystemDiagnosticsComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.ActivatedRoute)); };
4668
+ static ɵfac = function SystemDiagnosticsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SystemDiagnosticsComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
4668
4669
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SystemDiagnosticsComponent, selectors: [["app-system-diagnostics"]], viewQuery: function SystemDiagnosticsComponent_Query(rf, ctx) { if (rf & 1) {
4669
4670
  i0.ɵɵviewQuery(_c0, 5);
4670
4671
  } if (rf & 2) {
@@ -4736,7 +4737,7 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4736
4737
  i0.ɵɵconditional(ctx.eventDetailPanel.isOpen && ctx.eventDetailPanel.event ? 27 : -1);
4737
4738
  i0.ɵɵadvance();
4738
4739
  i0.ɵɵconditional(ctx.engineDetailPanel.isOpen && ctx.engineDetailPanel.engine ? 28 : -1);
4739
- } }, dependencies: [i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJPageHeaderInteriorComponent, i3.MJPageBodyInteriorComponent, i3.MJStatBadgeComponent, i3.MJRefreshButtonComponent, i3.MJTabNavComponent, i3.MJEmptyStateComponent, i3.MJAlertComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJAccordionBodyDirective, i4.DecimalPipe, i4.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n background: var(--mj-bg-page);\n}\n\n.system-diagnostics[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n display: flex;\n flex-direction: column;\n}\n\n\n\n.auto-refresh-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n}\n\n.auto-refresh-toggle[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n cursor: pointer;\n}\n\n.spinning[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n padding: 24px;\n overflow: hidden;\n min-width: 0;\n display: flex;\n flex-direction: column;\n}\n\n.section-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-md);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n}\n\n.section-panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n padding: 20px 24px;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.action-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n}\n\n.source-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n}\n\n.source-btn[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.15s ease;\n}\n\n.source-btn[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.source-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: white;\n}\n\n.source-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.loading-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n color: var(--mj-status-success);\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: none;\n padding: 8px 16px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n\n.status-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n}\n\n.status-indicator.enabled[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n color: var(--mj-status-success);\n}\n\n.status-indicator.disabled[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent);\n color: var(--mj-text-muted);\n}\n\n.status-indicator[_ngcontent-%COMP%] .config-note[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0.7;\n margin-left: 4px;\n}\n\n\n\n.engine-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 16px;\n}\n\n.engine-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\n padding: 16px 20px;\n border: 2px solid transparent;\n transition: all 0.2s ease;\n}\n\n.engine-card.loaded[_ngcontent-%COMP%] {\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.engine-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-lg);\n}\n\n.engine-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.engine-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n flex: 1;\n min-width: 0;\n}\n\n.engine-status[_ngcontent-%COMP%] {\n flex-shrink: 0;\n font-size: 11px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: var(--mj-radius-lg);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-loaded[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.status-pending[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-800);\n}\n\n.engine-stats[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n color: var(--mj-text-muted);\n}\n\n.engine-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.engine-action-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: rgba(0, 0, 0, 0.05);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.engine-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-status-success);\n color: white;\n}\n\n.engine-action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n\n\n.redundant-loads-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] th.text-right[_ngcontent-%COMP%] {\n text-align: right;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] td.text-right[_ngcontent-%COMP%] {\n text-align: right;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.engine-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.engine-chip[_ngcontent-%COMP%] {\n padding: 4px 10px;\n background: var(--mj-color-indigo-500);\n color: white;\n font-size: 11px;\n border-radius: var(--mj-radius-lg);\n font-weight: 500;\n}\n\n.count-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 12px;\n background: var(--mj-color-warning-500);\n color: white;\n font-size: 12px;\n font-weight: 600;\n border-radius: var(--mj-radius-lg);\n}\n\n\n\n.footer[_ngcontent-%COMP%] {\n padding: 12px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n text-align: right;\n flex-shrink: 0;\n}\n\n.last-updated[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n\n\n\n.telemetry-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n text-align: center;\n}\n\n.summary-value[_ngcontent-%COMP%] {\n font-size: 28px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.summary-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n}\n\n.category-breakdown[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.category-breakdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.category-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-full);\n font-size: 13px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.category-events[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: white;\n padding: 2px 8px;\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 600;\n}\n\n.category-avg[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 11px;\n}\n\n.insights-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.insights-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.insights-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.insights-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n\n\n\n.insight-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.severity-info[_ngcontent-%COMP%] .insight-icon[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.severity-warning[_ngcontent-%COMP%] .insight-icon[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n.severity-optimization[_ngcontent-%COMP%] .insight-icon[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n\n\n\n\n\nmj-accordion-panel.severity-info[_ngcontent-%COMP%] .mj-accordion-panel { border-left: 4px solid var(--mj-status-info); background: var(--mj-status-info-bg); }\nmj-accordion-panel.severity-info[_ngcontent-%COMP%] .mj-accordion-header-row { background: var(--mj-status-info-bg); }\nmj-accordion-panel.severity-warning[_ngcontent-%COMP%] .mj-accordion-panel { border-left: 4px solid var(--mj-status-warning); background: var(--mj-status-warning-bg); }\nmj-accordion-panel.severity-warning[_ngcontent-%COMP%] .mj-accordion-header-row { background: var(--mj-status-warning-bg); }\nmj-accordion-panel.severity-optimization[_ngcontent-%COMP%] .mj-accordion-panel { border-left: 4px solid var(--mj-status-success); background: var(--mj-status-success-bg); }\nmj-accordion-panel.severity-optimization[_ngcontent-%COMP%] .mj-accordion-header-row { background: var(--mj-status-success-bg); }\n\n.insight-title[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.insight-category[_ngcontent-%COMP%] {\n font-size: 11px;\n padding: 2px 8px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--mj-radius-lg);\n color: var(--mj-text-secondary);\n}\n\n.insight-message[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n margin-bottom: 8px;\n}\n\n.insight-suggestion[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.insight-suggestion[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-size: 10px;\n}\n\n.patterns-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.patterns-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.patterns-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.patterns-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.patterns-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.patterns-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.patterns-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.patterns-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.duplicate-row[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n}\n\n.duplicate-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-warning-50) !important;\n}\n\n.category-chip[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 3px 10px;\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.cat-runview[_ngcontent-%COMP%] { background: var(--mj-color-info-100); color: var(--mj-color-info-700); }\n.cat-runquery[_ngcontent-%COMP%] { background: var(--mj-color-violet-100); color: var(--mj-color-violet-700); }\n.cat-engine[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-700); }\n.cat-ai[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-700); }\n.cat-cache[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-status-error); }\n.cat-network[_ngcontent-%COMP%] { background: var(--mj-color-tertiary-100); color: var(--mj-color-tertiary-700); }\n.cat-custom[_ngcontent-%COMP%] { background: var(--mj-color-neutral-100); color: var(--mj-color-neutral-600); }\n\n.operation-cell[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n}\n\n.entity-cell[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.count-warning[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n background: var(--mj-color-warning-500);\n color: white;\n border-radius: var(--mj-radius-lg);\n font-weight: 600;\n}\n\n.action-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: white;\n}\n\n\n\n.slow-queries-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n border-left: 4px solid var(--mj-color-warning-500);\n}\n\n.slow-queries-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-warning-800);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.slow-queries-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.slow-queries-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.slow-query-item[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-md);\n padding: 10px 12px;\n border: 1px solid var(--mj-color-warning-50);\n transition: all 0.15s ease;\n}\n\n.slow-query-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.slow-query-item.clickable[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-warning-50);\n border-color: var(--mj-color-warning-500);\n transform: translateX(2px);\n}\n\n.slow-query-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.slow-query-entity[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.slow-query-time[_ngcontent-%COMP%] {\n font-weight: 700;\n color: var(--mj-color-warning-800);\n font-size: 14px;\n}\n\n.slow-query-filter[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n font-family: monospace;\n}\n\n.slow-query-timestamp[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n margin-top: 4px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n padding: 8px 16px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: white;\n border-color: var(--mj-color-indigo-500);\n}\n\n\n\n\n\n\n.insight-details[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n margin-bottom: 4px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.related-events[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.related-event[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 6px 10px;\n background: rgba(0, 0, 0, 0.03);\n border-radius: 4px;\n font-size: 12px;\n}\n\n.event-time[_ngcontent-%COMP%] {\n font-family: monospace;\n color: var(--mj-text-secondary);\n}\n\n.event-duration[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.event-filter[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-family: monospace;\n font-size: 11px;\n}\n\n\n\n.timeline-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.timeline-container[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 24px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-bottom: 12px;\n position: relative;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: absolute;\n left: -24px;\n top: 0;\n bottom: 0;\n}\n\n.marker-dot[_ngcontent-%COMP%] {\n width: 10px;\n height: 10px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-color-indigo-500);\n z-index: 1;\n}\n\n.marker-line[_ngcontent-%COMP%] {\n width: 2px;\n flex: 1;\n background: var(--mj-border-default);\n margin-top: 4px;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child .marker-line[_ngcontent-%COMP%] {\n display: none;\n}\n\n.tl-runview[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-info-700); }\n.tl-runquery[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-violet-700); }\n.tl-engine[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-success-700); }\n.tl-ai[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-warning-700); }\n.tl-cache[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n\n\n\n.marker-bolt[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n color: var(--mj-color-warning-500);\n font-size: 14px;\n margin-left: -4px;\n}\n\n.marker-bolt[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mj-color-warning-500) 60%, transparent));\n}\n\n\n\n.tl-runview.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-info-700); }\n.tl-runquery.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-violet-700); }\n.tl-engine.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-success-700); }\n.tl-ai.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-warning-700); }\n.tl-cache.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n\n\n.cache-hit-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: linear-gradient(135deg, var(--mj-color-warning-100) 0%, var(--mj-color-warning-200) 100%);\n border: 1px solid var(--mj-color-warning-500);\n border-radius: var(--mj-radius-lg);\n font-size: 9px;\n font-weight: 700;\n color: var(--mj-color-warning-800);\n letter-spacing: 0.5px;\n}\n\n.cache-hit-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 8px;\n color: var(--mj-color-warning-500);\n}\n\n\n\n.timeline-item.cache-hit[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-warning-50) 0%, var(--mj-color-warning-100) 100%);\n border: 1px solid var(--mj-color-warning-300);\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 10px 14px;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.timeline-duration[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.timeline-duration.slow[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-800);\n background: var(--mj-color-warning-50);\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.timeline-body[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-operation[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.timeline-entity[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.timeline-filter[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-family: monospace;\n margin-top: 4px;\n}\n\n\n\n.timeline-entities[_ngcontent-%COMP%], \n.slow-query-entities[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-top: 4px;\n}\n\n.entity-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n background: var(--mj-color-info-100);\n border: 1px solid var(--mj-brand-primary);\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-info-700);\n}\n\n.entity-pill.small[_ngcontent-%COMP%] {\n padding: 1px 6px;\n font-size: 10px;\n}\n\n.entity-pill.more[_ngcontent-%COMP%] {\n background: var(--mj-color-neutral-100);\n border-color: var(--mj-color-neutral-200);\n color: var(--mj-color-neutral-600);\n font-style: italic;\n}\n\n\n\n.timeline-pills[_ngcontent-%COMP%], \n.slow-query-pills[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n}\n\n.param-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 10px;\n font-family: monospace;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.param-pill.small[_ngcontent-%COMP%] {\n padding: 2px 6px;\n font-size: 9px;\n max-width: 150px;\n}\n\n.param-pill[_ngcontent-%COMP%] .pill-label[_ngcontent-%COMP%] {\n font-weight: 600;\n opacity: 0.8;\n}\n\n.param-pill[_ngcontent-%COMP%] .pill-value[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n\n.param-pill.pill-filter[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n border: 1px solid var(--mj-color-warning-300);\n color: var(--mj-color-warning-700);\n}\n\n.param-pill.pill-order[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n border: 1px solid var(--mj-color-success-300);\n color: var(--mj-color-success-700);\n}\n\n.param-pill.pill-result[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n border: 1px solid var(--mj-color-violet-300);\n color: var(--mj-color-violet-700);\n}\n\n.param-pill.pill-limit[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n border: 1px solid var(--mj-brand-primary);\n color: var(--mj-color-info-700);\n}\n\n.param-pill.pill-batch[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n border: 1px solid var(--mj-color-error-300);\n color: var(--mj-status-error);\n}\n\n.param-pill.pill-info[_ngcontent-%COMP%] {\n background: var(--mj-color-neutral-100);\n border: 1px solid var(--mj-color-neutral-200);\n color: var(--mj-color-neutral-600);\n}\n\n\n\n.slow-query-item.cache-hit[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-warning-50) 0%, var(--mj-color-warning-100) 100%);\n border-color: var(--mj-color-warning-300);\n}\n\n.cache-hit-badge.small[_ngcontent-%COMP%] {\n padding: 1px 6px;\n font-size: 8px;\n}\n\n\n\n.filter-bar[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n margin-bottom: 16px;\n padding: 12px 16px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n}\n\n.search-box[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n color: var(--mj-text-muted);\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n background: var(--mj-bg-page);\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-color-indigo-500) 20%, transparent);\n}\n\n.clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 8px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n}\n\n.clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-full);\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: white;\n border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.sortable-header[_ngcontent-%COMP%] {\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n}\n\n.sortable-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n}\n\n.sortable-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-left: 6px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.sortable-header[_ngcontent-%COMP%] i.fa-sort-up[_ngcontent-%COMP%], \n.sortable-header[_ngcontent-%COMP%] i.fa-sort-down[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n\n\n.filter-cell[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 11px;\n color: var(--mj-text-secondary);\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.slow-row[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n}\n\n.slow-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-error-100) !important;\n}\n\n.slow-value[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: 600;\n}\n\n\n\n.category-chip.small[_ngcontent-%COMP%] {\n font-size: 9px;\n padding: 2px 6px;\n}\n\n\n\n.perf-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.perf-tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: none;\n background: transparent;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.perf-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.perf-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.perf-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--mj-radius-md);\n min-width: 18px;\n text-align: center;\n}\n\n.perf-tab.active[_ngcontent-%COMP%] .tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.tab-badge.warning[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.tab-badge.insight[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.perf-panel[_ngcontent-%COMP%] .section-panel-content[_ngcontent-%COMP%] {\n padding: 20px 24px;\n}\n\n\n\n.telemetry-success-alert[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n\n\n.filter-bar.compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n margin-bottom: 12px;\n}\n\n\n\n.category-item[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.category-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-accent-300);\n transform: translateY(-1px);\n}\n\n\n\n.insight-key-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 10px 12px;\n background: rgba(0, 0, 0, 0.03);\n border-radius: var(--mj-radius-md);\n margin: 8px 0;\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.key-info-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 12px;\n}\n\n.key-label[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n min-width: 50px;\n flex-shrink: 0;\n}\n\n.key-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.key-value.entity-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.key-value.filter-code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n background: rgba(0, 0, 0, 0.06);\n padding: 2px 6px;\n border-radius: 3px;\n color: var(--mj-text-primary);\n}\n\n\n\n.params-display[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 10px;\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.param-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 4px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.param-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.param-key[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 100px;\n flex-shrink: 0;\n}\n\n.param-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.event-entity[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 11px;\n font-weight: 500;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.perfmon-section[_ngcontent-%COMP%] {\n \n\n --perfmon-bg: var(--mj-bg-surface-card);\n --perfmon-bg-deep: var(--mj-bg-surface-sunken);\n --perfmon-border: var(--mj-border-default);\n --perfmon-border-medium: var(--mj-border-strong);\n --perfmon-border-light: var(--mj-border-strong);\n --perfmon-text-faint: var(--mj-text-disabled);\n --perfmon-text-muted: var(--mj-text-muted);\n --perfmon-text-secondary: var(--mj-text-secondary);\n --perfmon-control-bg: var(--mj-bg-surface-sunken);\n --perfmon-control-bg-hover: var(--mj-bg-surface-hover);\n --perfmon-mode-bg: var(--mj-bg-surface-sunken);\n --perfmon-overlay-light: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n --perfmon-overlay-medium: color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n --perfmon-overlay-strong: color-mix(in srgb, var(--mj-text-primary) 25%, transparent);\n --perfmon-tooltip-bg: var(--mj-bg-overlay);\n\n \n\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-series-runview: #00bcd4;\n --perfmon-series-runquery: #e040fb;\n --perfmon-series-engine: #00ff88;\n --perfmon-series-ai: #ff9800;\n\n background: var(--perfmon-bg);\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 24px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--perfmon-accent);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.perfmon-legend[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 11px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--perfmon-text-muted);\n}\n\n.legend-dot[_ngcontent-%COMP%] {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n.legend-item.runview[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-runview); }\n.legend-item.runquery[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-runquery); }\n.legend-item.engine[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-engine); }\n.legend-item.ai[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-ai); }\n\n.perfmon-chart-container[_ngcontent-%COMP%] {\n display: flex;\n background: var(--perfmon-bg-deep);\n border: 1px solid var(--perfmon-border);\n border-radius: 4px;\n position: relative;\n}\n\n.perfmon-y-axis[_ngcontent-%COMP%] {\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-right: 1px solid var(--perfmon-border);\n}\n\n.perfmon-y-axis[_ngcontent-%COMP%] .axis-label[_ngcontent-%COMP%] {\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n font-size: 10px;\n color: var(--perfmon-text-faint);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] {\n flex: 1;\n height: 300px;\n position: relative;\n overflow: hidden;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.perfmon-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--perfmon-border);\n}\n\n.footer-note[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.footer-note[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.footer-stats[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-accent);\n font-family: monospace;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.grid-line) {\n stroke: var(--perfmon-border);\n stroke-dasharray: 2,2;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.axis-line) {\n stroke: var(--perfmon-border-light);\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.axis-text) {\n fill: var(--perfmon-text-muted);\n font-size: 10px;\n font-family: monospace;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.event-point) {\n cursor: pointer;\n transition: r 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.event-point:hover) {\n r: 6;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip) {\n pointer-events: none;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip-bg) {\n fill: var(--perfmon-tooltip-bg);\n rx: 4;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip-text) {\n fill: var(--mj-bg-surface);\n font-size: 11px;\n font-family: monospace;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.area-fill) {\n opacity: 0.15;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.line-path) {\n fill: none;\n stroke-width: 1.5;\n opacity: 0.8;\n}\n\n\n\n.perfmon-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding: 8px 12px;\n background: var(--perfmon-overlay-light);\n border-radius: 6px;\n border: 1px solid var(--perfmon-border);\n}\n\n.chart-control-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--perfmon-control-bg);\n color: var(--perfmon-text-muted);\n border: 1px solid var(--perfmon-border-medium);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.chart-control-btn[_ngcontent-%COMP%]:hover {\n background: var(--perfmon-control-bg-hover);\n color: var(--perfmon-accent);\n border-color: var(--perfmon-accent);\n}\n\n.chart-control-btn[_ngcontent-%COMP%]:active {\n transform: scale(0.95);\n}\n\n.chart-control-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.mode-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--perfmon-mode-bg);\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid var(--perfmon-border-medium);\n}\n\n.mode-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 28px;\n padding: 0;\n background: transparent;\n color: var(--perfmon-text-faint);\n border: none;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.mode-btn[_ngcontent-%COMP%]:first-child {\n border-right: 1px solid var(--perfmon-border);\n}\n\n.mode-btn[_ngcontent-%COMP%]:hover {\n color: var(--perfmon-text-secondary);\n background: var(--perfmon-overlay-light);\n}\n\n.mode-btn.active[_ngcontent-%COMP%] {\n background: var(--perfmon-accent);\n color: var(--perfmon-mode-bg);\n}\n\n.mode-btn.active[_ngcontent-%COMP%]:hover {\n background: var(--perfmon-accent-dim);\n}\n\n.mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.control-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--perfmon-border-medium);\n margin: 0 4px;\n}\n\n.compress-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--perfmon-text-muted);\n user-select: none;\n}\n\n.compress-toggle[_ngcontent-%COMP%]:hover {\n color: var(--perfmon-accent);\n}\n\n.compress-toggle[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n accent-color: var(--perfmon-accent);\n cursor: pointer;\n}\n\n.compress-toggle[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.zoom-level[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n font-family: monospace;\n margin-left: 8px;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-indicator) {\n cursor: pointer;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-indicator:hover) {\n opacity: 0.8;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-text) {\n fill: var(--perfmon-text-faint);\n font-size: 10px;\n font-family: monospace;\n pointer-events: none;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-expand-btn) {\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-expand-btn:hover) {\n opacity: 1;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.selection-overlay) {\n pointer-events: all;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.selection-rect) {\n pointer-events: none;\n}\n\n\n\n.zoom-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: var(--perfmon-text-muted);\n font-family: monospace;\n}\n\n.zoom-info[_ngcontent-%COMP%] .zoom-level[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.zoom-info[_ngcontent-%COMP%] .time-range[_ngcontent-%COMP%] {\n color: var(--perfmon-text-faint);\n}\n\n\n\n@media (max-width: 1024px) {\n .main-content[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .left-nav[_ngcontent-%COMP%] {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n padding: 12px;\n }\n\n .nav-section[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n padding: 0;\n }\n\n .nav-section-title[_ngcontent-%COMP%] {\n display: none;\n }\n\n .nav-item[_ngcontent-%COMP%] {\n white-space: nowrap;\n padding: 10px 16px;\n }\n}\n\n@media (max-width: 768px) {\n .engine-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .perfmon-legend[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n gap: 8px;\n }\n}\n\n\n\n.export-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: var(--mj-status-success);\n color: white;\n border: none;\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.export-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-success-800);\n transform: translateY(-1px);\n}\n\n.export-btn[_ngcontent-%COMP%]:disabled {\n background: var(--mj-border-default);\n cursor: not-allowed;\n}\n\n.footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n\n\n.event-detail-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.event-detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 450px;\n max-width: 90vw;\n height: 100vh;\n background: var(--mj-bg-page);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideIn 0.25s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .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.event-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n font-size: 18px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n padding: 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .panel-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.detail-metrics[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n text-align: center;\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric-value.slow[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n.event-detail-panel[_ngcontent-%COMP%] .detail-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-size: 14px;\n}\n\n.detail-content[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.detail-key[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n font-weight: 500;\n min-width: 80px;\n flex-shrink: 0;\n}\n\n.detail-val[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.detail-val.entity-highlight[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.detail-val.filter-val[_ngcontent-%COMP%] {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n background: rgba(0, 0, 0, 0.05);\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n\n\n.params-grid[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.param-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 6px 0;\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n}\n\n.param-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.param-name[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 100px;\n flex-shrink: 0;\n font-family: monospace;\n}\n\n.param-val[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n\n\n.pattern-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n}\n\n.pattern-stat[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.pattern-stat[_ngcontent-%COMP%] .stat-val[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.pattern-stat[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-top: 4px;\n}\n\n\n\n\n.recommendation-spacing[_ngcontent-%COMP%] { margin-top: 20px; }\n.pattern-hint-spacing[_ngcontent-%COMP%] { margin-top: 12px; }\n\n\n\n.detail-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.action-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-default);\n}\n\n.action-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n\n\n.timeline-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item.clickable[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.timeline-item.clickable[_ngcontent-%COMP%]:hover .marker-dot[_ngcontent-%COMP%] {\n transform: scale(1.3);\n}\n\n\n\n\n\n\n.engine-detail-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 550px;\n max-width: 95vw;\n height: 100vh;\n background: var(--mj-bg-page);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideIn 0.25s ease;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-800) 100%);\n color: white;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: white;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.15);\n border: none;\n color: white;\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.15);\n border: none;\n color: white;\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n font-size: 18px;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.engine-summary-section[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.engine-summary-section[_ngcontent-%COMP%] .summary-stat[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px 16px;\n}\n\n.engine-summary-section[_ngcontent-%COMP%] .summary-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n}\n\n.engine-summary-section[_ngcontent-%COMP%] .summary-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.status-dot[_ngcontent-%COMP%] {\n width: 8px;\n height: 8px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-color-warning-500);\n}\n\n.status-dot.status-loaded[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n.config-items-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.config-items-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.config-items-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n\n\n\n.config-item-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n}\n\n.config-type-chip[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n flex-shrink: 0;\n}\n\n.config-type-chip.type-entity[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n}\n\n.config-type-chip.type-dataset[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n color: var(--mj-color-violet-700);\n}\n\n.config-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.config-item-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-stat[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n.config-item-details[_ngcontent-%COMP%] {\n padding: 0 16px 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.config-detail-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 10px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.config-detail-row[_ngcontent-%COMP%] .detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n min-width: 70px;\n flex-shrink: 0;\n}\n\n.config-detail-row[_ngcontent-%COMP%] .detail-value[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 4px;\n word-break: break-all;\n}\n\n\n\n.config-health-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n flex-shrink: 0;\n}\n.config-health-icon.health-success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.config-health-icon.health-failure[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.config-detail-row--error[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n border-radius: 4px;\n padding: 4px 8px;\n}\n.detail-value--error[_ngcontent-%COMP%] {\n color: var(--mj-status-error-text) !important;\n background: none !important;\n font-family: inherit !important;\n word-break: break-word;\n}\n\n\n\n.sample-data-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.sample-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.sample-title[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.sample-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.load-more-btn[_ngcontent-%COMP%], \n.load-all-btn[_ngcontent-%COMP%] {\n background: none;\n border: 1px solid var(--mj-color-indigo-500);\n color: var(--mj-color-indigo-500);\n font-size: 11px;\n padding: 4px 10px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.load-more-btn[_ngcontent-%COMP%]:hover:not(:disabled), \n.load-all-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.load-more-btn[_ngcontent-%COMP%]:disabled, \n.load-all-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.all-loaded-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--mj-status-success);\n padding: 4px 10px;\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n border-radius: 4px;\n}\n\n.action-col[_ngcontent-%COMP%] {\n width: 36px;\n min-width: 36px;\n max-width: 36px;\n padding: 4px !important;\n text-align: center;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: none;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-color-indigo-500);\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n transition: all 0.2s ease;\n}\n\n.open-record-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.sample-data-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.sample-data-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.sample-data-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 8px 10px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.sample-data-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 8px 10px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sample-data-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.sample-data-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.spinning[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n.cache-summary[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n}\n\n.cache-type-breakdown[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.cache-type-breakdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.type-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.type-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n font-size: 18px;\n color: var(--mj-text-secondary);\n}\n\n.type-name[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.type-count[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-status-success);\n}\n\n.type-size[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n margin-left: 8px;\n}\n\n.cache-entries-section[_ngcontent-%COMP%] {\n margin-top: 24px;\n}\n\n.cache-entries-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.cache-entries-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.filter-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.cache-entries-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.cache-entries-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.cache-entries-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: left;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n font-weight: 600;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n}\n\n.cache-entries-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 10px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n vertical-align: middle;\n}\n\n.cache-entries-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.cache-entries-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.cache-type-chip[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.cache-type-chip.type-dataset[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n}\n\n.cache-type-chip.type-runview[_ngcontent-%COMP%] {\n background: var(--mj-color-tertiary-100);\n color: var(--mj-color-tertiary-700);\n}\n\n.cache-type-chip.type-runquery[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n color: var(--mj-color-violet-700);\n}\n\n.entry-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.entry-fingerprint[_ngcontent-%COMP%] {\n display: block;\n font-size: 10px;\n color: var(--mj-text-muted);\n margin-top: 2px;\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 3px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-error);\n color: var(--mj-status-error);\n background: var(--mj-status-error-bg);\n}\n\n.table-footer[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: center;\n font-size: 12px;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n border-top: 1px solid var(--mj-border-default);\n}"], changeDetection: 0 });
4740
+ } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJPageHeaderInteriorComponent, i2.MJPageBodyInteriorComponent, i2.MJStatBadgeComponent, i2.MJRefreshButtonComponent, i2.MJTabNavComponent, i2.MJEmptyStateComponent, i2.MJAlertComponent, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJAccordionBodyDirective, i3.DecimalPipe, i3.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n background: var(--mj-bg-page);\n}\n\n.system-diagnostics[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n display: flex;\n flex-direction: column;\n}\n\n\n\n.auto-refresh-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n}\n\n.auto-refresh-toggle[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n cursor: pointer;\n}\n\n.spinning[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n padding: 24px;\n overflow: hidden;\n min-width: 0;\n display: flex;\n flex-direction: column;\n}\n\n.section-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-md);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n}\n\n.section-panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n padding: 20px 24px;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.action-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n}\n\n.source-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n}\n\n.source-btn[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.15s ease;\n}\n\n.source-btn[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.source-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: white;\n}\n\n.source-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.loading-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n color: var(--mj-status-success);\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: none;\n padding: 8px 16px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n\n.status-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n}\n\n.status-indicator.enabled[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n color: var(--mj-status-success);\n}\n\n.status-indicator.disabled[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent);\n color: var(--mj-text-muted);\n}\n\n.status-indicator[_ngcontent-%COMP%] .config-note[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0.7;\n margin-left: 4px;\n}\n\n\n\n.engine-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 16px;\n}\n\n.engine-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\n padding: 16px 20px;\n border: 2px solid transparent;\n transition: all 0.2s ease;\n}\n\n.engine-card.loaded[_ngcontent-%COMP%] {\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.engine-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-lg);\n}\n\n.engine-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.engine-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n flex: 1;\n min-width: 0;\n}\n\n.engine-status[_ngcontent-%COMP%] {\n flex-shrink: 0;\n font-size: 11px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: var(--mj-radius-lg);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-loaded[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.status-pending[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-800);\n}\n\n.engine-stats[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n color: var(--mj-text-muted);\n}\n\n.engine-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.engine-action-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: rgba(0, 0, 0, 0.05);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.engine-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-status-success);\n color: white;\n}\n\n.engine-action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n\n\n.redundant-loads-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] th.text-right[_ngcontent-%COMP%] {\n text-align: right;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] td.text-right[_ngcontent-%COMP%] {\n text-align: right;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.redundant-loads-table[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.engine-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.engine-chip[_ngcontent-%COMP%] {\n padding: 4px 10px;\n background: var(--mj-color-indigo-500);\n color: white;\n font-size: 11px;\n border-radius: var(--mj-radius-lg);\n font-weight: 500;\n}\n\n.count-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 12px;\n background: var(--mj-color-warning-500);\n color: white;\n font-size: 12px;\n font-weight: 600;\n border-radius: var(--mj-radius-lg);\n}\n\n\n\n.footer[_ngcontent-%COMP%] {\n padding: 12px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n text-align: right;\n flex-shrink: 0;\n}\n\n.last-updated[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n\n\n\n.telemetry-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n text-align: center;\n}\n\n.summary-value[_ngcontent-%COMP%] {\n font-size: 28px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.summary-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n}\n\n.category-breakdown[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.category-breakdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.category-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-full);\n font-size: 13px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.category-events[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: white;\n padding: 2px 8px;\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 600;\n}\n\n.category-avg[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 11px;\n}\n\n.insights-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.insights-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.insights-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.insights-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n\n\n\n.insight-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.severity-info[_ngcontent-%COMP%] .insight-icon[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.severity-warning[_ngcontent-%COMP%] .insight-icon[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n.severity-optimization[_ngcontent-%COMP%] .insight-icon[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n\n\n\n\n\nmj-accordion-panel.severity-info[_ngcontent-%COMP%] .mj-accordion-panel { border-left: 4px solid var(--mj-status-info); background: var(--mj-status-info-bg); }\nmj-accordion-panel.severity-info[_ngcontent-%COMP%] .mj-accordion-header-row { background: var(--mj-status-info-bg); }\nmj-accordion-panel.severity-warning[_ngcontent-%COMP%] .mj-accordion-panel { border-left: 4px solid var(--mj-status-warning); background: var(--mj-status-warning-bg); }\nmj-accordion-panel.severity-warning[_ngcontent-%COMP%] .mj-accordion-header-row { background: var(--mj-status-warning-bg); }\nmj-accordion-panel.severity-optimization[_ngcontent-%COMP%] .mj-accordion-panel { border-left: 4px solid var(--mj-status-success); background: var(--mj-status-success-bg); }\nmj-accordion-panel.severity-optimization[_ngcontent-%COMP%] .mj-accordion-header-row { background: var(--mj-status-success-bg); }\n\n.insight-title[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.insight-category[_ngcontent-%COMP%] {\n font-size: 11px;\n padding: 2px 8px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--mj-radius-lg);\n color: var(--mj-text-secondary);\n}\n\n.insight-message[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n margin-bottom: 8px;\n}\n\n.insight-suggestion[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.insight-suggestion[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-size: 10px;\n}\n\n.patterns-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.patterns-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.patterns-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.patterns-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.patterns-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.patterns-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.patterns-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.patterns-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.duplicate-row[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n}\n\n.duplicate-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-warning-50) !important;\n}\n\n.category-chip[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 3px 10px;\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.cat-runview[_ngcontent-%COMP%] { background: var(--mj-color-info-100); color: var(--mj-color-info-700); }\n.cat-runquery[_ngcontent-%COMP%] { background: var(--mj-color-violet-100); color: var(--mj-color-violet-700); }\n.cat-engine[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-700); }\n.cat-ai[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-700); }\n.cat-cache[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-status-error); }\n.cat-network[_ngcontent-%COMP%] { background: var(--mj-color-tertiary-100); color: var(--mj-color-tertiary-700); }\n.cat-custom[_ngcontent-%COMP%] { background: var(--mj-color-neutral-100); color: var(--mj-color-neutral-600); }\n\n.operation-cell[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n}\n\n.entity-cell[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.count-warning[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n background: var(--mj-color-warning-500);\n color: white;\n border-radius: var(--mj-radius-lg);\n font-weight: 600;\n}\n\n.action-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: white;\n}\n\n\n\n.slow-queries-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n border-left: 4px solid var(--mj-color-warning-500);\n}\n\n.slow-queries-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-warning-800);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.slow-queries-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.slow-queries-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.slow-query-item[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-md);\n padding: 10px 12px;\n border: 1px solid var(--mj-color-warning-50);\n transition: all 0.15s ease;\n}\n\n.slow-query-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.slow-query-item.clickable[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-warning-50);\n border-color: var(--mj-color-warning-500);\n transform: translateX(2px);\n}\n\n.slow-query-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.slow-query-entity[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.slow-query-time[_ngcontent-%COMP%] {\n font-weight: 700;\n color: var(--mj-color-warning-800);\n font-size: 14px;\n}\n\n.slow-query-filter[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n font-family: monospace;\n}\n\n.slow-query-timestamp[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n margin-top: 4px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n padding: 8px 16px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: white;\n border-color: var(--mj-color-indigo-500);\n}\n\n\n\n\n\n\n.insight-details[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n margin-bottom: 4px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.related-events[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.related-event[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 6px 10px;\n background: rgba(0, 0, 0, 0.03);\n border-radius: 4px;\n font-size: 12px;\n}\n\n.event-time[_ngcontent-%COMP%] {\n font-family: monospace;\n color: var(--mj-text-secondary);\n}\n\n.event-duration[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.event-filter[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-family: monospace;\n font-size: 11px;\n}\n\n\n\n.timeline-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.timeline-container[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 24px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-bottom: 12px;\n position: relative;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: absolute;\n left: -24px;\n top: 0;\n bottom: 0;\n}\n\n.marker-dot[_ngcontent-%COMP%] {\n width: 10px;\n height: 10px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-color-indigo-500);\n z-index: 1;\n}\n\n.marker-line[_ngcontent-%COMP%] {\n width: 2px;\n flex: 1;\n background: var(--mj-border-default);\n margin-top: 4px;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child .marker-line[_ngcontent-%COMP%] {\n display: none;\n}\n\n.tl-runview[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-info-700); }\n.tl-runquery[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-violet-700); }\n.tl-engine[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-success-700); }\n.tl-ai[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-color-warning-700); }\n.tl-cache[_ngcontent-%COMP%] .marker-dot[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n\n\n\n.marker-bolt[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n color: var(--mj-color-warning-500);\n font-size: 14px;\n margin-left: -4px;\n}\n\n.marker-bolt[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mj-color-warning-500) 60%, transparent));\n}\n\n\n\n.tl-runview.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-info-700); }\n.tl-runquery.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-violet-700); }\n.tl-engine.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-success-700); }\n.tl-ai.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-color-warning-700); }\n.tl-cache.cache-hit[_ngcontent-%COMP%] .marker-bolt[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n\n\n.cache-hit-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: linear-gradient(135deg, var(--mj-color-warning-100) 0%, var(--mj-color-warning-200) 100%);\n border: 1px solid var(--mj-color-warning-500);\n border-radius: var(--mj-radius-lg);\n font-size: 9px;\n font-weight: 700;\n color: var(--mj-color-warning-800);\n letter-spacing: 0.5px;\n}\n\n.cache-hit-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 8px;\n color: var(--mj-color-warning-500);\n}\n\n\n\n.timeline-item.cache-hit[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-warning-50) 0%, var(--mj-color-warning-100) 100%);\n border: 1px solid var(--mj-color-warning-300);\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 10px 14px;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.timeline-duration[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.timeline-duration.slow[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-800);\n background: var(--mj-color-warning-50);\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.timeline-body[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-operation[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.timeline-entity[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.timeline-filter[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-family: monospace;\n margin-top: 4px;\n}\n\n\n\n.timeline-entities[_ngcontent-%COMP%], \n.slow-query-entities[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-top: 4px;\n}\n\n.entity-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n background: var(--mj-color-info-100);\n border: 1px solid var(--mj-brand-primary);\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-info-700);\n}\n\n.entity-pill.small[_ngcontent-%COMP%] {\n padding: 1px 6px;\n font-size: 10px;\n}\n\n.entity-pill.more[_ngcontent-%COMP%] {\n background: var(--mj-color-neutral-100);\n border-color: var(--mj-color-neutral-200);\n color: var(--mj-color-neutral-600);\n font-style: italic;\n}\n\n\n\n.timeline-pills[_ngcontent-%COMP%], \n.slow-query-pills[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n}\n\n.param-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 10px;\n font-family: monospace;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.param-pill.small[_ngcontent-%COMP%] {\n padding: 2px 6px;\n font-size: 9px;\n max-width: 150px;\n}\n\n.param-pill[_ngcontent-%COMP%] .pill-label[_ngcontent-%COMP%] {\n font-weight: 600;\n opacity: 0.8;\n}\n\n.param-pill[_ngcontent-%COMP%] .pill-value[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n\n.param-pill.pill-filter[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n border: 1px solid var(--mj-color-warning-300);\n color: var(--mj-color-warning-700);\n}\n\n.param-pill.pill-order[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n border: 1px solid var(--mj-color-success-300);\n color: var(--mj-color-success-700);\n}\n\n.param-pill.pill-result[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n border: 1px solid var(--mj-color-violet-300);\n color: var(--mj-color-violet-700);\n}\n\n.param-pill.pill-limit[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n border: 1px solid var(--mj-brand-primary);\n color: var(--mj-color-info-700);\n}\n\n.param-pill.pill-batch[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n border: 1px solid var(--mj-color-error-300);\n color: var(--mj-status-error);\n}\n\n.param-pill.pill-info[_ngcontent-%COMP%] {\n background: var(--mj-color-neutral-100);\n border: 1px solid var(--mj-color-neutral-200);\n color: var(--mj-color-neutral-600);\n}\n\n\n\n.slow-query-item.cache-hit[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-warning-50) 0%, var(--mj-color-warning-100) 100%);\n border-color: var(--mj-color-warning-300);\n}\n\n.cache-hit-badge.small[_ngcontent-%COMP%] {\n padding: 1px 6px;\n font-size: 8px;\n}\n\n\n\n.filter-bar[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n margin-bottom: 16px;\n padding: 12px 16px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n}\n\n.search-box[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n color: var(--mj-text-muted);\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n background: var(--mj-bg-page);\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-color-indigo-500) 20%, transparent);\n}\n\n.clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 8px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n}\n\n.clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-full);\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: white;\n border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.sortable-header[_ngcontent-%COMP%] {\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n}\n\n.sortable-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n}\n\n.sortable-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-left: 6px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.sortable-header[_ngcontent-%COMP%] i.fa-sort-up[_ngcontent-%COMP%], \n.sortable-header[_ngcontent-%COMP%] i.fa-sort-down[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n\n\n.filter-cell[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 11px;\n color: var(--mj-text-secondary);\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.slow-row[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n}\n\n.slow-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-error-100) !important;\n}\n\n.slow-value[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: 600;\n}\n\n\n\n.category-chip.small[_ngcontent-%COMP%] {\n font-size: 9px;\n padding: 2px 6px;\n}\n\n\n\n.perf-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.perf-tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: none;\n background: transparent;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.perf-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.perf-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.perf-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--mj-radius-md);\n min-width: 18px;\n text-align: center;\n}\n\n.perf-tab.active[_ngcontent-%COMP%] .tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.tab-badge.warning[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.tab-badge.insight[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.perf-panel[_ngcontent-%COMP%] .section-panel-content[_ngcontent-%COMP%] {\n padding: 20px 24px;\n}\n\n\n\n.telemetry-success-alert[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n\n\n.filter-bar.compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n margin-bottom: 12px;\n}\n\n\n\n.category-item[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.category-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-accent-300);\n transform: translateY(-1px);\n}\n\n\n\n.insight-key-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 10px 12px;\n background: rgba(0, 0, 0, 0.03);\n border-radius: var(--mj-radius-md);\n margin: 8px 0;\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.key-info-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 12px;\n}\n\n.key-label[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n min-width: 50px;\n flex-shrink: 0;\n}\n\n.key-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.key-value.entity-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.key-value.filter-code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n background: rgba(0, 0, 0, 0.06);\n padding: 2px 6px;\n border-radius: 3px;\n color: var(--mj-text-primary);\n}\n\n\n\n.params-display[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 10px;\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.param-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 4px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.param-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.param-key[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 100px;\n flex-shrink: 0;\n}\n\n.param-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.event-entity[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 11px;\n font-weight: 500;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.perfmon-section[_ngcontent-%COMP%] {\n \n\n --perfmon-bg: var(--mj-bg-surface-card);\n --perfmon-bg-deep: var(--mj-bg-surface-sunken);\n --perfmon-border: var(--mj-border-default);\n --perfmon-border-medium: var(--mj-border-strong);\n --perfmon-border-light: var(--mj-border-strong);\n --perfmon-text-faint: var(--mj-text-disabled);\n --perfmon-text-muted: var(--mj-text-muted);\n --perfmon-text-secondary: var(--mj-text-secondary);\n --perfmon-control-bg: var(--mj-bg-surface-sunken);\n --perfmon-control-bg-hover: var(--mj-bg-surface-hover);\n --perfmon-mode-bg: var(--mj-bg-surface-sunken);\n --perfmon-overlay-light: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n --perfmon-overlay-medium: color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n --perfmon-overlay-strong: color-mix(in srgb, var(--mj-text-primary) 25%, transparent);\n --perfmon-tooltip-bg: var(--mj-bg-overlay);\n\n \n\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-series-runview: #00bcd4;\n --perfmon-series-runquery: #e040fb;\n --perfmon-series-engine: #00ff88;\n --perfmon-series-ai: #ff9800;\n\n background: var(--perfmon-bg);\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 24px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--perfmon-accent);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.perfmon-legend[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 11px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--perfmon-text-muted);\n}\n\n.legend-dot[_ngcontent-%COMP%] {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n.legend-item.runview[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-runview); }\n.legend-item.runquery[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-runquery); }\n.legend-item.engine[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-engine); }\n.legend-item.ai[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-ai); }\n\n.perfmon-chart-container[_ngcontent-%COMP%] {\n display: flex;\n background: var(--perfmon-bg-deep);\n border: 1px solid var(--perfmon-border);\n border-radius: 4px;\n position: relative;\n}\n\n.perfmon-y-axis[_ngcontent-%COMP%] {\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-right: 1px solid var(--perfmon-border);\n}\n\n.perfmon-y-axis[_ngcontent-%COMP%] .axis-label[_ngcontent-%COMP%] {\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n font-size: 10px;\n color: var(--perfmon-text-faint);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] {\n flex: 1;\n height: 300px;\n position: relative;\n overflow: hidden;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.perfmon-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--perfmon-border);\n}\n\n.footer-note[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.footer-note[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.footer-stats[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-accent);\n font-family: monospace;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.grid-line) {\n stroke: var(--perfmon-border);\n stroke-dasharray: 2,2;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.axis-line) {\n stroke: var(--perfmon-border-light);\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.axis-text) {\n fill: var(--perfmon-text-muted);\n font-size: 10px;\n font-family: monospace;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.event-point) {\n cursor: pointer;\n transition: r 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.event-point:hover) {\n r: 6;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip) {\n pointer-events: none;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip-bg) {\n fill: var(--perfmon-tooltip-bg);\n rx: 4;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip-text) {\n fill: var(--mj-bg-surface);\n font-size: 11px;\n font-family: monospace;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.area-fill) {\n opacity: 0.15;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.line-path) {\n fill: none;\n stroke-width: 1.5;\n opacity: 0.8;\n}\n\n\n\n.perfmon-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding: 8px 12px;\n background: var(--perfmon-overlay-light);\n border-radius: 6px;\n border: 1px solid var(--perfmon-border);\n}\n\n.chart-control-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--perfmon-control-bg);\n color: var(--perfmon-text-muted);\n border: 1px solid var(--perfmon-border-medium);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.chart-control-btn[_ngcontent-%COMP%]:hover {\n background: var(--perfmon-control-bg-hover);\n color: var(--perfmon-accent);\n border-color: var(--perfmon-accent);\n}\n\n.chart-control-btn[_ngcontent-%COMP%]:active {\n transform: scale(0.95);\n}\n\n.chart-control-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.mode-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--perfmon-mode-bg);\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid var(--perfmon-border-medium);\n}\n\n.mode-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 28px;\n padding: 0;\n background: transparent;\n color: var(--perfmon-text-faint);\n border: none;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.mode-btn[_ngcontent-%COMP%]:first-child {\n border-right: 1px solid var(--perfmon-border);\n}\n\n.mode-btn[_ngcontent-%COMP%]:hover {\n color: var(--perfmon-text-secondary);\n background: var(--perfmon-overlay-light);\n}\n\n.mode-btn.active[_ngcontent-%COMP%] {\n background: var(--perfmon-accent);\n color: var(--perfmon-mode-bg);\n}\n\n.mode-btn.active[_ngcontent-%COMP%]:hover {\n background: var(--perfmon-accent-dim);\n}\n\n.mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.control-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--perfmon-border-medium);\n margin: 0 4px;\n}\n\n.compress-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--perfmon-text-muted);\n user-select: none;\n}\n\n.compress-toggle[_ngcontent-%COMP%]:hover {\n color: var(--perfmon-accent);\n}\n\n.compress-toggle[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n accent-color: var(--perfmon-accent);\n cursor: pointer;\n}\n\n.compress-toggle[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.zoom-level[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n font-family: monospace;\n margin-left: 8px;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-indicator) {\n cursor: pointer;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-indicator:hover) {\n opacity: 0.8;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-text) {\n fill: var(--perfmon-text-faint);\n font-size: 10px;\n font-family: monospace;\n pointer-events: none;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-expand-btn) {\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-expand-btn:hover) {\n opacity: 1;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.selection-overlay) {\n pointer-events: all;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.selection-rect) {\n pointer-events: none;\n}\n\n\n\n.zoom-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: var(--perfmon-text-muted);\n font-family: monospace;\n}\n\n.zoom-info[_ngcontent-%COMP%] .zoom-level[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.zoom-info[_ngcontent-%COMP%] .time-range[_ngcontent-%COMP%] {\n color: var(--perfmon-text-faint);\n}\n\n\n\n@media (max-width: 1024px) {\n .main-content[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .left-nav[_ngcontent-%COMP%] {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n padding: 12px;\n }\n\n .nav-section[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n padding: 0;\n }\n\n .nav-section-title[_ngcontent-%COMP%] {\n display: none;\n }\n\n .nav-item[_ngcontent-%COMP%] {\n white-space: nowrap;\n padding: 10px 16px;\n }\n}\n\n@media (max-width: 768px) {\n .engine-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .perfmon-legend[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n gap: 8px;\n }\n}\n\n\n\n.export-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: var(--mj-status-success);\n color: white;\n border: none;\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.export-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-success-800);\n transform: translateY(-1px);\n}\n\n.export-btn[_ngcontent-%COMP%]:disabled {\n background: var(--mj-border-default);\n cursor: not-allowed;\n}\n\n.footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n\n\n.event-detail-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.event-detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 450px;\n max-width: 90vw;\n height: 100vh;\n background: var(--mj-bg-page);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideIn 0.25s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .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.event-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n font-size: 18px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n padding: 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .panel-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.detail-metrics[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n text-align: center;\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric-value.slow[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.detail-metrics[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n.event-detail-panel[_ngcontent-%COMP%] .detail-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.event-detail-panel[_ngcontent-%COMP%] .detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-size: 14px;\n}\n\n.detail-content[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.detail-key[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n font-weight: 500;\n min-width: 80px;\n flex-shrink: 0;\n}\n\n.detail-val[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.detail-val.entity-highlight[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.detail-val.filter-val[_ngcontent-%COMP%] {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n background: rgba(0, 0, 0, 0.05);\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n\n\n.params-grid[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.param-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 6px 0;\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n}\n\n.param-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.param-name[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 100px;\n flex-shrink: 0;\n font-family: monospace;\n}\n\n.param-val[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n\n\n.pattern-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n}\n\n.pattern-stat[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.pattern-stat[_ngcontent-%COMP%] .stat-val[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.pattern-stat[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-top: 4px;\n}\n\n\n\n\n.recommendation-spacing[_ngcontent-%COMP%] { margin-top: 20px; }\n.pattern-hint-spacing[_ngcontent-%COMP%] { margin-top: 12px; }\n\n\n\n.detail-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.action-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-default);\n}\n\n.action-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n\n\n.timeline-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item.clickable[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.timeline-item.clickable[_ngcontent-%COMP%]:hover .marker-dot[_ngcontent-%COMP%] {\n transform: scale(1.3);\n}\n\n\n\n\n\n\n.engine-detail-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 550px;\n max-width: 95vw;\n height: 100vh;\n background: var(--mj-bg-page);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideIn 0.25s ease;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-800) 100%);\n color: white;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: white;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.15);\n border: none;\n color: white;\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.15);\n border: none;\n color: white;\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n font-size: 18px;\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.engine-detail-panel[_ngcontent-%COMP%] .panel-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.engine-summary-section[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.engine-summary-section[_ngcontent-%COMP%] .summary-stat[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px 16px;\n}\n\n.engine-summary-section[_ngcontent-%COMP%] .summary-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n}\n\n.engine-summary-section[_ngcontent-%COMP%] .summary-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.status-dot[_ngcontent-%COMP%] {\n width: 8px;\n height: 8px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-color-warning-500);\n}\n\n.status-dot.status-loaded[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n.config-items-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.config-items-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.config-items-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n\n\n\n.config-item-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n}\n\n.config-type-chip[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n flex-shrink: 0;\n}\n\n.config-type-chip.type-entity[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n}\n\n.config-type-chip.type-dataset[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n color: var(--mj-color-violet-700);\n}\n\n.config-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.config-item-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-stat[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n.config-item-details[_ngcontent-%COMP%] {\n padding: 0 16px 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.config-detail-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 10px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.config-detail-row[_ngcontent-%COMP%] .detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n min-width: 70px;\n flex-shrink: 0;\n}\n\n.config-detail-row[_ngcontent-%COMP%] .detail-value[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 4px;\n word-break: break-all;\n}\n\n\n\n.config-health-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n flex-shrink: 0;\n}\n.config-health-icon.health-success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.config-health-icon.health-failure[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.config-detail-row--error[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n border-radius: 4px;\n padding: 4px 8px;\n}\n.detail-value--error[_ngcontent-%COMP%] {\n color: var(--mj-status-error-text) !important;\n background: none !important;\n font-family: inherit !important;\n word-break: break-word;\n}\n\n\n\n.sample-data-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.sample-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.sample-title[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.sample-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.load-more-btn[_ngcontent-%COMP%], \n.load-all-btn[_ngcontent-%COMP%] {\n background: none;\n border: 1px solid var(--mj-color-indigo-500);\n color: var(--mj-color-indigo-500);\n font-size: 11px;\n padding: 4px 10px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.load-more-btn[_ngcontent-%COMP%]:hover:not(:disabled), \n.load-all-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.load-more-btn[_ngcontent-%COMP%]:disabled, \n.load-all-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.all-loaded-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--mj-status-success);\n padding: 4px 10px;\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n border-radius: 4px;\n}\n\n.action-col[_ngcontent-%COMP%] {\n width: 36px;\n min-width: 36px;\n max-width: 36px;\n padding: 4px !important;\n text-align: center;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: none;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-color-indigo-500);\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n transition: all 0.2s ease;\n}\n\n.open-record-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.sample-data-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.sample-data-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.sample-data-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 8px 10px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.sample-data-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 8px 10px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sample-data-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.sample-data-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.spinning[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n.cache-summary[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n}\n\n.cache-type-breakdown[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.cache-type-breakdown[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.type-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.type-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n font-size: 18px;\n color: var(--mj-text-secondary);\n}\n\n.type-name[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.type-count[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-status-success);\n}\n\n.type-size[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n margin-left: 8px;\n}\n\n.cache-entries-section[_ngcontent-%COMP%] {\n margin-top: 24px;\n}\n\n.cache-entries-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.cache-entries-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.filter-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.cache-entries-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.cache-entries-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.cache-entries-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: left;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n font-weight: 600;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n}\n\n.cache-entries-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 10px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n vertical-align: middle;\n}\n\n.cache-entries-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.cache-entries-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.cache-type-chip[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.cache-type-chip.type-dataset[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n}\n\n.cache-type-chip.type-runview[_ngcontent-%COMP%] {\n background: var(--mj-color-tertiary-100);\n color: var(--mj-color-tertiary-700);\n}\n\n.cache-type-chip.type-runquery[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n color: var(--mj-color-violet-700);\n}\n\n.entry-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.entry-fingerprint[_ngcontent-%COMP%] {\n display: block;\n font-size: 10px;\n color: var(--mj-text-muted);\n margin-top: 2px;\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 3px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-error);\n color: var(--mj-status-error);\n background: var(--mj-status-error-bg);\n}\n\n.table-footer[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: center;\n font-size: 12px;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n border-top: 1px solid var(--mj-border-default);\n}"], changeDetection: 0 });
4740
4741
  };
4741
4742
  SystemDiagnosticsComponent = SystemDiagnosticsComponent_1 = __decorate([
4742
4743
  RegisterClass(BaseResourceComponent, 'SystemDiagnosticsResource')
@@ -5922,9 +5923,9 @@ export { SystemDiagnosticsComponent };
5922
5923
  }
5923
5924
  </mj-page-body-interior>
5924
5925
  `, styles: ["/*\n SystemDiagnostics renders inside Admin's \"Monitoring\" left-nav shell.\n Host is a flex column so <mj-page-header-interior> sits pinned at the top\n and .scrollable-content fills the rest. See plans/explorer-chrome-conventions.md Section 10.\n*/\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n background: var(--mj-bg-page);\n}\n\n.system-diagnostics {\n background: var(--mj-bg-surface-sunken);\n display: flex;\n flex-direction: column;\n}\n\n/* Inline auto-refresh toggle in the [actions] slot. */\n.auto-refresh-toggle {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n}\n\n.auto-refresh-toggle input[type=\"checkbox\"] {\n width: 14px;\n height: 14px;\n cursor: pointer;\n}\n\n.spinning {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/*\n Overview KPIs (engines / memory / redundant) now live as <mj-stat-badge>\n instances in the chrome's [meta] slot \u2014 see the header-interior block above.\n The legacy .overview-cards-container / .overview-card / .kpi-toggle-btn /\n .mini-kpi rules were retired with that migration.\n*/\n\n/* Main Content */\n/*\n Content Area \u2014 L2 nav was previously a bespoke left rail (.left-nav). It now\n lives in the interior chrome above as <mj-tab-nav>. Section panels render\n directly inside .content-area, which fills the remaining body width.\n*/\n.content-area {\n flex: 1;\n padding: 24px;\n overflow: hidden;\n min-width: 0;\n display: flex;\n flex-direction: column;\n}\n\n.section-panel {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-md);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n}\n\n.section-panel-content {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n padding: 20px 24px;\n}\n\n.panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.panel-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.panel-header h3 i {\n color: var(--mj-status-success);\n}\n\n.panel-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.action-divider {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n}\n\n.source-toggle {\n display: flex;\n background: var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n}\n\n.source-btn {\n background: transparent;\n border: none;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.15s ease;\n}\n\n.source-btn:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.source-btn.active {\n background: var(--mj-status-success);\n color: white;\n}\n\n.source-btn i {\n font-size: 11px;\n}\n\n.loading-indicator {\n display: flex;\n align-items: center;\n color: var(--mj-status-success);\n}\n\n.action-btn {\n background: var(--mj-bg-surface);\n border: none;\n padding: 8px 16px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n}\n\n.action-btn:hover:not(:disabled) {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.action-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Status indicator for read-only server telemetry status */\n.status-indicator {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n}\n\n.status-indicator.enabled {\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n color: var(--mj-status-success);\n}\n\n.status-indicator.disabled {\n background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent);\n color: var(--mj-text-muted);\n}\n\n.status-indicator .config-note {\n font-size: 11px;\n opacity: 0.7;\n margin-left: 4px;\n}\n\n/* Engine Grid */\n.engine-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 16px;\n}\n\n.engine-card {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\n padding: 16px 20px;\n border: 2px solid transparent;\n transition: all 0.2s ease;\n}\n\n.engine-card.loaded {\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.engine-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-lg);\n}\n\n.engine-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.engine-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n flex: 1;\n min-width: 0;\n}\n\n.engine-status {\n flex-shrink: 0;\n font-size: 11px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: var(--mj-radius-lg);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-loaded {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.status-pending {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-800);\n}\n\n.engine-stats {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.stat-item i {\n width: 16px;\n color: var(--mj-text-muted);\n}\n\n.engine-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.engine-action-btn {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: rgba(0, 0, 0, 0.05);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.engine-action-btn:hover:not(:disabled) {\n background: var(--mj-status-success);\n color: white;\n}\n\n.engine-action-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.stat-label {\n color: var(--mj-text-muted);\n}\n\n.stat-value {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n/* Redundant Loads Table */\n.redundant-loads-table-wrapper {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.redundant-loads-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.redundant-loads-table th {\n background: var(--mj-bg-surface-sunken);\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.redundant-loads-table th.text-right {\n text-align: right;\n}\n\n.redundant-loads-table td {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.redundant-loads-table td.text-right {\n text-align: right;\n}\n\n.redundant-loads-table tbody tr:last-child td {\n border-bottom: none;\n}\n\n.redundant-loads-table tbody tr:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.redundant-loads-table .entity-name {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.engine-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.engine-chip {\n padding: 4px 10px;\n background: var(--mj-color-indigo-500);\n color: white;\n font-size: 11px;\n border-radius: var(--mj-radius-lg);\n font-weight: 500;\n}\n\n.count-badge {\n display: inline-block;\n padding: 4px 12px;\n background: var(--mj-color-warning-500);\n color: white;\n font-size: 12px;\n font-weight: 600;\n border-radius: var(--mj-radius-lg);\n}\n\n/* Footer */\n.footer {\n padding: 12px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n text-align: right;\n flex-shrink: 0;\n}\n\n.last-updated {\n font-size: 12px;\n color: var(--mj-text-muted);\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n/* Performance Section Styles */\n\n.telemetry-summary {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.summary-card {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n text-align: center;\n}\n\n.summary-value {\n font-size: 28px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.summary-label {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n}\n\n.category-breakdown {\n margin-bottom: 24px;\n}\n\n.category-breakdown h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.category-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.category-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-full);\n font-size: 13px;\n}\n\n.category-name {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.category-events {\n background: var(--mj-color-indigo-500);\n color: white;\n padding: 2px 8px;\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 600;\n}\n\n.category-avg {\n color: var(--mj-text-muted);\n font-size: 11px;\n}\n\n.insights-section {\n margin-bottom: 24px;\n}\n\n.insights-section h4 {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.insights-section h4 i {\n color: var(--mj-color-warning-500);\n}\n\n.insights-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n/* .insight-card wrapper + .insight-header chrome now owned by <mj-accordion-panel>. */\n\n.insight-icon {\n font-size: 16px;\n}\n\n.severity-info .insight-icon { color: var(--mj-brand-primary); }\n.severity-warning .insight-icon { color: var(--mj-status-warning); }\n.severity-optimization .insight-icon { color: var(--mj-status-success); }\n\n/* Per-severity tint restored onto the accordion (card background + header tint +\n left-accent stripe). The accordion owns its chrome, so reach the inner panel /\n header row via ::ng-deep \u2014 same pattern the selected-run tint uses. Semantic,\n dark-mode-safe tokens replace the old primitive tints. */\nmj-accordion-panel.severity-info ::ng-deep .mj-accordion-panel { border-left: 4px solid var(--mj-status-info); background: var(--mj-status-info-bg); }\nmj-accordion-panel.severity-info ::ng-deep .mj-accordion-header-row { background: var(--mj-status-info-bg); }\nmj-accordion-panel.severity-warning ::ng-deep .mj-accordion-panel { border-left: 4px solid var(--mj-status-warning); background: var(--mj-status-warning-bg); }\nmj-accordion-panel.severity-warning ::ng-deep .mj-accordion-header-row { background: var(--mj-status-warning-bg); }\nmj-accordion-panel.severity-optimization ::ng-deep .mj-accordion-panel { border-left: 4px solid var(--mj-status-success); background: var(--mj-status-success-bg); }\nmj-accordion-panel.severity-optimization ::ng-deep .mj-accordion-header-row { background: var(--mj-status-success-bg); }\n\n.insight-title {\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.insight-category {\n font-size: 11px;\n padding: 2px 8px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--mj-radius-lg);\n color: var(--mj-text-secondary);\n}\n\n.insight-message {\n font-size: 13px;\n color: var(--mj-text-secondary);\n margin-bottom: 8px;\n}\n\n.insight-suggestion {\n font-size: 12px;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.insight-suggestion i {\n color: var(--mj-status-success);\n font-size: 10px;\n}\n\n.patterns-section h4 {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.patterns-section h4 i {\n color: var(--mj-color-indigo-500);\n}\n\n.patterns-table-wrapper {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.patterns-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.patterns-table th {\n background: var(--mj-bg-surface-sunken);\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.patterns-table td {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.patterns-table tbody tr:last-child td {\n border-bottom: none;\n}\n\n.patterns-table tbody tr:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.duplicate-row {\n background: var(--mj-color-warning-50);\n}\n\n.duplicate-row:hover {\n background: var(--mj-color-warning-50) !important;\n}\n\n.category-chip {\n display: inline-block;\n padding: 3px 10px;\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.cat-runview { background: var(--mj-color-info-100); color: var(--mj-color-info-700); }\n.cat-runquery { background: var(--mj-color-violet-100); color: var(--mj-color-violet-700); }\n.cat-engine { background: var(--mj-color-success-100); color: var(--mj-color-success-700); }\n.cat-ai { background: var(--mj-color-warning-50); color: var(--mj-color-warning-700); }\n.cat-cache { background: var(--mj-color-error-100); color: var(--mj-status-error); }\n.cat-network { background: var(--mj-color-tertiary-100); color: var(--mj-color-tertiary-700); }\n.cat-custom { background: var(--mj-color-neutral-100); color: var(--mj-color-neutral-600); }\n\n.operation-cell {\n font-family: monospace;\n font-size: 12px;\n}\n\n.entity-cell {\n font-weight: 500;\n}\n\n.count-warning {\n display: inline-block;\n padding: 2px 8px;\n background: var(--mj-color-warning-500);\n color: white;\n border-radius: var(--mj-radius-lg);\n font-weight: 600;\n}\n\n.action-btn.active {\n background: var(--mj-status-success);\n color: white;\n}\n\n/* Slow Queries Section */\n.slow-queries-section {\n margin-bottom: 24px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n border-left: 4px solid var(--mj-color-warning-500);\n}\n\n.slow-queries-section h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-warning-800);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.slow-queries-section h4 i {\n color: var(--mj-color-warning-500);\n}\n\n.slow-queries-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.slow-query-item {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-md);\n padding: 10px 12px;\n border: 1px solid var(--mj-color-warning-50);\n transition: all 0.15s ease;\n}\n\n.slow-query-item.clickable {\n cursor: pointer;\n}\n\n.slow-query-item.clickable:hover {\n background: var(--mj-color-warning-50);\n border-color: var(--mj-color-warning-500);\n transform: translateX(2px);\n}\n\n.slow-query-main {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.slow-query-entity {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.slow-query-time {\n font-weight: 700;\n color: var(--mj-color-warning-800);\n font-size: 14px;\n}\n\n.slow-query-filter {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n font-family: monospace;\n}\n\n.slow-query-timestamp {\n font-size: 11px;\n color: var(--mj-text-muted);\n margin-top: 4px;\n}\n\n/* View Toggle */\n.view-toggle {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.toggle-btn {\n padding: 8px 16px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n}\n\n.toggle-btn:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.toggle-btn.active {\n background: var(--mj-color-indigo-500);\n color: white;\n border-color: var(--mj-color-indigo-500);\n}\n\n/* Expandable Insight Cards */\n/* .insight-card expandable/expanded/expand-icon chrome now owned by <mj-accordion-panel>. */\n\n.insight-details {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.detail-section {\n margin-bottom: 12px;\n}\n\n.detail-label {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n margin-bottom: 4px;\n}\n\n.detail-value {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.related-events {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.related-event {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 6px 10px;\n background: rgba(0, 0, 0, 0.03);\n border-radius: 4px;\n font-size: 12px;\n}\n\n.event-time {\n font-family: monospace;\n color: var(--mj-text-secondary);\n}\n\n.event-duration {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.event-filter {\n color: var(--mj-text-muted);\n font-family: monospace;\n font-size: 11px;\n}\n\n/* Timeline Section */\n.timeline-section h4 {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-section h4 i {\n color: var(--mj-color-indigo-500);\n}\n\n.timeline-container {\n position: relative;\n padding-left: 24px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n.timeline-item {\n display: flex;\n gap: 16px;\n margin-bottom: 12px;\n position: relative;\n}\n\n.timeline-marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: absolute;\n left: -24px;\n top: 0;\n bottom: 0;\n}\n\n.marker-dot {\n width: 10px;\n height: 10px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-color-indigo-500);\n z-index: 1;\n}\n\n.marker-line {\n width: 2px;\n flex: 1;\n background: var(--mj-border-default);\n margin-top: 4px;\n}\n\n.timeline-item:last-child .marker-line {\n display: none;\n}\n\n.tl-runview .marker-dot { background: var(--mj-color-info-700); }\n.tl-runquery .marker-dot { background: var(--mj-color-violet-700); }\n.tl-engine .marker-dot { background: var(--mj-color-success-700); }\n.tl-ai .marker-dot { background: var(--mj-color-warning-700); }\n.tl-cache .marker-dot { background: var(--mj-status-error); }\n\n/* Cache hit bolt marker */\n.marker-bolt {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n color: var(--mj-color-warning-500);\n font-size: 14px;\n margin-left: -4px;\n}\n\n.marker-bolt i {\n filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mj-color-warning-500) 60%, transparent));\n}\n\n/* Category-specific bolt colors */\n.tl-runview.cache-hit .marker-bolt { color: var(--mj-color-info-700); }\n.tl-runquery.cache-hit .marker-bolt { color: var(--mj-color-violet-700); }\n.tl-engine.cache-hit .marker-bolt { color: var(--mj-color-success-700); }\n.tl-ai.cache-hit .marker-bolt { color: var(--mj-color-warning-700); }\n.tl-cache.cache-hit .marker-bolt { color: var(--mj-status-error); }\n\n/* Cache hit badge */\n.cache-hit-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: linear-gradient(135deg, var(--mj-color-warning-100) 0%, var(--mj-color-warning-200) 100%);\n border: 1px solid var(--mj-color-warning-500);\n border-radius: var(--mj-radius-lg);\n font-size: 9px;\n font-weight: 700;\n color: var(--mj-color-warning-800);\n letter-spacing: 0.5px;\n}\n\n.cache-hit-badge i {\n font-size: 8px;\n color: var(--mj-color-warning-500);\n}\n\n/* Highlighted background for cache hit items */\n.timeline-item.cache-hit .timeline-content {\n background: linear-gradient(135deg, var(--mj-color-warning-50) 0%, var(--mj-color-warning-100) 100%);\n border: 1px solid var(--mj-color-warning-300);\n}\n\n.timeline-content {\n flex: 1;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 10px 14px;\n}\n\n.timeline-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n}\n\n.timeline-time {\n font-family: monospace;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.timeline-duration {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.timeline-duration.slow {\n color: var(--mj-color-warning-800);\n background: var(--mj-color-warning-50);\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.timeline-body {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-operation {\n font-family: monospace;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.timeline-entity {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.timeline-filter {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-family: monospace;\n margin-top: 4px;\n}\n\n/* Entity Pills for RunViews batch operations */\n.timeline-entities,\n.slow-query-entities {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-top: 4px;\n}\n\n.entity-pill {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n background: var(--mj-color-info-100);\n border: 1px solid var(--mj-brand-primary);\n border-radius: var(--mj-radius-lg);\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-info-700);\n}\n\n.entity-pill.small {\n padding: 1px 6px;\n font-size: 10px;\n}\n\n.entity-pill.more {\n background: var(--mj-color-neutral-100);\n border-color: var(--mj-color-neutral-200);\n color: var(--mj-color-neutral-600);\n font-style: italic;\n}\n\n/* Parameter Pills */\n.timeline-pills,\n.slow-query-pills {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n}\n\n.param-pill {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 10px;\n font-family: monospace;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.param-pill.small {\n padding: 2px 6px;\n font-size: 9px;\n max-width: 150px;\n}\n\n.param-pill .pill-label {\n font-weight: 600;\n opacity: 0.8;\n}\n\n.param-pill .pill-value {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Pill type colors */\n.param-pill.pill-filter {\n background: var(--mj-color-warning-50);\n border: 1px solid var(--mj-color-warning-300);\n color: var(--mj-color-warning-700);\n}\n\n.param-pill.pill-order {\n background: var(--mj-color-success-100);\n border: 1px solid var(--mj-color-success-300);\n color: var(--mj-color-success-700);\n}\n\n.param-pill.pill-result {\n background: var(--mj-color-violet-100);\n border: 1px solid var(--mj-color-violet-300);\n color: var(--mj-color-violet-700);\n}\n\n.param-pill.pill-limit {\n background: var(--mj-color-info-100);\n border: 1px solid var(--mj-brand-primary);\n color: var(--mj-color-info-700);\n}\n\n.param-pill.pill-batch {\n background: var(--mj-color-error-100);\n border: 1px solid var(--mj-color-error-300);\n color: var(--mj-status-error);\n}\n\n.param-pill.pill-info {\n background: var(--mj-color-neutral-100);\n border: 1px solid var(--mj-color-neutral-200);\n color: var(--mj-color-neutral-600);\n}\n\n/* Slow query cache hit styling */\n.slow-query-item.cache-hit {\n background: linear-gradient(135deg, var(--mj-color-warning-50) 0%, var(--mj-color-warning-100) 100%);\n border-color: var(--mj-color-warning-300);\n}\n\n.cache-hit-badge.small {\n padding: 1px 6px;\n font-size: 8px;\n}\n\n/* Filter Bar */\n.filter-bar {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n margin-bottom: 16px;\n padding: 12px 16px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n}\n\n.search-box {\n flex: 1;\n min-width: 200px;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-box i {\n position: absolute;\n left: 12px;\n color: var(--mj-text-muted);\n}\n\n.search-box input {\n width: 100%;\n padding: 8px 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n background: var(--mj-bg-page);\n}\n\n.search-box input:focus {\n outline: none;\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-color-indigo-500) 20%, transparent);\n}\n\n.clear-search {\n position: absolute;\n right: 8px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n}\n\n.clear-search:hover {\n color: var(--mj-text-secondary);\n}\n\n.filter-buttons {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.filter-btn {\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-full);\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.filter-btn:hover {\n background: var(--mj-bg-surface);\n}\n\n.filter-btn.active {\n background: var(--mj-color-indigo-500);\n color: white;\n border-color: var(--mj-color-indigo-500);\n}\n\n/* Sortable Table Headers */\n.sortable-header {\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n}\n\n.sortable-header:hover {\n background: var(--mj-bg-surface);\n}\n\n.sortable-header i {\n margin-left: 6px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.sortable-header i.fa-sort-up,\n.sortable-header i.fa-sort-down {\n color: var(--mj-color-indigo-500);\n}\n\n/* Table Enhancements */\n.filter-cell {\n font-family: monospace;\n font-size: 11px;\n color: var(--mj-text-secondary);\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.slow-row {\n background: var(--mj-color-error-100);\n}\n\n.slow-row:hover {\n background: var(--mj-color-error-100) !important;\n}\n\n.slow-value {\n color: var(--mj-status-error);\n font-weight: 600;\n}\n\n/* Small category chips */\n.category-chip.small {\n font-size: 9px;\n padding: 2px 6px;\n}\n\n/* Performance Sub-Tabs */\n.perf-tabs {\n display: flex;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.perf-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: none;\n background: transparent;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.perf-tab:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.perf-tab.active {\n background: var(--mj-bg-page);\n color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.perf-tab i {\n font-size: 14px;\n}\n\n.tab-badge {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--mj-radius-md);\n min-width: 18px;\n text-align: center;\n}\n\n.perf-tab.active .tab-badge {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.tab-badge.warning {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.tab-badge.insight {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.perf-panel .section-panel-content {\n padding: 20px 24px;\n}\n\n/* Telemetry \"no slow ops\" alert \u2014 positioning only; box chrome owned by <mj-alert> */\n.telemetry-success-alert {\n margin-top: 16px;\n}\n\n/* Compact Filter Bar */\n.filter-bar.compact {\n padding: 10px 14px;\n margin-bottom: 12px;\n}\n\n/* Clickable category items */\n.category-item {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.category-item:hover {\n background: var(--mj-color-accent-300);\n transform: translateY(-1px);\n}\n\n/* Insight Key Info (always visible) */\n.insight-key-info {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 10px 12px;\n background: rgba(0, 0, 0, 0.03);\n border-radius: var(--mj-radius-md);\n margin: 8px 0;\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.key-info-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 12px;\n}\n\n.key-label {\n color: var(--mj-text-secondary);\n font-weight: 500;\n min-width: 50px;\n flex-shrink: 0;\n}\n\n.key-value {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.key-value.entity-name {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.key-value.filter-code {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n background: rgba(0, 0, 0, 0.06);\n padding: 2px 6px;\n border-radius: 3px;\n color: var(--mj-text-primary);\n}\n\n/* Params Display */\n.params-display {\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 10px;\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.param-row {\n display: flex;\n gap: 8px;\n padding: 4px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.param-row:last-child {\n border-bottom: none;\n}\n\n.param-key {\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 100px;\n flex-shrink: 0;\n}\n\n.param-value {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.event-entity {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 11px;\n font-weight: 500;\n}\n\n/* PerfMon Chart Styles\n * ====================\n * Chrome (background, borders, text, controls) is mapped to MJ semantic tokens\n * so the panel adapts to the active theme and is white-labelable. Series colors\n * (cyan / magenta / neon-green / orange) are categorical chart data \u2014 they must\n * stay distinct across themes and are exempt by the same rule that exempts\n * other chart-data palettes.\n *\n * The accent (--perfmon-accent) is intentionally kept as the same neon green as\n * the engine series so the \"live signal\" indicators (header icon, footer count,\n * chart strokes) read as part of the chart palette rather than the app's brand.\n *\n * Overlays are derived via color-mix() from --mj-text-primary so they invert\n * automatically: dark tints over light surfaces in light mode, light tints over\n * dark surfaces in dark mode.\n */\n.perfmon-section {\n /* Chrome \u2014 adapts to theme */\n --perfmon-bg: var(--mj-bg-surface-card);\n --perfmon-bg-deep: var(--mj-bg-surface-sunken);\n --perfmon-border: var(--mj-border-default);\n --perfmon-border-medium: var(--mj-border-strong);\n --perfmon-border-light: var(--mj-border-strong);\n --perfmon-text-faint: var(--mj-text-disabled);\n --perfmon-text-muted: var(--mj-text-muted);\n --perfmon-text-secondary: var(--mj-text-secondary);\n --perfmon-control-bg: var(--mj-bg-surface-sunken);\n --perfmon-control-bg-hover: var(--mj-bg-surface-hover);\n --perfmon-mode-bg: var(--mj-bg-surface-sunken);\n --perfmon-overlay-light: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n --perfmon-overlay-medium: color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n --perfmon-overlay-strong: color-mix(in srgb, var(--mj-text-primary) 25%, transparent);\n --perfmon-tooltip-bg: var(--mj-bg-overlay);\n\n /* Categorical series colors and live-signal accent \u2014 exempt */\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-series-runview: #00bcd4;\n --perfmon-series-runquery: #e040fb;\n --perfmon-series-engine: #00ff88;\n --perfmon-series-ai: #ff9800;\n\n background: var(--perfmon-bg);\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 24px;\n}\n\n.perfmon-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.perfmon-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--perfmon-accent);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.perfmon-header h4 i {\n color: var(--perfmon-accent);\n}\n\n.perfmon-legend {\n display: flex;\n gap: 16px;\n font-size: 11px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--perfmon-text-muted);\n}\n\n.legend-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n.legend-item.runview .legend-dot { background: var(--perfmon-series-runview); }\n.legend-item.runquery .legend-dot { background: var(--perfmon-series-runquery); }\n.legend-item.engine .legend-dot { background: var(--perfmon-series-engine); }\n.legend-item.ai .legend-dot { background: var(--perfmon-series-ai); }\n\n.perfmon-chart-container {\n display: flex;\n background: var(--perfmon-bg-deep);\n border: 1px solid var(--perfmon-border);\n border-radius: 4px;\n position: relative;\n}\n\n.perfmon-y-axis {\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-right: 1px solid var(--perfmon-border);\n}\n\n.perfmon-y-axis .axis-label {\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n font-size: 10px;\n color: var(--perfmon-text-faint);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.perfmon-chart {\n flex: 1;\n height: 300px;\n position: relative;\n overflow: hidden;\n}\n\n.perfmon-chart svg {\n width: 100%;\n height: 100%;\n}\n\n.perfmon-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--perfmon-border);\n}\n\n.footer-note {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.footer-note i {\n color: var(--perfmon-accent);\n}\n\n.footer-stats {\n font-size: 11px;\n color: var(--perfmon-accent);\n font-family: monospace;\n}\n\n/* D3 Chart Elements */\n.perfmon-chart :deep(.grid-line) {\n stroke: var(--perfmon-border);\n stroke-dasharray: 2,2;\n}\n\n.perfmon-chart :deep(.axis-line) {\n stroke: var(--perfmon-border-light);\n}\n\n.perfmon-chart :deep(.axis-text) {\n fill: var(--perfmon-text-muted);\n font-size: 10px;\n font-family: monospace;\n}\n\n.perfmon-chart :deep(.event-point) {\n cursor: pointer;\n transition: r 0.15s ease;\n}\n\n.perfmon-chart :deep(.event-point:hover) {\n r: 6;\n}\n\n.perfmon-chart :deep(.tooltip) {\n pointer-events: none;\n}\n\n.perfmon-chart :deep(.tooltip-bg) {\n fill: var(--perfmon-tooltip-bg);\n rx: 4;\n}\n\n.perfmon-chart :deep(.tooltip-text) {\n fill: var(--mj-bg-surface);\n font-size: 11px;\n font-family: monospace;\n}\n\n.perfmon-chart :deep(.area-fill) {\n opacity: 0.15;\n}\n\n.perfmon-chart :deep(.line-path) {\n fill: none;\n stroke-width: 1.5;\n opacity: 0.8;\n}\n\n/* PerfMon Chart Controls */\n.perfmon-controls {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding: 8px 12px;\n background: var(--perfmon-overlay-light);\n border-radius: 6px;\n border: 1px solid var(--perfmon-border);\n}\n\n.chart-control-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--perfmon-control-bg);\n color: var(--perfmon-text-muted);\n border: 1px solid var(--perfmon-border-medium);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.chart-control-btn:hover {\n background: var(--perfmon-control-bg-hover);\n color: var(--perfmon-accent);\n border-color: var(--perfmon-accent);\n}\n\n.chart-control-btn:active {\n transform: scale(0.95);\n}\n\n.chart-control-btn i {\n font-size: 14px;\n}\n\n/* Mode Toggle Buttons */\n.mode-toggle {\n display: flex;\n background: var(--perfmon-mode-bg);\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid var(--perfmon-border-medium);\n}\n\n.mode-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 28px;\n padding: 0;\n background: transparent;\n color: var(--perfmon-text-faint);\n border: none;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.mode-btn:first-child {\n border-right: 1px solid var(--perfmon-border);\n}\n\n.mode-btn:hover {\n color: var(--perfmon-text-secondary);\n background: var(--perfmon-overlay-light);\n}\n\n.mode-btn.active {\n background: var(--perfmon-accent);\n color: var(--perfmon-mode-bg);\n}\n\n.mode-btn.active:hover {\n background: var(--perfmon-accent-dim);\n}\n\n.mode-btn i {\n font-size: 12px;\n}\n\n.control-divider {\n width: 1px;\n height: 24px;\n background: var(--perfmon-border-medium);\n margin: 0 4px;\n}\n\n.compress-toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--perfmon-text-muted);\n user-select: none;\n}\n\n.compress-toggle:hover {\n color: var(--perfmon-accent);\n}\n\n.compress-toggle input[type=\"checkbox\"] {\n width: 14px;\n height: 14px;\n accent-color: var(--perfmon-accent);\n cursor: pointer;\n}\n\n.compress-toggle span {\n white-space: nowrap;\n}\n\n.zoom-level {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n font-family: monospace;\n margin-left: 8px;\n}\n\n/* Gap indicators in chart */\n.perfmon-chart :deep(.gap-indicator) {\n cursor: pointer;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart :deep(.gap-indicator:hover) {\n opacity: 0.8;\n}\n\n.perfmon-chart :deep(.gap-text) {\n fill: var(--perfmon-text-faint);\n font-size: 10px;\n font-family: monospace;\n pointer-events: none;\n}\n\n.perfmon-chart :deep(.gap-expand-btn) {\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart :deep(.gap-expand-btn:hover) {\n opacity: 1;\n}\n\n/* Selection brush overlay */\n.perfmon-chart :deep(.selection-overlay) {\n pointer-events: all;\n}\n\n.perfmon-chart :deep(.selection-rect) {\n pointer-events: none;\n}\n\n/* Zoom info display */\n.zoom-info {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: var(--perfmon-text-muted);\n font-family: monospace;\n}\n\n.zoom-info .zoom-level {\n color: var(--perfmon-accent);\n}\n\n.zoom-info .time-range {\n color: var(--perfmon-text-faint);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n .main-content {\n flex-direction: column;\n }\n\n .left-nav {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n padding: 12px;\n }\n\n .nav-section {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n padding: 0;\n }\n\n .nav-section-title {\n display: none;\n }\n\n .nav-item {\n white-space: nowrap;\n padding: 10px 16px;\n }\n}\n\n@media (max-width: 768px) {\n .engine-grid {\n grid-template-columns: 1fr;\n }\n\n .perfmon-legend {\n flex-wrap: wrap;\n gap: 8px;\n }\n}\n\n/* Export Button */\n.export-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: var(--mj-status-success);\n color: white;\n border: none;\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.export-btn:hover:not(:disabled) {\n background: var(--mj-color-success-800);\n transform: translateY(-1px);\n}\n\n.export-btn:disabled {\n background: var(--mj-border-default);\n cursor: not-allowed;\n}\n\n.footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n/* Event Detail Slide-in Panel */\n.event-detail-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.event-detail-panel {\n position: fixed;\n top: 0;\n right: 0;\n width: 450px;\n max-width: 90vw;\n height: 100vh;\n background: var(--mj-bg-page);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: slideIn 0.25s ease;\n}\n\n@keyframes slideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.event-detail-panel .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.event-detail-panel .panel-title {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.event-detail-panel .panel-title h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.event-detail-panel .close-btn {\n background: none;\n border: none;\n font-size: 18px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n padding: 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.event-detail-panel .close-btn:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.event-detail-panel .panel-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n/* Detail Metrics */\n.detail-metrics {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.detail-metrics .metric {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n text-align: center;\n}\n\n.detail-metrics .metric-value {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.detail-metrics .metric-value.slow {\n color: var(--mj-status-error);\n}\n\n.detail-metrics .metric-label {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Detail Sections */\n.event-detail-panel .detail-section {\n margin-bottom: 24px;\n}\n\n.event-detail-panel .detail-section h4 {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.event-detail-panel .detail-section h4 i {\n color: var(--mj-status-success);\n font-size: 14px;\n}\n\n.detail-content {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n}\n\n.detail-row {\n display: flex;\n gap: 12px;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row:last-child {\n border-bottom: none;\n}\n\n.detail-key {\n font-size: 12px;\n color: var(--mj-text-secondary);\n font-weight: 500;\n min-width: 80px;\n flex-shrink: 0;\n}\n\n.detail-val {\n font-size: 12px;\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n.detail-val.entity-highlight {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.detail-val.filter-val {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 11px;\n background: rgba(0, 0, 0, 0.05);\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n/* Params Grid */\n.params-grid {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.param-item {\n display: flex;\n gap: 12px;\n padding: 6px 0;\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n}\n\n.param-item:last-child {\n border-bottom: none;\n}\n\n.param-name {\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 100px;\n flex-shrink: 0;\n font-family: monospace;\n}\n\n.param-val {\n color: var(--mj-text-primary);\n word-break: break-all;\n}\n\n/* Pattern Summary */\n.pattern-summary {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n}\n\n.pattern-stat {\n text-align: center;\n}\n\n.pattern-stat .stat-val {\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.pattern-stat .stat-label {\n font-size: 10px;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-top: 4px;\n}\n\n\n/* Position the migrated mj-alerts (component is margin-less apart from its bottom) */\n.recommendation-spacing { margin-top: 20px; }\n.pattern-hint-spacing { margin-top: 12px; }\n\n/* Detail Actions */\n.detail-actions {\n display: flex;\n gap: 12px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.action-button {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-button:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-default);\n}\n\n.action-button i {\n color: var(--mj-text-secondary);\n}\n\n/* Clickable timeline items */\n.timeline-item.clickable {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item.clickable:hover {\n background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.timeline-item.clickable:hover .marker-dot {\n transform: scale(1.3);\n}\n\n/* ========================================\n ENGINE DETAIL PANEL STYLES\n ======================================== */\n\n.engine-detail-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: fadeIn 0.2s ease;\n}\n\n.engine-detail-panel {\n position: fixed;\n top: 0;\n right: 0;\n width: 550px;\n max-width: 95vw;\n height: 100vh;\n background: var(--mj-bg-page);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: slideIn 0.25s ease;\n}\n\n.engine-detail-panel .panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-800) 100%);\n color: white;\n}\n\n.engine-detail-panel .panel-title {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.engine-detail-panel .panel-title h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: white;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.engine-detail-panel .panel-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.engine-detail-panel .icon-btn {\n background: rgba(255, 255, 255, 0.15);\n border: none;\n color: white;\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.engine-detail-panel .icon-btn:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.engine-detail-panel .icon-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.engine-detail-panel .close-btn {\n background: rgba(255, 255, 255, 0.15);\n border: none;\n color: white;\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n font-size: 18px;\n}\n\n.engine-detail-panel .close-btn:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.engine-detail-panel .panel-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n/* Engine Summary */\n.engine-summary-section {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.engine-summary-section .summary-stat {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n padding: 12px 16px;\n}\n\n.engine-summary-section .summary-label {\n font-size: 11px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n}\n\n.engine-summary-section .summary-value {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-color-warning-500);\n}\n\n.status-dot.status-loaded {\n background: var(--mj-status-success);\n}\n\n/* Config Items Section */\n.config-items-section h4 {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.config-items-section h4 i {\n color: var(--mj-status-success);\n}\n\n.config-items-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n/* .config-item wrapper + .config-item-header chrome now owned by <mj-accordion-panel>. */\n\n.config-item-info {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n}\n\n.config-type-chip {\n font-size: 10px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n flex-shrink: 0;\n}\n\n.config-type-chip.type-entity {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n}\n\n.config-type-chip.type-dataset {\n background: var(--mj-color-violet-100);\n color: var(--mj-color-violet-700);\n}\n\n.config-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.config-item-stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-stat {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n/* .expand-icon chevron now owned by <mj-accordion-panel>. */\n\n.config-item-details {\n padding: 0 16px 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.config-detail-row {\n display: flex;\n gap: 12px;\n padding: 10px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-detail-row:last-child {\n border-bottom: none;\n}\n\n.config-detail-row .detail-label {\n font-size: 12px;\n color: var(--mj-text-muted);\n min-width: 70px;\n flex-shrink: 0;\n}\n\n.config-detail-row .detail-value {\n font-size: 12px;\n color: var(--mj-text-primary);\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 4px;\n word-break: break-all;\n}\n\n/* Health status indicators for config items */\n.config-health-icon {\n font-size: 12px;\n flex-shrink: 0;\n}\n.config-health-icon.health-success {\n color: var(--mj-status-success);\n}\n.config-health-icon.health-failure {\n color: var(--mj-status-error);\n}\n.config-detail-row--error {\n background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n border-radius: 4px;\n padding: 4px 8px;\n}\n.detail-value--error {\n color: var(--mj-status-error-text) !important;\n background: none !important;\n font-family: inherit !important;\n word-break: break-word;\n}\n\n/* Sample Data Section */\n.sample-data-section {\n margin-top: 16px;\n}\n\n.sample-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.sample-title {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.sample-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.load-more-btn,\n.load-all-btn {\n background: none;\n border: 1px solid var(--mj-color-indigo-500);\n color: var(--mj-color-indigo-500);\n font-size: 11px;\n padding: 4px 10px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.load-more-btn:hover:not(:disabled),\n.load-all-btn:hover:not(:disabled) {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.load-more-btn:disabled,\n.load-all-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.all-loaded-badge {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--mj-status-success);\n padding: 4px 10px;\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n border-radius: 4px;\n}\n\n.action-col {\n width: 36px;\n min-width: 36px;\n max-width: 36px;\n padding: 4px !important;\n text-align: center;\n}\n\n.open-record-btn {\n width: 24px;\n height: 24px;\n border: none;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-color-indigo-500);\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n transition: all 0.2s ease;\n}\n\n.open-record-btn:hover {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.sample-data-table-wrapper {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.sample-data-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.sample-data-table th {\n background: var(--mj-bg-surface-sunken);\n padding: 8px 10px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.sample-data-table td {\n padding: 8px 10px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sample-data-table tbody tr:last-child td {\n border-bottom: none;\n}\n\n.sample-data-table tbody tr:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n/* Spinning animation for refresh icon */\n.spinning {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* ========================================\n LOCAL CACHE SECTION STYLES\n ======================================== */\n\n.cache-summary {\n display: flex;\n gap: 16px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n}\n\n.cache-type-breakdown {\n margin-bottom: 24px;\n}\n\n.cache-type-breakdown h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.type-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.type-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.type-item:hover {\n border-color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.type-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n font-size: 18px;\n color: var(--mj-text-secondary);\n}\n\n.type-name {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.type-count {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-status-success);\n}\n\n.type-size {\n font-size: 12px;\n color: var(--mj-text-muted);\n margin-left: 8px;\n}\n\n.cache-entries-section {\n margin-top: 24px;\n}\n\n.cache-entries-section .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.cache-entries-section .section-header h4 {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.filter-controls {\n display: flex;\n gap: 8px;\n}\n\n.cache-entries-table-wrapper {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.cache-entries-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n\n.cache-entries-table th {\n padding: 12px 16px;\n text-align: left;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n font-weight: 600;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n}\n\n.cache-entries-table td {\n padding: 10px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n vertical-align: middle;\n}\n\n.cache-entries-table tbody tr:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.cache-entries-table tbody tr:last-child td {\n border-bottom: none;\n}\n\n.cache-type-chip {\n display: inline-block;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.cache-type-chip.type-dataset {\n background: var(--mj-color-info-100);\n color: var(--mj-color-info-700);\n}\n\n.cache-type-chip.type-runview {\n background: var(--mj-color-tertiary-100);\n color: var(--mj-color-tertiary-700);\n}\n\n.cache-type-chip.type-runquery {\n background: var(--mj-color-violet-100);\n color: var(--mj-color-violet-700);\n}\n\n.entry-name {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.entry-fingerprint {\n display: block;\n font-size: 10px;\n color: var(--mj-text-muted);\n margin-top: 2px;\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 3px;\n}\n\n.icon-btn {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.icon-btn:hover {\n border-color: var(--mj-status-error);\n color: var(--mj-status-error);\n background: var(--mj-status-error-bg);\n}\n\n.table-footer {\n padding: 12px 16px;\n text-align: center;\n font-size: 12px;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n border-top: 1px solid var(--mj-border-default);\n}\n"] }]
5925
- }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.ActivatedRoute }], { perfChartRef: [{
5926
+ }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { perfChartRef: [{
5926
5927
  type: ViewChild,
5927
5928
  args: ['perfChart', { static: false }]
5928
5929
  }] }); })();
5929
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemDiagnosticsComponent, { className: "SystemDiagnosticsComponent", filePath: "src/SystemDiagnostics/system-diagnostics.component.ts", lineNumber: 1361 }); })();
5930
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemDiagnosticsComponent, { className: "SystemDiagnosticsComponent", filePath: "src/SystemDiagnostics/system-diagnostics.component.ts", lineNumber: 1360 }); })();
5930
5931
  //# sourceMappingURL=system-diagnostics.component.js.map