Fix chart label visibility and improve budget cell edit UX

- Change chart amount labels from white to black with white stroke outline
  for better contrast on all bar colors (fixes #8)
- Improve budget table editable cells: add hover background, pointer cursor,
  tooltip hint, and larger click target for clearer affordance (fixes #9)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/budget/BudgetTable.tsx

@@ -283,7 +283,8 @@ export default function BudgetTable({ rows, onUpdatePlanned, onSplitEvenly }: Bu
             <div className="flex items-center justify-end gap-1">
               <button
                 onClick={() => handleStartEditAnnual(row.category_id, row.annual)}
-                className="font-medium text-xs hover:text-[var(--primary)] transition-colors cursor-text"
+                title={t("budget.clickToEdit")}
+                className="font-medium text-xs hover:text-[var(--primary)] hover:bg-[var(--muted)]/40 transition-colors cursor-pointer rounded px-1 py-0.5"
               >
                 {formatSigned(row.annual * sign)}
               </button>
@@ -315,7 +316,8 @@ export default function BudgetTable({ rows, onUpdatePlanned, onSplitEvenly }: Bu
             ) : (
               <button
                 onClick={() => handleStartEdit(row.category_id, mIdx, val)}
-                className="w-full text-right hover:text-[var(--primary)] transition-colors cursor-text text-xs"
+                title={t("budget.clickToEdit")}
+                className="w-full text-right hover:text-[var(--primary)] hover:bg-[var(--muted)]/40 transition-colors cursor-pointer text-xs rounded px-1 py-0.5"
               >
                 {formatSigned(val * sign)}
               </button>

src/components/reports/CategoryOverTimeChart.tsx

@@ -152,7 +152,7 @@ export default function CategoryOverTimeChart({
                     dataKey={c.name}
                     position="center"
                     formatter={(v: unknown) => Number(v) ? cadFormatter(Number(v)) : ""}
-                    style={{ fill: "#fff", fontSize: 10, fontWeight: 600, textShadow: "0 1px 2px rgba(0,0,0,0.5)" }}
+                    style={{ fill: "#000", fontSize: 10, fontWeight: 600, paintOrder: "stroke", stroke: "rgba(255,255,255,0.7)", strokeWidth: 3, strokeLinejoin: "round" }}
                   />
                 )}
               </Bar>

src/i18n/locales/en.json

@@ -314,6 +314,7 @@
     "annual": "Annual",
     "splitEvenly": "Split evenly across 12 months",
     "annualMismatch": "Annual total does not match the sum of monthly amounts",
+    "clickToEdit": "Click to edit",
     "applyToMonth": "Apply to month",
     "allMonths": "All 12 months",
     "expenses": "Expenses",

src/i18n/locales/fr.json

@@ -314,6 +314,7 @@
     "annual": "Annuel",
     "splitEvenly": "Répartir également sur 12 mois",
     "annualMismatch": "Le total annuel ne correspond pas à la somme des montants mensuels",
+    "clickToEdit": "Cliquer pour modifier",
     "applyToMonth": "Appliquer au mois",
     "allMonths": "Les 12 mois",
     "expenses": "Dépenses",