reviewed epic 9 stories

docs/stories/story-9.6-component-styling-cards-containers.md

@@ -3,6 +3,9 @@
 ## Epic Reference
 **Epic 9:** Design & Branding Implementation
 
+## Dependencies
+- **Story 9.1:** Color System Implementation (required - provides Tailwind color classes used in this story)
+
 ## User Story
 As a **user**,
 I want **consistent card and container styling**,
@@ -38,6 +41,19 @@ So that **content is well-organized and visually appealing**.
 
 ## Technical Notes
 
+### Color Classes Reference (from Story 9.1)
+| Class | Color | Hex |
+|-------|-------|-----|
+| `bg-cream` | Off-white/Cream | #F9F7F4 |
+| `text-gold` / `border-gold` | Gold | #D4AF37 |
+| `bg-gold/10` | Gold at 10% opacity | - |
+| `text-navy` | Dark Navy Blue | #0A1F44 |
+| `text-charcoal` | Charcoal Gray | #2C3E50 |
+| `text-success` | Success Green | #27AE60 |
+| `text-danger` | Warning Red | #E74C3C |
+
+### Component Implementation
+
 ```blade
 <!-- resources/views/components/card.blade.php -->
 @props([
@@ -79,6 +95,35 @@ So that **content is well-organized and visually appealing**.
 </x-card>
 ```
 
+### Edge Cases
+- **Null/Zero Trend:** Stat card should gracefully handle `null` trend (hidden) and `0` trend (show as neutral)
+- **RTL Layout:** Cards with `border-s-4` will automatically flip border to right side in RTL mode
+- **Container Overflow:** Content exceeding max-width should be contained; consider horizontal scroll for tables
+- **Missing Icon:** Handle gracefully if Flux icon name doesn't exist (fallback or hide icon container)
+- **Empty Cards:** Ensure cards maintain minimum height even with minimal content
+
+## Testing Requirements
+
+### Unit Tests
+- [ ] Card component renders with default variant
+- [ ] Card component renders with `elevated` variant
+- [ ] Card component applies hover classes when `hover=true`
+- [ ] Card component applies highlight border when `highlight=true`
+- [ ] Stat card displays value and label correctly
+- [ ] Stat card shows positive trend with `+` prefix and success color
+- [ ] Stat card shows negative trend with danger color
+- [ ] Stat card hides trend indicator when `trend=null`
+
+### Visual/Browser Tests
+- [ ] Hover lift effect animates smoothly
+- [ ] Shadow transitions on hover
+- [ ] Cards display correctly in RTL layout
+- [ ] Container centers content and respects max-width
+- [ ] Responsive behavior at all breakpoints
+
+### Test File Location
+`tests/Feature/Components/CardComponentTest.php`
+
 ## Definition of Done
 - [ ] Card component created
 - [ ] Shadow and radius consistent