From 8f38dcd32bb7732ab8518a20ac8a0446047f0ab1 Mon Sep 17 00:00:00 2001
From: ZaimMarzuki <zaim.marzuki@gmail.com>
Date: Sun, 30 Aug 2026 19:09:39 +0700
Subject: [PATCH] fix(dashboard): use opaque background and readable text color
 on cost chart tooltips (#11960)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix de contraste no tooltip do gráfico de custos (fundo opaco + cor de texto legível). Mudança isolada de CSS/classe, validada no worktree combinado. Obrigado!
---
 .../dashboard/costs/components/CostCharts.tsx | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx b/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx
index dec6c2ded4..e3bd12c58b 100644
--- a/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx
+++ b/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx
@@ -88,9 +88,11 @@ export function ProviderSpendCard({
               <Tooltip
                 formatter={(value: number) => currencyFormatter.format(value || 0)}
                 contentStyle={{
-                  background: "var(--surface)",
-                  border: "1px solid rgba(255,255,255,0.1)",
-                  borderRadius: "12px",
+                  backgroundColor: "var(--color-surface)",
+                  borderColor: "var(--color-border)",
+                  borderRadius: 12,
+                  color: "var(--color-text-main)",
+                  boxShadow: "var(--shadow-soft)",
                 }}
               />
             </PieChart>
@@ -158,9 +160,11 @@ export function CostTrendCard({
             <Tooltip
               formatter={(value: number) => currencyFormatter.format(value || 0)}
               contentStyle={{
-                background: "var(--surface)",
-                border: "1px solid rgba(255,255,255,0.1)",
-                borderRadius: "12px",
+                backgroundColor: "var(--color-surface)",
+                borderColor: "var(--color-border)",
+                borderRadius: 12,
+                color: "var(--color-text-main)",
+                boxShadow: "var(--shadow-soft)",
               }}
             />
             <Line
@@ -224,9 +228,11 @@ export function WeeklyPatternCard({
                 `${new Intl.NumberFormat(locale).format(value || 0)} ${tokensLabel}`
               }
               contentStyle={{
-                background: "var(--surface)",
-                border: "1px solid rgba(255,255,255,0.1)",
-                borderRadius: "12px",
+                backgroundColor: "var(--color-surface)",
+                borderColor: "var(--color-border)",
+                borderRadius: 12,
+                color: "var(--color-text-main)",
+                boxShadow: "var(--shadow-soft)",
               }}
             />
             <Bar dataKey="tokens" fill="#8b5cf6" radius={[4, 4, 0, 0]} />