@memberjunction/ng-dashboards 5.11.0 → 5.12.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 (227) hide show
  1. package/dist/AI/components/agents/agent-configuration.component.d.ts +34 -2
  2. package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
  3. package/dist/AI/components/agents/agent-configuration.component.js +586 -223
  4. package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
  5. package/dist/AI/components/agents/agent-editor.component.js +2 -2
  6. package/dist/AI/components/agents/agent-filter-panel.component.d.ts +8 -0
  7. package/dist/AI/components/agents/agent-filter-panel.component.d.ts.map +1 -1
  8. package/dist/AI/components/agents/agent-filter-panel.component.js +85 -52
  9. package/dist/AI/components/agents/agent-filter-panel.component.js.map +1 -1
  10. package/dist/AI/components/charts/performance-heatmap.component.d.ts +1 -0
  11. package/dist/AI/components/charts/performance-heatmap.component.d.ts.map +1 -1
  12. package/dist/AI/components/charts/performance-heatmap.component.js +27 -5
  13. package/dist/AI/components/charts/performance-heatmap.component.js.map +1 -1
  14. package/dist/AI/components/charts/time-series-chart.component.d.ts +5 -0
  15. package/dist/AI/components/charts/time-series-chart.component.d.ts.map +1 -1
  16. package/dist/AI/components/charts/time-series-chart.component.js +23 -8
  17. package/dist/AI/components/charts/time-series-chart.component.js.map +1 -1
  18. package/dist/AI/components/execution-monitoring.component.js +2 -2
  19. package/dist/AI/components/execution-monitoring.component.js.map +1 -1
  20. package/dist/AI/components/models/model-management.component.js +2 -2
  21. package/dist/AI/components/prompts/model-prompt-priority-matrix.component.js +2 -2
  22. package/dist/AI/components/prompts/prompt-filter-panel.component.js +2 -2
  23. package/dist/AI/components/prompts/prompt-management.component.js +3 -3
  24. package/dist/AI/components/prompts/prompt-management.component.js.map +1 -1
  25. package/dist/AI/components/prompts/prompt-version-control.component.js +2 -2
  26. package/dist/AI/components/requests/agent-requests-resource.component.d.ts +83 -0
  27. package/dist/AI/components/requests/agent-requests-resource.component.d.ts.map +1 -0
  28. package/dist/AI/components/requests/agent-requests-resource.component.js +547 -0
  29. package/dist/AI/components/requests/agent-requests-resource.component.js.map +1 -0
  30. package/dist/AI/components/system/system-config-filter-panel.component.js +2 -2
  31. package/dist/AI/components/system/system-configuration.component.js +2 -2
  32. package/dist/AI/components/widgets/kpi-card.component.js +7 -7
  33. package/dist/AI/components/widgets/kpi-card.component.js.map +1 -1
  34. package/dist/AI/components/widgets/live-execution-widget.component.d.ts.map +1 -1
  35. package/dist/AI/components/widgets/live-execution-widget.component.js +6 -6
  36. package/dist/AI/components/widgets/live-execution-widget.component.js.map +1 -1
  37. package/dist/AI/index.d.ts +1 -0
  38. package/dist/AI/index.d.ts.map +1 -1
  39. package/dist/AI/index.js +2 -0
  40. package/dist/AI/index.js.map +1 -1
  41. package/dist/APIKeys/api-applications-panel.component.js +3 -3
  42. package/dist/APIKeys/api-applications-panel.component.js.map +1 -1
  43. package/dist/APIKeys/api-key-create-dialog.component.js +3 -3
  44. package/dist/APIKeys/api-key-create-dialog.component.js.map +1 -1
  45. package/dist/APIKeys/api-key-edit-panel.component.js +1 -1
  46. package/dist/APIKeys/api-key-edit-panel.component.js.map +1 -1
  47. package/dist/APIKeys/api-key-list.component.js +3 -3
  48. package/dist/APIKeys/api-key-list.component.js.map +1 -1
  49. package/dist/APIKeys/api-keys-resource.component.js +1 -1
  50. package/dist/APIKeys/api-keys-resource.component.js.map +1 -1
  51. package/dist/APIKeys/api-scopes-panel.component.js +2 -2
  52. package/dist/APIKeys/api-usage-panel.component.js +2 -2
  53. package/dist/Actions/components/actions-overview.component.js +2 -2
  54. package/dist/Actions/components/execution-monitoring.component.js +2 -2
  55. package/dist/Actions/components/explorer/action-breadcrumb.component.js +2 -2
  56. package/dist/Actions/components/explorer/action-card.component.js +2 -2
  57. package/dist/Actions/components/explorer/action-explorer.component.js +2 -2
  58. package/dist/Actions/components/explorer/action-list-item.component.js +2 -2
  59. package/dist/Actions/components/explorer/action-toolbar.component.js +2 -2
  60. package/dist/Actions/components/explorer/action-tree-panel.component.js +2 -2
  61. package/dist/Actions/components/explorer/new-action-panel.component.js +2 -2
  62. package/dist/Actions/components/explorer/new-action-panel.component.js.map +1 -1
  63. package/dist/Actions/components/explorer/new-category-panel.component.js +2 -2
  64. package/dist/Actions/components/explorer/new-category-panel.component.js.map +1 -1
  65. package/dist/Communication/communication-dashboard.component.js +2 -2
  66. package/dist/Communication/communication-logs-resource.component.d.ts.map +1 -1
  67. package/dist/Communication/communication-logs-resource.component.js +3 -3
  68. package/dist/Communication/communication-logs-resource.component.js.map +1 -1
  69. package/dist/Communication/communication-monitor-resource.component.d.ts.map +1 -1
  70. package/dist/Communication/communication-monitor-resource.component.js +5 -5
  71. package/dist/Communication/communication-monitor-resource.component.js.map +1 -1
  72. package/dist/Communication/communication-providers-resource.component.d.ts.map +1 -1
  73. package/dist/Communication/communication-providers-resource.component.js +3 -3
  74. package/dist/Communication/communication-providers-resource.component.js.map +1 -1
  75. package/dist/Communication/communication-runs-resource.component.d.ts.map +1 -1
  76. package/dist/Communication/communication-runs-resource.component.js +3 -3
  77. package/dist/Communication/communication-runs-resource.component.js.map +1 -1
  78. package/dist/Communication/communication-templates-resource.component.js +2 -2
  79. package/dist/Communication/communication-templates-resource.component.js.map +1 -1
  80. package/dist/ComponentStudio/component-studio-dashboard.component.js +2 -2
  81. package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js +2 -2
  82. package/dist/ComponentStudio/components/artifact-load-dialog.component.js +2 -2
  83. package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +2 -2
  84. package/dist/ComponentStudio/components/browser/component-browser.component.js +2 -2
  85. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +2 -2
  86. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js.map +1 -1
  87. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +2 -2
  88. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map +1 -1
  89. package/dist/ComponentStudio/components/editors/requirements-editor.component.js +2 -2
  90. package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map +1 -1
  91. package/dist/ComponentStudio/components/editors/spec-editor.component.js +2 -2
  92. package/dist/ComponentStudio/components/editors/spec-editor.component.js.map +1 -1
  93. package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +2 -2
  94. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +2 -2
  95. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js.map +1 -1
  96. package/dist/ComponentStudio/components/text-import-dialog.component.js +2 -2
  97. package/dist/ComponentStudio/components/text-import-dialog.component.js.map +1 -1
  98. package/dist/ComponentStudio/components/workspace/component-preview.component.js +2 -2
  99. package/dist/ComponentStudio/components/workspace/editor-tabs.component.js +2 -2
  100. package/dist/ComponentStudio/components/workspace/editor-tabs.component.js.map +1 -1
  101. package/dist/Credentials/components/credentials-audit-resource.component.js +9 -9
  102. package/dist/Credentials/components/credentials-audit-resource.component.js.map +1 -1
  103. package/dist/Credentials/components/credentials-categories-resource.component.d.ts.map +1 -1
  104. package/dist/Credentials/components/credentials-categories-resource.component.js +11 -3
  105. package/dist/Credentials/components/credentials-categories-resource.component.js.map +1 -1
  106. package/dist/Credentials/components/credentials-list-resource.component.js +2 -2
  107. package/dist/Credentials/components/credentials-overview-resource.component.d.ts.map +1 -1
  108. package/dist/Credentials/components/credentials-overview-resource.component.js +12 -11
  109. package/dist/Credentials/components/credentials-overview-resource.component.js.map +1 -1
  110. package/dist/Credentials/components/credentials-types-resource.component.js +9 -9
  111. package/dist/Credentials/components/credentials-types-resource.component.js.map +1 -1
  112. package/dist/Credentials/credentials-dashboard.component.js +2 -2
  113. package/dist/DashboardBrowser/dashboard-browser-resource.component.js +2 -2
  114. package/dist/DashboardBrowser/dashboard-share-dialog.component.js +2 -2
  115. package/dist/DataExplorer/components/filter-dialog/filter-dialog.component.js +2 -2
  116. package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js +2 -2
  117. package/dist/DataExplorer/components/view-selector/view-selector.component.js +2 -2
  118. package/dist/DataExplorer/data-explorer-dashboard.component.js +4 -4
  119. package/dist/DataExplorer/data-explorer-dashboard.component.js.map +1 -1
  120. package/dist/Home/home-dashboard.component.js +2 -2
  121. package/dist/Integration/components/activity/activity.component.d.ts +1 -1
  122. package/dist/Integration/components/activity/activity.component.d.ts.map +1 -1
  123. package/dist/Integration/components/activity/activity.component.js +5 -5
  124. package/dist/Integration/components/activity/activity.component.js.map +1 -1
  125. package/dist/Integration/components/connections/connections.component.d.ts +31 -2
  126. package/dist/Integration/components/connections/connections.component.d.ts.map +1 -1
  127. package/dist/Integration/components/connections/connections.component.js +753 -412
  128. package/dist/Integration/components/connections/connections.component.js.map +1 -1
  129. package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js +3 -3
  130. package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js.map +1 -1
  131. package/dist/Integration/components/overview/overview.component.d.ts +0 -1
  132. package/dist/Integration/components/overview/overview.component.d.ts.map +1 -1
  133. package/dist/Integration/components/overview/overview.component.js +3 -6
  134. package/dist/Integration/components/overview/overview.component.js.map +1 -1
  135. package/dist/Integration/components/pipelines/pipelines.component.js +3 -3
  136. package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
  137. package/dist/Integration/components/schedules/schedules.component.d.ts +20 -0
  138. package/dist/Integration/components/schedules/schedules.component.d.ts.map +1 -1
  139. package/dist/Integration/components/schedules/schedules.component.js +97 -5
  140. package/dist/Integration/components/schedules/schedules.component.js.map +1 -1
  141. package/dist/Integration/components/visual-editor/visual-editor.component.js +2 -2
  142. package/dist/Integration/components/widgets/integration-card.component.d.ts.map +1 -1
  143. package/dist/Integration/components/widgets/integration-card.component.js +5 -1
  144. package/dist/Integration/components/widgets/integration-card.component.js.map +1 -1
  145. package/dist/Integration/components/widgets/run-history-panel.component.js +2 -2
  146. package/dist/Integration/components/widgets/run-history-panel.component.js.map +1 -1
  147. package/dist/Integration/integration.module.d.ts +2 -1
  148. package/dist/Integration/integration.module.d.ts.map +1 -1
  149. package/dist/Integration/integration.module.js +7 -3
  150. package/dist/Integration/integration.module.js.map +1 -1
  151. package/dist/Integration/services/integration-data.service.d.ts +27 -2
  152. package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
  153. package/dist/Integration/services/integration-data.service.js +107 -4
  154. package/dist/Integration/services/integration-data.service.js.map +1 -1
  155. package/dist/Lists/components/lists-browse-resource.component.js +2 -2
  156. package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
  157. package/dist/Lists/components/lists-categories-resource.component.js +2 -2
  158. package/dist/Lists/components/lists-categories-resource.component.js.map +1 -1
  159. package/dist/Lists/components/lists-my-lists-resource.component.js +2 -2
  160. package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
  161. package/dist/Lists/components/lists-operations-resource.component.js +2 -2
  162. package/dist/Lists/components/lists-operations-resource.component.js.map +1 -1
  163. package/dist/Lists/components/venn-diagram/venn-diagram.component.js +3 -3
  164. package/dist/Lists/components/venn-diagram/venn-diagram.component.js.map +1 -1
  165. package/dist/MCP/components/mcp-connection-dialog.component.js +2 -2
  166. package/dist/MCP/components/mcp-log-detail-panel.component.js +2 -2
  167. package/dist/MCP/components/mcp-log-detail-panel.component.js.map +1 -1
  168. package/dist/MCP/components/mcp-server-dialog.component.js +2 -2
  169. package/dist/MCP/components/mcp-test-tool-dialog.component.js +2 -2
  170. package/dist/MCP/components/mcp-test-tool-dialog.component.js.map +1 -1
  171. package/dist/MCP/mcp-dashboard.component.js +2 -2
  172. package/dist/MCP/mcp-filter-panel.component.js +2 -2
  173. package/dist/QueryBrowser/query-browser-resource.component.js +7 -7
  174. package/dist/QueryBrowser/query-browser-resource.component.js.map +1 -1
  175. package/dist/Scheduling/components/index.d.ts +0 -1
  176. package/dist/Scheduling/components/index.d.ts.map +1 -1
  177. package/dist/Scheduling/components/index.js +0 -1
  178. package/dist/Scheduling/components/index.js.map +1 -1
  179. package/dist/Scheduling/components/scheduling-activity.component.js +2 -2
  180. package/dist/Scheduling/components/scheduling-jobs.component.d.ts +6 -9
  181. package/dist/Scheduling/components/scheduling-jobs.component.d.ts.map +1 -1
  182. package/dist/Scheduling/components/scheduling-jobs.component.js +118 -110
  183. package/dist/Scheduling/components/scheduling-jobs.component.js.map +1 -1
  184. package/dist/Scheduling/components/scheduling-overview.component.js +3 -3
  185. package/dist/Scheduling/components/scheduling-overview.component.js.map +1 -1
  186. package/dist/Scheduling/scheduling-dashboard.component.js +2 -2
  187. package/dist/SystemDiagnostics/system-diagnostics.component.js +4 -4
  188. package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
  189. package/dist/Testing/components/testing-analytics.component.js +2 -2
  190. package/dist/Testing/components/testing-analytics.component.js.map +1 -1
  191. package/dist/Testing/components/testing-dashboard-tab.component.js +4 -4
  192. package/dist/Testing/components/testing-dashboard-tab.component.js.map +1 -1
  193. package/dist/Testing/components/testing-explorer.component.js +2 -2
  194. package/dist/Testing/components/testing-explorer.component.js.map +1 -1
  195. package/dist/Testing/components/testing-review.component.d.ts.map +1 -1
  196. package/dist/Testing/components/testing-review.component.js +5 -5
  197. package/dist/Testing/components/testing-review.component.js.map +1 -1
  198. package/dist/Testing/components/testing-runs.component.js +2 -2
  199. package/dist/Testing/components/testing-runs.component.js.map +1 -1
  200. package/dist/Testing/components/widgets/oracle-breakdown-table.component.js +2 -2
  201. package/dist/Testing/components/widgets/oracle-breakdown-table.component.js.map +1 -1
  202. package/dist/Testing/components/widgets/suite-tree.component.js +4 -4
  203. package/dist/Testing/components/widgets/suite-tree.component.js.map +1 -1
  204. package/dist/Testing/components/widgets/test-run-detail-panel.component.js +2 -2
  205. package/dist/Testing/components/widgets/test-run-detail-panel.component.js.map +1 -1
  206. package/dist/Testing/testing-dashboard.component.js +2 -2
  207. package/dist/VersionHistory/components/diff-resource.component.js +2 -2
  208. package/dist/VersionHistory/components/graph-resource.component.js +2 -2
  209. package/dist/VersionHistory/components/labels-resource.component.js +3 -3
  210. package/dist/VersionHistory/components/labels-resource.component.js.map +1 -1
  211. package/dist/VersionHistory/components/restore-resource.component.js +3 -3
  212. package/dist/VersionHistory/components/restore-resource.component.js.map +1 -1
  213. package/dist/__tests__/integration-data-service.test.js +1 -0
  214. package/dist/__tests__/integration-data-service.test.js.map +1 -1
  215. package/dist/module.d.ts +52 -49
  216. package/dist/module.d.ts.map +1 -1
  217. package/dist/module.js +25 -6
  218. package/dist/module.js.map +1 -1
  219. package/dist/public-api.d.ts +1 -1
  220. package/dist/public-api.d.ts.map +1 -1
  221. package/dist/public-api.js +1 -1
  222. package/dist/public-api.js.map +1 -1
  223. package/package.json +42 -40
  224. package/dist/Scheduling/components/job-slideout.component.d.ts +0 -45
  225. package/dist/Scheduling/components/job-slideout.component.d.ts.map +0 -1
  226. package/dist/Scheduling/components/job-slideout.component.js +0 -459
  227. package/dist/Scheduling/components/job-slideout.component.js.map +0 -1
