/**
 * FamilySync global styles entry point.
 *
 * Import order matters — tokens.css must be imported AFTER
 * @schedule-x/theme-default/dist/index.css (handled in main.tsx)
 * so the --sx-color-* overrides win the cascade.
 */

@import './tokens.css';

/* ── Schedule-X calendar sizing ───────────────────────────────────────────── */
/*
 * Schedule-X renders .sx__calendar-wrapper (height:100%) inside a <div> that
 * the React adapter emits without an explicit height.  The parent container in
 * CalendarShell is a flex item (flex:1; minHeight:0; height:100%) so we must
 * propagate that height down through the React wrapper element to the
 * .sx__calendar-wrapper so the week/day time-grid (.sx__view-container) can
 * scroll correctly.
 *
 * Class names confirmed from @schedule-x/theme-default@4.6.0 dist/index.css:
 *   .sx__calendar-wrapper  – outer wrapper emitted by the React adapter
 *   .sx__calendar          – inner flex-column container (flex:1; height:100%)
 *   .sx__view-container    – scrollable time-grid body (flex:1; overflow-y:auto)
 *
 * The React adapter (@schedule-x/react) wraps the calendar in a div with class
 * `.sx-react-calendar-wrapper`. That element had no height, so .sx__calendar-wrapper's
 * height:100% resolved against an auto-height parent and collapsed — killing the
 * time-grid's internal scroll. Give the adapter wrapper height:100% too so the full
 * chain (container → .sx-react-calendar-wrapper → .sx__calendar-wrapper → .sx__calendar
 * → .sx__view-container[overflow-y:auto]) has a resolvable height end-to-end.
 */
.sx-react-calendar-wrapper,
.sx__calendar-wrapper {
  height: 100%;
}

/* ── Minimal Global Reset ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Schedule-X overrides ──────────────────────────────────────────────────── */

/*
 * 999.6 / D-12: All-day event visual distinction.
 *
 * All-day events render as full-width filled rounded pills so they are immediately
 * distinct from timed event chips (partial-fill with colored left border accent).
 *
 * Contract (Surface 3 — UI-SPEC):
 *   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. 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.
 */

/*
 * 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 {
  /* Fallback: Schedule-X uses the built-in `primary` family for any event whose
   * calendar colorName is not registered (e.g. a member calendar absent from the
   * current /api/me members list). Remapping it keeps all-day events solid-filled
   * even in that fallback case, so the pill never degrades to the light tint. */
  --sx-color-primary-container: var(--sx-color-primary);
  --sx-color-on-primary-container: #FFFFFF;
  --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 */
}