Moves event styling to CSS

Refactors event rendering to leverage CSS for styling.

This change simplifies the event renderer by removing styling logic from the Typescript code and placing it in the CSS file.  This improves maintainability and allows for easier customization of event appearance. Hover effects are also moved to CSS for consistency.

src/managers/EventRenderer.ts

@@ -136,18 +136,9 @@ export class EventRenderer {
         eventElement.style.position = 'absolute';
         eventElement.style.top = `${position.top + 1}px`;
         eventElement.style.height = `${position.height - 1}px`;
-        eventElement.style.left = '2px';
-        eventElement.style.right = '2px';
-        eventElement.style.zIndex = '10';
-        
-        // Style the event element
+
+        // Only set positioning and color - rest is in CSS
         eventElement.style.backgroundColor = event.metadata?.color || '#3498db';
-        eventElement.style.color = 'white';
-        eventElement.style.fontSize = '12px';
-        eventElement.style.padding = '2px 4px';
-        eventElement.style.borderRadius = '3px';
-        eventElement.style.overflow = 'hidden';
-        eventElement.style.cursor = 'pointer';
 
         // Format time for display
         const startTime = this.formatTime(event.start);
@@ -214,13 +205,7 @@ export class EventRenderer {
         });
 
         // Hover effects are handled by CSS
-        eventElement.addEventListener('mouseenter', () => {
-            eventElement.style.zIndex = '20';
-        });
-
-        eventElement.addEventListener('mouseleave', () => {
-            eventElement.style.zIndex = '10';
-        });
+        // Hover effects are now handled by CSS
     }
 
     private clearEvents(): void {

wwwroot/css/calendar-events-css.css

@@ -3,14 +3,16 @@
 /* Event base styles */
 swp-event {
   position: absolute;
-  border-radius: 4px;
+  border-radius: 3px;
   overflow: hidden;
-  cursor: move;
+  cursor: pointer;
   transition: box-shadow 150ms ease, transform 150ms ease;
   z-index: 10;
-  left: 1px;
-  right: 1px;
-  padding: 8px;
+  left: 2px;
+  right: 2px;
+  color: white;
+  font-size: 12px;
+  padding: 2px 4px;
   
   /* Event types */
   &[data-type="meeting"] {
@@ -45,7 +47,6 @@ swp-event-time {
   display: block;
   font-size: 0.875rem;
   font-weight: 500;
-  opacity: 0.8;
   margin-bottom: 4px;
 }