@memberjunction/ng-dashboards 5.33.0 → 5.34.1

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 (29) hide show
  1. package/dist/AI/components/agents/agent-editor.component.js +2 -2
  2. package/dist/AI/components/agents/agent-editor.component.js.map +1 -1
  3. package/dist/ComponentStudio/components/workspace/component-preview.component.js +1 -1
  4. package/dist/ComponentStudio/components/workspace/component-preview.component.js.map +1 -1
  5. package/dist/ComponentStudio/services/component-studio-state.service.d.ts +28 -8
  6. package/dist/ComponentStudio/services/component-studio-state.service.d.ts.map +1 -1
  7. package/dist/ComponentStudio/services/component-studio-state.service.js +45 -27
  8. package/dist/ComponentStudio/services/component-studio-state.service.js.map +1 -1
  9. package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.d.ts +18 -3
  10. package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.d.ts.map +1 -1
  11. package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js +51 -11
  12. package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js.map +1 -1
  13. package/dist/DataExplorer/data-explorer-dashboard.component.js +2 -2
  14. package/dist/DataExplorer/data-explorer-dashboard.component.js.map +1 -1
  15. package/dist/Integration/components/widgets/integration-card.component.js +2 -2
  16. package/dist/Integration/components/widgets/integration-card.component.js.map +1 -1
  17. package/dist/Integration/components/widgets/run-history-panel.component.js +2 -2
  18. package/dist/Integration/components/widgets/run-history-panel.component.js.map +1 -1
  19. package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.d.ts +134 -1
  20. package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.d.ts.map +1 -1
  21. package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.js +1227 -24
  22. package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.js.map +1 -1
  23. package/dist/SystemDiagnostics/system-diagnostics.component.d.ts +4 -0
  24. package/dist/SystemDiagnostics/system-diagnostics.component.d.ts.map +1 -1
  25. package/dist/SystemDiagnostics/system-diagnostics.component.js +106 -68
  26. package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
  27. package/dist/Testing/components/testing-runs.component.js +3 -3
  28. package/dist/Testing/components/testing-runs.component.js.map +1 -1
  29. package/package.json +52 -52
package/dist/SystemDiagnostics/system-diagnostics.component.js CHANGED
@@ -1940,11 +1940,11 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_35_Template(rf, c
1940
1940
  i0.ɵɵtext(3, "No config items found");
1941
1941
  i0.ɵɵelementEnd()();
1942
1942
  } }
1943
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
1944
- i0.ɵɵelementStart(0, "div", 322)(1, "span", 245);
1943
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_6_Template(rf, ctx) { if (rf & 1) {
1944
+ i0.ɵɵelementStart(0, "div", 323)(1, "span", 245);
1945
1945
  i0.ɵɵtext(2, "Filter:");
1946
1946
  i0.ɵɵelementEnd();
1947
- i0.ɵɵelementStart(3, "code", 323);
1947
+ i0.ɵɵelementStart(3, "code", 324);
1948
1948
  i0.ɵɵtext(4);
1949
1949
  i0.ɵɵelementEnd()();
1950
1950
  } if (rf & 2) {
@@ -1952,11 +1952,11 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
1952
1952
  i0.ɵɵadvance(4);
1953
1953
  i0.ɵɵtextInterpolate(item_r45.filter);
1954
1954
  } }
1955
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_7_Template(rf, ctx) { if (rf & 1) {
1956
- i0.ɵɵelementStart(0, "div", 322)(1, "span", 245);
1955
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_7_Template(rf, ctx) { if (rf & 1) {
1956
+ i0.ɵɵelementStart(0, "div", 323)(1, "span", 245);
1957
1957
  i0.ɵɵtext(2, "Order By:");
1958
1958
  i0.ɵɵelementEnd();
1959
- i0.ɵɵelementStart(3, "code", 323);
1959
+ i0.ɵɵelementStart(3, "code", 324);
1960
1960
  i0.ɵɵtext(4);
1961
1961
  i0.ɵɵelementEnd()();
1962
1962
  } if (rf & 2) {
@@ -1964,28 +1964,40 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
1964
1964
  i0.ɵɵadvance(4);
1965
1965
  i0.ɵɵtextInterpolate(item_r45.orderBy);
1966
1966
  } }
1967
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
1968
- i0.ɵɵelement(0, "i", 333);
1967
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_8_Template(rf, ctx) { if (rf & 1) {
1968
+ i0.ɵɵelementStart(0, "div", 325)(1, "span", 245);
1969
+ i0.ɵɵtext(2, "Error:");
1970
+ i0.ɵɵelementEnd();
1971
+ i0.ɵɵelementStart(3, "span", 327);
1972
+ i0.ɵɵtext(4);
1973
+ i0.ɵɵelementEnd()();
1974
+ } if (rf & 2) {
1975
+ const item_r45 = i0.ɵɵnextContext(2).$implicit;
1976
+ i0.ɵɵadvance(4);
1977
+ i0.ɵɵtextInterpolate(item_r45.errorMessage);
1978
+ } }
1979
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
1980
+ i0.ɵɵelement(0, "i", 336);
1969
1981
  } }
1970
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
1971
- i0.ɵɵelement(0, "i", 334);
1982
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
1983
+ i0.ɵɵelement(0, "i", 337);
1972
1984
  } }
1973
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
1974
- i0.ɵɵelement(0, "i", 333);
1985
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
1986
+ i0.ɵɵelement(0, "i", 336);
1975
1987
  } }
1976
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
1988
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
1977
1989
  i0.ɵɵelement(0, "i", 35);
1978
1990
  } }
1979
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
1991
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
1980
1992
  const _r46 = i0.ɵɵgetCurrentView();
1981
- i0.ɵɵelementStart(0, "button", 332);
1982
- i0.ɵɵlistener("click", function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const item_r45 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.loadMoreData(item_r45)); });
1983
- i0.ɵɵconditionalCreate(1, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_1_Template, 1, 0, "i", 333)(2, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_2_Template, 1, 0, "i", 334);
1993
+ i0.ɵɵelementStart(0, "button", 335);
1994
+ i0.ɵɵlistener("click", function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const item_r45 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.loadMoreData(item_r45)); });
1995
+ i0.ɵɵconditionalCreate(1, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_1_Template, 1, 0, "i", 336)(2, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_2_Template, 1, 0, "i", 337);
1984
1996
  i0.ɵɵtext(3, " Load More ");
1985
1997
  i0.ɵɵelementEnd();
1986
- i0.ɵɵelementStart(4, "button", 335);
1987
- i0.ɵɵlistener("click", function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r46); const item_r45 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.loadAllData(item_r45)); });
1988
- i0.ɵɵconditionalCreate(5, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_5_Template, 1, 0, "i", 333)(6, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Conditional_6_Template, 1, 0, "i", 35);
1998
+ i0.ɵɵelementStart(4, "button", 338);
1999
+ i0.ɵɵlistener("click", function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r46); const item_r45 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.loadAllData(item_r45)); });
2000
+ i0.ɵɵconditionalCreate(5, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_5_Template, 1, 0, "i", 336)(6, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Conditional_6_Template, 1, 0, "i", 35);
1989
2001
  i0.ɵɵtext(7, " Load All ");
1990
2002
  i0.ɵɵelementEnd();
1991
2003
  } if (rf & 2) {
@@ -1998,13 +2010,13 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
1998
2010
  i0.ɵɵadvance();
1999
2011
  i0.ɵɵconditional(item_r45.isLoadingMore ? 5 : 6);
2000
2012
  } }
2001
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
2002
- i0.ɵɵelementStart(0, "span", 328);
2003
- i0.ɵɵelement(1, "i", 336);
2013
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
2014
+ i0.ɵɵelementStart(0, "span", 331);
2015
+ i0.ɵɵelement(1, "i", 339);
2004
2016
  i0.ɵɵtext(2, " All Loaded ");
2005
2017
  i0.ɵɵelementEnd();
2006
2018
  } }
