Improves event hover highlighting

Uses CSS classes for event hover highlighting,
instead of directly manipulating the background color.
This allows for more flexible and maintainable styling.

Re-enables resize handle manager.
Removes console logs.

src/factories/ManagerFactory.ts

@@ -73,10 +73,9 @@ export class ManagerFactory {
 
     try {
       await managers.calendarManager.initialize?.();
-      // ResizeHandleManager temporarily disabled for testing
-      // if (managers.resizeHandleManager && managers.resizeHandleManager.initialize) {
-      //   managers.resizeHandleManager.initialize();
-      // }
+      if (managers.resizeHandleManager && managers.resizeHandleManager.initialize) {
+        managers.resizeHandleManager.initialize();
+      }
     } catch (error) {
       throw error;
     }

src/managers/DragDropManager.ts

@@ -119,13 +119,12 @@ export class DragDropManager {
           if (eventElement && !this.isDragStarted && mouseEvent.buttons === 0) {
             // Clear any previous hover first
             if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) {
-              this.currentHoveredEvent.style.backgroundColor = '';
+              this.currentHoveredEvent.classList.remove('hover');
             }
 
             this.isHoverTrackingActive = true;
             this.currentHoveredEvent = eventElement;
-            eventElement.style.backgroundColor = 'red';
-            console.log('🎨 Mouse entered event:', eventElement.dataset.eventId, 'buttons:', mouseEvent.buttons, 'isDragStarted:', this.isDragStarted);
+            eventElement.classList.add('hover');
           }
         }
       }, true); // Use capture phase
@@ -208,15 +207,6 @@ export class DragDropManager {
     this.currentMouseY = event.clientY;
     this.lastMousePosition = { x: event.clientX, y: event.clientY };
 
-    // Log which element we're over during drag
-    if (this.isDragStarted) {
-      const elementAtPoint = document.elementFromPoint(event.clientX, event.clientY);
-      const eventElement = elementAtPoint?.closest('swp-event');
-      if (eventElement) {
-        console.log('🖱️ Dragging over event:', (eventElement as HTMLElement).dataset.eventId);
-      }
-    }
-
     // Check for event hover (coordinate-based) - only when mouse button is up
     if (this.isHoverTrackingActive && event.buttons === 0) {
       this.checkEventHover(event);
@@ -238,10 +228,8 @@ export class DragDropManager {
           // Set high z-index on event-group if exists, otherwise on event itself
           const eventGroup = this.draggedElement.closest<HTMLElement>('swp-event-group');
           if (eventGroup) {
-            console.log('🔝 Setting z-index 9999 on event-group', eventGroup);
             eventGroup.style.zIndex = '9999';
           } else {
-            console.log('🔝 Setting z-index 9999 on event', this.draggedElement.dataset.eventId);
             this.draggedElement.style.zIndex = '9999';
           }
 
@@ -615,7 +603,6 @@ export class DragDropManager {
     if (!isStillInside) {
       // Only disable tracking and clear if mouse is NOT pressed (allow resize to work)
       if (event.buttons === 0) {
-        console.log('🚪 Mouse left event:', this.currentHoveredEvent.dataset.eventId, 'clearing hover');
         this.isHoverTrackingActive = false;
         this.clearEventHover();
       }
@@ -624,9 +611,8 @@ export class DragDropManager {
 
   private clearEventHover(): void {
     if (this.currentHoveredEvent) {
-      this.currentHoveredEvent.style.backgroundColor = '';
+      this.currentHoveredEvent.classList.remove('hover');
       this.currentHoveredEvent = null;
     }
   }
- 
 }

wwwroot/css/calendar-base-css.css

@@ -44,14 +44,19 @@
   /* Event colors - Updated with month-view-expanded.html color scheme */
   --color-event-meeting: #e8f5e8;
   --color-event-meeting-border: #4caf50;
+  --color-event-meeting-hl: #c8e6c9;
   --color-event-meal: #fff8e1;
   --color-event-meal-border: #ff9800;
+  --color-event-meal-hl: #ffe0b2;
   --color-event-work: #fff8e1;
   --color-event-work-border: #ff9800;
+  --color-event-work-hl: #ffe0b2;
   --color-event-milestone: #ffebee;
   --color-event-milestone-border: #f44336;
+  --color-event-milestone-hl: #ffcdd2;
   --color-event-personal: #f3e5f5;
   --color-event-personal-border: #9c27b0;
+  --color-event-personal-hl: #e1bee7;
   
   /* UI colors */
   --color-background: #ffffff;

wwwroot/css/calendar-events-css.css

@@ -61,6 +61,31 @@ swp-day-columns swp-event {
     width: auto;
   }
 
+  /* Hover state - highlight colors */
+  &.hover[data-type="meeting"] {
+    background: var(--color-event-meeting-hl);
+  }
+
+  &.hover[data-type="meal"] {
+    background: var(--color-event-meal-hl);
+  }
+
+  &.hover[data-type="work"] {
+    background: var(--color-event-work-hl);
+  }
+
+  &.hover[data-type="milestone"] {
+    background: var(--color-event-milestone-hl);
+  }
+
+  &.hover[data-type="personal"] {
+    background: var(--color-event-personal-hl);
+  }
+
+  &.hover[data-type="deadline"] {
+    background: var(--color-event-milestone-hl);
+  }
+
 }
 
 swp-day-columns swp-event:hover {