feat: Sprint 2 — data storytelling and visual richness

Timeline project color system:
- 16-color deterministic palette (same project = same color always)
- Resource panel: allocation blocks colored by project instead of uniform green
- Project panel: colored left border + dot on project headers
- ProjectColorLegend: floating strip showing color-to-project mapping
- Utilization intensity tint: subtle background gradient on resource rows

Table visual enhancements:
- Resources: inline 3px utilization bar below chargeability percentage
- Resources: 32px avatar circles with initials + role-derived colors
- Projects: animated budget bars, styled resource count badges
- Allocations: 3px left border colored by status (green/amber/blue/gray/red)

KPI progress rings:
- Budget utilization: ProgressRing wrapping AnimatedNumber on dashboard
- Chargeability report: ring on average chargeability summary card
- Resource detail: rings on chargeability target + actual metrics
- Vacation balance: ring showing remaining days with color thresholds
- Demand widget: mini rings on FTE fill rate per project
- Resource detail: FadeIn on SkillRadarChart

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/components/vacations/BalanceCard.tsx

@@ -2,6 +2,7 @@
 
 import { trpc } from "~/lib/trpc/client.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ProgressRing } from "~/components/ui/ProgressRing.js";
 
 interface BalanceCardProps {
   resourceId: string;
@@ -46,20 +47,34 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
     );
   }
 
+  const ringColor = pct > 90
+    ? "var(--color-red-500, #ef4444)"
+    : pct >= 70
+      ? "var(--color-amber-500, #f59e0b)"
+      : "var(--color-emerald-500, #10b981)";
+
   return (
     <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 space-y-3">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
-          Vacation Balance {year}
-        </h3>
+        <div className="flex items-center gap-3">
+          <ProgressRing value={pct} size={52} strokeWidth={4} color={ringColor}>
+            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{balance.remainingDays}d</span>
+          </ProgressRing>
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+              Vacation Balance {year}
+            </h3>
+            <p className="text-xs text-gray-400 dark:text-gray-500">{balance.usedDays} of {balance.entitledDays} days used</p>
+          </div>
+        </div>
         {balance.carryoverDays > 0 && (
           <span className="text-xs text-gray-400 dark:text-gray-500 inline-flex items-center">+{balance.carryoverDays}d carried over<InfoTooltip content="Unused days from the previous year. Automatically calculated on first access." /></span>
         )}
       </div>
 
       <div className="grid grid-cols-4 gap-3">
-        <Stat label="Entitled" value={balance.entitledDays} color="text-gray-900" tooltip="Total vacation days granted for this year, including carryover from previous year." />
-        <Stat label="Used" value={balance.usedDays} color="text-gray-600" tooltip="Days already consumed by approved vacations that have passed." />
+        <Stat label="Entitled" value={balance.entitledDays} color="text-gray-900 dark:text-gray-100" tooltip="Total vacation days granted for this year, including carryover from previous year." />
+        <Stat label="Used" value={balance.usedDays} color="text-gray-600 dark:text-gray-400" tooltip="Days already consumed by approved vacations that have passed." />
         <Stat label="Pending" value={balance.pendingDays} color="text-amber-600" tooltip="Days reserved by approved future vacations not yet started." />
         <Stat label="Remaining" value={balance.remainingDays} color={balance.remainingDays < 5 ? "text-red-600" : "text-emerald-600"} tooltip="Entitled - Used - Pending. Red if fewer than 5 days remain." />
       </div>