Implement interactive calendar color picker

Backend enhancements:
- Add calendar_path field to CalendarEvent for color mapping
- Generate consistent colors for calendars using path-based hashing
- Update CalDAV parsing to associate events with their calendar paths
- Add 16-color palette with hash-based assignment algorithm

Frontend features:
- Interactive color picker with 4x4 grid of selectable colors
- Click color swatches to open dropdown with all available colors
- Instant color changes for both sidebar and calendar events
- Persistent color preferences using local storage
- Enhanced UX with hover effects and visual feedback

Styling improvements:
- Larger 16px color swatches for better clickability
- Professional color picker dropdown with smooth animations
- Dynamic event coloring based on calendar assignment
- Improved contrast with text shadows and borders
- Click-outside-to-close functionality for better UX

Users can now personalize their calendar organization with custom colors
that persist across sessions and immediately update throughout the app.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

styles.css

@@ -136,6 +136,7 @@ body {
     border-radius: 6px;
     transition: all 0.2s;
     cursor: pointer;
+    gap: 0.75rem;
 }
 
 .calendar-list li:hover {
@@ -143,10 +144,72 @@ body {
     transform: translateX(2px);
 }
 
+.calendar-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    border: 2px solid rgba(255,255,255,0.3);
+    transition: all 0.2s;
+    cursor: pointer;
+    position: relative;
+}
+
+.calendar-list li:hover .calendar-color {
+    border-color: rgba(255,255,255,0.6);
+    transform: scale(1.1);
+}
+
+.color-picker {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    border-radius: 8px;
+    padding: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    z-index: 1000;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+    min-width: 120px;
+    border: 1px solid rgba(0,0,0,0.1);
+}
+
+.color-option {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid rgba(0,0,0,0.1);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.color-option:hover {
+    transform: scale(1.2);
+    border-color: rgba(0,0,0,0.3);
+}
+
+.color-option.selected {
+    border-color: #333;
+    border-width: 3px;
+    transform: scale(1.1);
+}
+
+.color-picker-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+}
+
 .calendar-name {
     color: white;
     font-size: 0.9rem;
     font-weight: 500;
+    flex: 1;
 }
 
 .no-calendars {
@@ -459,7 +522,7 @@ body {
 }
 
 .event-box {
-    background: #2196f3;
+    /* Background color will be set inline via style attribute */
     color: white;
     padding: 2px 4px;
     border-radius: 3px;
@@ -469,16 +532,34 @@ body {
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: all 0.2s ease;
+    border: 1px solid rgba(255,255,255,0.2);
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    font-weight: 500;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    position: relative;
 }
 
 .event-box:hover {
-    background: #1976d2;
+    filter: brightness(1.15);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
 }
 
 .event-box.refreshing {
-    background: #ff9800;
     animation: pulse 1.5s ease-in-out infinite alternate;
+    border-color: #ff9800;
+}
+
+.event-box.refreshing::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 152, 0, 0.3);
+    pointer-events: none;
 }
 
 @keyframes pulse {