package/dist/SystemDiagnostics/system-diagnostics.component.js CHANGED
@@ -3239,7 +3239,7 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
3239
3239
  const container = this.perfChartRef.nativeElement;
3240
3240
  const events = this.telemetryEvents.filter(e => e.elapsedMs !== undefined);
3241
3241
  if (events.length === 0) {
3242
- container.innerHTML = '<div style="color: #666; text-align: center; padding: 100px 20px;">No telemetry events with timing data yet.<br>Navigate around the app to generate performance data.</div>';
3242
+ container.innerHTML = '<div style="color: var(--mj-text-secondary); text-align: center; padding: 100px 20px;">No telemetry events with timing data yet.<br>Navigate around the app to generate performance data.</div>';
3243
3243
  return;
3244
3244
  }
3245
3245
  // Clear previous chart
@@ -3275,7 +3275,7 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
3275
3275
  d.relativeTime <= (viewportEnd + padding));
3276
3276
  // If no data in viewport, show a message
3277
3277
  if (chartData.length === 0) {
3278
- container.innerHTML = '<div style="color: #666; text-align: center; padding: 100px 20px;">No events in the current view.<br>Try zooming out or panning to see events.</div>';
3278
+ container.innerHTML = '<div style="color: var(--mj-text-secondary); text-align: center; padding: 100px 20px;">No events in the current view.<br>Try zooming out or panning to see events.</div>';
3279
3279
  return;
3280
3280
  }
