/* sx-google.css — turn the Schedule-X v4 engine into a Google-Calendar look-alike.
 *
 * Loaded AFTER @schedule-x/theme-default. We only override CSS variables and a
 * handful of structural selectors. No Google logo, trademark, font or asset is
 * used — Roboto + Material Symbols (both Apache-2.0) and our own colour tokens.
 *
 * Google Calendar palette (Material 3):
 *   accent blue        #1a73e8
 *   today fill         #1a73e8 (circle) / selected tint #d3e3fd
 *   grid hairlines     #dadce0
 *   secondary grey     #5f6368 / #70757a
 *   surfaces           #ffffff
 *   hover tint         #f1f3f4
 *   "now" red line     #ea4335
 */

/* ---------- Light (default) ---------- */
:root {
  --sx-color-primary: #1a73e8;
  --sx-color-on-primary: #ffffff;
  --sx-color-primary-container: #d3e3fd;
  --sx-color-on-primary-container: #0b419e;

  --sx-color-secondary: #1a73e8;
  --sx-color-on-secondary: #ffffff;
  --sx-color-secondary-container: #d3e3fd;
  --sx-color-on-secondary-container: #0b419e;

  --sx-color-surface: #ffffff;
  --sx-color-surface-bright: #ffffff;
  --sx-color-surface-dim: #ffffff;
  --sx-color-surface-container: #f1f3f4;
  --sx-color-surface-container-low: #f8f9fa;
  --sx-color-surface-container-high: #e8eaed;
  --sx-color-background: #ffffff;
  --sx-color-on-background: #1f1f1f;
  --sx-color-on-surface: #1f1f1f;

  --sx-color-outline: #dadce0;
  --sx-color-outline-variant: #e8eaed;
  --sx-color-neutral: #5f6368;
  --sx-color-neutral-variant: #70757a;
  --sx-color-shadow: rgba(60, 64, 67, .15);

  --sx-internal-color-text: #1f1f1f;

  /* Typography — Roboto, Google Calendar weights/sizes */
  --sx-font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  --sx-font-extra-small: 11px;
  --sx-font-small: 12px;
  --sx-font-large: 16px;
  --sx-font-extra-large: 22px;

  /* Geometry */
  --sx-rounding-extra-small: 4px;
  --sx-rounding-small: 4px;
  --sx-rounding-extra-large: 12px;
  --sx-week-grid-hour-height: 48px;   /* ~Google hour row */
}

/* ---------- Dark ---------- */
.is-dark, html[data-theme="dark"] .sx__calendar, .sx__calendar.is-dark {
  --sx-color-primary: #8ab4f8;
  --sx-color-on-primary: #06245a;
  --sx-color-primary-container: #0b3a86;
  --sx-color-on-primary-container: #d3e3fd;

  --sx-color-secondary: #8ab4f8;
  --sx-color-on-secondary: #06245a;
  --sx-color-secondary-container: #0b3a86;
  --sx-color-on-secondary-container: #d3e3fd;

  --sx-color-surface: #1f1f1f;
  --sx-color-surface-bright: #2a2a2c;
  --sx-color-surface-dim: #1a1a1a;
  --sx-color-surface-container: #2a2a2c;
  --sx-color-surface-container-low: #232325;
  --sx-color-surface-container-high: #303134;
  --sx-color-background: #1a1a1a;
  --sx-color-on-background: #e8eaed;
  --sx-color-on-surface: #e8eaed;

  --sx-color-outline: #3c4043;
  --sx-color-outline-variant: #303134;
  --sx-color-neutral: #9aa0a6;
  --sx-color-neutral-variant: #9aa0a6;

  --sx-internal-color-text: #e8eaed;
}

/* ===================================================================
   Engine container fills its host. The viewport stops scrolling itself —
   Schedule-X owns the internal scroll (e.g. the time grid).
   =================================================================== */
.wc-viewport { overflow: hidden; display: flex; flex-direction: column; }
.wc-search-results-host {
  position: absolute; inset: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; background: var(--sx-color-surface);
  z-index: 5; padding-bottom: 96px;
}
.wc-calendar { flex: 1 1 auto; min-height: 0; height: 100%; }
.sx__calendar {
  border: none;
  border-radius: 0;
  height: 100%;
  font-family: var(--sx-font-family);
  background: var(--sx-color-surface);
}
.sx__calendar-wrapper { height: 100%; }
/* We provide our OWN top chrome (app bar). Hide the engine's header bar. */
.sx__calendar-header { display: none !important; }
.sx__view-container { border: none; }

/* ===================================================================
   MONTH GRID — Google look
   =================================================================== */
.sx__month-grid-wrapper { background: var(--sx-color-surface); }
.sx__month-grid-week,
.sx__month-grid-day { border-color: var(--sx-color-outline); }
.sx__month-grid-day:hover { background: var(--sx-color-surface-container); }

/* Day-name header row (Mon Tue ...) — small grey caps, centered */
.sx__month-grid-day__header-day-name {
  color: var(--sx-color-neutral);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
}

