/* Scoped Task3 styles; load after the existing application styles. */
.calendar-page { min-width: 0; max-width: 100%; letter-spacing: 0; }
.calendar-page *, .calendar-page *::before, .calendar-page *::after { box-sizing: border-box; min-width: 0; }
.calendar-page .heading { align-items: flex-start; }
.calendar-page .heading h1 { font-size: 24px; overflow-wrap: anywhere; }
.calendar-page .heading p { font-size: 13px; overflow-wrap: anywhere; }
.calendar-page button, .calendar-page input, .calendar-page select { font: inherit; }
.calendar-page button:focus-visible, .calendar-page summary:focus-visible { outline: 3px solid #18735c; outline-offset: 2px; }
.calendar-toolbar, .calendar-period, .calendar-filters, .calendar-date-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calendar-toolbar { justify-content: space-between; margin: 16px 0 12px; }
.calendar-period strong { font-size: 17px; text-align: center; overflow-wrap: anywhere; }
.calendar-period .icon-btn, .calendar-page .heading > .icon-btn { flex: 0 0 36px; width: 36px; height: 36px; }
.calendar-page .segmented { flex-wrap: wrap; max-width: 100%; }
.calendar-page .segmented button { min-height: 36px; white-space: nowrap; }
.calendar-date-picker { margin: 0 0 12px; }
.calendar-date-picker label { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.calendar-range-source { font-size: 12px; color: #596b61; }
.calendar-range-inputs { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 10px; align-items: center; }
.calendar-page input, .calendar-page select { min-height: 38px; max-width: 100%; border: 1px solid #cbd4ce; border-radius: 5px; padding: 7px 10px; color: #233d31; background: #fff; }
.calendar-filters { margin-bottom: 18px; }
.calendar-filters select { flex: 0 1 158px; width: 158px; }
.calendar-filters input { flex: 1 1 210px; width: 210px; }
.calendar-month { border-top: 1px solid #cbd4ce; border-left: 1px solid #cbd4ce; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-weekdays span { padding: 10px 4px; background: #f0f5f1; text-align: center; font-size: 12px; border-right: 1px solid #cbd4ce; border-bottom: 1px solid #cbd4ce; }
.calendar-day, .calendar-blank { height: 148px; border: 0; border-right: 1px solid #cbd4ce; border-bottom: 1px solid #cbd4ce; background: #fff; }
.calendar-page .calendar-day { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 25px minmax(0,1fr); align-content: start; text-align: left; padding: 8px; cursor: pointer; border-radius: 0; color: #24382e; overflow: hidden; position: relative; }
.calendar-page .calendar-day:hover { background: #f0f7f2; }
.calendar-page .calendar-day.selected { background: #e9f4ee; box-shadow: inset 0 0 0 2px #18735c; }
.calendar-day-number { font-size: 14px; font-weight: 600; }
.calendar-day.is-today .calendar-day-number { color: #18735c; text-decoration: underline; text-underline-offset: 4px; }
.calendar-day-count { color: #496253; font-size: 12px; }
.calendar-day-preview { display: flex; flex-direction: column; gap: 5px; grid-column: 1/-1; overflow: hidden; }
.calendar-mini { display: block; flex: 0 0 auto; font-size: 11px; line-height: 16px; padding-left: 5px; border-left: 3px solid #2f8070; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-mini .schedule-location { display: block; margin: 0; font-size: 11px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-mini.school { border-left-color: #8f609a; }
.calendar-more { flex: 0 0 auto; font-size: 11px; line-height: 16px; color: #596b61; }
.calendar-blank { background: #f7f9f7; }
.calendar-day-detail { margin-top: 24px; }
.calendar-day-detail h2 { font-size: 17px; margin: 0 0 8px; }
.calendar-day-detail h2 small { font-size: 12px; color: #596b61; font-weight: 400; margin-left: 8px; }
.calendar-session-list { list-style: none; padding: 0; margin: 0; }
.calendar-session { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; gap: 16px; padding: 16px 0; border-top: 1px solid #dce3dd; align-items: center; }
.calendar-time { display: grid; gap: 5px; font-size: 12px; }
.calendar-time strong { font-size: 13px; }
.calendar-session-name .name-link { display: block; border: 0; padding: 0; background: transparent; color: #176a56; cursor: pointer; font-size: 14px; line-height: 1.6; font-weight: 600; text-align: left; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.calendar-session-name .name-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.calendar-session-name p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: #596b61; overflow-wrap: anywhere; }
.calendar-session-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.calendar-session-actions .btn { white-space: normal; }
.calendar-session.is-closed .calendar-session-name { color: #68726c; }
.calendar-empty { padding: 26px 12px; text-align: center; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.calendar-empty[role="alert"] { color: #9d3936; }
.calendar-term { border-top: 1px solid #cbd4ce; }
.calendar-class { border-bottom: 1px solid #cbd4ce; }
.calendar-class > summary { display: grid; grid-template-columns: minmax(0,1fr) 140px 110px; gap: 18px; cursor: pointer; padding: 18px 4px; align-items: center; }
.calendar-class-name { display: grid; gap: 6px; }
.calendar-class-name strong { font-size: 15px; overflow-wrap: anywhere; }
.calendar-class-name strong::before { content: "+"; margin-right: 8px; color: #18735c; }
.calendar-class[open] .calendar-class-name strong::before { content: "-"; }
.calendar-class small { display: block; font-size: 12px; color: #596b61; font-weight: 400; margin-top: 4px; overflow-wrap: anywhere; }
.calendar-class-count { font-size: 15px; font-weight: 600; }
.calendar-class-period { font-size: 12px; line-height: 1.7; color: #596b61; }
.calendar-class .calendar-session { padding-left: 12px; padding-right: 12px; }
@media (max-width:700px) {
  .calendar-toolbar { align-items: stretch; gap: 12px; }
  .calendar-period { width: 100%; }
  .calendar-period strong { flex: 1; font-size: 15px; }
  .calendar-page .segmented { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .calendar-page .segmented button { padding: 8px 4px; font-size: 13px; }
  .calendar-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-filters select, .calendar-filters input { width: 100%; font-size: 13px; }
  .calendar-filters input { grid-column: 1/-1; }
  .calendar-page .calendar-day { height: 64px; padding: 6px 3px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .calendar-blank { height: 64px; }
  .calendar-day-preview { display: none; }
  .calendar-day-count { font-size: 10px; }
  .calendar-weekdays span { font-size: 11px; }
  .calendar-session { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .calendar-session-name { grid-row: 1; }
  .calendar-time { grid-row: 2; display: flex; justify-content: space-between; flex-wrap: wrap; }
  .calendar-session-actions { grid-column: 1; }
  .calendar-class > summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .calendar-class-name { grid-column: 1/-1; }
  .calendar-class-period { text-align: right; }
  .calendar-range-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-range-inputs label { display: grid; gap: 5px; }
  .calendar-range-inputs input { width: 100%; }
  .calendar-range-inputs > .btn { grid-column: 1/-1; justify-self: end; }
}
@media print {
  .calendar-toolbar, .calendar-filters, .calendar-date-picker, .calendar-page .heading > button, .calendar-session-actions .btn { display: none; }
  .calendar-day.selected { box-shadow: none; }
  .calendar-session, .calendar-class { break-inside: avoid; }
}