Refactor event modal into standalone component

- Created dedicated EventModal component in src/components/event_modal.rs
- Extracted modal logic and styling from calendar component for better separation
- Updated data flow to pass full CalendarEvent objects instead of strings
- Added PartialEq derive to CalendarEvent for component props
- Updated service layer to group events by CalendarEvent objects
- Enhanced event click handling to show detailed event information
- Modal displays title, description, location, start/end times, and status
- Maintained existing modal styling and user interaction patterns

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

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

index.html

@@ -434,6 +434,135 @@
             }
         }
 
+        /* Event Modal Styles */
+        .modal-backdrop {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            backdrop-filter: blur(2px);
+        }
+
+        .modal-content {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+            max-width: 500px;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+            position: relative;
+            animation: modalAppear 0.2s ease-out;
+        }
+
+        @keyframes modalAppear {
+            from {
+                opacity: 0;
+                transform: scale(0.9) translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+
+        .modal-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1.5rem 2rem 1rem;
+            border-bottom: 1px solid #e9ecef;
+        }
+
+        .modal-header h3 {
+            margin: 0;
+            color: #333;
+            font-size: 1.4rem;
+            font-weight: 600;
+        }
+
+        .modal-close {
+            background: none;
+            border: none;
+            font-size: 1.8rem;
+            color: #999;
+            cursor: pointer;
+            padding: 0;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            line-height: 1;
+        }
+
+        .modal-close:hover {
+            background: #f8f9fa;
+            color: #666;
+            transform: scale(1.1);
+        }
+
+        .modal-body {
+            padding: 1.5rem 2rem 2rem;
+        }
+
+        .event-detail {
+            display: grid;
+            grid-template-columns: 100px 1fr;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            align-items: start;
+        }
+
+        .event-detail strong {
+            color: #555;
+            font-weight: 600;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .event-detail span {
+            color: #333;
+            font-size: 1rem;
+            line-height: 1.5;
+            word-break: break-word;
+        }
+
+        /* Mobile adjustments for modal */
+        @media (max-width: 768px) {
+            .modal-content {
+                margin: 1rem;
+                width: calc(100% - 2rem);
+            }
+
+            .modal-header, .modal-body {
+                padding: 1rem 1.5rem;
+            }
+
+            .event-detail {
+                grid-template-columns: 80px 1fr;
+                gap: 0.75rem;
+                margin-bottom: 0.75rem;
+            }
+
+            .event-detail strong {
+                font-size: 0.8rem;
+            }
+
+            .event-detail span {
+                font-size: 0.9rem;
+            }
+        }
+
         @media (max-width: 768px) {
             .app-header {
                 flex-direction: column;