/* The date number: small, grey, centered near the top of the cell */
.sx__month-grid-day__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}
.sx__month-grid-day__header-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--sx-color-on-surface);
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  margin: 2px auto;
}
/* TODAY = solid blue circle with white number (the signature Google look).
   Schedule-X puts .sx__is-today directly on the header-date element. */
.sx__month-grid-day__header-date.sx__is-today {
  background: #1a73e8;
  color: #fff;
}
.is-dark .sx__month-grid-day__header-date.sx__is-today {
  background: #8ab4f8;
  color: #06245a;
}

/* Event chips — pill, rounded 4px, single-line ellipsis, soft container fill */
.sx__month-grid-event,
.sx__date-grid-event {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  min-height: 18px;
  line-height: 18px;
  padding: 1px 6px;
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sx__month-grid-day__events-more {
  font-size: 11px;
  color: var(--sx-color-neutral);
  font-weight: 500;
  padding-left: 6px;
}

/* ===================================================================
   WEEK / DAY TIME GRID — Google look
   =================================================================== */
.sx__week-grid__hour { border-color: var(--sx-color-outline); height: var(--sx-week-grid-hour-height); }
.sx__week-grid__hour-text,
.sx__week-grid__time-axis { color: var(--sx-color-neutral-variant); font-size: 10px; }
.sx__week-grid__day-name { color: var(--sx-color-neutral); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .6px; }

/* Day-number in the week header: round, blue when today */
.sx__week-grid__date-number {
  font-size: 20px;
  font-weight: 400;
  color: var(--sx-color-on-surface);
  width: 38px; height: 38px; line-height: 38px;
  border-radius: 50%;
  text-align: center;
}
.sx__week-grid__date--is-today .sx__week-grid__date-number {
  background: #1a73e8;
  color: #fff;
  font-weight: 500;
}
.is-dark .sx__week-grid__date--is-today .sx__week-grid__date-number {
  background: #8ab4f8; color: #06245a;
}

/* Timed event blocks: 4px radius, thin look, no heavy shadow */
.sx__time-grid-event {
  border-radius: 4px;
  box-shadow: none;
  font-size: 12px;
}
.sx__time-grid-event-inner { border-radius: 4px; }

/* The red "now" line + dot */
.sx__current-time-indicator,
.sx__current-time-indicator-full-week {
  background: #ea4335 !important;
  height: 2px;
}
.sx__current-time-indicator::before {
  content: "";
  position: absolute;
  left: -4px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ea4335;
}

/* ===================================================================
   SCHEDULE / AGENDA (month-agenda) — clean list
   =================================================================== */
.sx__month-agenda-day-name { color: var(--sx-color-neutral); }
/* Mini-month day cells: vertical stack (number, then event dots). The
   today/selected marker must be a PERFECT circle on the NUMBER only — not an
   ellipse stretched across the whole cell-width button (the Google look). */
.sx__month-agenda-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  background: transparent !important;
  color: inherit;
  /* Engine draws a 3px inset blue box-shadow on the selected DAY BUTTON; we move
     the selected indicator to the number circle, so kill the square shadow. */
  box-shadow: none !important;
}
.sx__month-agenda-day > div:first-child {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* selected day = solid blue circle, white number */
.sx__month-agenda-day--active > div:first-child {
  background: #1a73e8;
  color: #fff;
}
.is-dark .sx__month-agenda-day--active > div:first-child { background: #8ab4f8; color: #06245a; }
/* today (not selected) = blue number, no fill (Google) */
.sx__month-agenda-day--today:not(.sx__month-agenda-day--active) > div:first-child { color: #1a73e8; font-weight: 600; }
.is-dark .sx__month-agenda-day--today:not(.sx__month-agenda-day--active) > div:first-child { color: #8ab4f8; }
/* No boxy focus ring on mini-month day buttons (Google shows none on click);
   keep a soft ring only for real keyboard navigation. */
.sx__month-agenda-day:focus { outline: none; }
.sx__month-agenda-day:focus-visible > div:first-child { outline: 2px solid #1a73e8; outline-offset: 1px; }
.sx__month-agenda-event {
  border-radius: 8px;
  font-size: 14px;
}
.sx__list-day-header,
.sx__list-day-date { color: var(--sx-color-on-surface); font-weight: 500; }
.sx__list-event { border-radius: 8px; }
.sx__list-event-color-line { border-radius: 4px; }

/* ===================================================================
   Mobile polish — comfortable touch + no overflow
   =================================================================== */
@media (max-width: 840px) {
  .sx__month-grid-day__header-date { font-size: 11px; width: 22px; height: 22px; line-height: 22px; }
  .sx__month-grid-event,
  .sx__date-grid-event { font-size: 11px; }
  .sx__week-grid__date-number { width: 32px; height: 32px; line-height: 32px; font-size: 16px; }
  .sx__week-grid__hour-text,
  .sx__week-grid__time-axis { font-size: 9px; }
  .sx__month-agenda-event { font-size: 15px; min-height: 40px; }
  .sx__list-event { min-height: 44px; }
}