2007
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_13_Template(rf, ctx) { if (rf & 1) {
2019
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_13_Template(rf, ctx) { if (rf & 1) {
2008
2020
  i0.ɵɵelementStart(0, "th");
2009
2021
  i0.ɵɵtext(1);
2010
2022
  i0.ɵɵelementEnd();
@@ -2013,15 +2025,15 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
2013
2025
  i0.ɵɵadvance();
2014
2026
  i0.ɵɵtextInterpolate(col_r47);
2015
2027
  } }
2016
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
2028
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
2017
2029
  const _r48 = i0.ɵɵgetCurrentView();
2018
- i0.ɵɵelementStart(0, "button", 339);
2019
- i0.ɵɵlistener("click", function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_16_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r48); const row_r49 = i0.ɵɵnextContext().$implicit; const item_r45 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord(item_r45.entityName, row_r49)); });
2020
- i0.ɵɵelement(1, "i", 340);
2030
+ i0.ɵɵelementStart(0, "button", 342);
2031
+ i0.ɵɵlistener("click", function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_16_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r48); const row_r49 = i0.ɵɵnextContext().$implicit; const item_r45 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord(item_r45.entityName, row_r49)); });
2032
+ i0.ɵɵelement(1, "i", 343);
2021
2033
  i0.ɵɵelementEnd();
2022
2034
  } }
