/* SchoolDay v208: class-calendar scroll viewport and combined school/key-stage context column. */

/*
 * Make the Class Calendar behave like its own workspace on laptops/desktops.
 * v207 used overscroll-behavior: contain; that can make a trackpad feel trapped
 * when the inner calendar reaches an edge. v208 deliberately restores normal
 * scroll chaining while keeping the calendar independently scrollable.
 */
.admin-shell-v206-ready #tab-class-calendars #classCalendarTableWrap.class-calendar-scroll-window {
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(420px, 68dvh, 760px) !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  scroll-behavior: auto !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--admin-calendar-border, var(--line, #d8e2ef));
  border-radius: 1rem;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 5px 18px rgba(12,63,120,.07);
}

.admin-shell-v206-ready #tab-class-calendars #classCalendarTableWrap.class-calendar-scroll-window:focus-visible {
  outline: 3px solid var(--yellow, #f5c542);
  outline-offset: 2px;
}

/* Keep column headers and the date column visible while navigating the inner viewport. */
.admin-shell-v206-ready #tab-class-calendars #classCalendarTableWrap .data-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 24 !important;
}
.admin-shell-v206-ready #tab-class-calendars #classCalendarTableWrap .data-table .date-col {
  position: sticky !important;
  left: 0 !important;
  z-index: 23 !important;
}
.admin-shell-v206-ready #tab-class-calendars #classCalendarTableWrap .data-table thead .date-col {
  z-index: 30 !important;
}

/* One compact context column replaces School Comms, Key Stage Events and Meal that day. */
#tab-class-calendars .responsive-calendar[data-calendar="class"] .school-ks-calendar-col {
  min-width: 285px !important;
  width: 285px !important;
  max-width: 285px !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.class-calendar-context-group {
  display: grid;
  gap: .22rem;
  margin: 0 0 .7rem;
  padding: 0 0 .65rem;
  border-bottom: 1px solid rgba(20,79,140,.14);
}
.class-calendar-context-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.class-calendar-context-heading {
  display: block;
  color: var(--blue-2, #0c3f78);
  font-weight: 900;
  line-height: 1.15;
}
.class-calendar-context-lines {
  display: grid;
  gap: .24rem;
  line-height: 1.3;
}
.class-calendar-context-event {
  overflow-wrap: anywhere;
}
.class-calendar-context-time {
  color: var(--muted, #5f6b78);
  white-space: normal;
}
.class-calendar-dinner-group .class-calendar-context-lines {
  gap: .12rem;
}
.class-calendar-dinner-group .class-calendar-context-lines strong {
  color: inherit;
  font-weight: 800;
}

@media (max-width: 900px) {
  .admin-shell-v206-ready #tab-class-calendars #classCalendarTableWrap.class-calendar-scroll-window {
    height: 62dvh !important;
    min-height: 360px;
    scrollbar-gutter: auto;
  }
  #tab-class-calendars .responsive-calendar[data-calendar="class"] .school-ks-calendar-col {
    min-width: 260px !important;
    width: 260px !important;
    max-width: 260px !important;
  }
}