some more relevant reports

Author: omerholtzman

projects/budgetkey/src/app/subject-dashboards/subject-dashboard-page/subject-dashboard-page.component.less

@@ -144,6 +144,15 @@ div.md {
             border-radius: 8px;
             box-shadow: 0 1px 2px 0 rgba(189, 189, 189, 0.6);
             padding: 20px;
+            // Mermaid's layout math (text-anchor placement, bounding-box sizing)
+            // assumes an LTR context. The page's `dir="auto"` container resolves
+            // to rtl for Hebrew content, and that inherits into the diagram's
+            // <text> elements, flipping which edge text-anchor="start"/"end"
+            // anchor to — e.g. pie chart legends end up right-anchored and
+            // growing left into the pie instead of right, away from it. Forcing
+            // ltr here restores the layout Mermaid actually computed; Hebrew
+            // runs inside still bidi-reorder correctly for reading.
+            direction: ltr;
 
             svg { max-width: 100%; }
         }

projects/budgetkey/src/app/subject-dashboards/subject-dashboard-page/subject-dashboard-page.component.ts

@@ -45,6 +45,23 @@ function ensureMermaidInitialized(): void {
       pieOpacity: '0.9',
       pieOuterStrokeColor: '#FFFFFF',
       pieSectionTextColor: '#332A2A',
+      // xychart-beta ignores primaryColor/mainBkg for its bars and background —
+      // it only reads themeVariables.xyChart. Without this override it falls
+      // back to mermaid's own pastel defaults (cream/salmon bars on a light-gray
+      // plot area), which read as washed-out against the white card background.
+      xyChart: {
+        backgroundColor: '#FFFFFF',
+        titleColor: '#332A2A',
+        xAxisLabelColor: '#332A2A',
+        xAxisTitleColor: '#332A2A',
+        xAxisTickColor: '#665859',
+        xAxisLineColor: '#665859',
+        yAxisLabelColor: '#332A2A',
+        yAxisTitleColor: '#332A2A',
+        yAxisTickColor: '#665859',
+        yAxisLineColor: '#665859',
+        plotColorPalette: '#FF5A5F,#6D82B4,#3C4B7C,#9CD3FE,#495A8F,#CCC3C3',
+      },
     },
   });
   mermaidInitialized = true;