Add color-coded backgrounds to DecisionCard

Per dashboard.md spec requirements:
- RED background and text for REST decisions
- YELLOW background and text for GENTLE/LIGHT/REDUCED decisions
- GREEN background and text for TRAIN decisions

Added 8 new tests for color-coded backgrounds (19 total).
Updated IMPLEMENTATION_PLAN.md to mark spec gap as complete.

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

src/components/dashboard/decision-card.test.tsx

@@ -122,6 +122,112 @@ describe("DecisionCard", () => {
     });
   });
 
+  describe("color-coded backgrounds", () => {
+    it("renders REST with red background", () => {
+      const decision: Decision = {
+        status: "REST",
+        reason: "Recovery day",
+        icon: "🛌",
+      };
+
+      const { container } = render(<DecisionCard decision={decision} />);
+
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass("bg-red-100", "border-red-300");
+    });
+
+    it("renders GENTLE with yellow background", () => {
+      const decision: Decision = {
+        status: "GENTLE",
+        reason: "Light movement",
+        icon: "🧘",
+      };
+
+      const { container } = render(<DecisionCard decision={decision} />);
+
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass("bg-yellow-100", "border-yellow-300");
+    });
+
+    it("renders LIGHT with yellow background", () => {
+      const decision: Decision = {
+        status: "LIGHT",
+        reason: "Moderate intensity",
+        icon: "🚶",
+      };
+
+      const { container } = render(<DecisionCard decision={decision} />);
+
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass("bg-yellow-100", "border-yellow-300");
+    });
+
+    it("renders REDUCED with yellow background", () => {
+      const decision: Decision = {
+        status: "REDUCED",
+        reason: "Lower intensity",
+        icon: "⬇️",
+      };
+
+      const { container } = render(<DecisionCard decision={decision} />);
+
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass("bg-yellow-100", "border-yellow-300");
+    });
+
+    it("renders TRAIN with green background", () => {
+      const decision: Decision = {
+        status: "TRAIN",
+        reason: "Full intensity approved",
+        icon: "🏃",
+      };
+
+      const { container } = render(<DecisionCard decision={decision} />);
+
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass("bg-green-100", "border-green-300");
+    });
+
+    it("renders reason with appropriate text color for REST", () => {
+      const decision: Decision = {
+        status: "REST",
+        reason: "Rest message",
+        icon: "🛌",
+      };
+
+      render(<DecisionCard decision={decision} />);
+
+      const reason = screen.getByText("Rest message");
+      expect(reason).toHaveClass("text-red-700");
+    });
+
+    it("renders reason with appropriate text color for GENTLE", () => {
+      const decision: Decision = {
+        status: "GENTLE",
+        reason: "Gentle message",
+        icon: "🧘",
+      };
+
+      render(<DecisionCard decision={decision} />);
+
+      const reason = screen.getByText("Gentle message");
+      expect(reason).toHaveClass("text-yellow-700");
+    });
+
+    it("renders reason with appropriate text color for TRAIN", () => {
+      const decision: Decision = {
+        status: "TRAIN",
+        reason: "Train message",
+        icon: "🏃",
+      };
+
+      render(<DecisionCard decision={decision} />);
+
+      const reason = screen.getByText("Train message");
+      expect(reason).toHaveClass("text-green-700");
+    });
+  });
+
   describe("styling", () => {
     it("renders within a bordered container", () => {
       const decision: Decision = {
@@ -133,7 +239,7 @@ describe("DecisionCard", () => {
       const { container } = render(<DecisionCard decision={decision} />);
 
       const card = container.firstChild as HTMLElement;
-      expect(card).toHaveClass("rounded-lg", "border", "p-6");
+      expect(card).toHaveClass("rounded-lg", "p-6");
     });
 
     it("renders status as bold heading", () => {
@@ -150,17 +256,17 @@ describe("DecisionCard", () => {
       expect(heading).toHaveClass("font-bold");
     });
 
-    it("renders reason with muted color", () => {
+    it("renders reason with status-specific color", () => {
       const decision: Decision = {
         status: "REST",
-        reason: "Muted reason text",
+        reason: "Reason with status color",
         icon: "🛌",
       };
 
       render(<DecisionCard decision={decision} />);
 
-      const reason = screen.getByText("Muted reason text");
-      expect(reason).toHaveClass("text-gray-600");
+      const reason = screen.getByText("Reason with status color");
+      expect(reason).toHaveClass("text-red-700");
     });
   });
 });