2023
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_16_For_4_Template(rf, ctx) { if (rf & 1) {
2024
- i0.ɵɵelementStart(0, "td", 338);
2035
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_16_For_4_Template(rf, ctx) { if (rf & 1) {
2036
+ i0.ɵɵelementStart(0, "td", 341);
2025
2037
  i0.ɵɵtext(1);
2026
2038
  i0.ɵɵelementEnd();
2027
2039
  } if (rf & 2) {
@@ -2032,11 +2044,11 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
2032
2044
  i0.ɵɵadvance();
2033
2045
  i0.ɵɵtextInterpolate(ctx_r0.truncateString(ctx_r0.getSampleDataValue(row_r49, col_r50), 30));
2034
2046
  } }
2035
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_16_Template(rf, ctx) { if (rf & 1) {
2036
- i0.ɵɵelementStart(0, "tr")(1, "td", 331);
2037
- i0.ɵɵconditionalCreate(2, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_16_Conditional_2_Template, 2, 0, "button", 337);
2047
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_16_Template(rf, ctx) { if (rf & 1) {
2048
+ i0.ɵɵelementStart(0, "tr")(1, "td", 334);
2049
+ i0.ɵɵconditionalCreate(2, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_16_Conditional_2_Template, 2, 0, "button", 340);
2038
2050
  i0.ɵɵelementEnd();
2039
- i0.ɵɵrepeaterCreate(3, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_16_For_4_Template, 2, 2, "td", 338, i0.ɵɵrepeaterTrackByIdentity);
2051
+ i0.ɵɵrepeaterCreate(3, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_16_For_4_Template, 2, 2, "td", 341, i0.ɵɵrepeaterTrackByIdentity);
2040
2052
  i0.ɵɵelementEnd();
2041
2053
  } if (rf & 2) {
2042
2054
  const row_r49 = ctx.$implicit;
@@ -2047,20 +2059,20 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
2047
2059
  i0.ɵɵadvance();
2048
2060
  i0.ɵɵrepeater(ctx_r0.getSampleDataColumns(item_r45));
2049
2061
  } }
2050
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Template(rf, ctx) { if (rf & 1) {
2051
- i0.ɵɵelementStart(0, "div", 324)(1, "div", 325)(2, "span", 326);
2062
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Template(rf, ctx) { if (rf & 1) {
2063
+ i0.ɵɵelementStart(0, "div", 326)(1, "div", 328)(2, "span", 329);
2052
2064
  i0.ɵɵtext(3);
2053
2065
  i0.ɵɵelementEnd();
2054
- i0.ɵɵelementStart(4, "div", 327);
2055
- i0.ɵɵconditionalCreate(5, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_5_Template, 8, 4);
2056
- i0.ɵɵconditionalCreate(6, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Conditional_6_Template, 3, 0, "span", 328);
2066
+ i0.ɵɵelementStart(4, "div", 330);
2067
+ i0.ɵɵconditionalCreate(5, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_5_Template, 8, 4);
2068
+ i0.ɵɵconditionalCreate(6, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Conditional_6_Template, 3, 0, "span", 331);
2057
2069
  i0.ɵɵelementEnd()();
2058
- i0.ɵɵelementStart(7, "div", 329)(8, "table", 330)(9, "thead")(10, "tr");
2059
- i0.ɵɵelement(11, "th", 331);
2060
- i0.ɵɵrepeaterCreate(12, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_13_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
2070
+ i0.ɵɵelementStart(7, "div", 332)(8, "table", 333)(9, "thead")(10, "tr");
2071
+ i0.ɵɵelement(11, "th", 334);
2072
+ i0.ɵɵrepeaterCreate(12, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_13_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
2061
2073
  i0.ɵɵelementEnd()();
2062
2074
  i0.ɵɵelementStart(14, "tbody");
2063
- i0.ɵɵrepeaterCreate(15, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_For_16_Template, 5, 1, "tr", null, i0.ɵɵrepeaterTrackByIndex);
2075
+ i0.ɵɵrepeaterCreate(15, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_For_16_Template, 5, 1, "tr", null, i0.ɵɵrepeaterTrackByIndex);
2064
2076
  i0.ɵɵelementEnd()()()();
2065
2077
  } if (rf & 2) {
2066
2078
  const item_r45 = i0.ɵɵnextContext(2).$implicit;
@@ -2076,16 +2088,17 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
2076
2088
  i0.ɵɵadvance(3);
2077
2089
  i0.ɵɵrepeater(item_r45.displayedData);
2078
2090
  } }
2079
- function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
2080
- i0.ɵɵelementStart(0, "div", 321)(1, "div", 322)(2, "span", 245);
2091
+ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
2092
+ i0.ɵɵelementStart(0, "div", 322)(1, "div", 323)(2, "span", 245);
2081
2093
  i0.ɵɵtext(3, "Property:");
2082
2094
  i0.ɵɵelementEnd();
2083
- i0.ɵɵelementStart(4, "code", 323);
2095
+ i0.ɵɵelementStart(4, "code", 324);
2084
2096
  i0.ɵɵtext(5);
2085
2097
  i0.ɵɵelementEnd()();
2086
- i0.ɵɵconditionalCreate(6, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_6_Template, 5, 1, "div", 322);
2087
- i0.ɵɵconditionalCreate(7, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_7_Template, 5, 1, "div", 322);
2088
- i0.ɵɵconditionalCreate(8, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Conditional_8_Template, 17, 4, "div", 324);
2098
+ i0.ɵɵconditionalCreate(6, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_6_Template, 5, 1, "div", 323);
2099
+ i0.ɵɵconditionalCreate(7, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_7_Template, 5, 1, "div", 323);
2100
+ i0.ɵɵconditionalCreate(8, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_8_Template, 5, 1, "div", 325);
2101
+ i0.ɵɵconditionalCreate(9, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Conditional_9_Template, 17, 4, "div", 326);
2089
2102
  i0.ɵɵelementEnd();
2090
2103
  } if (rf & 2) {
2091
2104
  const item_r45 = i0.ɵɵnextContext().$implicit;
@@ -2096,32 +2109,39 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditio
2096
2109
  i0.ɵɵadvance();
2097
2110
  i0.ɵɵconditional(item_r45.orderBy ? 7 : -1);
2098
2111
  i0.ɵɵadvance();
2099
- i0.ɵɵconditional(item_r45.displayedData.length > 0 ? 8 : -1);
2112
+ i0.ɵɵconditional(!item_r45.loadedSuccessfully && item_r45.errorMessage ? 8 : -1);
2113
+ i0.ɵɵadvance();
2114
+ i0.ɵɵconditional(item_r45.displayedData.length > 0 ? 9 : -1);
2100
2115
  } }
2101
2116
  function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Template(rf, ctx) { if (rf & 1) {
2102
2117
  const _r44 = i0.ɵɵgetCurrentView();
2103
2118
  i0.ɵɵelementStart(0, "div", 314)(1, "div", 315);
2104
2119
  i0.ɵɵlistener("click", function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Template_div_click_1_listener() { const item_r45 = i0.ɵɵrestoreView(_r44).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.toggleConfigItemExpanded(item_r45)); });
2105
- i0.ɵɵelementStart(2, "div", 316)(3, "span", 317);
2106
- i0.ɵɵtext(4);
2120
+ i0.ɵɵelementStart(2, "div", 316);
2121
+ i0.ɵɵelement(3, "i", 317);
2122
+ i0.ɵɵelementStart(4, "span", 318);
2123
+ i0.ɵɵtext(5);
2107
2124
  i0.ɵɵelementEnd();
2108
- i0.ɵɵelementStart(5, "span", 318);
2109
- i0.ɵɵtext(6);
2125
+ i0.ɵɵelementStart(6, "span", 319);
2126
+ i0.ɵɵtext(7);
2110
2127
  i0.ɵɵelementEnd()();
2111
- i0.ɵɵelementStart(7, "div", 319)(8, "span", 320);
2112
- i0.ɵɵtext(9);
2128
+ i0.ɵɵelementStart(8, "div", 320)(9, "span", 321);
2129
+ i0.ɵɵtext(10);
2113
2130
  i0.ɵɵelementEnd();
2114
- i0.ɵɵelementStart(10, "span", 320);
2115
- i0.ɵɵtext(11);
2131
+ i0.ɵɵelementStart(11, "span", 321);
2132
+ i0.ɵɵtext(12);
2116
2133
  i0.ɵɵelementEnd();
2117
- i0.ɵɵelement(12, "i", 235);
2134
+ i0.ɵɵelement(13, "i", 235);
2118
2135
  i0.ɵɵelementEnd()();
2119
- i0.ɵɵconditionalCreate(13, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_13_Template, 9, 4, "div", 321);
2136
+ i0.ɵɵconditionalCreate(14, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Conditional_14_Template, 10, 5, "div", 322);
2120
2137
  i0.ɵɵelementEnd();
2121
2138
  } if (rf & 2) {
2122
2139
  const item_r45 = ctx.$implicit;
2123
2140
  i0.ɵɵclassProp("expanded", item_r45.expanded);
2124
2141
  i0.ɵɵadvance(3);
2142
+ i0.ɵɵclassProp("fa-circle-check", item_r45.loadedSuccessfully)("fa-circle-xmark", !item_r45.loadedSuccessfully)("health-success", item_r45.loadedSuccessfully)("health-failure", !item_r45.loadedSuccessfully);
2143
+ i0.ɵɵproperty("title", item_r45.loadedSuccessfully ? "Loaded successfully" : "Load failed: " + (item_r45.errorMessage || "unknown"));
2144
+ i0.ɵɵadvance();
2125
2145
  i0.ɵɵclassMap("type-" + item_r45.type);
2126
2146
  i0.ɵɵadvance();
2127
2147
  i0.ɵɵtextInterpolate(item_r45.type);
@@ -2134,11 +2154,11 @@ function SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Template
2134
2154
  i0.ɵɵadvance();
2135
2155
  i0.ɵɵclassProp("fa-chevron-down", !item_r45.expanded)("fa-chevron-up", item_r45.expanded);
2136
2156
  i0.ɵɵadvance();
2137
- i0.ɵɵconditional(item_r45.expanded ? 13 : -1);
2157
+ i0.ɵɵconditional(item_r45.expanded ? 14 : -1);
2138
2158
  } }
2139
2159
  function SystemDiagnosticsComponent_Conditional_63_Conditional_36_Template(rf, ctx) { if (rf & 1) {
2140
2160
  i0.ɵɵelementStart(0, "div", 312);
2141
- i0.ɵɵrepeaterCreate(1, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Template, 14, 13, "div", 313, _forTrack7);
2161
+ i0.ɵɵrepeaterCreate(1, SystemDiagnosticsComponent_Conditional_63_Conditional_36_For_2_Template, 15, 22, "div", 313, _forTrack7);
2142
2162
  i0.ɵɵelementEnd();
2143
2163
  } if (rf & 2) {
2144
2164
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -4220,12 +4240,16 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4220
4240
  }
4221
4241
  const engineObj = engineInstance;
4222
4242
  const items = [];
4243
+ // Get load health data from DataMapEntries (if available)
4244
+ const dataMapEntries = engineObj.DataMapEntries;
4223
4245
  for (const config of engineInstance.Configs) {
4224
4246
  const propValue = engineObj[config.PropertyName];
4225
4247
  const dataArray = Array.isArray(propValue) ? propValue : [];
4226
4248
  const estimatedBytes = this.estimateArrayMemory(dataArray);
4227
4249
  const initialPageSize = 10;
4228
4250
  const initialData = dataArray.slice(0, initialPageSize);
4251
+ // Look up load health from _dataMap
4252
+ const healthEntry = dataMapEntries?.get(config.PropertyName);
4229
4253
  items.push({
4230
4254
  propertyName: config.PropertyName,
4231
4255
  type: config.Type || 'entity',
@@ -4238,6 +4262,8 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4238
4262
  memoryDisplay: this.formatBytes(estimatedBytes),
4239
4263
  sampleData: dataArray, // Store all data for paging
4240
4264
  expanded: false,
4265
+ loadedSuccessfully: healthEntry?.loadedSuccessfully ?? true,
4266
+ errorMessage: healthEntry?.errorMessage,
4241
4267
  // Paging support
4242
4268
  displayedData: initialData,
4243
4269
  allDataLoaded: dataArray.length <= initialPageSize,
@@ -4616,7 +4642,7 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4616
4642
  } if (rf & 2) {
4617
4643
  let _t;
4618
4644
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.perfChartRef = _t.first);
4619
- } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 64, vars: 36, consts: [["perfChart", ""], [1, "system-diagnostics"], [1, "diagnostics-header"], [1, "header-title"], [1, "fa-solid", "fa-stethoscope"], [1, "header-controls"], [1, "auto-refresh-control"], ["type", "checkbox", 3, "ngModelChange", "change", "ngModel"], [1, "refresh-indicator"], [1, "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "overview-cards-container"], [1, "kpi-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "overview-cards"], [1, "overview-cards-mini"], [1, "main-content"], [1, "left-nav"], [1, "nav-section"], [1, "nav-section-title"], [1, "nav-item", 3, "click"], [1, "fa-solid", "fa-cogs"], [1, "nav-badge"], [1, "fa-solid", "fa-copy"], [1, "nav-badge", "nav-badge--warning"], [1, "nav-badge", "nav-badge--success"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-database"], [1, "content-area"], [1, "section-panel"], [1, "section-panel", "perf-panel"], [1, "footer"], [1, "last-updated"], [1, "fa-solid", "fa-clock"], [1, "export-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "fa-solid", "fa-sync-alt", "spinning"], [1, "overview-card"], [1, "card-icon", "card-icon--engines"], [1, "card-content"], [1, "card-value"], [1, "card-label"], [1, "card-subtitle"], [1, "card-icon", "card-icon--memory"], [1, "fa-solid", "fa-microchip"], [1, "card-icon"], ["title", "Registered Engines", 1, "mini-kpi"], [1, "mini-value"], [1, "mini-label"], [1, "mini-divider"], ["title", "Engine Memory", 1, "mini-kpi"], ["title", "Redundant Loads", 1, "mini-kpi"], [1, "panel-header"], [1, "panel-actions"], [1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-sync"], [1, "section-panel-content"], [1, "empty-state"], [1, "engine-grid"], [1, "fa-solid", "fa-inbox"], [1, "empty-hint"], [1, "engine-card", 3, "loaded"], [1, "engine-card"], [1, "engine-header"], [1, "engine-name", 3, "title"], [1, "engine-status"], [1, "engine-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-layer-group"], [1, "engine-actions"], ["title", "Refresh this engine", 1, "engine-action-btn", 3, "click", "disabled"], ["title", "View engine details", 1, "engine-action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-right"], [1, "info-banner"], [1, "fa-solid", "fa-info-circle"], [1, "empty-state", "success-state"], [1, "fa-solid", "fa-check-circle"], [1, "redundant-loads-table-wrapper"], [1, "redundant-loads-table"], [1, "text-right"], [1, "recommendation-banner"], [1, "fa-solid", "fa-lightbulb"], [1, "entity-name"], [1, "engines-cell"], [1, "engine-chips"], [1, "engine-chip"], [1, "text-right", "count-cell"], [1, "count-badge"], [1, "source-toggle"], [1, "source-btn", 3, "click"], [1, "fa-solid", "fa-browser"], [1, "fa-solid", "fa-server"], [1, "action-divider"], [1, "status-indicator", 3, "enabled", "disabled"], [1, "loading-indicator"], [1, "error-banner"], [1, "perf-tabs"], [1, "perf-tab", 3, "click"], [1, "fa-solid", "fa-chart-area"], [1, "fa-solid", "fa-gauge"], [1, "tab-badge", "warning"], [1, "fa-solid", "fa-timeline"], [1, "tab-badge"], [1, "fa-solid", "fa-fingerprint"], [1, "tab-badge", "insight"], [1, "info-banner", "warning-banner"], [1, "perfmon-section"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "status-indicator"], ["title", "Configure via mj.config.cjs telemetry section", 1, "config-note"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "dismiss-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "perfmon-header"], [1, "perfmon-legend"], [1, "legend-item", "runview"], [1, "legend-dot"], [1, "legend-item", "runquery"], [1, "legend-item", "engine"], [1, "legend-item", "ai"], [1, "perfmon-controls"], ["title", "Chart Interaction Mode", 1, "mode-toggle"], ["title", "Pointer mode - click events to view details", 1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-arrow-pointer"], ["title", "Select mode - drag to zoom into a time range", 1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-vector-square"], ["title", "Pan mode - drag to pan the chart", 1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-hand"], [1, "control-divider"], ["title", "Zoom In", 1, "chart-control-btn", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom Out", 1, "chart-control-btn", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset Zoom", 1, "chart-control-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Automatically compress gaps with no activity", 1, "compress-toggle"], [1, "perfmon-chart-container"], [1, "perfmon-y-axis"], [1, "axis-label"], [1, "perfmon-chart"], [1, "perfmon-footer"], [1, "footer-note"], [1, "footer-stats"], [1, "telemetry-summary"], [1, "summary-card"], [1, "summary-value"], [1, "summary-label"], [1, "category-breakdown"], [1, "slow-queries-section"], [1, "success-banner"], [1, "category-grid"], [1, "category-item"], [1, "category-item", 3, "click"], [1, "category-name"], [1, "category-events"], [1, "category-avg"], [1, "fa-solid", "fa-turtle"], [1, "slow-queries-list"], [1, "slow-query-item", "clickable", 3, "cache-hit"], [1, "slow-query-item", "clickable", 3, "click"], [1, "slow-query-main"], [1, "category-chip", "small"], [1, "slow-query-entity"], ["title", "Data served from local cache", 1, "cache-hit-badge", "small"], [1, "slow-query-time"], [1, "slow-query-entities"], [1, "slow-query-pills"], [1, "slow-query-filter"], [1, "slow-query-timestamp"], [1, "fa-solid", "fa-bolt"], [1, "entity-pill", "small"], [1, "entity-pill", "small", "more"], [1, "param-pill", "small", 3, "class", "title"], [1, "param-pill", "small", 3, "title"], [1, "pill-label"], [1, "pill-value"], [1, "filter-bar", "compact"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search events...", 3, "ngModelChange", "ngModel"], [1, "clear-search"], [1, "filter-buttons"], [1, "filter-btn", 3, "click"], [1, "filter-btn", 3, "active"], [1, "timeline-section"], [1, "timeline-container"], [1, "empty-state", "small"], [1, "clear-search", 3, "click"], [1, "timeline-item", "clickable", 3, "class", "cache-hit"], [1, "timeline-item", "clickable", 3, "click"], [1, "timeline-marker"], [1, "marker-bolt"], [1, "marker-dot"], [1, "marker-line"], [1, "timeline-content"], [1, "timeline-header"], [1, "timeline-time"], ["title", "Data served from local cache", 1, "cache-hit-badge"], [1, "timeline-duration", 3, "slow"], [1, "timeline-body"], [1, "timeline-operation"], [1, "timeline-entity"], [1, "timeline-entities"], [1, "timeline-pills"], [1, "timeline-filter"], [1, "timeline-duration"], [1, "entity-pill"], [1, "entity-pill", "more"], [1, "param-pill", 3, "class", "title"], [1, "param-pill", 3, "title"], [1, "fa-solid", "fa-hourglass-start"], ["type", "text", "placeholder", "Search patterns...", 3, "ngModelChange", "ngModel"], [1, "patterns-section"], [1, "patterns-table-wrapper"], [1, "patterns-table", "sortable"], [1, "sortable-header", 3, "click"], [1, "sortable-header", "text-right", 3, "click"], [3, "duplicate-row", "slow-row"], [1, "category-chip"], [1, "operation-cell"], [1, "entity-cell"], [1, "filter-cell", 3, "title"], [1, "count-warning"], [1, "fa-solid", "fa-filter"], [1, "insights-section"], [1, "insights-list"], [1, "insight-card", "expandable", 3, "class", "expanded"], [1, "insight-card", "expandable"], [1, "insight-header", 3, "click"], [1, "insight-title"], [1, "insight-category"], [1, "fa-solid", "expand-icon"], [1, "insight-key-info"], [1, "key-info-item"], [1, "insight-message"], [1, "insight-suggestion"], [1, "insight-details"], [1, "key-label"], [1, "key-value", "entity-name"], [1, "key-value", "filter-code"], [1, "detail-section"], [1, "detail-label"], [1, "params-display"], [1, "param-row"], [1, "related-events"], [1, "related-event"], [1, "param-key"], [1, "param-value"], [1, "event-time"], [1, "event-duration"], [1, "event-entity"], [1, "event-filter"], [1, "fa-solid", "fa-check-circle", 2, "color", "#4caf50"], [1, "cache-summary"], [1, "cache-type-breakdown"], [1, "type-grid"], [1, "type-item", 3, "click"], [1, "type-icon"], [1, "type-name"], [1, "type-count"], [1, "type-size"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-code"], [1, "cache-entries-section"], [1, "section-header"], [1, "filter-controls"], [1, "cache-entries-table-wrapper"], [1, "cache-entries-table"], [1, "table-footer"], [1, "cache-type-chip"], [1, "entry-name"], [1, "entry-fingerprint"], ["title", "Invalidate", 1, "icon-btn", 3, "click"], [1, "event-detail-overlay", 3, "click"], [1, "event-detail-panel"], [1, "panel-title"], [1, "close-btn", 3, "click"], [1, "panel-body"], [1, "detail-metrics"], [1, "metric"], [1, "metric-value"], [1, "metric-label"], [1, "detail-content"], [1, "detail-row"], [1, "detail-key"], [1, "detail-val"], [1, "fa-solid", "fa-sliders"], [1, "params-grid"], [1, "param-item"], [1, "detail-actions"], [1, "action-button", 3, "click"], [1, "action-button"], [1, "detail-val", "entity-highlight"], [1, "detail-val", "filter-val"], [1, "param-name"], [1, "param-val"], [1, "pattern-summary"], [1, "pattern-stat"], [1, "stat-val"], [1, "pattern-warning"], [1, "engine-detail-overlay", 3, "click"], [1, "engine-detail-panel"], [1, "panel-header-actions"], ["title", "Refresh engine", 1, "icon-btn", 3, "click", "disabled"], [1, "engine-summary-section"], [1, "summary-stat"], [1, "status-dot"], [1, "config-items-section"], [1, "config-items-list"], [1, "config-item", 3, "expanded"], [1, "config-item"], [1, "config-item-header", 3, "click"], [1, "config-item-info"], [1, "config-type-chip"], [1, "config-name"], [1, "config-item-stats"], [1, "config-stat"], [1, "config-item-details"], [1, "config-detail-row"], [1, "detail-value"], [1, "sample-data-section"], [1, "sample-header"], [1, "sample-title"], [1, "sample-header-actions"], [1, "all-loaded-badge"], [1, "sample-data-table-wrapper"], [1, "sample-data-table"], [1, "action-col"], ["title", "Load more records", 1, "load-more-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "spinning"], [1, "fa-solid", "fa-plus"], ["title", "Load all records", 1, "load-all-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-check"], ["title", "Open record", 1, "open-record-btn"], [3, "title"], ["title", "Open record", 1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"]], template: function SystemDiagnosticsComponent_Template(rf, ctx) { if (rf & 1) {
4645
+ } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 64, vars: 36, consts: [["perfChart", ""], [1, "system-diagnostics"], [1, "diagnostics-header"], [1, "header-title"], [1, "fa-solid", "fa-stethoscope"], [1, "header-controls"], [1, "auto-refresh-control"], ["type", "checkbox", 3, "ngModelChange", "change", "ngModel"], [1, "refresh-indicator"], [1, "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "overview-cards-container"], [1, "kpi-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "overview-cards"], [1, "overview-cards-mini"], [1, "main-content"], [1, "left-nav"], [1, "nav-section"], [1, "nav-section-title"], [1, "nav-item", 3, "click"], [1, "fa-solid", "fa-cogs"], [1, "nav-badge"], [1, "fa-solid", "fa-copy"], [1, "nav-badge", "nav-badge--warning"], [1, "nav-badge", "nav-badge--success"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-database"], [1, "content-area"], [1, "section-panel"], [1, "section-panel", "perf-panel"], [1, "footer"], [1, "last-updated"], [1, "fa-solid", "fa-clock"], [1, "export-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "fa-solid", "fa-sync-alt", "spinning"], [1, "overview-card"], [1, "card-icon", "card-icon--engines"], [1, "card-content"], [1, "card-value"], [1, "card-label"], [1, "card-subtitle"], [1, "card-icon", "card-icon--memory"], [1, "fa-solid", "fa-microchip"], [1, "card-icon"], ["title", "Registered Engines", 1, "mini-kpi"], [1, "mini-value"], [1, "mini-label"], [1, "mini-divider"], ["title", "Engine Memory", 1, "mini-kpi"], ["title", "Redundant Loads", 1, "mini-kpi"], [1, "panel-header"], [1, "panel-actions"], [1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-sync"], [1, "section-panel-content"], [1, "empty-state"], [1, "engine-grid"], [1, "fa-solid", "fa-inbox"], [1, "empty-hint"], [1, "engine-card", 3, "loaded"], [1, "engine-card"], [1, "engine-header"], [1, "engine-name", 3, "title"], [1, "engine-status"], [1, "engine-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-layer-group"], [1, "engine-actions"], ["title", "Refresh this engine", 1, "engine-action-btn", 3, "click", "disabled"], ["title", "View engine details", 1, "engine-action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-right"], [1, "info-banner"], [1, "fa-solid", "fa-info-circle"], [1, "empty-state", "success-state"], [1, "fa-solid", "fa-check-circle"], [1, "redundant-loads-table-wrapper"], [1, "redundant-loads-table"], [1, "text-right"], [1, "recommendation-banner"], [1, "fa-solid", "fa-lightbulb"], [1, "entity-name"], [1, "engines-cell"], [1, "engine-chips"], [1, "engine-chip"], [1, "text-right", "count-cell"], [1, "count-badge"], [1, "source-toggle"], [1, "source-btn", 3, "click"], [1, "fa-solid", "fa-browser"], [1, "fa-solid", "fa-server"], [1, "action-divider"], [1, "status-indicator", 3, "enabled", "disabled"], [1, "loading-indicator"], [1, "error-banner"], [1, "perf-tabs"], [1, "perf-tab", 3, "click"], [1, "fa-solid", "fa-chart-area"], [1, "fa-solid", "fa-gauge"], [1, "tab-badge", "warning"], [1, "fa-solid", "fa-timeline"], [1, "tab-badge"], [1, "fa-solid", "fa-fingerprint"], [1, "tab-badge", "insight"], [1, "info-banner", "warning-banner"], [1, "perfmon-section"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "status-indicator"], ["title", "Configure via mj.config.cjs telemetry section", 1, "config-note"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "dismiss-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "perfmon-header"], [1, "perfmon-legend"], [1, "legend-item", "runview"], [1, "legend-dot"], [1, "legend-item", "runquery"], [1, "legend-item", "engine"], [1, "legend-item", "ai"], [1, "perfmon-controls"], ["title", "Chart Interaction Mode", 1, "mode-toggle"], ["title", "Pointer mode - click events to view details", 1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-arrow-pointer"], ["title", "Select mode - drag to zoom into a time range", 1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-vector-square"], ["title", "Pan mode - drag to pan the chart", 1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-hand"], [1, "control-divider"], ["title", "Zoom In", 1, "chart-control-btn", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom Out", 1, "chart-control-btn", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset Zoom", 1, "chart-control-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Automatically compress gaps with no activity", 1, "compress-toggle"], [1, "perfmon-chart-container"], [1, "perfmon-y-axis"], [1, "axis-label"], [1, "perfmon-chart"], [1, "perfmon-footer"], [1, "footer-note"], [1, "footer-stats"], [1, "telemetry-summary"], [1, "summary-card"], [1, "summary-value"], [1, "summary-label"], [1, "category-breakdown"], [1, "slow-queries-section"], [1, "success-banner"], [1, "category-grid"], [1, "category-item"], [1, "category-item", 3, "click"], [1, "category-name"], [1, "category-events"], [1, "category-avg"], [1, "fa-solid", "fa-turtle"], [1, "slow-queries-list"], [1, "slow-query-item", "clickable", 3, "cache-hit"], [1, "slow-query-item", "clickable", 3, "click"], [1, "slow-query-main"], [1, "category-chip", "small"], [1, "slow-query-entity"], ["title", "Data served from local cache", 1, "cache-hit-badge", "small"], [1, "slow-query-time"], [1, "slow-query-entities"], [1, "slow-query-pills"], [1, "slow-query-filter"], [1, "slow-query-timestamp"], [1, "fa-solid", "fa-bolt"], [1, "entity-pill", "small"], [1, "entity-pill", "small", "more"], [1, "param-pill", "small", 3, "class", "title"], [1, "param-pill", "small", 3, "title"], [1, "pill-label"], [1, "pill-value"], [1, "filter-bar", "compact"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search events...", 3, "ngModelChange", "ngModel"], [1, "clear-search"], [1, "filter-buttons"], [1, "filter-btn", 3, "click"], [1, "filter-btn", 3, "active"], [1, "timeline-section"], [1, "timeline-container"], [1, "empty-state", "small"], [1, "clear-search", 3, "click"], [1, "timeline-item", "clickable", 3, "class", "cache-hit"], [1, "timeline-item", "clickable", 3, "click"], [1, "timeline-marker"], [1, "marker-bolt"], [1, "marker-dot"], [1, "marker-line"], [1, "timeline-content"], [1, "timeline-header"], [1, "timeline-time"], ["title", "Data served from local cache", 1, "cache-hit-badge"], [1, "timeline-duration", 3, "slow"], [1, "timeline-body"], [1, "timeline-operation"], [1, "timeline-entity"], [1, "timeline-entities"], [1, "timeline-pills"], [1, "timeline-filter"], [1, "timeline-duration"], [1, "entity-pill"], [1, "entity-pill", "more"], [1, "param-pill", 3, "class", "title"], [1, "param-pill", 3, "title"], [1, "fa-solid", "fa-hourglass-start"], ["type", "text", "placeholder", "Search patterns...", 3, "ngModelChange", "ngModel"], [1, "patterns-section"], [1, "patterns-table-wrapper"], [1, "patterns-table", "sortable"], [1, "sortable-header", 3, "click"], [1, "sortable-header", "text-right", 3, "click"], [3, "duplicate-row", "slow-row"], [1, "category-chip"], [1, "operation-cell"], [1, "entity-cell"], [1, "filter-cell", 3, "title"], [1, "count-warning"], [1, "fa-solid", "fa-filter"], [1, "insights-section"], [1, "insights-list"], [1, "insight-card", "expandable", 3, "class", "expanded"], [1, "insight-card", "expandable"], [1, "insight-header", 3, "click"], [1, "insight-title"], [1, "insight-category"], [1, "fa-solid", "expand-icon"], [1, "insight-key-info"], [1, "key-info-item"], [1, "insight-message"], [1, "insight-suggestion"], [1, "insight-details"], [1, "key-label"], [1, "key-value", "entity-name"], [1, "key-value", "filter-code"], [1, "detail-section"], [1, "detail-label"], [1, "params-display"], [1, "param-row"], [1, "related-events"], [1, "related-event"], [1, "param-key"], [1, "param-value"], [1, "event-time"], [1, "event-duration"], [1, "event-entity"], [1, "event-filter"], [1, "fa-solid", "fa-check-circle", 2, "color", "var(--mj-status-success)"], [1, "cache-summary"], [1, "cache-type-breakdown"], [1, "type-grid"], [1, "type-item", 3, "click"], [1, "type-icon"], [1, "type-name"], [1, "type-count"], [1, "type-size"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-code"], [1, "cache-entries-section"], [1, "section-header"], [1, "filter-controls"], [1, "cache-entries-table-wrapper"], [1, "cache-entries-table"], [1, "table-footer"], [1, "cache-type-chip"], [1, "entry-name"], [1, "entry-fingerprint"], ["title", "Invalidate", 1, "icon-btn", 3, "click"], [1, "event-detail-overlay", 3, "click"], [1, "event-detail-panel"], [1, "panel-title"], [1, "close-btn", 3, "click"], [1, "panel-body"], [1, "detail-metrics"], [1, "metric"], [1, "metric-value"], [1, "metric-label"], [1, "detail-content"], [1, "detail-row"], [1, "detail-key"], [1, "detail-val"], [1, "fa-solid", "fa-sliders"], [1, "params-grid"], [1, "param-item"], [1, "detail-actions"], [1, "action-button", 3, "click"], [1, "action-button"], [1, "detail-val", "entity-highlight"], [1, "detail-val", "filter-val"], [1, "param-name"], [1, "param-val"], [1, "pattern-summary"], [1, "pattern-stat"], [1, "stat-val"], [1, "pattern-warning"], [1, "engine-detail-overlay", 3, "click"], [1, "engine-detail-panel"], [1, "panel-header-actions"], ["title", "Refresh engine", 1, "icon-btn", 3, "click", "disabled"], [1, "engine-summary-section"], [1, "summary-stat"], [1, "status-dot"], [1, "config-items-section"], [1, "config-items-list"], [1, "config-item", 3, "expanded"], [1, "config-item"], [1, "config-item-header", 3, "click"], [1, "config-item-info"], [1, "fa-solid", "config-health-icon", 3, "title"], [1, "config-type-chip"], [1, "config-name"], [1, "config-item-stats"], [1, "config-stat"], [1, "config-item-details"], [1, "config-detail-row"], [1, "detail-value"], [1, "config-detail-row", "config-detail-row--error"], [1, "sample-data-section"], [1, "detail-value", "detail-value--error"], [1, "sample-header"], [1, "sample-title"], [1, "sample-header-actions"], [1, "all-loaded-badge"], [1, "sample-data-table-wrapper"], [1, "sample-data-table"], [1, "action-col"], ["title", "Load more records", 1, "load-more-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "spinning"], [1, "fa-solid", "fa-plus"], ["title", "Load all records", 1, "load-all-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-check"], ["title", "Open record", 1, "open-record-btn"], [3, "title"], ["title", "Open record", 1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"]], template: function SystemDiagnosticsComponent_Template(rf, ctx) { if (rf & 1) {
4620
4646
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
4621
4647
  i0.ɵɵelement(3, "i", 4);
4622
4648
  i0.ɵɵelementStart(4, "h2");
@@ -4746,7 +4772,7 @@ let SystemDiagnosticsComponent = class SystemDiagnosticsComponent extends BaseRe
4746
4772
  i0.ɵɵconditional(ctx.eventDetailPanel.isOpen && ctx.eventDetailPanel.event ? 62 : -1);
4747
4773
  i0.ɵɵadvance();
4748
4774
  i0.ɵɵconditional(ctx.engineDetailPanel.isOpen && ctx.engineDetailPanel.engine ? 63 : -1);
4749
- } }, dependencies: [i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DecimalPipe, i3.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 });
4775
+ } }, dependencies: [i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DecimalPipe, i3.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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.perfmon-section[_ngcontent-%COMP%] {\n \n\n --perfmon-bg: var(--mj-bg-surface-card);\n --perfmon-bg-deep: var(--mj-bg-surface-sunken);\n --perfmon-border: var(--mj-border-default);\n --perfmon-border-medium: var(--mj-border-strong);\n --perfmon-border-light: var(--mj-border-strong);\n --perfmon-text-faint: var(--mj-text-disabled);\n --perfmon-text-muted: var(--mj-text-muted);\n --perfmon-text-secondary: var(--mj-text-secondary);\n --perfmon-control-bg: var(--mj-bg-surface-sunken);\n --perfmon-control-bg-hover: var(--mj-bg-surface-hover);\n --perfmon-mode-bg: var(--mj-bg-surface-sunken);\n --perfmon-overlay-light: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n --perfmon-overlay-medium: color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n --perfmon-overlay-strong: color-mix(in srgb, var(--mj-text-primary) 25%, transparent);\n --perfmon-tooltip-bg: var(--mj-bg-overlay);\n\n \n\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-series-runview: #00bcd4;\n --perfmon-series-runquery: #e040fb;\n --perfmon-series-engine: #00ff88;\n --perfmon-series-ai: #ff9800;\n\n background: var(--perfmon-bg);\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 24px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--perfmon-accent);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.perfmon-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.perfmon-legend[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 11px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--perfmon-text-muted);\n}\n\n.legend-dot[_ngcontent-%COMP%] {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n.legend-item.runview[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-runview); }\n.legend-item.runquery[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-runquery); }\n.legend-item.engine[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-engine); }\n.legend-item.ai[_ngcontent-%COMP%] .legend-dot[_ngcontent-%COMP%] { background: var(--perfmon-series-ai); }\n\n.perfmon-chart-container[_ngcontent-%COMP%] {\n display: flex;\n background: var(--perfmon-bg-deep);\n border: 1px solid var(--perfmon-border);\n border-radius: 4px;\n position: relative;\n}\n\n.perfmon-y-axis[_ngcontent-%COMP%] {\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-right: 1px solid var(--perfmon-border);\n}\n\n.perfmon-y-axis[_ngcontent-%COMP%] .axis-label[_ngcontent-%COMP%] {\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n font-size: 10px;\n color: var(--perfmon-text-faint);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] {\n flex: 1;\n height: 300px;\n position: relative;\n overflow: hidden;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.perfmon-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--perfmon-border);\n}\n\n.footer-note[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.footer-note[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.footer-stats[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-accent);\n font-family: monospace;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.grid-line) {\n stroke: var(--perfmon-border);\n stroke-dasharray: 2,2;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.axis-line) {\n stroke: var(--perfmon-border-light);\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.axis-text) {\n fill: var(--perfmon-text-muted);\n font-size: 10px;\n font-family: monospace;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.event-point) {\n cursor: pointer;\n transition: r 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.event-point:hover) {\n r: 6;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip) {\n pointer-events: none;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip-bg) {\n fill: var(--perfmon-tooltip-bg);\n rx: 4;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.tooltip-text) {\n fill: var(--mj-bg-surface);\n font-size: 11px;\n font-family: monospace;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.area-fill) {\n opacity: 0.15;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.line-path) {\n fill: none;\n stroke-width: 1.5;\n opacity: 0.8;\n}\n\n\n\n.perfmon-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding: 8px 12px;\n background: var(--perfmon-overlay-light);\n border-radius: 6px;\n border: 1px solid var(--perfmon-border);\n}\n\n.chart-control-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--perfmon-control-bg);\n color: var(--perfmon-text-muted);\n border: 1px solid var(--perfmon-border-medium);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.chart-control-btn[_ngcontent-%COMP%]:hover {\n background: var(--perfmon-control-bg-hover);\n color: var(--perfmon-accent);\n border-color: var(--perfmon-accent);\n}\n\n.chart-control-btn[_ngcontent-%COMP%]:active {\n transform: scale(0.95);\n}\n\n.chart-control-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.mode-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--perfmon-mode-bg);\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid var(--perfmon-border-medium);\n}\n\n.mode-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 28px;\n padding: 0;\n background: transparent;\n color: var(--perfmon-text-faint);\n border: none;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.mode-btn[_ngcontent-%COMP%]:first-child {\n border-right: 1px solid var(--perfmon-border);\n}\n\n.mode-btn[_ngcontent-%COMP%]:hover {\n color: var(--perfmon-text-secondary);\n background: var(--perfmon-overlay-light);\n}\n\n.mode-btn.active[_ngcontent-%COMP%] {\n background: var(--perfmon-accent);\n color: var(--perfmon-mode-bg);\n}\n\n.mode-btn.active[_ngcontent-%COMP%]:hover {\n background: var(--perfmon-accent-dim);\n}\n\n.mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.control-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--perfmon-border-medium);\n margin: 0 4px;\n}\n\n.compress-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--perfmon-text-muted);\n user-select: none;\n}\n\n.compress-toggle[_ngcontent-%COMP%]:hover {\n color: var(--perfmon-accent);\n}\n\n.compress-toggle[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n accent-color: var(--perfmon-accent);\n cursor: pointer;\n}\n\n.compress-toggle[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.zoom-level[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n font-family: monospace;\n margin-left: 8px;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-indicator) {\n cursor: pointer;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-indicator:hover) {\n opacity: 0.8;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-text) {\n fill: var(--perfmon-text-faint);\n font-size: 10px;\n font-family: monospace;\n pointer-events: none;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-expand-btn) {\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.gap-expand-btn:hover) {\n opacity: 1;\n}\n\n\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.selection-overlay) {\n pointer-events: all;\n}\n\n.perfmon-chart[_ngcontent-%COMP%] [_ngcontent-%COMP%]:deep(.selection-rect) {\n pointer-events: none;\n}\n\n\n\n.zoom-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: var(--perfmon-text-muted);\n font-family: monospace;\n}\n\n.zoom-info[_ngcontent-%COMP%] .zoom-level[_ngcontent-%COMP%] {\n color: var(--perfmon-accent);\n}\n\n.zoom-info[_ngcontent-%COMP%] .time-range[_ngcontent-%COMP%] {\n color: var(--perfmon-text-faint);\n}\n\n\n\n@media (max-width: 1024px) {\n .main-content[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .left-nav[_ngcontent-%COMP%] {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n padding: 12px;\n }\n\n .nav-section[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n padding: 0;\n }\n\n .nav-section-title[_ngcontent-%COMP%] {\n display: none;\n }\n\n .nav-item[_ngcontent-%COMP%] {\n white-space: nowrap;\n padding: 10px 16px;\n }\n}\n\n@media (max-width: 768px) {\n .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.config-health-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n flex-shrink: 0;\n}\n.config-health-icon.health-success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.config-health-icon.health-failure[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.config-detail-row--error[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n border-radius: 4px;\n padding: 4px 8px;\n}\n.detail-value--error[_ngcontent-%COMP%] {\n color: var(--mj-status-error-text) !important;\n background: none !important;\n font-family: inherit !important;\n word-break: break-word;\n}\n\n\n\n.sample-data-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.sample-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.sample-title[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.sample-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.load-more-btn[_ngcontent-%COMP%], \n.load-all-btn[_ngcontent-%COMP%] {\n background: none;\n border: 1px solid var(--mj-color-indigo-500);\n color: var(--mj-color-indigo-500);\n font-size: 11px;\n padding: 4px 10px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.load-more-btn[_ngcontent-%COMP%]:hover:not(:disabled), \n.load-all-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.load-more-btn[_ngcontent-%COMP%]:disabled, \n.load-all-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.all-loaded-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--mj-status-success);\n padding: 4px 10px;\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n border-radius: 4px;\n}\n\n.action-col[_ngcontent-%COMP%] {\n width: 36px;\n min-width: 36px;\n max-width: 36px;\n padding: 4px !important;\n text-align: center;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: none;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-color-indigo-500);\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n transition: all 0.2s ease;\n}\n\n.open-record-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.sample-data-table-wrapper[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.sample-data-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.sample-data-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 8px 10px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.sample-data-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 8px 10px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sample-data-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] {\n border-bottom: none;\n}\n\n.sample-data-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.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
4776
  };
4751
4777
  SystemDiagnosticsComponent = __decorate([
4752
4778
  RegisterClass(BaseResourceComponent, 'SystemDiagnosticsResource')
@@ -5609,7 +5635,7 @@ export { SystemDiagnosticsComponent };
5609
5635
  </div>
5610
5636
  } @else {
5611
5637
  <div class="empty-state">
5612
- <i class="fa-solid fa-check-circle" style="color: #4caf50;"></i>
5638
+ <i class="fa-solid fa-check-circle" style="color: var(--mj-status-success);"></i>
5613
5639
  <p>No optimization insights</p>
5614
5640
  <span class="empty-hint">Insights will appear when potential optimizations are detected</span>
5615
5641
  </div>
@@ -5958,6 +5984,12 @@ export { SystemDiagnosticsComponent };
5958
5984
  <div class="config-item" [class.expanded]="item.expanded">
5959
5985
  <div class="config-item-header" (click)="toggleConfigItemExpanded(item)">
5960
5986
  <div class="config-item-info">
5987
+ <i class="fa-solid config-health-icon"
5988
+ [class.fa-circle-check]="item.loadedSuccessfully"
5989
+ [class.fa-circle-xmark]="!item.loadedSuccessfully"
5990
+ [class.health-success]="item.loadedSuccessfully"
5991
+ [class.health-failure]="!item.loadedSuccessfully"
5992
+ [title]="item.loadedSuccessfully ? 'Loaded successfully' : ('Load failed: ' + (item.errorMessage || 'unknown'))"></i>
5961
5993
  <span class="config-type-chip" [class]="'type-' + item.type">{{ item.type }}</span>
5962
5994
  <span class="config-name">{{ item.entityName || item.datasetName || item.propertyName }}</span>
5963
5995
  </div>
@@ -5986,7 +6018,13 @@ export { SystemDiagnosticsComponent };
5986
6018
  <code class="detail-value">{{ item.orderBy }}</code>
5987
6019
  </div>
5988
6020
  }
5989
-
6021
+ @if (!item.loadedSuccessfully && item.errorMessage) {
6022
+ <div class="config-detail-row config-detail-row--error">
6023
+ <span class="detail-label">Error:</span>
6024
+ <span class="detail-value detail-value--error">{{ item.errorMessage }}</span>
6025
+ </div>
6026
+ }
6027
+
5990
6028
  <!-- Data Table with Paging -->
5991
6029
  @if (item.displayedData.length > 0) {
5992
6030
  <div class="sample-data-section">
@@ -6059,10 +6097,10 @@ export { SystemDiagnosticsComponent };
6059
6097
  </div>
6060
6098
  </div>
6061
6099
  }
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"] }]
6100
+ `, 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 * ====================\n * Chrome (background, borders, text, controls) is mapped to MJ semantic tokens\n * so the panel adapts to the active theme and is white-labelable. Series colors\n * (cyan / magenta / neon-green / orange) are categorical chart data \u2014 they must\n * stay distinct across themes and are exempt by the same rule that exempts\n * other chart-data palettes.\n *\n * The accent (--perfmon-accent) is intentionally kept as the same neon green as\n * the engine series so the \"live signal\" indicators (header icon, footer count,\n * chart strokes) read as part of the chart palette rather than the app's brand.\n *\n * Overlays are derived via color-mix() from --mj-text-primary so they invert\n * automatically: dark tints over light surfaces in light mode, light tints over\n * dark surfaces in dark mode.\n */\n.perfmon-section {\n /* Chrome \u2014 adapts to theme */\n --perfmon-bg: var(--mj-bg-surface-card);\n --perfmon-bg-deep: var(--mj-bg-surface-sunken);\n --perfmon-border: var(--mj-border-default);\n --perfmon-border-medium: var(--mj-border-strong);\n --perfmon-border-light: var(--mj-border-strong);\n --perfmon-text-faint: var(--mj-text-disabled);\n --perfmon-text-muted: var(--mj-text-muted);\n --perfmon-text-secondary: var(--mj-text-secondary);\n --perfmon-control-bg: var(--mj-bg-surface-sunken);\n --perfmon-control-bg-hover: var(--mj-bg-surface-hover);\n --perfmon-mode-bg: var(--mj-bg-surface-sunken);\n --perfmon-overlay-light: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n --perfmon-overlay-medium: color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n --perfmon-overlay-strong: color-mix(in srgb, var(--mj-text-primary) 25%, transparent);\n --perfmon-tooltip-bg: var(--mj-bg-overlay);\n\n /* Categorical series colors and live-signal accent \u2014 exempt */\n --perfmon-accent: #00ff88;\n --perfmon-accent-dim: #00cc6a;\n --perfmon-series-runview: #00bcd4;\n --perfmon-series-runquery: #e040fb;\n --perfmon-series-engine: #00ff88;\n --perfmon-series-ai: #ff9800;\n\n background: var(--perfmon-bg);\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 24px;\n}\n\n.perfmon-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.perfmon-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--perfmon-accent);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.perfmon-header h4 i {\n color: var(--perfmon-accent);\n}\n\n.perfmon-legend {\n display: flex;\n gap: 16px;\n font-size: 11px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--perfmon-text-muted);\n}\n\n.legend-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n.legend-item.runview .legend-dot { background: var(--perfmon-series-runview); }\n.legend-item.runquery .legend-dot { background: var(--perfmon-series-runquery); }\n.legend-item.engine .legend-dot { background: var(--perfmon-series-engine); }\n.legend-item.ai .legend-dot { background: var(--perfmon-series-ai); }\n\n.perfmon-chart-container {\n display: flex;\n background: var(--perfmon-bg-deep);\n border: 1px solid var(--perfmon-border);\n border-radius: 4px;\n position: relative;\n}\n\n.perfmon-y-axis {\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-right: 1px solid var(--perfmon-border);\n}\n\n.perfmon-y-axis .axis-label {\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n font-size: 10px;\n color: var(--perfmon-text-faint);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.perfmon-chart {\n flex: 1;\n height: 300px;\n position: relative;\n overflow: hidden;\n}\n\n.perfmon-chart svg {\n width: 100%;\n height: 100%;\n}\n\n.perfmon-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--perfmon-border);\n}\n\n.footer-note {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.footer-note i {\n color: var(--perfmon-accent);\n}\n\n.footer-stats {\n font-size: 11px;\n color: var(--perfmon-accent);\n font-family: monospace;\n}\n\n/* D3 Chart Elements */\n.perfmon-chart :deep(.grid-line) {\n stroke: var(--perfmon-border);\n stroke-dasharray: 2,2;\n}\n\n.perfmon-chart :deep(.axis-line) {\n stroke: var(--perfmon-border-light);\n}\n\n.perfmon-chart :deep(.axis-text) {\n fill: var(--perfmon-text-muted);\n font-size: 10px;\n font-family: monospace;\n}\n\n.perfmon-chart :deep(.event-point) {\n cursor: pointer;\n transition: r 0.15s ease;\n}\n\n.perfmon-chart :deep(.event-point:hover) {\n r: 6;\n}\n\n.perfmon-chart :deep(.tooltip) {\n pointer-events: none;\n}\n\n.perfmon-chart :deep(.tooltip-bg) {\n fill: var(--perfmon-tooltip-bg);\n rx: 4;\n}\n\n.perfmon-chart :deep(.tooltip-text) {\n fill: var(--mj-bg-surface);\n font-size: 11px;\n font-family: monospace;\n}\n\n.perfmon-chart :deep(.area-fill) {\n opacity: 0.15;\n}\n\n.perfmon-chart :deep(.line-path) {\n fill: none;\n stroke-width: 1.5;\n opacity: 0.8;\n}\n\n/* PerfMon Chart Controls */\n.perfmon-controls {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding: 8px 12px;\n background: var(--perfmon-overlay-light);\n border-radius: 6px;\n border: 1px solid var(--perfmon-border);\n}\n\n.chart-control-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--perfmon-control-bg);\n color: var(--perfmon-text-muted);\n border: 1px solid var(--perfmon-border-medium);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.chart-control-btn:hover {\n background: var(--perfmon-control-bg-hover);\n color: var(--perfmon-accent);\n border-color: var(--perfmon-accent);\n}\n\n.chart-control-btn:active {\n transform: scale(0.95);\n}\n\n.chart-control-btn i {\n font-size: 14px;\n}\n\n/* Mode Toggle Buttons */\n.mode-toggle {\n display: flex;\n background: var(--perfmon-mode-bg);\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid var(--perfmon-border-medium);\n}\n\n.mode-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 28px;\n padding: 0;\n background: transparent;\n color: var(--perfmon-text-faint);\n border: none;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.mode-btn:first-child {\n border-right: 1px solid var(--perfmon-border);\n}\n\n.mode-btn:hover {\n color: var(--perfmon-text-secondary);\n background: var(--perfmon-overlay-light);\n}\n\n.mode-btn.active {\n background: var(--perfmon-accent);\n color: var(--perfmon-mode-bg);\n}\n\n.mode-btn.active:hover {\n background: var(--perfmon-accent-dim);\n}\n\n.mode-btn i {\n font-size: 12px;\n}\n\n.control-divider {\n width: 1px;\n height: 24px;\n background: var(--perfmon-border-medium);\n margin: 0 4px;\n}\n\n.compress-toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--perfmon-text-muted);\n user-select: none;\n}\n\n.compress-toggle:hover {\n color: var(--perfmon-accent);\n}\n\n.compress-toggle input[type=\"checkbox\"] {\n width: 14px;\n height: 14px;\n accent-color: var(--perfmon-accent);\n cursor: pointer;\n}\n\n.compress-toggle span {\n white-space: nowrap;\n}\n\n.zoom-level {\n font-size: 11px;\n color: var(--perfmon-text-faint);\n font-family: monospace;\n margin-left: 8px;\n}\n\n/* Gap indicators in chart */\n.perfmon-chart :deep(.gap-indicator) {\n cursor: pointer;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart :deep(.gap-indicator:hover) {\n opacity: 0.8;\n}\n\n.perfmon-chart :deep(.gap-text) {\n fill: var(--perfmon-text-faint);\n font-size: 10px;\n font-family: monospace;\n pointer-events: none;\n}\n\n.perfmon-chart :deep(.gap-expand-btn) {\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.perfmon-chart :deep(.gap-expand-btn:hover) {\n opacity: 1;\n}\n\n/* Selection brush overlay */\n.perfmon-chart :deep(.selection-overlay) {\n pointer-events: all;\n}\n\n.perfmon-chart :deep(.selection-rect) {\n pointer-events: none;\n}\n\n/* Zoom info display */\n.zoom-info {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: var(--perfmon-text-muted);\n font-family: monospace;\n}\n\n.zoom-info .zoom-level {\n color: var(--perfmon-accent);\n}\n\n.zoom-info .time-range {\n color: var(--perfmon-text-faint);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n .main-content {\n flex-direction: column;\n }\n\n .left-nav {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n padding: 12px;\n }\n\n .nav-section {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n padding: 0;\n }\n\n .nav-section-title {\n display: none;\n }\n\n .nav-item {\n white-space: nowrap;\n padding: 10px 16px;\n }\n}\n\n@media (max-width: 768px) {\n .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/* Health status indicators for config items */\n.config-health-icon {\n font-size: 12px;\n flex-shrink: 0;\n}\n.config-health-icon.health-success {\n color: var(--mj-status-success);\n}\n.config-health-icon.health-failure {\n color: var(--mj-status-error);\n}\n.config-detail-row--error {\n background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n border-radius: 4px;\n padding: 4px 8px;\n}\n.detail-value--error {\n color: var(--mj-status-error-text) !important;\n background: none !important;\n font-family: inherit !important;\n word-break: break-word;\n}\n\n/* Sample Data Section */\n.sample-data-section {\n margin-top: 16px;\n}\n\n.sample-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.sample-title {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.sample-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.load-more-btn,\n.load-all-btn {\n background: none;\n border: 1px solid var(--mj-color-indigo-500);\n color: var(--mj-color-indigo-500);\n font-size: 11px;\n padding: 4px 10px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.load-more-btn:hover:not(:disabled),\n.load-all-btn:hover:not(:disabled) {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.load-more-btn:disabled,\n.load-all-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.all-loaded-badge {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--mj-status-success);\n padding: 4px 10px;\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n border-radius: 4px;\n}\n\n.action-col {\n width: 36px;\n min-width: 36px;\n max-width: 36px;\n padding: 4px !important;\n text-align: center;\n}\n\n.open-record-btn {\n width: 24px;\n height: 24px;\n border: none;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-color-indigo-500);\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n transition: all 0.2s ease;\n}\n\n.open-record-btn:hover {\n background: var(--mj-color-indigo-500);\n color: white;\n}\n\n.sample-data-table-wrapper {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.sample-data-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.sample-data-table th {\n background: var(--mj-bg-surface-sunken);\n padding: 8px 10px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n}\n\n.sample-data-table td {\n padding: 8px 10px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sample-data-table tbody tr:last-child td {\n border-bottom: none;\n}\n\n.sample-data-table tbody tr:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n/* 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
6101
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.ActivatedRoute }], { perfChartRef: [{
6064
6102
  type: ViewChild,
6065
6103
  args: ['perfChart', { static: false }]
6066
6104
  }] }); })();
6067
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemDiagnosticsComponent, { className: "SystemDiagnosticsComponent", filePath: "src/SystemDiagnostics/system-diagnostics.component.ts", lineNumber: 1478 }); })();
6105
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemDiagnosticsComponent, { className: "SystemDiagnosticsComponent", filePath: "src/SystemDiagnostics/system-diagnostics.component.ts", lineNumber: 1494 }); })();
6068
6106
  //# sourceMappingURL=system-diagnostics.component.js.map