✨(front) add EventCalendar theme overrides

Create scheduler-theme.scss to align @event-calendar/core with
La Suite design system (Cunningham):

- Map --ec-* CSS variables to Cunningham tokens
- Hide native toolbar (replaced by custom React toolbar)
- Style today indicator with bordered frame (no fill)
- Style events with 6px border-radius, no shadow
- Style now indicator with brand-500 color
- Remove intermediate 30-min grid lines
- Unify header zone (ec-col-head + ec-all-day)
- Add border to grid body

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

src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss

@@ -1,10 +1,10 @@
-.day-of-month {
-  font-size: 2rem;
-  font-weight: 700;
+#event-calendar {
+  padding-right: 12px;
 }
 
-.my-event {
-  //   opacity: 0.5;
+.day-of-month {
+  font-size: 1rem;
+  font-weight: 700;
 }
 
 // ============================================================================

src/frontend/apps/calendars/src/features/calendar/components/scheduler/scheduler-theme.scss

@@ -0,0 +1,184 @@
+// =============================================================================
+// EventCalendar Theme Override
+// Aligns @event-calendar/core with La Suite design system (Cunningham)
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// 1. CSS Variables - Map --ec-* to Cunningham tokens
+// -----------------------------------------------------------------------------
+.ec {
+  // Base colors
+  --ec-bg-color: var(--c--globals--colors--gray-000);
+  --ec-day-bg-color: var(--c--contextuals--background--surface--secondary);
+  --ec-text-color: var(--c--globals--colors--gray-800);
+  --ec-border-color: var(--c--globals--colors--gray-100);
+
+  // Buttons (if any native buttons remain visible)
+  --ec-button-bg-color: var(--c--globals--colors--gray-000);
+  --ec-button-border-color: var(--c--globals--colors--gray-200);
+  --ec-button-text-color: var(--c--globals--colors--gray-800);
+  --ec-button-active-bg-color: var(--c--globals--colors--gray-100);
+  --ec-button-active-border-color: var(--c--globals--colors--gray-300);
+
+  // Today & highlight
+  --ec-today-bg-color: transparent;
+  --ec-highlight-color: var(--c--globals--colors--brand-050);
+
+  // Events
+  --ec-event-text-color: #fff;
+
+  // Now indicator
+  --ec-now-indicator-color: var(--c--globals--colors--brand-500);
+
+  border: none !important;
+}
+
+.ec-day {
+  &.ec-today {
+    --ec-day-bg-color: var(
+      --c--contextuals--background--surface--secondary
+    ) !important;
+  }
+}
+
+.ec-col-group,
+.ec-col-head {
+  &.ec-today {
+    background-color: var(
+      --c--contextuals--background--surface--secondary
+    ) !important;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. Hide native toolbar (using custom React toolbar)
+// -----------------------------------------------------------------------------
+.ec-toolbar {
+  display: none !important;
+}
+
+.ec-main {
+  border: none !important;
+}
+// -----------------------------------------------------------------------------
+// 3. Column headers - Unified header zone with bottom shadow
+// -----------------------------------------------------------------------------
+
+// Remove borders from col-head to create unified look
+.ec-col-head {
+  border: none !important;
+  background-color: transparent;
+  time {
+    .day-of-month {
+      border: 1px solid transparent;
+      border-radius: 4px;
+      padding: 3px 0px;
+      display: inline-block;
+    }
+  }
+
+  &.ec-today {
+    // Frame around the day number
+    time {
+      .day-of-month {
+        padding: 3px 5px;
+        border: 1px solid
+          var(--c--contextuals--border--semantic--neutral--secondary);
+      }
+    }
+  }
+}
+
+// Remove borders from all-day section
+.ec-all-day {
+  border: none !important;
+
+  // Target cells inside all-day
+  > * {
+    border: none !important;
+  }
+
+  // Remove right border from all days in all-day section
+  .ec-day {
+    border-inline-end: none !important;
+    border-right: none !important;
+  }
+}
+
+// Add shadow to the header section
+.ec-header {
+  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  z-index: 3;
+
+  // Sidebar in header: no border, no text
+  .ec-sidebar {
+    border: none !important;
+    font-size: 0;
+    color: transparent;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. Events styling - Rounded corners, no shadow, bold title
+// -----------------------------------------------------------------------------
+.ec-event {
+  border-radius: 6px;
+  box-shadow: none;
+  padding: 8px 10px;
+}
+
+.ec-event-title {
+  font-weight: 600;
+}
+
+.ec-event-time {
+  font-weight: 400;
+  opacity: 0.95;
+}
+
+// -----------------------------------------------------------------------------
+// 5. Now indicator - Color only (shape is already good in the lib)
+// -----------------------------------------------------------------------------
+// Color is set via --ec-now-indicator-color variable above
+
+// -----------------------------------------------------------------------------
+// 6. Sidebar (hours) - Smaller, discrete style
+// -----------------------------------------------------------------------------
+.ec-sidebar {
+  font-size: 0.75rem;
+  color: var(--c--globals--colors--gray-500);
+}
+
+// -----------------------------------------------------------------------------
+// 7. Grid lines - Remove intermediate lines, keep only hourly lines
+// -----------------------------------------------------------------------------
+.ec-day {
+  .ec-time-grid .ec-body & {
+    // Override to remove intermediate (30-min) lines
+    // Keep only: bottom mask, hourly lines, vertical line
+    background-image:
+      linear-gradient(to top, var(--ec-day-bg-color) 1px, transparent 1px),
+      linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px),
+      linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px) !important;
+    background-size:
+      100% 100%,
+      100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
+      2px 100%;
+  }
+}
+
+.ec-sidebar {
+  .ec-time-grid .ec-body & {
+    background-image: none !important;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 8. Grid in body - Add bottom border
+// -----------------------------------------------------------------------------
+.ec-body {
+  .ec-grid {
+    border-bottom: 1px solid var(--ec-border-color);
+    border-right: 1px solid var(--ec-border-color);
+  }
+}

src/frontend/apps/calendars/src/styles/globals.scss

@@ -15,6 +15,8 @@
 @use "./../features/calendar/components/RecurrenceEditor.scss";
 @use "./../features/calendar/components/AttendeesInput.scss";
 @use "./../features/calendar/components/scheduler/Scheduler.scss";
+@use "./../features/calendar/components/scheduler/scheduler-theme.scss";
+@use "./../features/calendar/components/scheduler/SchedulerToolbar.scss";
 @use "./../pages/index.scss" as *;
 @use "./../pages/calendar.scss" as *;
 html,