/* FullCalendar, restyled toward Google/Outlook: hairline grid, white buttons,
   maroon accents. FullCalendar injects its own CSS ahead of every stylesheet,
   so these win at equal specificity. */
.fc {
  --fc-border-color: #e3e6ea;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: #f8f9fa;
  --fc-button-text-color: #3c4043;
  --fc-button-bg-color: #fff;
  --fc-button-border-color: #dadce0;
  --fc-button-hover-bg-color: #f1f3f4;
  --fc-button-hover-border-color: #dadce0;
  --fc-button-active-bg-color: #fbeaec;
  --fc-button-active-border-color: #dadce0;
  --fc-today-bg-color: #fdf4f5;
  --fc-now-indicator-color: var(--cmu-maroon, #a6192e);
  --fc-highlight-color: rgba(166, 25, 46, .08);
  --fc-list-event-hover-bg-color: #f1f3f4;
  font-size: .9rem;
}

.fc .fc-toolbar.fc-header-toolbar { margin-bottom: .75rem; gap: .5rem; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-size: 1.35rem; font-weight: 500; color: #3c4043; }

.fc .fc-button { border-radius: .375rem; font-weight: 500; padding: .35em .8em; }
.fc .fc-button:focus, .fc .fc-button-primary:not(:disabled):active:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus { box-shadow: 0 0 0 .2rem rgba(166, 25, 46, .2); }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--cmu-maroon, #a6192e); }
.fc .fc-button-primary:disabled { color: #9aa0a6; background: #fff; border-color: #dadce0; }

/* Day names and numbers: grey text, not link-coloured */
.fc a.fc-col-header-cell-cushion,
.fc a.fc-daygrid-day-number,
.fc a.fc-list-day-text,
.fc a.fc-list-day-side-text { color: #3c4043; text-decoration: none; }
.fc .fc-col-header-cell-cushion { font-weight: 500; text-transform: uppercase; font-size: .75rem; letter-spacing: .03em; padding: 6px 4px; }

/* Today's date in a filled circle, as Google does */
.fc .fc-daygrid-day-number { margin: 2px; min-width: 1.8em; height: 1.8em; line-height: 1.8em; padding: 0 4px; text-align: center; border-radius: 1em; }
.fc .fc-day-today .fc-daygrid-day-number { background: var(--cmu-maroon, #a6192e); color: #fff; }
.fc .fc-daygrid-day.fc-day-today, .fc .fc-timegrid-col.fc-day-today { background: var(--fc-today-bg-color); }

/* One slot is an hour (slotDuration in calendar.js), 8am-8pm: tall enough for
   a one-hour event to show its time and title on separate lines */
.fc .fc-timegrid-slot { height: 3.5em; }
.fc .fc-timegrid-event-short .fc-event-main { padding-top: 0; padding-bottom: 0; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { font-size: .75rem; color: #70757a; }

.fc .fc-event { border-radius: 4px; cursor: pointer; }
.fc .fc-daygrid-block-event .fc-event-main, .fc .fc-timegrid-event .fc-event-main { padding: 1px 4px; }
/* Timed events in month view are links: dark text by a coloured dot, not the site's maroon links */
.fc a.fc-daygrid-dot-event { color: #3c4043; }
.fc .fc-daygrid-dot-event:hover { background: #f1f3f4; }
.fc .fc-event-title { font-weight: 500; }
.fc .fc-more-link { color: #3c4043; font-weight: 500; }

/* Full page: fill the viewport below the nav, like a mail client's calendar */
.cal-full { height: calc(100vh - 230px); min-height: 560px; }

/* Embed: logo bar on top, calendar filling the rest of whatever height the
   host page gave the iframe. flex-basis 0 so FullCalendar's inline
   height: 100% doesn't push it past the bottom. */
/* Safe margin: TVs (the signage screens) crop the edges of the picture
   ("overscan"), so everything is kept this far in from each edge: 5vh top and
   bottom, 5vw left and right, i.e. 5% of the screen. Raise them if the edges
   are still cut off; lower them if the border is wider than needed. */
body.cal-embed { margin: 0; padding: 3vh 3vw; background: #fff; display: flex; flex-direction: column; }
.cal-embed-header { flex: none; background: var(--cmu-maroon); border-radius: 6px; padding: 2px 8px; margin-bottom: 8px; }
.cal-embed-header img { height: clamp(32px, 10vh, 60px); max-width: 100%; object-fit: contain; object-position: left; display: block; }
body.cal-embed #calendar { flex: 1 1 0; min-height: 0; }

/* Embed: sized to the iframe, which on a signage screen is the whole TV. In an
   iframe vw/vh are the iframe's, and the calendar's text is all in rem, so
   scaling the root font scales the lot: readable across a room on a 720p
   screen (about 26px), the usual 16px in a small iframe on a web page. */
html:has(> body.cal-embed) { font-size: clamp(16px, min(2vw, 3.6vh), 40px); }
body.cal-embed .fc .fc-timegrid-slot-label-cushion { font-size: .85rem; color: #3c4043; }

/* ...and it fits the iframe's height without a scrollbar (nobody scrolls a
   wall display). The logo and title shrink with the height, and the hours
   have no minimum height: expandRows (calendar.js) stretches them to fill
   whatever is left, and they only stop shrinking at one line of text. The
   agenda view can still scroll, as a long list has nowhere else to go. */
body.cal-embed .fc .fc-toolbar.fc-header-toolbar { margin-bottom: .5rem; }
body.cal-embed .fc .fc-toolbar-title { font-size: clamp(1rem, 4vh, 1.35rem); }
body.cal-embed .fc .fc-timegrid-slot { height: 0; line-height: 1; }
@media (max-height: 360px) {
  .cal-embed-header { display: none; }
}

/* Embed: bolder than the full page. Across a room the hairline grid and grey
   text disappeared and the screen read as a white sheet, so here the grid
   lines are dark, the text is near-black and heavier, and the frame, the
   header row, the hours column, weekends and other months' days are tinted. */
body.cal-embed { background: #e8eaed; }
body.cal-embed .fc {
  --fc-border-color: #9aa0a6;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: #dadce0;
  --fc-today-bg-color: #f6dbe0;
  color: #202124;
}
body.cal-embed .fc .fc-scrollgrid, body.cal-embed .fc .fc-list { background: #fff; border: 2px solid #5f6368; }
body.cal-embed .fc .fc-toolbar-title { font-weight: 700; color: #202124; }
/* Header row: a solid bar, today's column in maroon */
body.cal-embed .fc .fc-col-header,
body.cal-embed .fc .fc-scrollgrid-section-header > th { background: #3c4043; }
body.cal-embed .fc .fc-col-header-cell { border-color: #5f6368; }
body.cal-embed .fc .fc-col-header-cell.fc-day-today { background: var(--cmu-maroon, #a6192e); }
body.cal-embed .fc a.fc-col-header-cell-cushion, body.cal-embed .fc .fc-col-header-cell-cushion { color: #fff; font-weight: 700; }
/* Hours column */
body.cal-embed .fc .fc-timegrid-slot-label { background: #dadce0; }
body.cal-embed .fc .fc-timegrid-slot-label-cushion { color: #202124; font-weight: 600; }
/* Weekends and other months' days, then today on top */
body.cal-embed .fc .fc-day-sat:not(.fc-col-header-cell), body.cal-embed .fc .fc-day-sun:not(.fc-col-header-cell) { background: #f1f3f4; }
body.cal-embed .fc .fc-daygrid-day.fc-day-other { background: #e8eaed; }
body.cal-embed .fc .fc-day-other .fc-daygrid-day-top { opacity: .6; }
body.cal-embed .fc .fc-daygrid-day.fc-day-today, body.cal-embed .fc .fc-timegrid-col.fc-day-today { background: var(--fc-today-bg-color); }
/* ...except in day view, which is all today */
body.cal-embed .fc .fc-timeGridDay-view .fc-day-today:not(.fc-col-header-cell) { background: #fff; }
body.cal-embed .fc a.fc-daygrid-day-number { color: #202124; font-weight: 700; }
body.cal-embed .fc .fc-day-today a.fc-daygrid-day-number { color: #fff; }
/* Events */
body.cal-embed .fc .fc-event-title, body.cal-embed .fc .fc-event-time { font-weight: 700; }
body.cal-embed .fc a.fc-daygrid-dot-event, body.cal-embed .fc .fc-more-link { color: #202124; font-weight: 700; }
body.cal-embed .fc .fc-timegrid-now-indicator-line { border-width: 2px 0 0; }
/* Agenda */
body.cal-embed .fc .fc-list-day-cushion { background: #dadce0; }
body.cal-embed .fc a.fc-list-day-text, body.cal-embed .fc a.fc-list-day-side-text { color: #202124; font-weight: 700; }
body.cal-embed .fc .fc-list-event td { color: #202124; font-weight: 600; }

/* Dialogs */
.cal-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--swatch, #a6192e); }
.cal-description { white-space: pre-wrap; overflow-wrap: anywhere; }
/* All day: hide the times and put the two dates side by side */
.cal-dates.cal-all-day .cal-time { display: none; }
.cal-dates.cal-all-day .cal-date { width: 50%; }

.cal-color {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: var(--swatch); border: 2px solid #fff; box-shadow: 0 0 0 1px #dadce0;
}
.btn-check:checked + .cal-color { box-shadow: 0 0 0 2px #3c4043; }
/* Custom: a colour wheel until it's the chosen swatch, then the colour picked */
.cal-color-custom { position: relative; background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); }
.btn-check:checked + .cal-color-custom { background: var(--swatch); }
.cal-color-custom:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(166, 25, 46, .45); }
.cal-color-custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.btn-check:focus-visible + .cal-color { box-shadow: 0 0 0 3px rgba(166, 25, 46, .45); }