From 6dbb1664ff126a1285fb7220457098e8be5231e6 Mon Sep 17 00:00:00 2001
From: Lucas Berger <me@lucasberger.ca>
Date: Wed, 10 Jun 2026 15:53:14 -0400
Subject: [PATCH] fix(06-06): target real Schedule-X all-day class for filled
 pills (999.6)

- Replace non-existent .sx__all-day-event selector with confirmed class names
- .sx__date-grid-event: exclusively all-day in week/day view (timed go to .sx__time-grid-event)
- .sx__month-grid-event:not(:has(.sx__month-grid-event-time)): all-day in month view
- Use CSS custom property inheritance to remap -container vars to solid main colors in date-grid and month-grid-day__events scopes
- Cover shared + member-1..4 calendar colorNames (N-member design)
- Source-confirmed from @schedule-x/calendar@4.6.0 dist/core.js
---
 apps/pwa/src/styles/index.css | 70 +++++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 7 deletions(-)

diff --git a/apps/pwa/src/styles/index.css b/apps/pwa/src/styles/index.css
index 18fef0e..4f1da5b 100644
--- a/apps/pwa/src/styles/index.css
+++ b/apps/pwa/src/styles/index.css
@@ -66,13 +66,69 @@ body {
  *   all-day = solid filled pill  → this override
  *   timed   = partial-fill chip with colored border accent (Schedule-X default)
  *
+ * Confirmed from @schedule-x/calendar@4.6.0 dist/core.js source inspection:
+ *
+ *   Week/Day all-day row: events use class `.sx__date-grid-event` (exclusively for
+ *     all-day events — timed events in week/day go to `.sx__time-grid-event`, a
+ *     separate class; no overlap).
+ *
+ *   Month grid: both timed and all-day share `.sx__month-grid-event`. Timed events
+ *     also render a child `.sx__month-grid-event-time` element (when
+ *     `calendarEvent.start instanceof Temporal.ZonedDateTime`). All-day events have
+ *     a PlainDate start and never render that child. So
+ *     `.sx__month-grid-event:not(:has(.sx__month-grid-event-time))` selects only
+ *     all-day cells in month view.
+ *
  * Color source: the member's `_familySync.color` propagates via `calendarId` color
- * config in buildCalendarConfig() — no per-event inline override needed.
- * Override selector confirmed from @schedule-x/theme-default@4.6.0.
+ * config in buildCalendarConfig() — no per-event inline override needed. The solid
+ * `background-color` override wins over the default `-container` tint; the
+ * `border-inline-start` override removes the left accent border so the pill reads
+ * as uniformly filled.
  */
-.sx__all-day-event {
-  border-radius: 4px;
-  color: #FFFFFF;
-  font-weight: 600;
-  font-size: var(--text-label-size);
+
+/*
+ * In the date-grid (all-day row at top of week/day views) and in the month-grid
+ * all-day cell area, remap the Schedule-X *-container CSS variables to their
+ * corresponding solid main colors. This causes the event's inline
+ * `background-color: var(--sx-color-${colorName}-container)` to resolve to the
+ * solid main color instead of the 15%-opacity tint. The `-on-*-container`
+ * variable is set to #FFFFFF for white label text.
+ *
+ * Calendar colorNames used by this app (from buildCalendarConfig):
+ *   shared      — rose family calendar
+ *   member-{N}  — per-member personal calendars (N = users.id)
+ *
+ * Note: CSS custom properties cascade — these overrides on the container element
+ * apply to all descendants without affecting the rest of the document.
+ */
+.sx__date-grid,
+.sx__month-grid-day__events {
+  --sx-color-shared-container: var(--sx-color-shared);
+  --sx-color-on-shared-container: #FFFFFF;
+  --sx-color-member-1-container: var(--sx-color-member-1);
+  --sx-color-on-member-1-container: #FFFFFF;
+  --sx-color-member-2-container: var(--sx-color-member-2);
+  --sx-color-on-member-2-container: #FFFFFF;
+  --sx-color-member-3-container: var(--sx-color-member-3);
+  --sx-color-on-member-3-container: #FFFFFF;
+  --sx-color-member-4-container: var(--sx-color-member-4);
+  --sx-color-on-member-4-container: #FFFFFF;
+}
+
+/* Week/Day all-day row — .sx__date-grid-event is exclusively all-day in this view */
+.sx__date-grid .sx__date-grid-event {
+  border-radius: 4px !important;
+  border-inline-start: none !important;
+  font-weight: 600 !important;
+  font-size: var(--text-label-size) !important;
+  /* background-color and color are driven by the container-var remapping above */
+}
+
+/* Month grid — exclude timed events (which have a child .sx__month-grid-event-time) */
+.sx__month-grid-day__events .sx__month-grid-event:not(:has(.sx__month-grid-event-time)) {
+  border-radius: 4px !important;
+  border-inline-start: none !important;
+  font-weight: 600 !important;
+  font-size: var(--text-label-size) !important;
+  /* background-color and color are driven by the container-var remapping above */
 }