Refine calendar events: dot-only month timed, title-first week, no left border

- Month timed events: dot + title only, hover reveals translucent card
- Month all-day events: keep translucent fill
- Time right-aligned in month view (ml-auto)
- Week/day view: title on top, time underneath for better scanning
- Remove 2px left accent border from all events
- Set color:'transparent' on FC event data to prevent inline style conflicts
- Recurring repeat icon preserved in all views

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

frontend/src/components/calendar/CalendarPage.tsx

@@ -364,6 +364,7 @@ export default function CalendarPage() {
     start: event.start_datetime,
     end: event.end_datetime || undefined,
     allDay: event.all_day,
+    color: 'transparent',
     editable: permissionMap.get(event.calendar_id) !== 'read_only',
     extendedProps: {
       is_virtual: event.is_virtual,
@@ -518,36 +519,36 @@ export default function CalendarPage() {
       <Repeat className="h-2.5 w-2.5 shrink-0 opacity-50" />
     ) : null;
 
+    if (isMonth) {
       if (isAllDay) {
         return (
-        <div className="flex items-center gap-1 truncate">
+          <div className="flex items-center gap-1 truncate px-1">
             <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
             {repeatIcon}
           </div>
         );
       }
-
+      // Timed events in month: dot + title + time right-aligned
-    if (isMonth) {
       return (
-        <div className="flex items-center gap-1 truncate">
+        <div className="flex items-center gap-1.5 truncate w-full">
-          <span className="umbra-event-time text-[11px] opacity-60 shrink-0">{arg.timeText}</span>
           <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
           {repeatIcon}
+          <span className="umbra-event-time text-[10px] opacity-50 shrink-0 ml-auto tabular-nums">{arg.timeText}</span>
         </div>
       );
     }
 
-    // Week/day view
+    // Week/day view — title on top, time underneath
     return (
       <div className="flex flex-col overflow-hidden h-full">
-        <span className="text-[10px] opacity-60 leading-tight">{arg.timeText}</span>
         <div className="flex items-center gap-1">
           <span className="text-[12px] font-medium truncate">{arg.event.title}</span>
           {repeatIcon}
         </div>
+        <span className="text-[10px] opacity-50 leading-tight tabular-nums">{arg.timeText}</span>
       </div>
     );
-  }, []);
+  }, [])
 
 
   return (

frontend/src/index.css

@@ -199,9 +199,7 @@
 
 /* ── Translucent event styling ── */
 .fc .umbra-event {
-  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
   border: none !important;
-  border-left: 2px solid var(--event-color) !important;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
@@ -211,25 +209,47 @@
   color: var(--event-color) !important;
 }
 
-/* Hover state */
+/* ── Month view: all-day events get translucent fill ── */
-.fc .umbra-event:hover {
+.fc .fc-daygrid-block-event.umbra-event {
+  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
+}
+
+.fc .fc-daygrid-block-event.umbra-event:hover {
   background: color-mix(in srgb, var(--event-color) 22%, transparent) !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
-/* Day grid (month view) */
+/* ── Month view: timed events — dot only, card on hover ── */
+.fc .fc-daygrid-dot-event.umbra-event {
+  background: transparent !important;
+}
+
+.fc .fc-daygrid-dot-event.umbra-event .fc-daygrid-event-dot {
+  border-color: var(--event-color) !important;
+}
+
+.fc .fc-daygrid-dot-event.umbra-event:hover {
+  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
+}
+
 .fc .fc-daygrid-event.umbra-event {
   font-size: 0.75rem;
-  padding: 1px 6px;
+  padding: 1px 4px;
   line-height: 1.4;
 }
 
-/* Time grid (week/day view) */
+/* ── Time grid (week/day view) — translucent fill ── */
 .fc .fc-timegrid-event.umbra-event {
+  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
+.fc .fc-timegrid-event.umbra-event:hover {
+  background: color-mix(in srgb, var(--event-color) 22%, transparent) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
 .fc .fc-timegrid-event.umbra-event .fc-event-main {
   padding: 3px 6px;
 }