3281
3281
  // Calculate effective width with zoom
@@ -4746,7 +4746,7 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4746
4746
  i0.ɵɵconditional(ctx.eventDetailPanel.isOpen && ctx.eventDetailPanel.event ? 62 : -1);
4747
4747
  i0.ɵɵadvance();
4748
4748
  i0.ɵɵconditional(ctx.engineDetailPanel.isOpen && ctx.engineDetailPanel.engine ? 63 : -1);
4749
- } }, dependencies: [i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.DecimalPipe, i4.DatePipe], styles: [".system-diagnostics[_ngcontent-%COMP%] {\n padding: 0;\n background: var(--mj-bg-surface-sunken);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n\n\n.diagnostics-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 22px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.auto-refresh-control[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-refresh-control[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n\n.auto-refresh-control[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.refresh-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-status-success);\n font-size: 12px;\n}\n\n.refresh-btn[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-success-800);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n.refresh-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\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.overview-cards-container[_ngcontent-%COMP%] {\n position: relative;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n transition: all 0.3s ease;\n}\n\n.overview-cards-container.collapsed[_ngcontent-%COMP%] {\n padding: 0;\n}\n\n.kpi-toggle-btn[_ngcontent-%COMP%] {\n position: absolute;\n right: 24px;\n top: 50%;\n transform: translateY(-50%);\n width: 28px;\n height: 28px;\n border-radius: var(--mj-radius-full);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s ease;\n z-index: 10;\n}\n\n.kpi-toggle-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.overview-cards-container.collapsed[_ngcontent-%COMP%] .kpi-toggle-btn[_ngcontent-%COMP%] {\n top: 50%;\n}\n\n\n\n.overview-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n padding: 20px 24px;\n padding-right: 60px;\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n\n\n.overview-cards-mini[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 10px 60px 10px 24px;\n background: var(--mj-bg-page);\n}\n\n.mini-kpi[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-secondary);\n}\n\n.mini-kpi[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-color-indigo-500);\n}\n\n.mini-kpi.warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.mini-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.mini-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.mini-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n}\n\n.overview-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-md);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.card-icon--engines[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.card-icon--memory[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.card-icon--warning[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n.card-icon--success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n.card-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.card-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n.card-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n margin-top: 0.25rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.card-subtitle[_ngcontent-%COMP%] {\n font-size: 0.6875rem;\n color: var(--mj-text-muted);\n margin-top: 0.125rem;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n\n\n.left-nav[_ngcontent-%COMP%] {\n width: 240px;\n background: var(--mj-bg-page);\n border-right: 1px solid var(--mj-border-default);\n padding: 16px 0;\n flex-shrink: 0;\n}\n\n.nav-section[_ngcontent-%COMP%] {\n padding: 0 12px;\n}\n\n.nav-section-title[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n padding: 8px 12px;\n margin-bottom: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 14px;\n transition: all 0.2s ease;\n margin-bottom: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-weight: 500;\n}\n\n.nav-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 18px;\n text-align: center;\n font-size: 15px;\n}\n\n.nav-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n flex: 1;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: var(--mj-radius-lg);\n min-width: 24px;\n text-align: center;\n}\n\n.nav-item.active[_ngcontent-%COMP%] .nav-badge[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.nav-badge--warning[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-500) !important;\n color: white !important;\n}\n\n.nav-badge--success[_ngcontent-%COMP%] {\n background: var(--mj-status-success) !important;\n color: white !important;\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: color-mix(in srgb, var(--mj-color-neutral-900) 5%, transparent);\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.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 16px;\n background: var(--mj-color-error-100);\n border: 1px solid var(--mj-color-error-100);\n border-radius: var(--mj-radius-md);\n color: var(--mj-status-error);\n font-size: 13px;\n margin-bottom: 16px;\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.error-banner[_ngcontent-%COMP%] .dismiss-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n background: transparent;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n}\n\n.error-banner[_ngcontent-%COMP%] .dismiss-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\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.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-border-default);\n}\n\n.empty-state.success-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n color: var(--mj-text-secondary);\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n margin-top: 8px;\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 color-mix(in srgb, var(--mj-color-neutral-900) 8%, transparent);\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: color-mix(in srgb, var(--mj-color-neutral-900) 5%, transparent);\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.info-banner[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-accent-300);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-brand-primary);\n margin-bottom: 20px;\n}\n\n.info-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n\n\n.recommendation-banner[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-warning-800);\n margin-top: 20px;\n}\n\n.recommendation-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n color: var(--mj-color-warning-500);\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.warning-banner[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50) !important;\n color: var(--mj-color-warning-800) !important;\n}\n\n.warning-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\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.insight-card[_ngcontent-%COMP%] {\n padding: 16px;\n border-radius: var(--mj-radius-md);\n border-left: 4px solid var(--mj-border-default);\n}\n\n.insight-card.severity-info[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n border-left-color: var(--mj-brand-primary);\n}\n\n.insight-card.severity-warning[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n border-left-color: var(--mj-color-warning-500);\n}\n\n.insight-card.severity-optimization[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n border-left-color: var(--mj-status-success);\n}\n\n.insight-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n}\n\n.insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.severity-info[_ngcontent-%COMP%] .insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.severity-warning[_ngcontent-%COMP%] .insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-warning-500); }\n.severity-optimization[_ngcontent-%COMP%] .insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-status-success); }\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: color-mix(in srgb, var(--mj-color-neutral-900) 10%, transparent);\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-color-error-700); }\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.insight-card.expandable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.insight-card.expandable[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.insight-card[_ngcontent-%COMP%] .expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n margin-left: auto;\n}\n\n.insight-card.expanded[_ngcontent-%COMP%] {\n border-width: 2px;\n}\n\n.insight-details[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid color-mix(in srgb, var(--mj-color-neutral-900) 10%, transparent);\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: color-mix(in srgb, var(--mj-color-neutral-900) 3%, transparent);\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-color-error-700); }\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-color-error-700); }\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-color-info-500);\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-color-info-500);\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-color-error-700);\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.empty-state.small[_ngcontent-%COMP%] {\n padding: 30px 20px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\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.success-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-success-100);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-success-800);\n margin-top: 16px;\n}\n\n.success-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: var(--mj-status-success);\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: color-mix(in srgb, var(--mj-color-neutral-900) 3%, transparent);\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: color-mix(in srgb, var(--mj-color-neutral-900) 6%, transparent);\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-color-violet-600);\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.perfmon-section[_ngcontent-%COMP%] {\n \n\n --perfmon-bg: #1a1a2e;\n --perfmon-bg-deep: #0d0d1a;\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-border: #333;\n --perfmon-border-medium: #444;\n --perfmon-border-light: #555;\n --perfmon-text-faint: #666;\n --perfmon-text-muted: #888;\n --perfmon-text-secondary: #aaa;\n --perfmon-control-bg: #2a2a2a;\n --perfmon-control-bg-hover: #333;\n --perfmon-mode-bg: #1a1a1a;\n --perfmon-overlay-light: rgba(255, 255, 255, 0.05);\n --perfmon-overlay-medium: rgba(255, 255, 255, 0.15);\n --perfmon-overlay-strong: rgba(255, 255, 255, 0.25);\n --perfmon-tooltip-bg: rgba(0, 0, 0, 0.9);\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: #fff;\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 .diagnostics-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .header-controls[_ngcontent-%COMP%] {\n width: 100%;\n flex-wrap: wrap;\n }\n\n .overview-cards[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\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: color-mix(in srgb, var(--mj-color-neutral-900) 5%, transparent);\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-color-violet-600);\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.pattern-warning[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 12px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n color: var(--mj-color-warning-800);\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.pattern-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n margin-top: 2px;\n}\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.config-item[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-item.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.config-item-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.config-item-header[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-color-neutral-900) 2%, transparent);\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.expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n}\n\n.config-item.expanded[_ngcontent-%COMP%] .expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\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.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.empty-state.small[_ngcontent-%COMP%] {\n padding: 30px 20px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\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 });
4749
+ } }, dependencies: [i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.DecimalPipe, i4.DatePipe], styles: [".system-diagnostics[_ngcontent-%COMP%] {\n padding: 0;\n background: var(--mj-bg-surface-sunken);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n\n\n.diagnostics-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 22px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.auto-refresh-control[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-refresh-control[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n\n.auto-refresh-control[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.refresh-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-status-success);\n font-size: 12px;\n}\n\n.refresh-btn[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-success-800);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n.refresh-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\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.overview-cards-container[_ngcontent-%COMP%] {\n position: relative;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n transition: all 0.3s ease;\n}\n\n.overview-cards-container.collapsed[_ngcontent-%COMP%] {\n padding: 0;\n}\n\n.kpi-toggle-btn[_ngcontent-%COMP%] {\n position: absolute;\n right: 24px;\n top: 50%;\n transform: translateY(-50%);\n width: 28px;\n height: 28px;\n border-radius: var(--mj-radius-full);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s ease;\n z-index: 10;\n}\n\n.kpi-toggle-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.overview-cards-container.collapsed[_ngcontent-%COMP%] .kpi-toggle-btn[_ngcontent-%COMP%] {\n top: 50%;\n}\n\n\n\n.overview-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n padding: 20px 24px;\n padding-right: 60px;\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n\n\n.overview-cards-mini[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 10px 60px 10px 24px;\n background: var(--mj-bg-page);\n}\n\n.mini-kpi[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-secondary);\n}\n\n.mini-kpi[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-color-indigo-500);\n}\n\n.mini-kpi.warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.mini-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.mini-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.mini-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n}\n\n.overview-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-md);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.card-icon--engines[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.card-icon--memory[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.card-icon--warning[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n.card-icon--success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n.card-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.card-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n.card-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n margin-top: 0.25rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.card-subtitle[_ngcontent-%COMP%] {\n font-size: 0.6875rem;\n color: var(--mj-text-muted);\n margin-top: 0.125rem;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n\n\n.left-nav[_ngcontent-%COMP%] {\n width: 240px;\n background: var(--mj-bg-page);\n border-right: 1px solid var(--mj-border-default);\n padding: 16px 0;\n flex-shrink: 0;\n}\n\n.nav-section[_ngcontent-%COMP%] {\n padding: 0 12px;\n}\n\n.nav-section-title[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n padding: 8px 12px;\n margin-bottom: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 14px;\n transition: all 0.2s ease;\n margin-bottom: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-weight: 500;\n}\n\n.nav-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 18px;\n text-align: center;\n font-size: 15px;\n}\n\n.nav-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n flex: 1;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: var(--mj-radius-lg);\n min-width: 24px;\n text-align: center;\n}\n\n.nav-item.active[_ngcontent-%COMP%] .nav-badge[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.nav-badge--warning[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-500) !important;\n color: white !important;\n}\n\n.nav-badge--success[_ngcontent-%COMP%] {\n background: var(--mj-status-success) !important;\n color: white !important;\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.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 16px;\n background: var(--mj-color-error-100);\n border: 1px solid var(--mj-color-error-100);\n border-radius: var(--mj-radius-md);\n color: var(--mj-status-error);\n font-size: 13px;\n margin-bottom: 16px;\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.error-banner[_ngcontent-%COMP%] .dismiss-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n background: transparent;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n}\n\n.error-banner[_ngcontent-%COMP%] .dismiss-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\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.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-border-default);\n}\n\n.empty-state.success-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n color: var(--mj-text-secondary);\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n margin-top: 8px;\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.info-banner[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-accent-300);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-brand-primary);\n margin-bottom: 20px;\n}\n\n.info-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n\n\n.recommendation-banner[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-warning-800);\n margin-top: 20px;\n}\n\n.recommendation-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n color: var(--mj-color-warning-500);\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.warning-banner[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50) !important;\n color: var(--mj-color-warning-800) !important;\n}\n\n.warning-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\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.insight-card[_ngcontent-%COMP%] {\n padding: 16px;\n border-radius: var(--mj-radius-md);\n border-left: 4px solid var(--mj-border-default);\n}\n\n.insight-card.severity-info[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n border-left-color: var(--mj-brand-primary);\n}\n\n.insight-card.severity-warning[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n border-left-color: var(--mj-color-warning-500);\n}\n\n.insight-card.severity-optimization[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n border-left-color: var(--mj-status-success);\n}\n\n.insight-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n}\n\n.insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.severity-info[_ngcontent-%COMP%] .insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.severity-warning[_ngcontent-%COMP%] .insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-warning-500); }\n.severity-optimization[_ngcontent-%COMP%] .insight-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-status-success); }\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.insight-card.expandable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.insight-card.expandable[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.insight-card[_ngcontent-%COMP%] .expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n margin-left: auto;\n}\n\n.insight-card.expanded[_ngcontent-%COMP%] {\n border-width: 2px;\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.empty-state.small[_ngcontent-%COMP%] {\n padding: 30px 20px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\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.success-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-success-100);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-success-800);\n margin-top: 16px;\n}\n\n.success-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: var(--mj-status-success);\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.perfmon-section[_ngcontent-%COMP%] {\n \n\n --perfmon-bg: #1a1a2e;\n --perfmon-bg-deep: #0d0d1a;\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-border: #333;\n --perfmon-border-medium: #444;\n --perfmon-border-light: #555;\n --perfmon-text-faint: #666;\n --perfmon-text-muted: #888;\n --perfmon-text-secondary: #aaa;\n --perfmon-control-bg: #2a2a2a;\n --perfmon-control-bg-hover: #333;\n --perfmon-mode-bg: #1a1a1a;\n --perfmon-overlay-light: rgba(255, 255, 255, 0.05);\n --perfmon-overlay-medium: rgba(255, 255, 255, 0.15);\n --perfmon-overlay-strong: rgba(255, 255, 255, 0.25);\n --perfmon-tooltip-bg: rgba(0, 0, 0, 0.9);\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 .diagnostics-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .header-controls[_ngcontent-%COMP%] {\n width: 100%;\n flex-wrap: wrap;\n }\n\n .overview-cards[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\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.pattern-warning[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 12px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n color: var(--mj-color-warning-800);\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.pattern-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n margin-top: 2px;\n}\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.config-item[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-item.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.config-item-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.config-item-header[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.02);\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.expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n}\n\n.config-item.expanded[_ngcontent-%COMP%] .expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\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.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.empty-state.small[_ngcontent-%COMP%] {\n padding: 30px 20px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n}\n\n.empty-state.small[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\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 });
4750
4750
  };
