/**
 * 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;
}
