diff --git a/App/app/(portal)/reports/accounting-codes/[id]/page.tsx b/App/app/(portal)/reports/accounting-codes/[id]/page.tsx
index 1a11a21..b8033a4 100644
--- a/App/app/(portal)/reports/accounting-codes/[id]/page.tsx
+++ b/App/app/(portal)/reports/accounting-codes/[id]/page.tsx
@@ -19,7 +19,8 @@ import {
   WEEK_LABELS,
 } from "@/lib/reports";
 import { ReportsToolbar } from "@/components/reports/reports-toolbar";
-import { TrendChart, BreakdownChart, SERIES_COLORS } from "@/components/reports/charts";
+import { TrendChart, BreakdownChart } from "@/components/reports/charts";
+import { SERIES_COLORS } from "@/lib/report-colors";
 import { Kpi, KpiStrip } from "@/components/reports/kpi";
 import { ReportBreadcrumb, ReportTitle, SegLink } from "@/components/reports/report-header";
 
diff --git a/App/app/(portal)/reports/accounting-codes/page.tsx b/App/app/(portal)/reports/accounting-codes/page.tsx
index c48f9ec..d00d640 100644
--- a/App/app/(portal)/reports/accounting-codes/page.tsx
+++ b/App/app/(portal)/reports/accounting-codes/page.tsx
@@ -25,7 +25,8 @@ import {
   type NodeSpend,
 } from "@/lib/reports";
 import { ReportsToolbar } from "@/components/reports/reports-toolbar";
-import { ComparisonChart, Sparkline, SERIES_COLORS, type Series } from "@/components/reports/charts";
+import { ComparisonChart, Sparkline, type Series } from "@/components/reports/charts";
+import { SERIES_COLORS } from "@/lib/report-colors";
 import { Kpi, KpiStrip } from "@/components/reports/kpi";
 import { ReportBreadcrumb, ReportTitle, SelectCheckbox, CompareBar } from "@/components/reports/report-header";
 
diff --git a/App/app/(portal)/reports/cost-centres/[id]/page.tsx b/App/app/(portal)/reports/cost-centres/[id]/page.tsx
index ef024d6..bc7b905 100644
--- a/App/app/(portal)/reports/cost-centres/[id]/page.tsx
+++ b/App/app/(portal)/reports/cost-centres/[id]/page.tsx
@@ -19,7 +19,8 @@ import {
   type Tier,
 } from "@/lib/reports";
 import { ReportsToolbar } from "@/components/reports/reports-toolbar";
-import { TrendChart, BreakdownChart, SERIES_COLORS } from "@/components/reports/charts";
+import { TrendChart, BreakdownChart } from "@/components/reports/charts";
+import { SERIES_COLORS } from "@/lib/report-colors";
 import { Kpi, KpiStrip } from "@/components/reports/kpi";
 import { ReportBreadcrumb, ReportTitle, SegLink } from "@/components/reports/report-header";
 
diff --git a/App/app/(portal)/reports/cost-centres/page.tsx b/App/app/(portal)/reports/cost-centres/page.tsx
index 98ea42f..bbaab50 100644
--- a/App/app/(portal)/reports/cost-centres/page.tsx
+++ b/App/app/(portal)/reports/cost-centres/page.tsx
@@ -23,7 +23,8 @@ import {
   type CostCentreSpend,
 } from "@/lib/reports";
 import { ReportsToolbar } from "@/components/reports/reports-toolbar";
-import { ComparisonChart, Sparkline, SERIES_COLORS, type Series } from "@/components/reports/charts";
+import { ComparisonChart, Sparkline, type Series } from "@/components/reports/charts";
+import { SERIES_COLORS } from "@/lib/report-colors";
 import { Kpi, KpiStrip } from "@/components/reports/kpi";
 import { ReportBreadcrumb, ReportTitle, SelectCheckbox, CompareBar } from "@/components/reports/report-header";
 
diff --git a/App/components/reports/charts.tsx b/App/components/reports/charts.tsx
index 7dfd4e6..755e432 100644
--- a/App/components/reports/charts.tsx
+++ b/App/components/reports/charts.tsx
@@ -13,8 +13,11 @@ import {
   CartesianGrid,
   Cell,
 } from "recharts";
+import { SERIES_COLORS } from "@/lib/report-colors";
 
-export const SERIES_COLORS = ["#2563eb", "#16a34a", "#9333ea", "#ea580c", "#0891b2", "#dc2626", "#ca8a04", "#4f46e5", "#0d9488", "#db2777"];
+// Re-exported for back-compat; new server-component code should import the
+// palette from "@/lib/report-colors" directly (see that file for why).
+export { SERIES_COLORS };
 
 /** Compact Indian-currency formatter for axis ticks / tooltips (₹..K / ₹..L / ₹..Cr). */
 export function formatINRShort(n: number): string {
diff --git a/App/lib/report-colors.ts b/App/lib/report-colors.ts
new file mode 100644
index 0000000..6e4b205
--- /dev/null
+++ b/App/lib/report-colors.ts
@@ -0,0 +1,21 @@
+// Shared categorical palette for the Reports charts + table swatches.
+//
+// This is a plain, dependency-free module (NO "use client", no server-only
+// imports) so it can be imported by BOTH the server-component report pages and
+// the client chart components and resolve to the real array in each. It must NOT
+// live in a "use client" module: a plain value imported from a client module
+// into a server component becomes a client-reference proxy (not the array), so
+// `SERIES_COLORS[i]` would silently be `undefined` and every series would fall
+// back to recharts' default colour.
+export const SERIES_COLORS = [
+  "#2563eb",
+  "#16a34a",
+  "#9333ea",
+  "#ea580c",
+  "#0891b2",
+  "#dc2626",
+  "#ca8a04",
+  "#4f46e5",
+  "#0d9488",
+  "#db2777",
+];