4751
4751
  SystemDiagnosticsComponent = __decorate([
4752
4752
  RegisterClass(BaseResourceComponent, 'SystemDiagnosticsResource')
@@ -6059,7 +6059,7 @@ export { SystemDiagnosticsComponent };
6059
6059
  </div>
6060
6060
  </div>
6061
6061
  }
6062
- `, styles: [".system-diagnostics {\n padding: 0;\n background: var(--mj-bg-surface-sunken);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* Header */\n.diagnostics-header {\n background: var(--mj-bg-page);\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n flex-shrink: 0;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.header-title i {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.header-title h2 {\n margin: 0;\n font-size: 22px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.header-controls {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.auto-refresh-control {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-refresh-control label {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n\n.auto-refresh-control input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.refresh-indicator {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-status-success);\n font-size: 12px;\n}\n\n.refresh-btn {\n background: var(--mj-status-success);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.refresh-btn:hover:not(:disabled) {\n background: var(--mj-color-success-800);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n.refresh-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\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/* Overview Cards Container (Collapsible) */\n.overview-cards-container {\n position: relative;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n transition: all 0.3s ease;\n}\n\n.overview-cards-container.collapsed {\n padding: 0;\n}\n\n.kpi-toggle-btn {\n position: absolute;\n right: 24px;\n top: 50%;\n transform: translateY(-50%);\n width: 28px;\n height: 28px;\n border-radius: var(--mj-radius-full);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s ease;\n z-index: 10;\n}\n\n.kpi-toggle-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.overview-cards-container.collapsed .kpi-toggle-btn {\n top: 50%;\n}\n\n/* Overview Cards */\n.overview-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n padding: 20px 24px;\n padding-right: 60px;\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n/* Mini KPI Bar (Collapsed State) */\n.overview-cards-mini {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 10px 60px 10px 24px;\n background: var(--mj-bg-page);\n}\n\n.mini-kpi {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-secondary);\n}\n\n.mini-kpi i {\n font-size: 14px;\n color: var(--mj-color-indigo-500);\n}\n\n.mini-kpi.warning i {\n color: var(--mj-color-warning-500);\n}\n\n.mini-value {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.mini-label {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.mini-divider {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n}\n\n.overview-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-md);\n}\n\n.card-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.card-icon--engines {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.card-icon--memory {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.card-icon--warning {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n.card-icon--success {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n.card-content {\n flex: 1;\n min-width: 0;\n}\n\n.card-value {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n.card-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n margin-top: 0.25rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.card-subtitle {\n font-size: 0.6875rem;\n color: var(--mj-text-muted);\n margin-top: 0.125rem;\n}\n\n/* Main Content */\n.main-content {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n/* Left Navigation */\n.left-nav {\n width: 240px;\n background: var(--mj-bg-page);\n border-right: 1px solid var(--mj-border-default);\n padding: 16px 0;\n flex-shrink: 0;\n}\n\n.nav-section {\n padding: 0 12px;\n}\n\n.nav-section-title {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n padding: 8px 12px;\n margin-bottom: 4px;\n}\n\n.nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 14px;\n transition: all 0.2s ease;\n margin-bottom: 4px;\n}\n\n.nav-item:hover {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n}\n\n.nav-item.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-weight: 500;\n}\n\n.nav-item i {\n width: 18px;\n text-align: center;\n font-size: 15px;\n}\n\n.nav-item span:first-of-type {\n flex: 1;\n}\n\n.nav-badge {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: var(--mj-radius-lg);\n min-width: 24px;\n text-align: center;\n}\n\n.nav-item.active .nav-badge {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.nav-badge--warning {\n background: var(--mj-color-warning-500) !important;\n color: white !important;\n}\n\n.nav-badge--success {\n background: var(--mj-status-success) !important;\n color: white !important;\n}\n\n/* Content Area */\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: color-mix(in srgb, var(--mj-color-neutral-900) 5%, transparent);\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.error-banner {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 16px;\n background: var(--mj-color-error-100);\n border: 1px solid var(--mj-color-error-100);\n border-radius: var(--mj-radius-md);\n color: var(--mj-status-error);\n font-size: 13px;\n margin-bottom: 16px;\n}\n\n.error-banner i {\n color: var(--mj-status-error);\n}\n\n.error-banner .dismiss-btn {\n margin-left: auto;\n background: transparent;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n}\n\n.error-banner .dismiss-btn:hover {\n color: var(--mj-status-error);\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/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state i {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-border-default);\n}\n\n.empty-state.success-state i {\n color: var(--mj-status-success);\n}\n\n.empty-state p {\n margin: 0;\n font-size: 16px;\n color: var(--mj-text-secondary);\n}\n\n.empty-hint {\n font-size: 13px;\n margin-top: 8px;\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 color-mix(in srgb, var(--mj-color-neutral-900) 8%, transparent);\n}\n\n.engine-action-btn {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: color-mix(in srgb, var(--mj-color-neutral-900) 5%, transparent);\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/* Info Banner */\n.info-banner {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-accent-300);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-brand-primary);\n margin-bottom: 20px;\n}\n\n.info-banner i {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Recommendation Banner */\n.recommendation-banner {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-warning-800);\n margin-top: 20px;\n}\n\n.recommendation-banner i {\n margin-top: 2px;\n flex-shrink: 0;\n color: var(--mj-color-warning-500);\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.warning-banner {\n background: var(--mj-color-warning-50) !important;\n color: var(--mj-color-warning-800) !important;\n}\n\n.warning-banner i {\n color: var(--mj-color-warning-500);\n}\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 {\n padding: 16px;\n border-radius: var(--mj-radius-md);\n border-left: 4px solid var(--mj-border-default);\n}\n\n.insight-card.severity-info {\n background: var(--mj-color-accent-300);\n border-left-color: var(--mj-brand-primary);\n}\n\n.insight-card.severity-warning {\n background: var(--mj-color-warning-50);\n border-left-color: var(--mj-color-warning-500);\n}\n\n.insight-card.severity-optimization {\n background: var(--mj-color-success-100);\n border-left-color: var(--mj-status-success);\n}\n\n.insight-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n}\n\n.insight-header i {\n font-size: 16px;\n}\n\n.severity-info .insight-header i { color: var(--mj-brand-primary); }\n.severity-warning .insight-header i { color: var(--mj-color-warning-500); }\n.severity-optimization .insight-header i { color: var(--mj-status-success); }\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: color-mix(in srgb, var(--mj-color-neutral-900) 10%, transparent);\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-color-error-700); }\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 {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.insight-card.expandable:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.insight-card .expand-icon {\n color: var(--mj-text-muted);\n font-size: 12px;\n margin-left: auto;\n}\n\n.insight-card.expanded {\n border-width: 2px;\n}\n\n.insight-details {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid color-mix(in srgb, var(--mj-color-neutral-900) 10%, transparent);\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: color-mix(in srgb, var(--mj-color-neutral-900) 3%, transparent);\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-color-error-700); }\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-color-error-700); }\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-color-info-500);\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-color-info-500);\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-color-error-700);\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/* Small empty state */\n.empty-state.small {\n padding: 30px 20px;\n}\n\n.empty-state.small i {\n font-size: 32px;\n margin-bottom: 12px;\n}\n\n.empty-state.small p {\n font-size: 14px;\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/* Success Banner */\n.success-banner {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-success-100);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-success-800);\n margin-top: 16px;\n}\n\n.success-banner i {\n font-size: 18px;\n color: var(--mj-status-success);\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: color-mix(in srgb, var(--mj-color-neutral-900) 3%, transparent);\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: color-mix(in srgb, var(--mj-color-neutral-900) 6%, transparent);\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-color-violet-600);\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.perfmon-section {\n /* Scoped terminal theme variables */\n --perfmon-bg: #1a1a2e;\n --perfmon-bg-deep: #0d0d1a;\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-border: #333;\n --perfmon-border-medium: #444;\n --perfmon-border-light: #555;\n --perfmon-text-faint: #666;\n --perfmon-text-muted: #888;\n --perfmon-text-secondary: #aaa;\n --perfmon-control-bg: #2a2a2a;\n --perfmon-control-bg-hover: #333;\n --perfmon-mode-bg: #1a1a1a;\n --perfmon-overlay-light: rgba(255, 255, 255, 0.05);\n --perfmon-overlay-medium: rgba(255, 255, 255, 0.15);\n --perfmon-overlay-strong: rgba(255, 255, 255, 0.25);\n --perfmon-tooltip-bg: rgba(0, 0, 0, 0.9);\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: #fff;\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 .diagnostics-header {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .header-controls {\n width: 100%;\n flex-wrap: wrap;\n }\n\n .overview-cards {\n grid-template-columns: repeat(2, 1fr);\n }\n\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: color-mix(in srgb, var(--mj-color-neutral-900) 5%, transparent);\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-color-violet-600);\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.pattern-warning {\n margin-top: 12px;\n padding: 12px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n color: var(--mj-color-warning-800);\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.pattern-warning i {\n color: var(--mj-color-warning-500);\n margin-top: 2px;\n}\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 {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-item.expanded {\n border-color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.config-item-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.config-item-header:hover {\n background: color-mix(in srgb, var(--mj-color-neutral-900) 2%, transparent);\n}\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 {\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n}\n\n.config-item.expanded .expand-icon {\n color: var(--mj-status-success);\n}\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/* 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/* Small empty state */\n.empty-state.small {\n padding: 30px 20px;\n}\n\n.empty-state.small i {\n font-size: 32px;\n}\n\n.empty-state.small p {\n font-size: 14px;\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"] }]
6062
+ `, styles: [".system-diagnostics {\n padding: 0;\n background: var(--mj-bg-surface-sunken);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* Header */\n.diagnostics-header {\n background: var(--mj-bg-page);\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n flex-shrink: 0;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.header-title i {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.header-title h2 {\n margin: 0;\n font-size: 22px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.header-controls {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.auto-refresh-control {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-refresh-control label {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n\n.auto-refresh-control input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.refresh-indicator {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-status-success);\n font-size: 12px;\n}\n\n.refresh-btn {\n background: var(--mj-status-success);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.refresh-btn:hover:not(:disabled) {\n background: var(--mj-color-success-800);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n.refresh-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\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/* Overview Cards Container (Collapsible) */\n.overview-cards-container {\n position: relative;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n transition: all 0.3s ease;\n}\n\n.overview-cards-container.collapsed {\n padding: 0;\n}\n\n.kpi-toggle-btn {\n position: absolute;\n right: 24px;\n top: 50%;\n transform: translateY(-50%);\n width: 28px;\n height: 28px;\n border-radius: var(--mj-radius-full);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s ease;\n z-index: 10;\n}\n\n.kpi-toggle-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.overview-cards-container.collapsed .kpi-toggle-btn {\n top: 50%;\n}\n\n/* Overview Cards */\n.overview-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n padding: 20px 24px;\n padding-right: 60px;\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n/* Mini KPI Bar (Collapsed State) */\n.overview-cards-mini {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 10px 60px 10px 24px;\n background: var(--mj-bg-page);\n}\n\n.mini-kpi {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-secondary);\n}\n\n.mini-kpi i {\n font-size: 14px;\n color: var(--mj-color-indigo-500);\n}\n\n.mini-kpi.warning i {\n color: var(--mj-color-warning-500);\n}\n\n.mini-value {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.mini-label {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.mini-divider {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n}\n\n.overview-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-md);\n}\n\n.card-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.card-icon--engines {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.card-icon--memory {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.card-icon--warning {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n.card-icon--success {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n.card-content {\n flex: 1;\n min-width: 0;\n}\n\n.card-value {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n.card-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n margin-top: 0.25rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.card-subtitle {\n font-size: 0.6875rem;\n color: var(--mj-text-muted);\n margin-top: 0.125rem;\n}\n\n/* Main Content */\n.main-content {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n/* Left Navigation */\n.left-nav {\n width: 240px;\n background: var(--mj-bg-page);\n border-right: 1px solid var(--mj-border-default);\n padding: 16px 0;\n flex-shrink: 0;\n}\n\n.nav-section {\n padding: 0 12px;\n}\n\n.nav-section-title {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n padding: 8px 12px;\n margin-bottom: 4px;\n}\n\n.nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 14px;\n transition: all 0.2s ease;\n margin-bottom: 4px;\n}\n\n.nav-item:hover {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n}\n\n.nav-item.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-weight: 500;\n}\n\n.nav-item i {\n width: 18px;\n text-align: center;\n font-size: 15px;\n}\n\n.nav-item span:first-of-type {\n flex: 1;\n}\n\n.nav-badge {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: var(--mj-radius-lg);\n min-width: 24px;\n text-align: center;\n}\n\n.nav-item.active .nav-badge {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.nav-badge--warning {\n background: var(--mj-color-warning-500) !important;\n color: white !important;\n}\n\n.nav-badge--success {\n background: var(--mj-status-success) !important;\n color: white !important;\n}\n\n/* Content Area */\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.error-banner {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 16px;\n background: var(--mj-color-error-100);\n border: 1px solid var(--mj-color-error-100);\n border-radius: var(--mj-radius-md);\n color: var(--mj-status-error);\n font-size: 13px;\n margin-bottom: 16px;\n}\n\n.error-banner i {\n color: var(--mj-status-error);\n}\n\n.error-banner .dismiss-btn {\n margin-left: auto;\n background: transparent;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n}\n\n.error-banner .dismiss-btn:hover {\n color: var(--mj-status-error);\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/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state i {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-border-default);\n}\n\n.empty-state.success-state i {\n color: var(--mj-status-success);\n}\n\n.empty-state p {\n margin: 0;\n font-size: 16px;\n color: var(--mj-text-secondary);\n}\n\n.empty-hint {\n font-size: 13px;\n margin-top: 8px;\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/* Info Banner */\n.info-banner {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-accent-300);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-brand-primary);\n margin-bottom: 20px;\n}\n\n.info-banner i {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Recommendation Banner */\n.recommendation-banner {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-warning-800);\n margin-top: 20px;\n}\n\n.recommendation-banner i {\n margin-top: 2px;\n flex-shrink: 0;\n color: var(--mj-color-warning-500);\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.warning-banner {\n background: var(--mj-color-warning-50) !important;\n color: var(--mj-color-warning-800) !important;\n}\n\n.warning-banner i {\n color: var(--mj-color-warning-500);\n}\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 {\n padding: 16px;\n border-radius: var(--mj-radius-md);\n border-left: 4px solid var(--mj-border-default);\n}\n\n.insight-card.severity-info {\n background: var(--mj-color-accent-300);\n border-left-color: var(--mj-brand-primary);\n}\n\n.insight-card.severity-warning {\n background: var(--mj-color-warning-50);\n border-left-color: var(--mj-color-warning-500);\n}\n\n.insight-card.severity-optimization {\n background: var(--mj-color-success-100);\n border-left-color: var(--mj-status-success);\n}\n\n.insight-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n}\n\n.insight-header i {\n font-size: 16px;\n}\n\n.severity-info .insight-header i { color: var(--mj-brand-primary); }\n.severity-warning .insight-header i { color: var(--mj-color-warning-500); }\n.severity-optimization .insight-header i { color: var(--mj-status-success); }\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 {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.insight-card.expandable:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.insight-card .expand-icon {\n color: var(--mj-text-muted);\n font-size: 12px;\n margin-left: auto;\n}\n\n.insight-card.expanded {\n border-width: 2px;\n}\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/* Small empty state */\n.empty-state.small {\n padding: 30px 20px;\n}\n\n.empty-state.small i {\n font-size: 32px;\n margin-bottom: 12px;\n}\n\n.empty-state.small p {\n font-size: 14px;\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/* Success Banner */\n.success-banner {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-color-success-100);\n border-radius: var(--mj-radius-md);\n font-size: 13px;\n color: var(--mj-color-success-800);\n margin-top: 16px;\n}\n\n.success-banner i {\n font-size: 18px;\n color: var(--mj-status-success);\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.perfmon-section {\n /* Scoped terminal theme variables */\n --perfmon-bg: #1a1a2e;\n --perfmon-bg-deep: #0d0d1a;\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-border: #333;\n --perfmon-border-medium: #444;\n --perfmon-border-light: #555;\n --perfmon-text-faint: #666;\n --perfmon-text-muted: #888;\n --perfmon-text-secondary: #aaa;\n --perfmon-control-bg: #2a2a2a;\n --perfmon-control-bg-hover: #333;\n --perfmon-mode-bg: #1a1a1a;\n --perfmon-overlay-light: rgba(255, 255, 255, 0.05);\n --perfmon-overlay-medium: rgba(255, 255, 255, 0.15);\n --perfmon-overlay-strong: rgba(255, 255, 255, 0.25);\n --perfmon-tooltip-bg: rgba(0, 0, 0, 0.9);\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 .diagnostics-header {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .header-controls {\n width: 100%;\n flex-wrap: wrap;\n }\n\n .overview-cards {\n grid-template-columns: repeat(2, 1fr);\n }\n\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.pattern-warning {\n margin-top: 12px;\n padding: 12px;\n background: var(--mj-color-warning-50);\n border-radius: var(--mj-radius-md);\n font-size: 12px;\n color: var(--mj-color-warning-800);\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.pattern-warning i {\n color: var(--mj-color-warning-500);\n margin-top: 2px;\n}\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 {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-item.expanded {\n border-color: var(--mj-status-success);\n box-shadow: var(--mj-shadow-md);\n}\n\n.config-item-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.config-item-header:hover {\n background: rgba(0, 0, 0, 0.02);\n}\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 {\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n}\n\n.config-item.expanded .expand-icon {\n color: var(--mj-status-success);\n}\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/* 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/* Small empty state */\n.empty-state.small {\n padding: 30px 20px;\n}\n\n.empty-state.small i {\n font-size: 32px;\n}\n\n.empty-state.small p {\n font-size: 14px;\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"] }]
6063
6063
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.NavigationService }, { type: i2.ActivatedRoute }], { perfChartRef: [{
6064
6064
  type: ViewChild,
6065
6065
  args: ['perfChart', { static: false }]