Implement color-coding for rule lock states

[maany]

Description

Lock states in the rule page should be color-coded to provide immediate visual feedback about rule status. This will help users quickly identify problematic rules, successful transfers, and various lock states at a glance.

Current Behavior

• Lock states displayed as text only
• No visual differentiation between states
• Users must read each status to understand rule health

Proposed Solution

• Implement color-coding system for different lock states
• Use consistent, accessible color palette
• Consider adding icons alongside colors for accessibility

Implementation Details

1. Define color scheme for each lock state:
   • OK/Success: Green
   • Replicating: Blue/Yellow
   • Stuck: Red/Orange
   • Other states: Appropriate colors
2. Implement CSS classes for each state
3. Ensure color contrast meets accessibility standards
4. Add legend or tooltip explaining color meanings
5. Consider colorblind-friendly palette

Acceptance Criteria

• Each lock state has a distinct color
• Colors are consistent across the application
• Color scheme is accessible (WCAG compliant)
• Legend or documentation explains color meanings
• Works for colorblind users (icons or patterns as backup)

Parent Issue

• [EPIC: Release 39] UX improvements #621