/* View controls and month layout extend the existing moderator calendar. */
body.moderator-ui .calendar-grid[hidden],
body.moderator-ui .weekday-row[hidden] { display: none !important; }
body.moderator-ui .calendar-panel[data-view="day"] .panel-heading { border-bottom: 0; }
body.moderator-ui .schedule-tabs button { padding-inline: 16px; }
body.moderator-ui .weekday-row span { font-size: .875rem; overflow-wrap: anywhere; }
body.moderator-ui .calendar-grid[data-view="month"] .calendar-day {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
}
body.moderator-ui .calendar-grid[data-view="month"] .calendar-day.is-outside { background: var(--wash); color: var(--muted); }
body.moderator-ui .calendar-day-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
body.moderator-ui .calendar-day-times span { white-space: nowrap; }
body.moderator-ui .calendar-grid .day-more { font-size: .875rem; }
body.moderator-ui .calendar-panel .panel-heading > div:first-child { min-width: 0; }
body.moderator-ui .month-controls { flex-shrink: 0; }
body.moderator-ui .month-controls button { min-height: 44px; min-width: 44px; }
@media (max-width: 600px) {
  body.moderator-ui .schedule-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  body.moderator-ui .schedule-tabs button { padding-inline: 8px; overflow-wrap: anywhere; }
  body.moderator-ui .calendar-grid[data-view="month"] .calendar-day { min-height: 76px; padding: 5px 2px; }
  body.moderator-ui .calendar-day-times { display: none; }
  body.moderator-ui .calendar-panel .panel-heading { align-items: flex-start; }
}
@media (max-width: 420px) {
  body.moderator-ui .schedule-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}