.parent-calendar-upcoming { padding: 14px 16px; border-top: 1px solid #e0e8e2; }
.parent-calendar-upcoming h2 { margin: 0 0 9px; color: #244639; font-size: 0.95rem; }
.parent-calendar-upcoming > div { display: flex; flex-wrap: wrap; gap: 7px; }
.parent-calendar-upcoming button { display: grid; gap: 3px; width: min(100%, 240px); min-height: 44px; padding: 8px 10px; border: 1px solid #dce6df; border-left: 4px solid var(--class-color, #a7c1af); border-radius: 8px; background: #fff; color: #244236; text-align: left; cursor: pointer; }
.parent-calendar-upcoming button span { color: #566b5e; font-size: 0.72rem; }
.parent-calendar-upcoming button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.parent-calendar-day-dialog { width: min(92vw, 560px); max-height: min(82vh, 720px); }
.parent-calendar-day-list { display: grid; gap: 6px; overflow: auto; max-height: 60vh; padding: 12px; }
.parent-calendar-day-list button { display: grid; gap: 3px; min-height: 44px; padding: 8px 10px; border: 1px solid #dce6df; border-left: 4px solid var(--class-color, #a7c1af); border-radius: 8px; background: #fff; color: #244236; text-align: left; cursor: pointer; }
.parent-calendar-day-list button small { color: #52685c; }
.parent-calendar-mobile-weekday { display: none; }

/* The shared month calendar: botanical details around a readable working grid.
   Scoped here so dashboard calendars and Admin's year planner stay independent. */
.calendar-botanical {
  --calendar-paper: #fffdf7;
  --calendar-rule: #e7e6d9;
  --calendar-ink: #29483a;
  background: var(--calendar-paper);
  border-color: #d8ddcf;
  border-radius: 14px;
  box-shadow: 0 8px 26px #344b3510;
}

.calendar-botanical .calendar-toolbar {
  position: relative;
  isolation: isolate;
  background: #294c3e;
  border-bottom: 3px solid #d9bb77;
}

.calendar-botanical .calendar-toolbar > div {
  position: relative;
  z-index: 1;
}

.calendar-botanical .calendar-toolbar .calendar-month-nav-group {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.calendar-botanical .calendar-toolbar .calendar-month-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f7e8bf;
  box-shadow: none;
}

.calendar-botanical .calendar-month-nav-button span {
  font: 400 28px/1 Arial, sans-serif;
}

.calendar-botanical .calendar-toolbar .calendar-month-nav-button:hover,
.calendar-botanical .calendar-toolbar .calendar-month-nav-button:focus-visible {
  background: #ffffff14;
  color: #fffaf0;
}

.calendar-botanical .calendar-header-botanical {
  position: absolute;
  top: 50%;
  width: 12%;
  max-width: 164px;
  height: 54px;
  object-fit: contain;
  pointer-events: none;
  transform: translateY(-50%);
}

.calendar-botanical .calendar-header-botanical-left { left: 16%; }
.calendar-botanical .calendar-header-botanical-right { right: 16%; transform: translateY(-50%) scaleX(-1); }

.calendar-botanical .calendar-toolbar h1 {
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  letter-spacing: -0.025em;
  color: #fffaf0;
}

.calendar-botanical .calendar-member-filter {
  background: #fffdf7;
  border-color: var(--calendar-rule);
  gap: 10px;
  padding: 8px 16px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.calendar-botanical .calendar-view-picker { min-width: 0; }
.calendar-botanical .calendar-view-picker select {
  width: 220px;
  min-width: 0;
  min-height: 44px;
  border-radius: 8px;
  border-color: #c8d1bc;
  background-color: #f5f7ed;
  color: #29483a;
  font-weight: 600;
  text-overflow: ellipsis;
}
.calendar-botanical .calendar-view-picker select:focus-visible { outline: 3px solid #577647; outline-offset: 2px; }
.calendar-filter-botanical { display: none; object-fit: contain; pointer-events: none; }
.calendar-botanical .calendar-custom-summary {
  flex-basis: 100%;
  margin: 0;
  color: #52624e;
  font-size: 0.76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.calendar-botanical .calendar-jump-today {
  margin-left: auto;
  border-radius: 8px;
  border-color: #daddce;
  color: #354e40;
  min-height: 36px;
  padding: 7px 11px;
  font-size: 0.78rem;
}

.calendar-botanical button.calendar-jump-today {
  background: #f8ebbd;
  border-color: #e4d298;
  color: #614d1e;
}

.calendar-botanical button.calendar-jump-today:hover { background: #f2dfa2; }
.calendar-botanical .calendar-botanical-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 3px 16px;
}

.calendar-botanical-utility img { object-fit: contain; visibility: hidden; }
.calendar-botanical .calendar-weekdays {
  background: #edf1e5;
  border-color: #dce1d1;
}

.calendar-botanical .calendar-weekdays span {
  color: #50614a;
  font-weight: 700;
  letter-spacing: 0.11em;
  font-size: 0.68rem;
  padding: 10px 6px;
}

.calendar-botanical .calendar-grid article {
  align-content: start;
  background: var(--calendar-paper);
  border-color: var(--calendar-rule);
  min-height: 94px;
  padding: 8px;
  gap: 7px;
}

/* The break ribbon carries the color; day cells keep the same warm paper. */
.calendar-botanical .calendar-grid article.has-break { background: var(--calendar-paper); }
.calendar-botanical .calendar-grid article.muted { background: #f5f1e7; }
.calendar-botanical .calendar-grid article.today {
  background: #fff8df;
  box-shadow: inset 0 0 0 2px #c0a365;
}

.calendar-botanical .calendar-date-heading {
  display: flex;
  align-items: center;
  align-self: start;
  gap: 7px;
  min-width: 0;
  min-height: 32px;
}

.calendar-botanical .calendar-date-button,
.calendar-botanical .calendar-date-heading > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--calendar-ink);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1;
  width: 32px;
  min-height: 32px;
  padding: 0;
}

.calendar-botanical .calendar-date-button { cursor: pointer; }
.calendar-botanical .calendar-date-button:hover { background: #e6ecd8; border-color: #c7d2b7; }
.calendar-botanical .muted .calendar-date-button,
.calendar-botanical .muted .calendar-date-heading > strong { color: #6c6a64; }
.calendar-botanical .today .calendar-date-button,
.calendar-botanical .today .calendar-date-heading > strong {
  background: #f3d777;
  border-color: #d9b952;
  color: #4d421e;
}

.calendar-botanical .calendar-today-label {
  font-size: 0.65rem;
  color: #755e27;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.calendar-mobile-weekday { display: none; }
.calendar-botanical .calendar-event-list { gap: 5px; min-width: 0; }
.calendar-botanical .calendar-family-summary { display: grid; gap: 4px; min-width: 0; }
.calendar-botanical .calendar-family-summary button:not(.calendar-day-total) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  padding: 6px 7px;
  border: 1px solid #e5e7dc;
  border-left: 3px solid var(--student-color, #b8c8ab);
  border-radius: 6px;
  background: #fafaf2;
  color: #29483a;
  text-align: left;
  cursor: pointer;
}
.calendar-botanical .calendar-family-summary button:not(.calendar-day-total):hover { background: #edf1e5; }
.calendar-botanical .calendar-family-summary button:not(.calendar-day-total) > span { min-width: 0; overflow-wrap: anywhere; font-size: 0.75rem; line-height: 1.3; font-weight: 650; }
.calendar-botanical .calendar-family-summary small { flex: none; color: #58654f; font-size: 0.66rem; font-weight: 500; }
.calendar-botanical .calendar-day-total { min-height: 28px; padding: 3px 2px; border: 0; background: transparent; text-align: left; font-size: 0.65rem; color: #58654f; cursor: pointer; }
.calendar-botanical .calendar-day-total:hover { color: #29483a; text-decoration: underline; }
.calendar-botanical .calendar-break-ribbon,
.calendar-botanical .calendar-break-mobile {
  min-width: 0;
  border: 1px solid #cad8b8;
  border-radius: 6px;
  background: #e6edd9;
  color: #425a31;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.calendar-botanical .calendar-break-ribbon:hover,
.calendar-botanical .calendar-break-mobile:hover { background: #dce7ca; }
.calendar-botanical .calendar-break-mobile { display: none; }
@media (min-width: 641px) {
  .calendar-botanical .calendar-grid article {
    grid-column: var(--calendar-column);
    grid-row: var(--calendar-row);
  }
  .calendar-botanical .has-break :is(.calendar-event-list, .calendar-family-summary) { margin-top: 36px; }
  .calendar-botanical .calendar-break-ribbon {
    grid-column: var(--calendar-column) / span var(--break-span);
    grid-row: var(--calendar-row);
    align-self: start;
    z-index: 1;
    min-height: 32px;
    margin: 47px 6px 6px;
    padding: 6px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.calendar-botanical .calendar-event {
  background: #eff2e6;
  background: color-mix(in srgb, var(--class-color, #b4cca7) 14%, #fffdf7);
  border: 1px solid color-mix(in srgb, var(--class-color, #b4cca7) 30%, #e5e5d8);
  border-left: 3px solid var(--class-color, #b4cca7);
  border-radius: 7px;
  padding: 7px 8px;
  gap: 3px;
  min-height: 46px;
  color: #293d30;
}

.calendar-botanical .calendar-event:hover {
  background: color-mix(in srgb, var(--class-color, #b4cca7) 24%, #fffdf7);
  color: #293d30;
}

.calendar-botanical .calendar-event > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.calendar-botanical .calendar-event > small { font-size: 0.68rem; color: #4f6051; font-weight: 500; }
.calendar-botanical .calendar-special-event { border-top: 3px solid #d8bb79; }
.calendar-botanical .calendar-more { color: #49633b; font-size: 0.73rem; }
.calendar-botanical .calendar-more-button {
  min-height: 28px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: #49633b;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.calendar-botanical .calendar-more-button:hover { background: #edf1e5; color: #29483a; }
.calendar-botanical .calendar-more-button:focus-visible { outline: 3px solid #577647; outline-offset: 2px; }
.calendar-botanical .parent-calendar-break-span {
  background: #dfe9ce;
  border-color: #cad8b8;
  color: #425a31;
  font-weight: 600;
}

.calendar-botanical .parent-calendar-empty {
  background: #faf8ed;
  color: #57624f;
  padding: 16px 20px;
  line-height: 1.6;
}

.calendar-botanical .parent-calendar-empty span { display: block; }
.calendar-botanical .parent-calendar-upcoming { background: #f7f6eb; padding: 18px 20px; border-color: var(--calendar-rule); }
.calendar-botanical .parent-calendar-upcoming h2 { font-family: var(--font-display); font-size: 1.12rem; margin-bottom: 12px; }
.calendar-botanical .parent-calendar-upcoming button { background: #fffdf7; border-color: #dde1d1; border-left-color: var(--class-color, #a7c1af); }
.calendar-botanical .parent-calendar-upcoming button strong { white-space: normal; line-height: 1.4; }
.calendar-botanical button:focus-visible { outline: 3px solid #577647; outline-offset: 2px; }
.calendar-botanical .calendar-toolbar button:focus-visible { outline-color: #f8e8b6; }

.parent-calendar-day-dialog { background: #fffdf7; border: 1px solid #d6dccb; border-radius: 16px; }
.parent-calendar-day-dialog .parent-assignment-dialog-header { background: #edf1e5; border-color: #dce1d1; }
.parent-calendar-day-dialog .parent-assignment-dialog-header h2 { font-family: var(--font-display); color: #29483a; }
.parent-calendar-day-dialog .parent-assignment-dialog-header .eyebrow { color: #586a4b; }
.parent-calendar-day-dialog .parent-calendar-day-list { padding: 18px; gap: 10px; }
.parent-calendar-day-dialog .parent-calendar-day-list button {
  background: color-mix(in srgb, var(--class-color, #b4cca7) 14%, #fffdf7);
  padding: 12px;
  line-height: 1.5;
}
.parent-calendar-day-dialog button:focus-visible { outline: 3px solid #577647; outline-offset: 2px; }
.calendar-day-empty { margin: 0; padding: 10px 0; color: #58664f; line-height: 1.6; }

dialog.calendar-customize-dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  background: transparent;
}
dialog.calendar-customize-dialog:not([open]) { display: none; }
.calendar-customize-dialog::backdrop { background: rgba(15, 31, 24, 0.54); }
.calendar-customize-card { max-width: 540px; background: #fffdf7; }
.calendar-customize-card .portal-editor-header { background: #edf1e5; }
.calendar-customize-card .portal-editor-close { min-height: 44px; }
.calendar-customize-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.calendar-customize-fields fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.calendar-customize-fields legend { margin-bottom: 8px; color: #29483a; font-weight: 700; font-size: 0.85rem; }
.calendar-customize-fields label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.85rem; font-weight: 500; color: #354e40; }
.calendar-customize-fields label span { overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; font-size: 0.85rem; font-weight: 500; }
.calendar-customize-fields input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #3e624a; }
.calendar-customize-card :is(button, input):focus-visible { outline: 3px solid #577647; outline-offset: 2px; }
.calendar-customize-card .portal-editor-actions { position: sticky; bottom: 0; background: #fffdf7; padding-top: 12px; }
.calendar-customize-card .portal-editor-actions button { min-height: 44px; }

@media (max-width: 1080px) {
  .calendar-botanical .calendar-header-botanical { width: 92px; }
  .calendar-botanical .calendar-header-botanical-left { left: 14%; }
  .calendar-botanical .calendar-header-botanical-right { right: 14%; }
}

@media (min-width: 641px) and (max-width: 1080px) {
  .calendar-botanical .calendar-family-summary button:not(.calendar-day-total) {
    display: grid;
    justify-content: stretch;
    gap: 3px;
  }
}

@media (max-width: 720px) {
  .calendar-botanical.portal-page-shell .calendar-toolbar.portal-compact-header {
    padding-block: 8px;
  }
}

@media (max-width: 640px) {
  .calendar-botanical .calendar-toolbar h1 { font-size: 1.2rem; }
  .calendar-botanical .calendar-header-botanical { display: none; }
  .calendar-botanical-utility img { visibility: visible; }
  .calendar-botanical .calendar-filter-botanical { display: block; width: 54px; height: 20px; flex: none; }
  .calendar-botanical .calendar-member-filter { padding: 8px 12px; gap: 8px; }
  .calendar-botanical .calendar-view-picker { flex: 1; gap: 6px; }
  .calendar-botanical .calendar-view-picker select { width: 100%; flex: 1; font-size: 0.75rem; padding-left: 8px; }
  .calendar-botanical .calendar-member-filter .calendar-jump-today { flex: none; min-height: 44px; }
  .calendar-customize-card { max-width: none; }
  .calendar-customize-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .calendar-botanical .calendar-grid article:not(.has-items):not(.today) { display: none; }
  .calendar-botanical .calendar-grid article.mobile-break-continuation { display: none; }
  .calendar-botanical .calendar-break-ribbon { display: none; }
  .calendar-botanical .calendar-break-mobile { display: grid; grid-column: 2; gap: 3px; min-height: 44px; padding: 9px; }
  .calendar-botanical .calendar-family-summary { grid-column: 2; }
  .calendar-botanical .calendar-day-total { min-height: 44px; font-size: 0.72rem; }
  .calendar-botanical .calendar-family-summary button:not(.calendar-day-total) { min-height: 44px; }
  .calendar-botanical .calendar-family-summary button:not(.calendar-day-total) > span { font-size: 0.82rem; }
  .calendar-botanical .calendar-family-summary small { font-size: 0.72rem; }
  .calendar-botanical .calendar-grid article {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 72px;
    padding: 14px 12px;
    gap: 9px;
  }
  .calendar-botanical .calendar-date-heading { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: center; gap: 5px; }
  .calendar-botanical .calendar-date-button,
  .calendar-botanical .calendar-date-heading > strong { flex-direction: column; width: 46px; min-height: 48px; border-radius: 12px; gap: 4px; font-size: 1.25rem; }
  .calendar-botanical .parent-calendar-mobile-weekday,
  .calendar-botanical .calendar-mobile-weekday { display: block; margin: 0; font: 600 0.65rem/1.1 var(--font-body, sans-serif); letter-spacing: 0.05em; text-transform: uppercase; }
  .calendar-botanical .calendar-event { min-height: 48px; padding: 9px; }
  .calendar-botanical .calendar-event > span { font-size: 0.82rem; }
  .calendar-botanical .calendar-event > small { font-size: 0.72rem; }
  .calendar-botanical .calendar-more-button { min-height: 44px; }
  .calendar-botanical .calendar-grid article.today { box-shadow: inset 3px 0 #c0a365; }
  .calendar-botanical .parent-calendar-upcoming { padding: 16px; }
  .calendar-botanical .parent-calendar-upcoming button { width: 100%; min-height: 52px; }
  .parent-calendar-day-dialog { width: calc(100vw - 24px); max-height: 82svh; }
}

@media (max-width: 360px) {
  .calendar-botanical .calendar-filter-botanical { display: none; }
}

/* Preserve the approved open portal frame around the working calendar. */
.portal-open-layout .calendar-botanical .calendar-toolbar .calendar-month-nav-button {
  background: transparent;
  color: #29483a;
}
.portal-open-layout .calendar-botanical .calendar-toolbar .calendar-month-nav-button:hover,
.portal-open-layout .calendar-botanical .calendar-toolbar .calendar-month-nav-button:focus-visible {
  background: #e7eddf;
  color: #203b2f;
}
.parent-calendar-mobile-weekday { display: none; }
@media (max-width: 720px) {
  .calendar-botanical .parent-calendar-mobile-weekday { display: inline; }
}