.school-calendar-module {
  --calendar-border: color-mix(in srgb, var(--primary) 18%, #d6e0ea);
  --calendar-soft: color-mix(in srgb, var(--primary) 8%, #fff);
  --calendar-grid-border: #d8dee7;
  min-width: 0;
  color: #1f2937;
}
.school-settings-calendar-focus { min-width: 0; animation: none !important; transform: none !important; }
.school-settings-calendar-focus > .school-settings-tabs { margin-bottom: 16px; }

.school-calendar-hero {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 48px;
  color: #fff;
  background: linear-gradient(112deg, color-mix(in srgb, var(--primary) 54%, #052f50), color-mix(in srgb, var(--primary) 66%, #083a61));
  border-radius: 8px 8px 0 0;
}
.school-calendar-hero h2 { margin: 0; color: #fff; font-size: 27px; line-height: 1.05; letter-spacing: -.3px; }
.school-calendar-hero p { margin: 4px 0 0; color: rgba(255,255,255,.9); font-size: 12px; }
.school-calendar-hero label { position: relative; display: grid; gap: 3px; min-width: 190px; }
.school-calendar-hero label span { color: rgba(255,255,255,.78); font-size: 10px; font-weight: 700; }
.school-calendar-hero select {
  width: 100%; height: 34px; padding: 0 31px 0 10px; color: #fff;
  border: 1px solid rgba(255,255,255,.34); border-radius: 4px; background: rgba(255,255,255,.12);
  font: inherit; font-size: 12px; font-weight: 800; appearance: none;
}
.school-calendar-hero select option { color: #0a2540; background: #fff; }
.school-calendar-hero label .button-svg { position: absolute; right: 9px; bottom: 8px; width: 16px; height: 16px; pointer-events: none; }

.school-calendar-subtabs {
  display: flex; align-items: end; gap: 7px; padding: 8px 38px 0;
  border: 1px solid var(--calendar-border); border-top: 0; background: var(--surface, #fff);
}
.school-calendar-subtabs button {
  min-height: 41px; padding: 0 26px; border: 1px solid var(--calendar-border); border-bottom: 0;
  border-radius: 5px 5px 0 0; color: var(--dark-blue, #173f63); background: #fff;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.school-calendar-subtabs button:hover { color: var(--primary); background: var(--calendar-soft); }
.school-calendar-subtabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 -3px 10px color-mix(in srgb, var(--primary) 18%, transparent); }
.school-calendar-content { padding: 0 38px 24px; border: 1px solid var(--calendar-border); border-top: 0; background: color-mix(in srgb, var(--app-bg, #f5f9fc) 44%, #fff); }
.school-calendar-intro-text { margin: 0 0 12px; padding: 10px 12px; color: #374151; border: 1px solid var(--calendar-border); border-top: 0; border-radius: 0 0 6px 6px; background: var(--surface, #fff); font-size: 12px; }
.school-calendar-overview-grid { display: grid; grid-template-columns: minmax(0, 1.86fr) minmax(300px, 1fr); gap: 16px; }
.school-calendar-overview-grid > div, .school-calendar-overview-grid > aside { min-width: 0; }
.school-calendar-overview-grid > div { display: grid; gap: 12px; }
.school-calendar-overview-grid > aside { display: grid; align-content: start; gap: 12px; }

.school-calendar-main-card,
.school-calendar-side-card,
.school-calendar-period-card,
.school-calendar-validation,
.school-calendar-placeholder,
.school-calendar-empty,
.school-calendar-error,
.school-calendar-loading {
  border: 1px solid var(--calendar-border); border-radius: 8px; background: var(--surface, #fff);
  box-shadow: 0 4px 14px rgba(10,37,64,.055);
}
.school-calendar-main-card { min-width: 0; padding: 13px 16px 11px; overflow: hidden; }
.school-calendar-main-card > header { display: grid; grid-template-columns: minmax(185px, 1fr) auto minmax(165px, 1fr); gap: 12px; align-items: center; padding: 0 0 12px; }
.school-calendar-main-card > header > div { display: flex; align-items: center; gap: 7px; }
.school-calendar-main-card > header button { width: 42px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--sidebar-bg, var(--dark-blue)); border: 1px solid var(--calendar-border); border-radius: 6px; background: #fff; }
.school-calendar-main-card > header button:hover { color: var(--primary); border-color: var(--primary); background: var(--calendar-soft); }
.school-calendar-main-card > header h3 { margin: 0; color: var(--sidebar-bg, var(--dark-blue)); font-size: 20px; line-height: 1; }
.school-calendar-month-navigation { justify-self: start; }
.calendar-month-arrow .button-svg { width: 18px; height: 18px; stroke-width: 2.4; }
.calendar-month-arrow.previous .button-svg { transform: rotate(180deg); }
.school-calendar-main-card > header .calendar-today-button { width: auto; min-width: 82px; padding: 0 12px; color: var(--sidebar-bg, var(--dark-blue)); font-size: 11px; font-weight: 800; }
.school-calendar-month-title { justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.calendar-month-title-icon { width: 21px; height: 21px; color: var(--primary); }
.school-calendar-year-picker { position: relative; width: 22px; height: 26px; display: grid; place-items: center; color: var(--primary); cursor: pointer; }
.school-calendar-year-picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.school-calendar-year-picker .button-svg { width: 14px; height: 14px; pointer-events: none; }
.school-calendar-view-switch { justify-self: end; padding: 2px; border: 1px solid var(--calendar-border); border-radius: 5px; }
.school-calendar-view-switch button { width: auto !important; min-width: 75px; display: inline-flex !important; gap: 6px; padding: 0 10px !important; border: 0 !important; }
.school-calendar-view-switch button.active { color: #fff; background: var(--primary); }
.school-calendar-view-switch .button-svg { width: 15px; height: 15px; }

.school-calendar-weekdays, .school-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.school-calendar-weekdays { overflow: hidden; border: 3px double var(--calendar-grid-border); border-bottom: 0; border-radius: 5px 5px 0 0; background: #fff; }
.school-calendar-weekdays span { min-height: 42px; display: grid; place-items: center; padding: 8px 5px; color: var(--sidebar-bg, var(--dark-blue)); border-right: 3px double var(--calendar-grid-border); font-size: 11px; font-weight: 900; text-align: center; }
.school-calendar-weekdays span:last-child { border-right: 0; }
.school-calendar-weekdays span:nth-child(6), .school-calendar-weekdays span:nth-child(7) { color: #b42318; }
.school-calendar-grid { overflow: hidden; border: 3px double var(--calendar-grid-border); border-radius: 0 0 5px 5px; }
.school-calendar-day { position: relative; min-width: 0; min-height: 72px; overflow: hidden; padding: 7px 6px; border: 0; border-right: 3px double var(--calendar-grid-border); border-bottom: 3px double var(--calendar-grid-border); background: #fff; text-align: center; }
.school-calendar-day:nth-child(7n) { border-right: 0; }
.school-calendar-day:nth-last-child(-n+7) { border-bottom: 0; }
.school-calendar-day > b { position: absolute; top: 50%; left: 50%; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; color: #111827; border: 1px solid transparent; border-radius: 50%; font-size: 14px; transform: translate(-50%, -50%); }
.school-calendar-day.weekend { background: #fff; }
.school-calendar-day.weekend > b { color: #b42318; }
.school-calendar-day.outside { background: #f7f8fa; }
.school-calendar-day.outside > b { color: #a8b0bb; }
.school-calendar-day.weekend.outside { background: #f7f8fa; }
.school-calendar-day.closed:not(.weekend):not(.outside) { background: #fff; }
.school-calendar-day.today > b { color: #fff; border: 2px solid var(--primary); background: var(--primary); box-shadow: 0 2px 7px color-mix(in srgb, var(--primary) 30%, transparent); }
.school-calendar-day > div { position: absolute; right: 6px; bottom: 6px; left: 6px; z-index: 2; display: grid; gap: 2px; }
.school-calendar-day > div > small { color: var(--muted); font-size: 8px; }
.calendar-event-chip { width: 100%; min-width: 0; height: 19px; overflow: hidden; padding: 0 5px; border: 0; border-radius: 4px; color: #17476f; background: #e0f0ff; font-size: 8.7px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-chip:hover { text-decoration: underline; }
.calendar-event-chip.meeting { color: #6030b3; background: #eadfff; }
.calendar-event-chip.assessment { color: #a65a00; background: #fff0d8; }
.calendar-event-chip.holiday { color: #176a42; background: #dff5e9; }
.calendar-event-chip.closure, .calendar-event-chip.public_holiday { color: #5e6873; background: #e9edf1; }
.calendar-event-chip.pedagogical { color: #0b5eae; background: #dceeff; }

.school-calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; padding: 12px 0 1px; color: #1f2937; font-size: 10px; }
.school-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.school-calendar-legend i { width: 12px; height: 12px; border: 1px solid var(--calendar-border); border-radius: 3px; background: #fff; }
.school-calendar-legend i.holiday { background: #bdebd0; border-color: #70c994; }
.school-calendar-legend i.public_holiday { background: #e5e8eb; border-color: #c7cdd2; }
.school-calendar-legend i.assessment { background: #fff0d8; border: 3px solid #f7a12c; }
.school-calendar-legend i.event { background: #2b91e5; border-color: #2b91e5; }
.school-calendar-legend i.meeting { background: #8651e5; border-color: #8651e5; }

.school-calendar-side-card { padding: 16px 18px; }
.school-calendar-side-card h3, .school-calendar-period-card h3 { margin: 0 0 10px; color: var(--sidebar-bg, var(--dark-blue)); font-size: 16px; }
.school-calendar-side-card.upcoming { min-height: 310px; background: linear-gradient(145deg, var(--calendar-soft), color-mix(in srgb, var(--primary) 5%, #fff)); }
.school-calendar-side-card.upcoming > div { display: grid; gap: 6px; }
.school-calendar-side-card.upcoming > div > button { display: grid; grid-template-columns: 46px 8px minmax(0, 1fr); align-items: start; gap: 8px; padding: 3px 0; border: 0; color: inherit; background: transparent; text-align: left; }
.school-calendar-side-card.upcoming > div > button:hover strong { color: var(--primary); text-decoration: underline; }
.school-calendar-side-card.upcoming > div > button > span { display: grid; place-items: center; padding: 3px; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; }
.school-calendar-side-card.upcoming > div > button > span small { color: var(--muted); font-size: 8px; font-weight: 800; }
.school-calendar-side-card.upcoming > div > button > span b { color: #111827; font-size: 17px; }
.calendar-event-month { color: #6b7280; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .35px; line-height: 1; }
.school-calendar-side-card.upcoming > div > button > i { width: 7px; height: 7px; margin-top: 10px; border-radius: 50%; background: #268ee0; }
.school-calendar-side-card.upcoming > div > button > i.meeting { background: #8851e5; }
.school-calendar-side-card.upcoming > div > button > i.assessment { background: #f39b1d; }
.school-calendar-side-card.upcoming > div > button > i.holiday { background: #2da768; }
.school-calendar-side-card.upcoming p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.school-calendar-side-card.upcoming p strong { color: var(--dark-blue); font-size: 11px; }
.calendar-draft-marker { display: inline-flex; margin-left: 6px; padding: 1px 5px; color: #8b6200; border-radius: 999px; background: #fff1c9; font-size: 7px; font-style: normal; vertical-align: middle; }
.school-calendar-side-card.upcoming p small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }
.school-calendar-side-card.upcoming p .button-svg { width: 10px; height: 10px; }
.calendar-see-all { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 7px; padding: 7px; border: 0; color: var(--primary); background: transparent; font-size: 10px; font-weight: 800; }
.calendar-see-all .button-svg { width: 13px; height: 13px; }

.school-calendar-side-card.summary dl { margin: 0; }
.school-calendar-side-card.summary dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--calendar-border); }
.school-calendar-side-card.summary dl > div:last-child { border-bottom: 0; }
.school-calendar-side-card.summary dt { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.school-calendar-side-card.summary dt .button-svg { width: 13px; height: 13px; color: var(--primary); }
.school-calendar-side-card.summary dd { margin: 0; color: #1f2937; font-size: 10px; font-weight: 800; text-align: right; }
.calendar-publish-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.calendar-publish-status.published { color: #147346; background: #dff5e9; }
.calendar-publish-status.draft { color: #9a6200; background: #fff0d2; }
.school-calendar-validation { display: flex; align-items: center; gap: 9px; padding: 12px 14px; color: #9b5700; border-color: #f0cd8b; background: #fff9eb; }
.school-calendar-validation > .button-svg { width: 18px; height: 18px; }
.school-calendar-validation div { min-width: 0; display: grid; gap: 2px; }
.school-calendar-validation strong { font-size: 11px; }
.school-calendar-validation small { color: #8d6c3c; font-size: 9px; }
.school-calendar-validation button { margin-left: auto; padding: 7px 10px; color: #9b5700; border: 1px solid #f0cd8b; border-radius: 4px; background: transparent; font-size: 9px; font-weight: 800; }
.school-calendar-validation.ok { color: #147346; border-color: #bfe7d1; background: #effaf4; }
.school-calendar-validation.ok small { color: #4d7a65; }

.school-calendar-period-card { min-height: 158px; padding: 16px 20px; }
.school-calendar-period-card > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; align-items: center; }
.school-calendar-period-card > div > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--primary); border-radius: 6px; background: var(--calendar-soft); }
.school-calendar-period-card > div > span .card-svg { width: 28px; height: 28px; }
.school-calendar-period-card dl { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.45fr 1.1fr; gap: 16px; margin: 0; }
.school-calendar-period-card dl > div { min-width: 0; display: grid; align-content: start; gap: 4px; }
.school-calendar-period-card dt { color: var(--muted); font-size: 9px; }
.school-calendar-period-card dd { margin: 0; color: #1f2937; font-size: 10px; font-weight: 800; }
.school-calendar-period-card dd small { display: block; margin-top: 3px; color: #2a9c61; font-size: 8px; font-weight: 600; }
.school-calendar-period-card.empty .calendar-period-empty { min-height: 92px; grid-template-columns: 68px minmax(0, 1fr); }
.calendar-period-empty > div { display: grid; align-content: center; gap: 5px; }
.calendar-period-empty strong { color: var(--sidebar-bg, var(--dark-blue)); font-size: 13px; }
.calendar-period-empty p { max-width: 520px; margin: 0; color: #4b5563; font-size: 10px; line-height: 1.45; }

.school-calendar-list { width: 100%; overflow-x: auto; padding-top: 10px; }
.school-calendar-list table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 11px; }
.school-calendar-list th { padding: 9px; color: #fff; background: var(--primary); text-align: left; }
.school-calendar-list td { padding: 9px; border-bottom: 1px solid var(--calendar-border); }
.school-calendar-list tbody tr:nth-child(even) { background: var(--calendar-soft); }
.school-calendar-list tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 70%, #fff); cursor: pointer; }
.calendar-table-link { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; }
.calendar-table-link:hover { color: var(--primary); text-decoration: underline; }
.calendar-category-badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #e1effb; font-size: 9px; }

.school-calendar-hero.periods-active { min-height: 120px; }
.calendar-period-hero-controls { min-width: 530px; display: grid; grid-template-columns: minmax(270px, 1.08fr) minmax(215px, .92fr); gap: 22px; align-items: stretch; }
.calendar-period-hero-controls > label, .calendar-period-hero-controls > section { min-width: 0; display: grid; align-content: center; gap: 7px; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.28); }
.calendar-period-hero-controls > label > span, .calendar-period-hero-controls > section > span { color: rgba(255,255,255,.88); font-size: 10px; font-weight: 800; }
.calendar-period-hero-controls label > div { position: relative; width: 100%; max-width: 260px; height: 40px; padding: 0; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 18%, #fff); border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(8,31,55,.12); }
.calendar-period-hero-controls label > div:has(select:focus-visible) { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), 0 3px 10px rgba(8,31,55,.12); }
.calendar-period-hero-controls label > div > .button-svg { position: absolute; z-index: 2; top: 50%; bottom: auto; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.calendar-period-hero-controls label > div > .button-svg:first-child { right: auto; left: 11px; }
.calendar-period-hero-controls label > div > .button-svg:last-child { right: 11px; left: auto; }
.calendar-period-hero-controls select { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0 38px 0 39px; color: #26384e; border: 0; border-radius: inherit; outline: 0; appearance: none; cursor: pointer; background: transparent; font: inherit; font-size: 11px; font-weight: 650; }
.calendar-period-hero-controls select option { color: #172f49; background: #fff; }
.calendar-period-hero-controls > section b { justify-self: start; padding: 5px 10px; color: #8c5b00; border-radius: 5px; background: #fff0cb; font-size: 9px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.calendar-period-hero-controls > section b.published { color: #146b42; background: #dbf5e7; }
.calendar-period-hero-controls > section b.validated { color: #315d9f; background: #e2edff; }
.calendar-period-hero-controls > section b.warning { color: #8b4d00; background: #ffe7c2; }
.calendar-period-hero-controls > section small { color: rgba(255,255,255,.9); font-size: 9px; }

.calendar-periods-intro { margin: 0 0 13px; padding: 10px 12px; color: #27364a; border-radius: 5px; background: var(--calendar-soft); font-size: 11px; }
.calendar-periods-layout { display: grid; grid-template-columns: minmax(0, 3.25fr) minmax(270px, 1fr); gap: 16px; }
.calendar-periods-layout > main, .calendar-periods-layout > aside { min-width: 0; }
.calendar-periods-layout > aside { display: grid; align-content: start; gap: 16px; }
.calendar-periods-panel, .calendar-period-side-card, .calendar-period-recap { border: 1px solid var(--calendar-border); border-radius: 9px; background: #fff; box-shadow: 0 5px 18px rgba(10,37,64,.05); }
.calendar-periods-panel > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--calendar-border); }
.calendar-periods-panel > header h3, .calendar-period-side-card h3, .calendar-period-recap h3 { margin: 0; color: var(--sidebar-bg, var(--dark-blue)); font-size: 14px; line-height: 1.25; }
.calendar-periods-panel > header > div { display: flex; align-items: center; gap: 8px; }
.calendar-periods-panel > header button { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; font-size: 10px; white-space: nowrap; }
.calendar-periods-panel > header .button-svg { width: 14px; height: 14px; }
.calendar-period-readonly { display: inline-flex; align-items: center; gap: 5px; color: #7a5b16; font-size: 10px; font-weight: 800; }
.calendar-period-readonly .button-svg { width: 14px; height: 14px; }

.calendar-period-accordion-list { display: grid; gap: 11px; padding: 4px 12px 14px; }
.calendar-period-accordion { overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 17%, var(--calendar-border)); border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(10,37,64,.055); }
.calendar-period-accordion.highlighted { outline: 2px solid color-mix(in srgb, var(--primary) 48%, transparent); outline-offset: 1px; }
.calendar-period-accordion-header { min-height: 64px; display: grid; grid-template-columns: minmax(170px,1.55fr) minmax(100px,.9fr) 84px 84px minmax(92px,.8fr) 78px 64px; align-items: center; gap: 9px; padding: 10px 11px; color: #26384e; background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 9%, #fff), color-mix(in srgb, var(--primary) 3%, #fff)); }
.calendar-period-accordion.expanded .calendar-period-accordion-header { border-bottom: 1px solid color-mix(in srgb, var(--primary) 13%, var(--calendar-border)); }
.calendar-period-meta { min-width: 0; display: grid; gap: 3px; }
.calendar-period-meta small { color: #6c7888; font-size: 7.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.calendar-period-meta > span:not(.calendar-period-status) { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-period-meta.status { justify-items: start; }
.calendar-periods-table-wrap { width: 100%; overflow-x: auto; }
.calendar-period-child-table-wrap { background: #fff; }
.calendar-periods-table { width: 100%; min-width: 800px; border-collapse: collapse; table-layout: fixed; color: #27364a; font-size: 10px; }
.calendar-periods-table th { padding: 8px 10px; color: #536177; border-bottom: 1px solid var(--calendar-border); background: #fafbfd; font-size: 8px; font-weight: 900; letter-spacing: .015em; text-align: left; text-transform: uppercase; }
.calendar-periods-table th:first-child { width: 28%; }
.calendar-periods-table th:nth-child(2) { width: 17%; }
.calendar-periods-table th:nth-child(3), .calendar-periods-table th:nth-child(4) { width: 12%; }
.calendar-periods-table th:nth-child(5) { width: 14%; }
.calendar-periods-table th:nth-child(6) { width: 10%; }
.calendar-periods-table th:last-child { width: 82px; text-align: right; }
.calendar-periods-table td { padding: 8px 10px; border-bottom: 1px solid #e7edf3; vertical-align: middle; }
.calendar-periods-table td:not(:first-child):not(:last-child) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-periods-table tbody tr:last-child td { border-bottom: 0; }
.calendar-periods-table tbody tr.highlighted { outline: 2px solid color-mix(in srgb, var(--primary) 48%, transparent); outline-offset: -2px; background: var(--calendar-soft); }
.calendar-period-child-row td { color: #445369; background: #fff; }
.calendar-period-child-row:nth-child(even) td { background: color-mix(in srgb, var(--primary) 3.5%, #fff); }
.calendar-period-child-row:hover td { background: color-mix(in srgb, var(--primary) 7%, #fff); }
.calendar-period-no-children { padding: 18px !important; color: #6a7788; text-align: center; }
.calendar-period-name { display: flex; align-items: center; gap: 10px; }
.calendar-period-name > span { width: 26px; height: 26px; display: grid; flex: 0 0 auto; place-items: center; color: var(--primary); border-radius: 50%; background: var(--calendar-soft); font-weight: 900; }
.calendar-period-name strong { color: color-mix(in srgb, var(--primary) 72%, #16283d); font-size: 10.5px; }
.calendar-child-name { display: flex; align-items: center; gap: 9px; }
.calendar-period-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); }
.calendar-period-dot.teaching { background: #28a564; }
.calendar-period-dot.exams { background: #f09b26; }
.calendar-period-dot.report_preparation { background: #3766d8; }
.calendar-period-dot.report_publication { background: #7441c8; }
.calendar-period-status { display: inline-flex; padding: 3px 7px; border-radius: 4px; font-size: 8.5px; font-weight: 800; }
.calendar-period-status.published { color: #167347; border: 1px solid #bce8d0; background: #e6f8ee; }
.calendar-period-status.validated { color: #315d9f; border: 1px solid #bfd3ef; background: #edf4ff; }
.calendar-period-status.draft { color: #956000; border: 1px solid #efd69d; background: #fff5dc; }
.calendar-period-row-actions { position: relative; display: flex; justify-content: flex-end; gap: 3px; }
.calendar-period-row-actions > button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: #49617a; border: 0; border-radius: 4px; background: transparent; }
.calendar-period-row-actions > button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-period-row-actions .button-svg { width: 15px; height: 15px; }
.period-expand-button .button-svg { transition: transform .15s ease; }
.period-expand-button[aria-expanded="true"] .button-svg { transform: rotate(180deg); }
.calendar-period-menu { position: fixed; z-index: 115; width: 218px; display: grid; padding: 6px; border: 1px solid var(--calendar-border); border-radius: 6px; background: #fff; box-shadow: 0 14px 38px rgba(10,37,64,.22); }
.calendar-period-menu button { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; color: #27364a; border: 0; border-radius: 4px; background: transparent; font-size: 10px; text-align: left; }
.calendar-period-menu button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-period-menu button.danger { color: #b42318; }
.calendar-period-menu .button-svg { width: 14px; height: 14px; }

.calendar-period-recap { margin: 12px; padding: 13px 15px; background: linear-gradient(115deg, color-mix(in srgb, var(--primary) 3%, #fff), #fff); box-shadow: none; }
.calendar-period-recap > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 11px; }
.calendar-period-recap article { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-right: 1px solid var(--calendar-border); }
.calendar-period-recap article:first-child { padding-left: 0; }
.calendar-period-recap article:last-child { border-right: 0; }
.calendar-period-recap article > span { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; color: var(--primary); border-radius: 7px; background: var(--calendar-soft); }
.calendar-period-recap article.exams > span { color: #d97a00; background: #fff1d8; }
.calendar-period-recap article.teaching > span { color: #2c7bc5; background: #e7f2ff; }
.calendar-period-recap article.preparation > span { color: #3865ce; background: #e9efff; }
.calendar-period-recap article.publication > span { color: #28879a; background: #e4f5f7; }
.calendar-period-recap .button-svg { width: 18px; height: 18px; }
.calendar-period-recap p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.calendar-period-recap strong { color: var(--sidebar-bg, var(--dark-blue)); font-size: 16px; line-height: 1; }
.calendar-period-recap small { color: #526175; font-size: 8.5px; line-height: 1.3; }
.calendar-period-continuity-note { display: flex; align-items: center; gap: 7px; margin: 10px 8px 0; color: #526175; font-size: 9.5px; }
.calendar-period-continuity-note .button-svg { width: 14px; height: 14px; color: var(--primary); }

.calendar-period-side-card { padding: 16px; }
.calendar-period-side-card.current { color: #fff; border-color: color-mix(in srgb, var(--primary) 70%, #fff); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 88%, var(--sidebar-bg, #17344f)), var(--sidebar-bg, var(--primary))); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent); }
.calendar-period-side-card.current h3 { color: #fff; }
.calendar-current-period { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 11px; align-items: center; margin-top: 13px; padding: 13px 0 14px; border-bottom: 1px solid rgba(255,255,255,.25); }
.calendar-current-period > span { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: rgba(255,255,255,.16); }
.calendar-current-period .card-svg { width: 21px; height: 21px; }
.calendar-current-period p { display: grid; gap: 3px; margin: 0; }
.calendar-current-period strong { color: #fff; font-size: 14px; }
.calendar-current-period small { color: rgba(255,255,255,.82); font-size: 9px; }
.calendar-period-progress { display: grid; gap: 7px; margin-top: 13px; }
.calendar-period-progress label, .calendar-period-progress p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: rgba(255,255,255,.82); font-size: 9px; }
.calendar-period-progress i { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.2); }
.calendar-period-progress i em { height: 100%; display: block; border-radius: inherit; background: #fff; }
.calendar-period-progress p strong { color: #fff; font-size: 9px; }
.calendar-current-empty { display: grid; justify-items: start; gap: 7px; margin-top: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.calendar-current-empty .card-svg { width: 25px; height: 25px; color: #fff; }
.calendar-current-empty strong { color: #fff; font-size: 11px; }
.calendar-current-empty p { margin: 0; color: rgba(255,255,255,.82); font-size: 9px; line-height: 1.4; }
.calendar-period-side-card.current > small { display: block; margin-top: 11px; color: rgba(255,255,255,.78); font-size: 8.5px; }
.calendar-period-side-card.checks { box-shadow: 0 4px 14px rgba(10,37,64,.035); }
.calendar-period-side-card.checks > div { display: grid; margin-top: 10px; }
.calendar-period-side-card.checks > div > button { min-height: 42px; display: grid; grid-template-columns: 20px minmax(0,1fr) 14px; align-items: center; gap: 7px; padding: 8px 0; color: #34445a; border: 0; border-bottom: 1px solid var(--calendar-border); background: transparent; text-align: left; }
.calendar-period-side-card.checks > div > button > span { width: 18px; height: 18px; display: grid; place-items: center; color: #1aa05e; border-radius: 50%; background: #e1f7eb; }
.calendar-period-side-card.checks > div > button.warning > span { color: #d57a00; background: #fff0d4; }
.calendar-period-side-card.checks > div > button.error > span { color: #bd3025; background: #fee7e5; }
.calendar-period-side-card.checks > div > button.info > span { color: #356bd1; background: #e9efff; }
.calendar-period-side-card.checks .button-svg { width: 12px; height: 12px; }
.calendar-period-side-card.checks b { font-size: 9px; font-weight: 700; line-height: 1.35; }
.calendar-messages-button { width: 100%; margin-top: 14px; padding: 9px; color: var(--primary); border: 1px solid var(--primary); border-radius: 4px; background: #fff; font-size: 9px; font-weight: 800; }
.calendar-periods-empty { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 26px; text-align: center; }
.calendar-periods-empty .card-svg { width: 40px; height: 40px; color: var(--primary); }
.calendar-periods-empty h3, .calendar-periods-empty p { margin: 0; }
.calendar-periods-empty p { color: #627086; font-size: 10px; }

.calendar-closures-intro { display: flex; align-items: center; gap: 8px; }
.calendar-closures-intro .button-svg { width: 14px; height: 14px; color: var(--primary); }
.calendar-closures-layout { display: grid; grid-template-columns: minmax(0,2.25fr) minmax(275px,1fr); gap: 16px; }
.calendar-closures-layout > main, .calendar-closures-layout > aside { min-width: 0; }
.calendar-closures-layout > aside { display: grid; align-content: start; gap: 13px; }
.calendar-closures-panel, .calendar-closure-side-card { overflow: hidden; border: 1px solid var(--calendar-border); border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(10,37,64,.05); }
.calendar-closures-panel > header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; }
.calendar-closures-panel > header h3, .calendar-closure-side-card h3 { margin: 0; color: var(--sidebar-bg, var(--dark-blue)); font-size: 15px; }
.calendar-closures-panel > header > div { display: flex; align-items: center; gap: 8px; }
.calendar-closures-panel > header button { min-height: 35px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 11.5px; }
.calendar-closures-panel > header button b { min-width: 16px; height: 16px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--primary); font-size: 7px; }
.calendar-closures-panel > header .button-svg { width: 14px; height: 14px; }
.calendar-closure-month-toolbar { position: relative; z-index: 4; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--calendar-border); background: color-mix(in srgb, var(--primary) 3%, #fff); }
.calendar-closure-month-control { display: flex; align-items: center; gap: 12px; color: #526175; font-size: 12px; font-weight: 800; }
.calendar-closure-month-navigator { display: grid; grid-template-columns: 36px minmax(220px,260px) 36px; align-items: center; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--calendar-border)); border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(13,45,76,.06); }
.calendar-closure-month-navigator > button { width: 36px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--primary); border: 0; background: transparent; transition: background .15s ease, color .15s ease; }
.calendar-closure-month-navigator > button:hover { color: color-mix(in srgb, var(--primary) 82%, #000); background: var(--calendar-soft); }
.calendar-closure-month-navigator > button:first-child { border-radius: 7px 0 0 7px; }
.calendar-closure-month-navigator > button:last-child { border-radius: 0 7px 7px 0; }
.calendar-closure-month-navigator > button:first-child .button-svg { transform: rotate(180deg); }
.calendar-closure-month-picker { position: relative; min-width: 0; border-right: 1px solid var(--calendar-border); border-left: 1px solid var(--calendar-border); }
.calendar-closure-month-trigger { width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 13px; color: var(--sidebar-bg, #17344f); border: 0; background: #fff; font: inherit; font-size: 12px; text-align: left; }
.calendar-closure-month-trigger:hover { background: color-mix(in srgb, var(--primary) 3%, #fff); }
.calendar-closure-month-trigger:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 62%, #fff); outline-offset: -2px; }
.calendar-closure-month-trigger .button-svg { flex: 0 0 auto; transition: transform .18s ease; }
.calendar-closure-month-trigger[aria-expanded="true"] .button-svg { transform: rotate(180deg); }
.calendar-closure-month-menu { position: absolute; top: calc(100% + 7px); right: -1px; left: -1px; z-index: 40; max-height: 270px; overflow-y: auto; padding: 6px; border: 1px solid color-mix(in srgb, var(--primary) 23%, var(--calendar-border)); border-radius: 9px; background: #fff; box-shadow: 0 18px 42px rgba(12,38,68,.18), 0 3px 10px rgba(12,38,68,.08); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 30%, #d6deea) transparent; }
.calendar-closure-month-menu button { position: relative; width: 100%; min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; color: #33445b; border: 0; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; text-align: left; }
.calendar-closure-month-menu button:hover, .calendar-closure-month-menu button:focus-visible { color: var(--primary); outline: 0; background: var(--calendar-soft); }
.calendar-closure-month-menu button.selected { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, #fff); font-weight: 850; }
.calendar-closure-month-menu button.selected::before { position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 2px; background: var(--primary); content: ""; }
.calendar-closure-month-menu .button-svg, .calendar-closure-month-toolbar .button-svg { width: 14px; height: 14px; }
.calendar-closure-month-toolbar > small { color: #6a788a; font-size: 11px; }
.calendar-event-month-toolbar { z-index: 8; border-top: 1px solid var(--calendar-border); border-bottom: 0; background: color-mix(in srgb, var(--primary) 2.5%, #fff); }
.calendar-event-month-trigger > span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calendar-event-month-trigger > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-month-trigger > span small { flex: 0 0 auto; color: #748196; font-size: 9px; font-weight: 700; }
.calendar-event-month-menu button > span { min-width: 0; display: grid; gap: 2px; }
.calendar-event-month-menu button > span b { overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: 11px; white-space: nowrap; }
.calendar-event-month-menu button > span small { color: #8490a1; font-size: 9px; font-weight: 650; }
.calendar-event-month-menu button.has-data > span small { color: color-mix(in srgb, var(--primary) 78%, #34445a); }
.calendar-event-month-menu button.empty { color: #8b96a6; }
.calendar-event-month-menu button em { min-width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; color: var(--primary); border-radius: 11px; background: color-mix(in srgb, var(--primary) 11%, #fff); font-size: 9px; font-style: normal; font-weight: 900; }
.calendar-event-month-menu button.selected > span small { color: var(--primary); }
.calendar-closure-all-months { padding: 7px 10px; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--calendar-border)); border-radius: 5px; background: #fff; font-size: 12px; font-weight: 800; }
.calendar-closure-quick-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 13px; border-bottom: 1px solid var(--calendar-border); }
.calendar-closure-quick-filters button { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: #445369; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; font-size: 11px; font-weight: 750; }
.calendar-closure-quick-filters button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-closure-quick-filters button.active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 20%, transparent); }
.calendar-closure-quick-filters i { width: 6px; height: 6px; border-radius: 50%; background: #2aa866; }
.calendar-closure-quick-filters i.public-holiday { background: #ef980f; }
.calendar-closure-quick-filters i.exceptional { background: #e0484e; }
.calendar-closure-quick-filters i.pedagogical { background: #2c7bd0; }
.calendar-closures-table-wrap { width: 100%; overflow-x: auto; }
.calendar-closures-table { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; color: #27364a; font-size: 11px; }
.calendar-closures-table th { padding: 10px 8px; color: #445369; border-bottom: 1px solid var(--calendar-border); background: #fbfcfd; font-size: 10px; font-weight: 900; text-align: left; }
.calendar-closures-table th:first-child { width: 22%; padding-left: 11px; }
.calendar-closures-table th:nth-child(2) { width: 15%; }
.calendar-closures-table th:nth-child(3), .calendar-closures-table th:nth-child(4) { width: 11%; }
.calendar-closures-table th:nth-child(5) { width: 9%; }
.calendar-closures-table th:nth-child(6) { width: 16%; }
.calendar-closures-table th:nth-child(7) { width: 10%; }
.calendar-closures-table th:last-child { width: 48px; text-align: center; }
.calendar-closures-table td { height: 60px; overflow: hidden; padding: 8px 6px; border-bottom: 1px solid #e7edf3; vertical-align: middle; }
.calendar-closures-table td:first-child { padding-left: 10px; }
.calendar-closures-table td > strong { display: block; color: #27364a; font-size: 11px; }
.calendar-closures-table td > small { display: block; margin-top: 2px; color: #6b7889; font-size: 9.5px; }
.calendar-closures-table tr.cancelled { opacity: .65; }
.calendar-closure-title { width: 100%; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 7px; padding: 0; color: inherit; border: 0; background: transparent; text-align: left; }
.calendar-closure-title > span { width: 28px; height: 28px; display: grid; place-items: center; color: #208a52; border: 1px solid #9fd8b8; border-radius: 50%; background: #e4f7ec; }
.calendar-closure-title > span.public-holiday { color: #d77b00; border-color: #f1c27b; background: #fff3de; }
.calendar-closure-title > span.exceptional { color: #d5323b; border-color: #f3b4b8; background: #fff0f1; }
.calendar-closure-title > span.pedagogical { color: #2b72bd; border-color: #b7d5ef; background: #edf6ff; }
.calendar-closure-title .button-svg { width: 17px; height: 17px; }
.calendar-closure-title p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.calendar-closure-title strong, .calendar-closure-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-closure-title strong { color: #1f2d40; font-size: 9.5px; }
.calendar-closure-title small { color: #6b7889; font-size: 9.5px; }
.calendar-closure-type, .calendar-closure-impact, .calendar-closure-status { box-sizing: border-box; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; padding: 4px 7px; border: 1px solid #b9e2c9; border-radius: 5px; color: #1d7b4c; background: #ecf8f1; font-size: 9.5px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.calendar-closure-type, .calendar-closure-impact { text-align: left; }
.calendar-closure-impact .button-svg { flex: 0 0 auto; }
.calendar-closure-type.public-holiday, .calendar-closure-impact.public-holiday { color: #b96800; border-color: #f0d19d; background: #fff7e9; }
.calendar-closure-type.exceptional, .calendar-closure-impact.exceptional { color: #be2832; border-color: #f1c0c3; background: #fff1f2; }
.calendar-closure-type.pedagogical, .calendar-closure-impact.pedagogical { color: #2869ad; border-color: #c4daef; background: #eff7ff; }
.calendar-closure-impact .button-svg, .calendar-closure-status .button-svg { width: 12px; height: 12px; }
.calendar-closure-status.published { color: #1d7b4c; border-color: #b9e2c9; background: #ecf8f1; }
.calendar-closure-status.draft { color: #936000; border-color: #ebd398; background: #fff6df; }
.calendar-closure-status.cancelled { color: #a32b34; border-color: #efbec2; background: #fff0f1; }
.calendar-closure-row-actions { position: relative; display: grid; place-items: center; }
.calendar-closure-row-actions > button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: #4a627a; border: 0; border-radius: 4px; background: transparent; }
.calendar-closure-row-actions > button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-closure-row-actions .button-svg { width: 14px; height: 14px; }
.calendar-closure-menu { position: fixed; z-index: 118; width: 220px; display: grid; padding: 6px; border: 1px solid var(--calendar-border); border-radius: 6px; background: #fff; box-shadow: 0 14px 38px rgba(10,37,64,.22); }
.calendar-closure-menu button { min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; color: #27364a; border: 0; border-radius: 4px; background: transparent; font-size: 11.5px; text-align: left; }
.calendar-closure-menu button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-closure-menu button.danger { color: #b42318; }
.calendar-closures-pagination { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 15px; color: #617085; font-size: 10px; }
.calendar-closures-pagination > div { display: flex; align-items: center; gap: 5px; }
.calendar-closures-pagination button, .calendar-closures-pagination b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; }
.calendar-closures-pagination button { padding: 0; color: var(--primary); border: 1px solid var(--calendar-border); background: #fff; }
.calendar-closures-pagination button:first-child .button-svg { transform: rotate(90deg); }
.calendar-closures-pagination button:last-child .button-svg { transform: rotate(-90deg); }
.calendar-closures-pagination b { color: #fff; background: var(--primary); }
.calendar-closures-empty { min-height: 310px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 28px; text-align: center; }
.calendar-closures-empty .card-svg { width: 38px; height: 38px; color: var(--primary); }
.calendar-closures-empty h3, .calendar-closures-empty p { margin: 0; }
.calendar-closures-empty h3 { color: var(--sidebar-bg, var(--dark-blue)); font-size: 14px; }
.calendar-closures-empty p { color: #637187; font-size: 11px; }
.calendar-closures-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.calendar-closure-next { width: 100%; display: grid; gap: 11px; padding: 17px; color: #fff; border: 1px solid color-mix(in srgb, var(--primary) 72%, #fff); border-radius: 8px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 88%, var(--sidebar-bg, #17344f)), var(--sidebar-bg, var(--primary))); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent); text-align: left; }
.calendar-closure-next header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-closure-next h3 { margin: 0; color: #fff; font-size: 10px; }
.calendar-closure-next header > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.15); }
.calendar-closure-next .button-svg { width: 17px; height: 17px; }
.calendar-closure-next > strong { color: #fff; font-size: 15px; line-height: 1.25; }
.calendar-closure-next > em { justify-self: start; padding: 4px 7px; color: #b9f4d4; border-radius: 4px; background: rgba(5,53,40,.35); font-size: 10px; font-style: normal; font-weight: 800; }
.calendar-closure-next > p { margin: 0; color: rgba(255,255,255,.92); font-size: 11px; font-weight: 650; line-height: 1.6; }
.calendar-closure-next footer { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 11px; font-weight: 750; }
.calendar-closure-next.empty { cursor: default; }
.calendar-closure-next.empty > div { display: grid; justify-items: start; gap: 7px; }
.calendar-closure-next.empty p { margin: 0; color: rgba(255,255,255,.8); font-size: 10.5px; }
.calendar-closure-side-card { padding: 16px; }
.calendar-closure-side-card.impacts > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 13px; }
.calendar-closure-side-card.impacts article { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 11px 5px; border: 1px solid var(--calendar-border); border-radius: 6px; text-align: center; }
.calendar-closure-side-card.impacts article > span { color: #1f9a59; }
.calendar-closure-side-card.impacts article.staff > span { color: #2e70cf; }
.calendar-closure-side-card.impacts article.total > span { color: var(--primary); }
.calendar-closure-side-card.impacts article.exceptional > span { color: #df7a00; }
.calendar-closure-side-card.impacts .button-svg { width: 18px; height: 18px; }
.calendar-closure-side-card.impacts strong { color: #28364b; font-size: 15px; }
.calendar-closure-side-card.impacts small { color: #667489; font-size: 8.8px; line-height: 1.3; }
.calendar-closure-side-card.checks > div { display: grid; margin-top: 9px; }
.calendar-closure-side-card.checks button { min-height: 42px; display: grid; grid-template-columns: 20px minmax(0,1fr) 14px; align-items: center; gap: 7px; padding: 8px 0; color: #35455b; border: 0; border-bottom: 1px solid var(--calendar-border); background: transparent; text-align: left; }
.calendar-closure-side-card.checks button:last-child { border-bottom: 0; }
.calendar-closure-side-card.checks button > span { width: 18px; height: 18px; display: grid; place-items: center; color: #1aa05e; border-radius: 50%; background: #e1f7eb; }
.calendar-closure-side-card.checks button.warning > span { color: #d57a00; background: #fff0d4; }
.calendar-closure-side-card.checks button.error > span { color: #bd3025; background: #fee7e5; }
.calendar-closure-side-card.checks button.info > span { color: #356bd1; background: #e9efff; }
.calendar-closure-side-card.checks .button-svg { width: 12px; height: 12px; }
.calendar-closure-side-card.checks b { font-size: 10.5px; line-height: 1.35; }

.calendar-closure-modal > article { width: min(760px,100%); }
.calendar-closure-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.calendar-closure-form label, #schoolCalendarClosureActionForm label { min-width: 0; display: grid; gap: 5px; color: #34445a; font-size: 11px; font-weight: 800; }
.calendar-closure-form input, .calendar-closure-form select, .calendar-closure-form textarea, #schoolCalendarClosureActionForm textarea { width: 100%; min-height: 38px; padding: 8px 10px; color: #25364b; border: 1px solid var(--calendar-border); border-radius: 5px; outline: 0; background: #fff; font: inherit; font-size: 12px; font-weight: 500; }
.calendar-closure-form select[multiple] { min-height: 78px; }
.calendar-closure-form label > small { color: #718095; font-size: 9px; font-weight: 500; }
.calendar-closure-form input:focus, .calendar-closure-form select:focus, .calendar-closure-form textarea:focus, #schoolCalendarClosureActionForm textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent); }
.calendar-closure-description, .calendar-closure-targets, .calendar-closure-switches, .calendar-closure-duration { grid-column: 1 / -1; }
.calendar-closure-targets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.calendar-closure-switches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 11px; border-radius: 6px; background: var(--calendar-soft); }
.calendar-closure-switches label, .calendar-action-notify { display: flex !important; align-items: center; gap: 8px; }
.calendar-closure-switches input, .calendar-action-notify input { width: 16px; min-height: 16px; height: 16px; accent-color: var(--primary); }
.calendar-closure-duration { display: flex; align-items: center; gap: 8px; padding: 10px; color: color-mix(in srgb, var(--primary) 72%, #17344f); border-radius: 5px; background: var(--calendar-soft); font-size: 11px; }
.calendar-closure-duration .button-svg { width: 14px; height: 14px; }
.calendar-closure-duration span { margin-left: auto; color: #59697e; }
.calendar-closure-filter-dialog { width: min(620px,100%) !important; }
#schoolCalendarClosureActionForm { display: grid; gap: 10px; }
.calendar-action-notify { margin-top: 10px; padding: 10px; border-radius: 5px; background: var(--calendar-soft); }

.calendar-period-modal > article { width: min(700px, 100%); }
.calendar-modal-description { margin: 0 0 14px; color: #526175; font-size: 10px; line-height: 1.45; }
.calendar-form-alert { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px; padding: 10px; color: #9a321f; border: 1px solid #f2c6bf; border-radius: 5px; background: #fff2f0; font-size: 9px; }
.calendar-form-alert.warning { color: #8a5b08; border-color: #eddaa9; background: #fff9e9; }
.calendar-form-alert .button-svg { width: 14px; height: 14px; }
.calendar-period-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.calendar-period-form label { min-width: 0; display: grid; align-content: start; gap: 5px; color: #34445a; font-size: 9px; font-weight: 800; }
.calendar-period-form label[hidden] { display: none !important; }
.calendar-period-form input, .calendar-period-form select, .calendar-period-form textarea { width: 100%; min-height: 38px; padding: 8px 10px; color: #25364b; border: 1px solid var(--calendar-border); border-radius: 5px; outline: 0; background: #fff; font: inherit; font-size: 10px; font-weight: 500; }
.calendar-period-form textarea { resize: vertical; }
.calendar-period-form input:focus, .calendar-period-form select:focus, .calendar-period-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent); }
.calendar-period-note { grid-column: 1 / -1; }
.calendar-period-form output { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 10px; color: color-mix(in srgb, var(--primary) 70%, #17344f); border-radius: 5px; background: var(--calendar-soft); font-size: 10px; }
.calendar-period-form output .button-svg { width: 15px; height: 15px; }
.calendar-field-error { color: #b42318; font-size: 8px; font-weight: 600; }
.calendar-period-modal footer { gap: 8px; }
.calendar-period-modal footer button { min-height: 36px; padding-inline: 14px; }
.danger-action { color: #fff; border: 1px solid #b42318; border-radius: 4px; background: #b42318; font-weight: 800; }
.calendar-delete-dialog { width: min(560px, 100%) !important; }
.calendar-delete-dialog .school-calendar-modal-body > p { margin: 0 0 12px; color: #4d5d71; font-size: 10px; line-height: 1.5; }
.calendar-validation-dialog { width: min(760px, 100%) !important; }
.calendar-validation-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.calendar-validation-summary span { padding: 5px 8px; border-radius: 999px; font-size: 8.5px; font-weight: 800; }
.calendar-validation-summary .success { color: #167347; background: #e4f7ed; }
.calendar-validation-summary .warning { color: #9a6100; background: #fff1d3; }
.calendar-validation-summary .error { color: #b42318; background: #fee9e7; }
.calendar-validation-summary .info { color: #3566b6; background: #e9f0ff; }
.calendar-validation-message-list { display: grid; gap: 7px; }
.calendar-validation-message-list > button { width: 100%; display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: start; gap: 9px; padding: 10px; color: #33455a; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; text-align: left; }
.calendar-validation-message-list > button:hover { border-color: var(--primary); background: var(--calendar-soft); }
.calendar-validation-message-list > button > span { width: 24px; height: 24px; display: grid; place-items: center; color: #16814c; border-radius: 50%; background: #e4f7ed; }
.calendar-validation-message-list > button.warning > span { color: #c27000; background: #fff1d3; }
.calendar-validation-message-list > button.error > span { color: #b42318; background: #fee9e7; }
.calendar-validation-message-list > button.info > span { color: #3566b6; background: #e9f0ff; }
.calendar-validation-message-list .button-svg { width: 13px; height: 13px; }
.calendar-validation-message-list p { display: grid; gap: 3px; margin: 0; }
.calendar-validation-message-list strong { font-size: 10px; }
.calendar-validation-message-list small { color: #657286; font-size: 8.5px; }
.calendar-message-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.calendar-message-filters button { padding: 6px 10px; color: #526175; border: 1px solid var(--calendar-border); border-radius: 999px; background: #fff; font-size: 8.5px; font-weight: 800; }
.calendar-message-filters button.active { color: #fff; border-color: var(--primary); background: var(--primary); }

.calendar-events-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,31%); gap: 14px; }
.calendar-events-layout > main, .calendar-events-layout > aside { min-width: 0; }
.calendar-events-layout > aside { display: grid; align-content: start; gap: 13px; }
.calendar-events-panel, .calendar-event-side-card { border: 1px solid var(--calendar-border); border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(10,37,64,.05); }
.calendar-events-panel { min-width: 0; overflow: hidden; }
.calendar-events-panel > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.calendar-events-panel > header h3, .calendar-event-side-card h3 { margin: 0; color: var(--sidebar-bg, var(--dark-blue)); font-size: 15px; }
.calendar-events-panel > header > div { display: flex; align-items: center; gap: 8px; }
.calendar-events-panel > header button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; font-size: 11px; white-space: nowrap; }
.calendar-events-panel > header button b { min-width: 16px; height: 16px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--primary); font-size: 8px; }
.calendar-events-panel > header .button-svg { width: 14px; height: 14px; }
.calendar-event-view-control { position: relative; }
.calendar-event-view-control > button .button-svg:last-child { width: 11px; }
.calendar-event-view-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 170px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--calendar-border); border-radius: 7px; background: #fff; box-shadow: 0 14px 32px rgba(10,37,64,.18); }
.calendar-event-view-menu button { width: 100%; justify-content: flex-start !important; color: #33445b; border: 0; border-radius: 5px; background: transparent; }
.calendar-event-view-menu button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-event-quick-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 16px 13px; border-top: 1px solid var(--calendar-border); border-bottom: 1px solid var(--calendar-border); }
.calendar-event-quick-filters button { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; color: #445369; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; font-size: 10.5px; font-weight: 800; }
.calendar-event-quick-filters button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-event-quick-filters button.active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 20%, transparent); }
.calendar-event-quick-filters i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #718096; }
.calendar-event-quick-filters i.assessment { background: #3478e5; }
.calendar-event-quick-filters i.meeting { background: #7552d8; }
.calendar-event-quick-filters i.activity { background: #2ca66f; }
.calendar-event-quick-filters i.deadline { background: #ed920f; }
.calendar-event-quick-filters i.ceremony { background: #d94c9a; }
.calendar-events-table-wrap { width: 100%; overflow-x: auto; }
.calendar-events-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; color: #27364a; font-size: 10.5px; }
.calendar-events-table th { padding: 10px 7px; color: #445369; border-bottom: 1px solid var(--calendar-border); background: color-mix(in srgb, var(--primary) 2.5%, #fbfcfd); font-size: 9px; font-weight: 900; text-align: left; }
.calendar-events-table th:first-child { width: 27%; padding-left: 14px; }
.calendar-events-table th:nth-child(2) { width: 13%; }
.calendar-events-table th:nth-child(3) { width: 16%; }
.calendar-events-table th:nth-child(4) { width: 12%; }
.calendar-events-table th:nth-child(5) { width: 15%; }
.calendar-events-table th:nth-child(6) { width: 10%; }
.calendar-events-table th:last-child { width: 46px; text-align: center; }
.calendar-events-table td { height: 58px; overflow: hidden; padding: 7px; border-bottom: 1px solid #e7edf3; vertical-align: middle; }
.calendar-events-table td:first-child { padding-left: 12px; }
.calendar-events-table td > strong { display: block; font-size: 10px; }
.calendar-events-table td > small { display: block; margin-top: 2px; color: #6b7889; font-size: 8.5px; }
.calendar-events-table tr.cancelled { opacity: .62; }
.calendar-event-title { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px; padding: 0; color: inherit; border: 0; background: transparent; text-align: left; }
.calendar-event-title > span { width: 30px; height: 30px; display: grid; place-items: center; color: #45647d; border: 1px solid #c8d5e1; border-radius: 50%; background: #f3f7fa; }
.calendar-event-title > span.assessment { color: #2869c7; border-color: #c8daf8; background: #edf4ff; }
.calendar-event-title > span.meeting { color: #6741cc; border-color: #dacdf8; background: #f4f0ff; }
.calendar-event-title > span.activity, .calendar-event-title > span.event { color: #1e8b59; border-color: #bfe5d0; background: #edf9f2; }
.calendar-event-title > span.deadline, .calendar-event-title > span.bulletin { color: #c66c00; border-color: #f3d4a6; background: #fff7e9; }
.calendar-event-title > span.ceremony { color: #b93280; border-color: #edc8dd; background: #fff0f8; }
.calendar-event-title p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.calendar-event-title strong, .calendar-event-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-title strong { color: #1f2d40; font-size: 10px; }
.calendar-event-title small { color: #6b7889; font-size: 8.5px; }
.calendar-event-title .button-svg { width: 15px; height: 15px; }
.calendar-event-category, .calendar-event-status, .calendar-event-audience { box-sizing: border-box; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #cbd7e3; border-radius: 5px; color: #4b5f75; background: #f5f8fa; font-size: 8.5px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.calendar-event-category.assessment { color: #245fb5; border-color: #c5d9f7; background: #edf4ff; }
.calendar-event-category.meeting { color: #6840c6; border-color: #d9cdf4; background: #f4f0ff; }
.calendar-event-category.activity, .calendar-event-category.event { color: #197b4e; border-color: #bde2cd; background: #edf8f2; }
.calendar-event-category.deadline, .calendar-event-category.bulletin { color: #b56100; border-color: #f0d19d; background: #fff6e7; }
.calendar-event-category.ceremony { color: #ad2d75; border-color: #ebc5d9; background: #fff0f7; }
.calendar-event-status.published { color: #1d7b4c; border-color: #b9e2c9; background: #ecf8f1; }
.calendar-event-status.draft { color: #536273; border-color: #d7dee6; background: #f5f7f9; }
.calendar-event-status.cancelled { color: #a32b34; border-color: #efbec2; background: #fff0f1; }
.calendar-event-status.scheduled { color: #245fb5; border-color: #c5d9f7; background: #edf4ff; }
.calendar-event-audience { color: #384f68; }
.calendar-event-audience .button-svg, .calendar-event-status .button-svg { width: 11px; height: 11px; flex: 0 0 auto; }
.calendar-event-location { max-width: 100%; display: flex; align-items: center; gap: 5px; color: #40536a; overflow-wrap: anywhere; }
.calendar-event-location .button-svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--primary); }
.calendar-event-row-actions { position: relative; display: grid; place-items: center; }
.calendar-event-row-actions > button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: #4a627a; border: 0; border-radius: 4px; background: transparent; }
.calendar-event-row-actions > button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-event-row-actions .button-svg { width: 14px; height: 14px; }
.calendar-event-menu { position: fixed; z-index: 118; width: 238px; max-height: min(350px,calc(100vh - 16px)); display: grid; overflow-y: auto; padding: 6px; border: 1px solid var(--calendar-border); border-radius: 7px; background: #fff; box-shadow: 0 14px 38px rgba(10,37,64,.22); }
.calendar-event-menu button { min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; color: #27364a; border: 0; border-radius: 5px; background: transparent; font-size: 10.5px; text-align: left; }
.calendar-event-menu button:hover { color: var(--primary); background: var(--calendar-soft); }
.calendar-event-menu button.danger { color: #b4232d; }
.calendar-events-pagination { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; color: #637187; font-size: 9px; }
.calendar-events-pagination > div { display: flex; align-items: center; gap: 5px; }
.calendar-events-pagination button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: var(--primary); border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; }
.calendar-events-pagination button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.calendar-events-pagination button:first-child .button-svg { transform: rotate(90deg); }
.calendar-events-pagination button:nth-last-child(2) .button-svg { transform: rotate(-90deg); }
.calendar-events-pagination select { height: 29px; margin-left: 6px; padding: 0 24px 0 8px; color: #536273; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; font-size: 9px; }
.calendar-events-empty { min-height: 310px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 28px; text-align: center; }
.calendar-events-empty .card-svg { width: 38px; height: 38px; color: var(--primary); }
.calendar-events-empty h3, .calendar-events-empty p { margin: 0; }
.calendar-events-empty h3 { color: var(--sidebar-bg, var(--dark-blue)); font-size: 14px; }
.calendar-events-empty p { max-width: 470px; color: #637187; font-size: 10.5px; }
.calendar-events-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 5px; }
.calendar-events-empty > div button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; font-size: 10.5px; }
.calendar-event-next { width: 100%; display: grid; gap: 10px; padding: 17px; color: #fff; border: 1px solid color-mix(in srgb, var(--primary) 72%, #fff); border-radius: 8px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 88%, var(--sidebar-bg, #17344f)), var(--sidebar-bg, var(--primary))); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent); text-align: left; }
.calendar-event-next header { display: flex; align-items: center; justify-content: space-between; }
.calendar-event-next header small { color: rgba(255,255,255,.82); font-size: 9.5px; font-weight: 800; }
.calendar-event-next header span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.15); }
.calendar-event-next header .card-svg { width: 18px; height: 18px; }
.calendar-event-next > strong { color: #fff; font-size: 15px; }
.calendar-event-next > em { width: max-content; padding: 4px 7px; color: #fff; border-radius: 4px; background: rgba(255,255,255,.17); font-size: 8.5px; font-style: normal; font-weight: 800; }
.calendar-event-next > p { display: grid; gap: 3px; margin: 0; color: #fff; font-size: 9.5px; }
.calendar-event-next > p b { color: #fff; }
.calendar-event-next > p span { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.calendar-event-next > p .button-svg { width: 13px; height: 13px; }
.calendar-event-next footer { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.22); }
.calendar-event-next footer > small { color: rgba(255,255,255,.78); font-size: 8.5px; }
.calendar-event-next footer > div { display: flex; gap: 18px; margin-top: 5px; }
.calendar-event-next footer b { display: grid; color: #fff; font-size: 17px; }
.calendar-event-next footer b span { color: rgba(255,255,255,.75); font-size: 7.5px; font-weight: 600; }
.calendar-event-next.empty { min-height: 180px; align-content: center; }
.calendar-event-next.empty p { margin: 0; color: rgba(255,255,255,.82); }
.calendar-event-side-card { padding: 15px; }
.calendar-event-side-card.summary > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.calendar-event-side-card.summary article { min-height: 92px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--calendar-border); border-radius: 6px; text-align: center; }
.calendar-event-side-card.summary .card-svg { width: 18px; height: 18px; color: var(--primary); }
.calendar-event-side-card.summary article.deadlines .card-svg { color: #e88100; }
.calendar-event-side-card.summary article.drafts .card-svg { color: #c43d8b; }
.calendar-event-side-card.summary strong { color: #24334a; font-size: 15px; }
.calendar-event-side-card.summary span { color: #68758a; font-size: 7px; line-height: 1.3; }
.calendar-event-side-card.checks > div { display: grid; margin-top: 9px; }
.calendar-event-side-card.checks > div > button { min-height: 39px; display: grid; grid-template-columns: 20px minmax(0,1fr) 12px; align-items: center; gap: 7px; padding: 8px 2px; color: #33445b; border: 0; border-bottom: 1px solid var(--calendar-border); background: transparent; text-align: left; }
.calendar-event-side-card.checks > div > button > span { width: 19px; height: 19px; display: grid; place-items: center; color: #139355; border-radius: 50%; background: #e3f6eb; }
.calendar-event-side-card.checks > div > button.warning > span { color: #c76b00; background: #fff1d8; }
.calendar-event-side-card.checks > div > button.error > span { color: #c4313c; background: #ffe8ea; }
.calendar-event-side-card.checks .button-svg { width: 11px; height: 11px; }
.calendar-event-side-card.checks b { font-size: 8.5px; line-height: 1.35; }
.calendar-event-report-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 0; color: var(--primary); border: 0; background: transparent; font-size: 9px; font-weight: 850; }
.calendar-event-report-link .button-svg { width: 14px; height: 14px; }
.calendar-event-modal > article { width: min(760px,100%); }
.calendar-event-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 12px; }
.calendar-event-form > label, .calendar-event-form fieldset { min-width: 0; display: grid; align-content: start; gap: 4px; margin: 0; }
.calendar-event-form .wide { grid-column: 1 / -1; }
.calendar-event-form label > span, .calendar-event-form legend { color: #33445b; font-size: 10px; font-weight: 850; }
.calendar-event-form input:not([type="checkbox"]), .calendar-event-form select { width: 100%; height: 33px !important; min-height: 33px !important; padding: 0 9px; color: #25364b; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; font: inherit; font-size: 11px; }
.calendar-event-form textarea { width: 100%; height: 33px !important; min-height: 33px !important; padding: 6px 9px; color: #25364b; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; font: inherit; font-size: 11px; resize: vertical; }
.calendar-event-form select:disabled, .calendar-event-form input:disabled { color: #8491a2; border-color: #dce3eb; background: #f2f5f8; cursor: not-allowed; }
.calendar-event-form label[hidden] { display: none !important; }
.calendar-event-all-day, .calendar-event-notify { display: flex !important; grid-template-columns: 18px minmax(0,1fr); align-items: center; }
.calendar-event-audiences { display: flex !important; flex-wrap: wrap; gap: 8px !important; padding: 11px; border: 1px solid var(--calendar-border); border-radius: 6px; }
.calendar-event-audiences legend { padding: 0 4px; }
.calendar-event-audiences label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fbfcfd; }
.calendar-event-audiences input { accent-color: var(--primary); }
.calendar-event-audiences label span { font-size: 9px; }
.calendar-event-audiences { display: grid !important; gap: 9px !important; }
.calendar-event-audiences > p { margin: 0; color: #66758a; font-size: 9px; }
.calendar-event-audience-options { display: flex; flex-wrap: wrap; gap: 7px; }
.calendar-event-other-audiences { padding-top: 8px; border-top: 1px solid #e8edf3; }
.calendar-event-other-audiences summary { width: fit-content; color: var(--primary); cursor: pointer; font-size: 9px; font-weight: 850; }
.calendar-event-other-audiences[open] summary { margin-bottom: 8px; }
.calendar-event-date-context { margin-top: -5px; }
.calendar-event-period-note { display: inline-flex; align-items: center; gap: 6px; color: #647389; font-size: 9px; font-weight: 700; }
.calendar-event-period-note .button-svg { width: 13px; height: 13px; color: var(--primary); }
.calendar-event-targeting { overflow: hidden; border: 1px solid color-mix(in srgb,var(--primary) 18%,var(--calendar-border)); border-radius: 7px; background: color-mix(in srgb,var(--primary) 2.5%,#fff); }
.school-calendar-modal .calendar-event-targeting > header { padding: 9px 12px; color: #172033; border-bottom: 1px solid var(--calendar-border); background: #f1f5f9; }
.calendar-event-targeting > header div { display: grid; gap: 2px; }
.school-calendar-modal .calendar-event-targeting > header b { color: #111827; font-size: 10px; }
.school-calendar-modal .calendar-event-targeting > header small { color: #536176; font-size: 8.5px; }
.calendar-event-targeting > div { display: grid; grid-template-columns: minmax(135px,.72fr) minmax(170px,1fr) minmax(220px,1.3fr); gap: 9px; padding: 10px 12px; }
.calendar-event-targeting label { display: grid; gap: 5px; }
.calendar-event-targeting label.wide { grid-column: auto; }
.calendar-event-target-hint { grid-column: 1 / -1; margin: 0; padding: 10px; color: #65748a; border: 1px dashed var(--calendar-border); border-radius: 5px; background: #fff; font-size: 9px; text-align: center; }
.calendar-event-structure-source { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 12px 10px; color: #6b7889; font-size: 8.5px; }
.calendar-event-structure-source .button-svg { width: 12px; height: 12px; color: var(--primary); }
.calendar-event-no-structure { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #5f6f84; border: 1px solid var(--calendar-border); border-radius: 6px; background: #f8fafc; font-size: 9px; }
.calendar-event-no-structure .button-svg { width: 14px; height: 14px; color: var(--primary); }
.calendar-event-source { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid color-mix(in srgb,var(--primary) 18%,var(--calendar-border)); border-radius: 6px; background: color-mix(in srgb,var(--primary) 4%,#fff); }
.calendar-event-source > span { color: var(--primary); }
.calendar-event-source p { display: grid; gap: 2px; margin: 0; }
.calendar-event-source b { color: #27364a; font-size: 10px; }
.calendar-event-source small, .calendar-event-notify small { display: block; color: #6b7889; font-size: 8.5px; font-weight: 600; }
.calendar-event-notify.unavailable { opacity: .7; }
.calendar-event-details-modal > article { width: min(780px,100%); }
.calendar-event-details-modal dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; }
.calendar-event-details-modal dl > div { grid-template-columns: 105px minmax(0,1fr); }
.calendar-event-details-modal dl > div.wide { grid-column: 1 / -1; }
.calendar-event-detail-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.calendar-event-detail-status > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: #526175; border: 1px solid var(--calendar-border); border-radius: 5px; font-size: 8.5px; }
.calendar-event-detail-status .button-svg { width: 11px; height: 11px; }
.calendar-event-detail-status > span:not(.calendar-event-status) .button-svg { color: var(--color-sidebar-bg, var(--primary)); }
.calendar-event-detail-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.calendar-event-detail-card { min-width: 0; overflow: hidden; border: 1px solid var(--calendar-border); border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(12,38,68,.035); }
.calendar-event-detail-card.wide { grid-column: 1 / -1; }
.calendar-event-detail-card > header { min-height: 37px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-bottom: 1px solid #e8edf3; background: #f8fafc; }
.calendar-event-detail-card > header .button-svg { width: 14px; height: 14px; color: var(--color-sidebar-bg, var(--primary)); }
.calendar-event-detail-card > header h3 { margin: 0; color: #2d3e54; font-size: 10px; }
.calendar-event-detail-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 11px; }
.calendar-event-detail-card.location .calendar-event-detail-fields, .calendar-event-detail-card.context .calendar-event-detail-fields, .calendar-event-detail-card.source .calendar-event-detail-fields { grid-template-columns: 1fr; }
.calendar-event-detail-fields > div { min-width: 0; display: grid; align-content: start; gap: 4px; }
.calendar-event-detail-fields span { color: var(--color-sidebar-bg, var(--primary)); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.calendar-event-detail-fields strong { overflow-wrap: anywhere; color: #26374c; font-size: 10.5px; line-height: 1.4; }
.calendar-event-detail-fields small { color: #748196; font-size: 8.5px; line-height: 1.35; }
.calendar-event-detail-card.description > p { margin: 0; padding: 12px; color: #34455b; font-size: 10px; line-height: 1.55; white-space: pre-line; }
.calendar-event-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.calendar-event-detail-chips b { padding: 4px 7px; color: var(--primary); border: 1px solid color-mix(in srgb,var(--primary) 18%,var(--calendar-border)); border-radius: 12px; background: color-mix(in srgb,var(--primary) 6%,#fff); font-size: 8.5px; line-height: 1.2; }
.calendar-event-detail-card.lifecycle .calendar-event-detail-fields { grid-template-columns: repeat(4,minmax(0,1fr)); }
.calendar-event-cancellation { display: grid; gap: 3px; margin: 0 11px 11px; padding: 9px; color: #a22b32; border: 1px solid #f2c1c5; border-radius: 5px; background: #fff4f5; font-size: 8.5px; }
.calendar-event-detail-history { margin-top: 14px; padding: 12px; border: 1px solid var(--calendar-border); border-radius: 6px; }
.calendar-event-detail-history h3 { margin: 0 0 7px; color: #27364a; font-size: 11px; }
.calendar-event-detail-history p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; border-top: 1px solid #edf1f5; font-size: 8.5px; }
.calendar-event-diagnostic-group { margin-bottom: 13px; }
.calendar-event-diagnostic-group h3 { display: flex; justify-content: space-between; margin: 0 0 7px; color: #27364a; font-size: 12px; }
.calendar-event-diagnostic-group h3 span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #edf1f5; font-size: 8px; }
.calendar-event-diagnostic-group > article { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; margin-bottom: 7px; padding: 10px; border: 1px solid var(--calendar-border); border-radius: 6px; background: #fbfcfd; }
.calendar-event-diagnostic-group > article > span { color: var(--primary); }
.calendar-event-diagnostic-group > article b { color: #27364a; font-size: 10px; }
.calendar-event-diagnostic-group > article p, .calendar-event-diagnostic-group > p { margin: 3px 0; color: #68758a; font-size: 8.5px; }
.calendar-event-diagnostic-group > article button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 5px; padding: 6px 8px; color: var(--primary); border: 1px solid var(--calendar-border); border-radius: 4px; background: #fff; font-size: 8.5px; font-weight: 800; text-align: left; }
.calendar-event-diagnostic-group > article .button-svg { width: 11px; height: 11px; }

.school-calendar-placeholder, .school-calendar-empty, .school-calendar-error, .school-calendar-loading { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 32px; text-align: center; }
.school-calendar-placeholder > .card-svg, .school-calendar-empty > .card-svg, .school-calendar-error > .card-svg { width: 42px; height: 42px; color: var(--primary); }
.school-calendar-placeholder h3, .school-calendar-empty h3, .school-calendar-error h3 { margin: 0; color: var(--dark-blue); }
.school-calendar-placeholder p, .school-calendar-empty p, .school-calendar-error p, .school-calendar-loading p { max-width: 560px; margin: 0; color: var(--muted); }
.school-calendar-empty-shell { overflow: hidden; border: 1px solid var(--calendar-border); border-radius: 8px; background: var(--surface, #fff); box-shadow: 0 4px 14px rgba(10,37,64,.055); }
.school-calendar-empty-shell > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; color: var(--dark-blue); border-bottom: 1px solid var(--calendar-border); font-size: 12px; font-weight: 800; }
.school-calendar-empty-shell .school-calendar-empty { border: 0; border-radius: 0; box-shadow: none; }
.school-calendar-empty-shell .school-calendar-year-picker { width: auto; min-width: 148px; height: 32px; display: flex; justify-content: flex-end; gap: 8px; padding: 0 9px; border: 1px solid var(--calendar-border); border-radius: 5px; }
.school-calendar-empty-shell .school-calendar-year-picker::before { content: "Changer d’année"; color: var(--primary); font-size: 10px; }
.school-calendar-read-only { display: flex; align-items: center; gap: 8px; padding: 9px 28px; color: #7a5b16; border-inline: 1px solid var(--calendar-border); background: #fff8e5; font-size: 11px; font-weight: 700; }
.school-calendar-read-only .button-svg { width: 15px; height: 15px; }
.calendar-empty-inline { padding: 16px; color: var(--muted); font-size: 11px; text-align: center; }

.school-calendar-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; }
.school-calendar-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(10,37,64,.48); backdrop-filter: blur(2px); }
.school-calendar-modal > article { position: relative; width: min(570px, 100%); max-height: calc(100vh - 36px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid var(--calendar-border); border-radius: 7px; background: #fff; box-shadow: 0 22px 60px rgba(10,37,64,.32); }
.school-calendar-modal header { display: flex; align-items: center; gap: 12px; padding: 15px 18px; color: #fff; background: var(--sidebar-bg, var(--dark-blue)); }
.school-calendar-modal header > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.15); }
.school-calendar-modal header > div { min-width: 0; }
.school-calendar-modal header small { color: rgba(255,255,255,.75); font-size: 10px; }
.school-calendar-modal header h2 { margin: 2px 0 0; color: #fff; font-size: 19px; }
.school-calendar-modal header > button { width: 32px; height: 32px; display: grid; place-items: center; margin-left: auto; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; background: transparent; }
.school-calendar-modal-body { overflow: auto; padding: 18px; }
.school-calendar-modal-body dl { margin: 0; }
.school-calendar-modal-body dl > div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--calendar-border); }
.school-calendar-modal-body dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.school-calendar-modal-body dd { margin: 0; color: #1f2937; font-size: 12px; font-weight: 700; }
.school-calendar-modal-body dd small { display: block; color: var(--muted); font-size: 10px; }
.school-calendar-modal footer { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--calendar-border); }

/* Approved grouped event-detail modal. */
.calendar-event-details-modal > article { width: min(880px,calc(100% - 56px)); border-radius: 10px; }
.calendar-event-details-modal > article > header { min-height: 82px; gap: 14px; padding: 14px 22px; background: var(--color-sidebar-bg, var(--sidebar-bg, var(--dark-blue))); }
.calendar-event-details-modal > article > header > span { width: 46px; height: 46px; border-radius: 7px; }
.calendar-event-details-modal > article > header > span .card-svg { width: 23px; height: 23px; }
.calendar-event-details-modal > article > header small { font-size: 11px; font-weight: 650; }
.calendar-event-details-modal > article > header h2 { margin-top: 2px; font-size: 21px; line-height: 1.15; }
.calendar-event-details-modal > article > header > button { width: 40px; height: 40px; border-radius: 7px; }
.calendar-event-details-modal > article > header > button .button-svg { width: 19px; height: 19px; }
.calendar-event-details-modal .calendar-event-approved-detail { display: grid; grid-auto-rows: max-content; align-content: start; gap: 12px; min-height: 0; padding: 16px 22px; overflow-y: auto; background: #fff; }
.calendar-event-details-modal .calendar-event-detail-status { gap: 8px; margin: 0; }
.calendar-event-details-modal .calendar-event-detail-status > span { min-height: 32px; padding: 5px 10px; border-radius: 7px; font-size: 10px; }
.calendar-event-details-modal .calendar-event-detail-status .button-svg { width: 14px; height: 14px; }
.calendar-event-approved-section, .calendar-event-approved-technical { min-width: 0; min-height: max-content; overflow: hidden; margin: 0; border: 1px solid var(--calendar-border); border-radius: 9px; background: #fff; }
.calendar-event-approved-heading { min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 10px 20px; color: #23364d; border-bottom: 1px solid var(--calendar-border); background: #fbfcfd; }
.calendar-event-approved-heading .button-svg { width: 18px; height: 18px; color: var(--color-sidebar-bg, var(--primary)); }
.calendar-event-approved-heading h3 { margin: 0; color: #23364d; font-size: 14px; line-height: 1.2; }
.calendar-event-approved-main-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 15px 20px; }
.calendar-event-approved-main-grid article { min-width: 0; display: grid; align-content: start; gap: 6px; padding: 0 16px; }
.calendar-event-approved-main-grid article:first-child { padding-left: 0; }
.calendar-event-approved-main-grid article:last-child { padding-right: 0; }
.calendar-event-approved-main-grid article + article { border-left: 1px solid var(--calendar-border); }
.calendar-event-approved-main-grid span, .calendar-event-approved-columns article > span, .calendar-event-approved-technical article span, .calendar-event-approved-description > span { display: flex; align-items: center; gap: 7px; color: var(--color-sidebar-bg, var(--primary)); font-size: 10px; font-weight: 750; }
.calendar-event-approved-main-grid span .button-svg, .calendar-event-approved-description .button-svg { width: 16px; height: 16px; }
.calendar-event-approved-main-grid strong, .calendar-event-approved-columns strong { overflow-wrap: anywhere; color: #1f2d40; font-size: 12.5px; font-weight: 750; line-height: 1.3; }
.calendar-event-approved-description { display: grid; gap: 7px; margin: 0 20px; padding: 12px 0 14px; border-top: 1px solid var(--calendar-border); }
.calendar-event-approved-description p { margin: 0 0 0 23px; color: #27374c; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: pre-line; }
.calendar-event-approved-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 15px 20px; }
.calendar-event-approved-columns article { min-width: 0; display: grid; align-content: start; gap: 7px; padding: 0 22px; }
.calendar-event-approved-columns article:first-child { padding-left: 0; }
.calendar-event-approved-columns article:last-child { padding-right: 0; }
.calendar-event-approved-columns article + article { border-left: 1px solid var(--calendar-border); }
.calendar-event-approved-columns small { color: #68788e; font-size: 9.5px; line-height: 1.3; }
.calendar-event-approved-detail .calendar-event-detail-chips { min-height: 24px; align-items: center; gap: 7px; color: #27374c; font-size: 11px; font-weight: 650; }
.calendar-event-approved-detail .calendar-event-detail-chips b { padding: 4px 9px; border-radius: 16px; font-size: 9.5px; }
.calendar-event-approved-technical summary { min-height: 44px; display: grid; grid-template-columns: 19px minmax(0,1fr) 16px; align-items: center; gap: 9px; padding: 9px 20px; color: #23364d; background: #fbfcfd; cursor: pointer; list-style: none; }
.calendar-event-approved-technical summary::-webkit-details-marker { display: none; }
.calendar-event-approved-technical summary > .button-svg { width: 19px; height: 19px; color: var(--color-sidebar-bg, var(--primary)); }
.calendar-event-approved-technical summary b { font-size: 12px; }
.calendar-event-approved-technical summary > span { display: grid; place-items: center; transition: transform .18s ease; }
.calendar-event-approved-technical summary > span .button-svg { width: 15px; height: 15px; }
.calendar-event-approved-technical[open] summary { border-bottom: 1px solid var(--calendar-border); }
.calendar-event-approved-technical[open] summary > span { transform: rotate(180deg); }
.calendar-event-approved-technical > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 11px 20px; }
.calendar-event-approved-technical article { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 9px; padding: 0 25px; }
.calendar-event-approved-technical article:first-child { padding-left: 0; }
.calendar-event-approved-technical article:last-child { padding-right: 0; }
.calendar-event-approved-technical article + article { border-left: 1px solid var(--calendar-border); }
.calendar-event-approved-technical article > .button-svg { width: 18px; height: 18px; color: var(--color-sidebar-bg, var(--primary)); }
.calendar-event-approved-technical article p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.calendar-event-approved-technical article strong { overflow-wrap: anywhere; color: #27374c; font-size: 10.5px; font-weight: 650; line-height: 1.35; }
.calendar-event-approved-technical .calendar-event-cancellation { margin: 0 24px 14px; }
.calendar-event-details-modal > article > footer { gap: 10px; padding: 10px 20px; background: #fff; }
.calendar-event-details-modal > article > footer button { min-height: 36px; padding-inline: 16px; font-size: 11px; }
.calendar-diagnostic-row { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 10px; margin: 0 0 8px; padding: 11px; border: 1px solid #f0cd8b; border-radius: 5px; background: #fff9eb; }
.calendar-diagnostic-row > span { color: #a16500; }
.calendar-diagnostic-row > div { min-width: 0; display: grid; gap: 3px; }
.calendar-diagnostic-row small { color: var(--muted); }
.calendar-diagnostic-row p { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 5px 0 0; padding-top: 7px; border-top: 1px solid #f2dba9; }
.calendar-diagnostic-row p span { min-width: 0; overflow: hidden; color: var(--dark-blue); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-diagnostic-row p button { flex: 0 0 auto; padding: 5px 8px; color: #8b5900; border: 1px solid #e8c47e; border-radius: 4px; background: #fff; font-size: 9px; font-weight: 800; }

@media (max-width: 1100px) {
  .school-calendar-content { padding-inline: 16px; }
  .school-calendar-subtabs { padding-inline: 16px; overflow-x: auto; }
  .school-calendar-subtabs button { padding-inline: 16px; }
  .school-calendar-overview-grid { grid-template-columns: 1fr; }
  .school-calendar-overview-grid > aside { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .school-calendar-validation { grid-column: 1 / -1; }
  .school-calendar-hero.periods-active { align-items: flex-start; }
  .calendar-period-hero-controls { min-width: 440px; grid-template-columns: minmax(210px,1fr) minmax(190px,.8fr); }
  .calendar-periods-layout { grid-template-columns: 1fr; }
  .calendar-periods-layout > aside { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calendar-closures-layout { grid-template-columns: 1fr; }
  .calendar-closures-layout > aside { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-closure-next { grid-row: span 2; }
  .calendar-events-layout { grid-template-columns: 1fr; }
  .calendar-events-layout > aside { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-event-next { grid-row: span 2; }
}

@media (max-width: 720px) {
  .school-settings-calendar-focus > .school-settings-tabs button { min-width: 0; padding-inline: 8px; }
  .school-settings-calendar-focus > .school-settings-tabs button span { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; white-space: normal !important; }
  .school-calendar-hero { align-items: flex-start; padding: 14px 16px; }
  .school-calendar-hero h2 { font-size: 21px; }
  .school-calendar-hero label { min-width: 145px; }
  .school-calendar-subtabs { gap: 4px; padding: 7px 10px 0; scrollbar-width: thin; }
  .school-calendar-subtabs button { min-height: 36px; padding-inline: 12px; font-size: 10.5px; }
  .school-calendar-content { padding: 0 10px 18px; }
  .school-calendar-intro-text { margin-inline: 0; font-size: 11px; }
  .school-calendar-main-card { padding: 9px; }
  .school-calendar-main-card > header { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .school-calendar-month-navigation { grid-column: 1 / -1; }
  .school-calendar-month-title { grid-column: 1; grid-row: 2; justify-self: start; }
  .school-calendar-main-card > header h3 { font-size: 15px; }
  .school-calendar-view-switch { grid-column: 2; grid-row: 2; align-self: end; }
  .school-calendar-view-switch button { min-width: 58px; padding-inline: 6px !important; font-size: 10px; }
  .school-calendar-day { min-height: 56px; padding: 4px 3px; }
  .school-calendar-day > div { right: 3px; bottom: 3px; left: 3px; }
  .calendar-event-chip { height: 15px; padding-inline: 2px; font-size: 7px; }
  .school-calendar-weekdays span { font-size: 8px; }
  .school-calendar-legend { justify-content: flex-start; gap: 7px 12px; }
  .school-calendar-overview-grid > aside { grid-template-columns: 1fr; }
  .school-calendar-validation { grid-column: auto; }
  .school-calendar-period-card > div { grid-template-columns: 1fr; }
  .school-calendar-period-card > div > span { display: none; }
  .school-calendar-period-card.empty .calendar-period-empty { grid-template-columns: 1fr; }
  .school-calendar-period-card dl { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .school-calendar-hero.periods-active { display: grid; }
  .calendar-period-hero-controls { min-width: 0; width: 100%; grid-template-columns: 1fr; gap: 10px; }
  .calendar-period-hero-controls > label, .calendar-period-hero-controls > section { padding: 0; border-left: 0; }
  .calendar-period-hero-controls label > div { max-width: none; }
  .calendar-period-hero-controls > section { grid-template-columns: auto auto; align-items: center; }
  .calendar-period-hero-controls > section small { grid-column: 1 / -1; }
  .calendar-periods-panel > header { align-items: flex-start; }
  .calendar-periods-panel > header > div { flex-wrap: wrap; justify-content: flex-end; }
  .calendar-period-accordion-header { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px 12px; padding: 12px; }
  .calendar-period-accordion-header .calendar-period-name { grid-column: 1 / 3; }
  .calendar-period-accordion-header .calendar-period-row-actions { grid-column: 3; grid-row: 1; }
  .calendar-period-meta.status { align-self: end; }
  .calendar-period-recap > div { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 0; }
  .calendar-period-recap article { min-height: 38px; }
  .calendar-period-recap article:nth-child(2n) { border-right: 0; }
  .calendar-period-recap article:nth-child(3) { padding-left: 0; }
  .calendar-periods-layout > aside { grid-template-columns: 1fr; }
  .calendar-closures-layout > aside { grid-template-columns: 1fr; }
  .calendar-closure-next { grid-row: auto; }
  .calendar-events-layout > aside { grid-template-columns: 1fr; }
  .calendar-event-next { grid-row: auto; }
  .calendar-events-panel > header { align-items: flex-start; }
  .calendar-events-panel > header > div { flex-wrap: wrap; justify-content: flex-end; }
  .calendar-event-quick-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .calendar-event-quick-filters button { flex: 0 0 auto; }
  .calendar-events-pagination { align-items: flex-start; flex-direction: column; }
  .calendar-events-pagination > div { width: 100%; overflow-x: auto; }
  .calendar-event-form { grid-template-columns: 1fr; }
  .calendar-event-form .wide { grid-column: auto; }
  .calendar-event-targeting > div { grid-template-columns: 1fr; }
  .calendar-event-targeting label.wide { grid-column: auto; }
  .calendar-event-details-modal dl { grid-template-columns: 1fr; }
  .calendar-event-details-modal dl > div.wide { grid-column: auto; }
  .calendar-event-detail-cards { grid-template-columns: 1fr; }
  .calendar-event-detail-card.wide { grid-column: auto; }
  .calendar-event-detail-card.lifecycle .calendar-event-detail-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-event-modal { padding: 8px; }
  .calendar-event-modal > article { max-height: calc(100vh - 16px); }
  .calendar-closures-panel > header { align-items: flex-start; }
  .calendar-closures-panel > header > div { flex-wrap: wrap; justify-content: flex-end; }
  .calendar-closure-month-toolbar { align-items: stretch; flex-direction: column; }
  .calendar-closure-month-control { display: grid; }
  .calendar-closure-month-navigator { width: 100%; grid-template-columns: 36px minmax(0,1fr) 36px; }
  .calendar-closure-month-toolbar > small { display: none; }
  .calendar-closure-quick-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .calendar-closure-quick-filters button { flex: 0 0 auto; }
  .calendar-closure-form { grid-template-columns: 1fr; }
  .calendar-closure-description, .calendar-closure-targets, .calendar-closure-switches, .calendar-closure-duration { grid-column: auto; }
  .calendar-closure-targets { grid-template-columns: 1fr; }
  .calendar-period-form { grid-template-columns: 1fr; }
  .calendar-period-note, .calendar-period-form output { grid-column: auto; }
  .calendar-period-modal { padding: 8px; }
  .calendar-period-modal > article { max-height: calc(100vh - 16px); }
}

@media (max-width: 480px) {
  .school-calendar-hero { display: grid; }
  .school-calendar-hero label { width: 100%; }
  .school-calendar-month-navigation { gap: 5px !important; }
  .school-calendar-main-card > header .calendar-today-button { min-width: 74px; padding-inline: 8px; font-size: 10px; }
  .school-calendar-view-switch { justify-self: end; }
  .school-calendar-day { min-height: 52px; }
  .school-calendar-day > div { right: 2px; bottom: 2px; left: 2px; }
  .school-calendar-day > b { width: 22px; height: 22px; font-size: 11px; }
  .school-calendar-modal-body dl > div { grid-template-columns: 1fr; gap: 3px; }
  .calendar-periods-panel > header { display: grid; }
  .calendar-periods-panel > header > div { justify-content: flex-start; }
  .calendar-periods-panel > header button { flex: 1 1 auto; }
  .calendar-closures-panel > header { display: grid; }
  .calendar-closures-panel > header > div { justify-content: flex-start; }
  .calendar-closures-panel > header button { flex: 1 1 auto; justify-content: center; }
  .calendar-events-panel > header { display: grid; }
  .calendar-events-panel > header > div { justify-content: flex-start; }
  .calendar-events-panel > header button { flex: 1 1 auto; }
  .calendar-event-view-control { flex: 1 1 auto; }
  .calendar-event-view-control > button { width: 100%; }
  .calendar-event-side-card.summary > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-event-audiences { display: grid !important; grid-template-columns: 1fr; }
  .calendar-event-audience-options { display: grid; grid-template-columns: 1fr; }
  .calendar-event-detail-fields, .calendar-event-detail-card.lifecycle .calendar-event-detail-fields { grid-template-columns: 1fr; }
  .calendar-closure-side-card.impacts > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-closure-switches { grid-template-columns: 1fr; }
  .calendar-closure-duration { align-items: flex-start; flex-wrap: wrap; }
  .calendar-closure-duration span { width: 100%; margin-left: 22px; }
  .calendar-period-accordion-list { gap: 9px; padding-inline: 8px; }
  .calendar-period-accordion-header { grid-template-columns: minmax(0,1fr) auto; }
  .calendar-period-accordion-header .calendar-period-name { grid-column: 1; }
  .calendar-period-accordion-header .calendar-period-row-actions { grid-column: 2; }
  .calendar-period-meta { padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--primary) 10%, transparent); }
  .calendar-period-meta:nth-of-type(2n) { grid-column: 1; }
  .calendar-period-meta:nth-of-type(2n + 1) { grid-column: 2; }
  .calendar-period-recap { padding-inline: 12px; }
  .calendar-period-recap > div { grid-template-columns: 1fr; }
  .calendar-period-recap article, .calendar-period-recap article:nth-child(3) { padding: 7px 0; border-right: 0; border-bottom: 1px solid var(--calendar-border); }
  .calendar-period-recap article:last-child { border-bottom: 0; }
  .calendar-validation-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 780px) {
  .calendar-event-details-modal > article > header { min-height: 76px; padding: 12px 16px; }
  .calendar-event-details-modal > article > header > span { width: 42px; height: 42px; }
  .calendar-event-details-modal > article > header h2 { font-size: 19px; }
  .calendar-event-details-modal .calendar-event-approved-detail { gap: 10px; padding: 13px 16px; }
  .calendar-event-approved-main-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 0; }
  .calendar-event-approved-main-grid article:nth-child(3) { padding-left: 0; border-left: 0; }
  .calendar-event-approved-columns, .calendar-event-approved-technical > div { grid-template-columns: 1fr; gap: 16px; }
  .calendar-event-approved-columns article, .calendar-event-approved-technical article { padding: 0; }
  .calendar-event-approved-columns article + article, .calendar-event-approved-technical article + article { padding-top: 16px; border-top: 1px solid var(--calendar-border); border-left: 0; }
}

@media (max-width: 500px) {
  .calendar-event-details-modal { padding: 8px; }
  .calendar-event-details-modal > article { max-height: calc(100vh - 16px); }
  .calendar-event-details-modal > article > header { min-height: 70px; gap: 10px; padding: 11px 13px; }
  .calendar-event-details-modal > article > header > span { width: 40px; height: 40px; }
  .calendar-event-details-modal > article > header h2 { font-size: 17px; }
  .calendar-event-details-modal > article > header small { font-size: 10px; }
  .calendar-event-details-modal > article > header > button { width: 36px; height: 36px; }
  .calendar-event-approved-heading, .calendar-event-approved-technical summary { padding-inline: 16px; }
  .calendar-event-approved-main-grid { grid-template-columns: 1fr; padding: 18px; }
  .calendar-event-approved-main-grid article { padding: 13px 0; }
  .calendar-event-approved-main-grid article:first-child { padding-top: 0; }
  .calendar-event-approved-main-grid article:last-child { padding-bottom: 0; }
  .calendar-event-approved-main-grid article + article { border-top: 1px solid var(--calendar-border); border-left: 0; }
  .calendar-event-approved-description { margin-inline: 18px; }
  .calendar-event-approved-columns { padding: 18px; }
  .calendar-event-approved-technical > div { padding-inline: 18px; }
  .calendar-event-details-modal > article > footer { padding: 11px 14px; }
}

/* Publication and history governance workspace. */
.calendar-publication-intro { min-height: 42px; display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 10px 14px; color: #34445a; border-radius: 6px; background: color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 5%,#fff); font-size: 10.5px; }
.calendar-publication-intro .button-svg { width: 15px; height: 15px; color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-layout { display: grid; grid-template-columns: minmax(0,1fr) 286px; gap: 18px; align-items: start; }
.calendar-publication-layout > main, .calendar-publication-layout > aside { min-width: 0; display: grid; align-content: start; gap: 15px; }
.calendar-publication-top { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,.85fr); gap: 15px; }
.calendar-publication-current, .calendar-publication-validation, .calendar-publication-history, .calendar-publication-side-card { min-width: 0; border: 1px solid var(--calendar-border); border-radius: 7px; background: #fff; box-shadow: 0 5px 18px rgba(31,50,78,.035); }
.calendar-publication-current > h3, .calendar-publication-validation > h3, .calendar-publication-side-card > h3 { margin: 0; padding: 14px 15px 9px; color: #1c2d45; font-size: 12.5px; }
.calendar-publication-current-status { padding: 0 15px 12px; border-bottom: 1px solid var(--calendar-border); }
.calendar-publication-current-grid { display: grid; grid-template-columns: .72fr 1.15fr 1.15fr 1.05fr .95fr; padding: 13px 0; }
.calendar-publication-current-grid article { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 0 14px; border-left: 1px solid var(--calendar-border); }
.calendar-publication-current-grid article:first-child { border-left: 0; }
.calendar-publication-current-grid small { color: #617087; font-size: 8.5px; line-height: 1.3; }
.calendar-publication-current-grid strong { overflow-wrap: anywhere; color: #1f2d40; font-size: 11px; line-height: 1.35; }
.calendar-publication-current-grid article:first-child strong { font-size: 20px; line-height: 1; }
.calendar-publication-current-grid em { width: max-content; padding: 3px 6px; color: #237a48; border-radius: 4px; background: #e5f7eb; font-size: 7.5px; font-style: normal; font-weight: 800; }
.calendar-publication-current-grid span { color: #65748a; font-size: 8px; }
.calendar-publication-current-grid button { width: max-content; display: inline-flex; align-items: center; gap: 3px; padding: 0; color: var(--color-sidebar-bg,var(--primary)); border: 0; background: transparent; font-size: 8px; font-weight: 800; }
.calendar-publication-current-grid button .button-svg { width: 11px; height: 11px; }
.calendar-publish-status.pending, .calendar-publish-status.withdrawn { color: #a65c00; border-color: #f1d5a6; background: #fff5df; }
.calendar-publication-validation { padding-bottom: 11px; }
.calendar-publication-validation > div { display: grid; gap: 1px; padding: 0 14px 6px; }
.calendar-publication-validation > div > button { min-width: 0; display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 6px 0; color: #34445a; border: 0; background: transparent; text-align: left; }
.calendar-publication-validation > div > button span { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; }
.calendar-publication-validation > div > button .button-svg { width: 11px; height: 11px; }
.calendar-publication-validation button.valid span { color: #249257; background: #e4f7eb; }
.calendar-publication-validation button.warning span { color: #c67200; background: #fff0d4; }
.calendar-publication-validation button.blocking span { color: #c92b38; background: #ffe6e9; }
.calendar-publication-validation b { overflow: hidden; color: #4f5f74; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.calendar-publication-validation small { color: #26804d; font-size: 8px; font-weight: 750; }
.calendar-publication-validation .warning small { color: #b35d00; }
.calendar-publication-validation .blocking small { color: #c92b38; }
.calendar-publication-report-link { display: inline-flex; align-items: center; gap: 5px; margin: 0 14px; padding: 3px 0; color: var(--color-sidebar-bg,var(--primary)); border: 0; background: transparent; font-size: 8.5px; font-weight: 800; }
.calendar-publication-report-link .button-svg { width: 11px; height: 11px; }
.calendar-publication-history > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--calendar-border); }
.calendar-publication-history > header h3 { margin: 0; color: #1c2d45; font-size: 13px; }
.calendar-publication-history > header > div { display: flex; gap: 9px; }
.calendar-publication-history > header button { min-height: 33px; padding: 7px 12px; font-size: 9px; }
.calendar-publication-table-wrap { overflow-x: auto; }
.calendar-publication-history table { width: 100%; min-width: 780px; border-collapse: collapse; table-layout: fixed; }
.calendar-publication-history th { padding: 9px 10px; color: #283950; background: #fbfcfd; font-size: 8px; text-align: left; }
.calendar-publication-history td { height: 48px; padding: 8px 10px; color: #324359; border-top: 1px solid var(--calendar-border); font-size: 8.5px; vertical-align: middle; }
.calendar-publication-history tr.current { background: color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 2.5%,#fff); }
.calendar-publication-history th:nth-child(1) { width: 13%; } .calendar-publication-history th:nth-child(2) { width: 11%; } .calendar-publication-history th:nth-child(3) { width: 17%; } .calendar-publication-history th:nth-child(4) { width: 16%; } .calendar-publication-history th:nth-child(5) { width: 14%; } .calendar-publication-history th:nth-child(6) { width: 20%; } .calendar-publication-history th:nth-child(7) { width: 9%; }
.calendar-publication-history td:first-child { position: relative; padding-left: 44px; }
.calendar-publication-history td > b { display: block; color: #23344b; font-size: 9px; }
.calendar-publication-history td > small { display: block; margin-top: 2px; color: #68778b; font-size: 7.5px; line-height: 1.3; }
.calendar-publication-history td:nth-child(6) > b { color: #26804d; }
.calendar-publication-version-icon { position: absolute; top: 50%; left: 10px; width: 25px; height: 31px; display: grid; place-items: center; transform: translateY(-50%); color: var(--color-sidebar-bg,var(--primary)); border: 1px solid color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 15%,#fff); border-radius: 5px; background: color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 6%,#fff); }
.calendar-publication-version-icon .button-svg { width: 14px; height: 14px; }
.calendar-publication-badge { width: max-content; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 4px; font-size: 7.5px; font-weight: 800; }
.calendar-publication-badge .button-svg { width: 9px; height: 9px; }
.calendar-publication-badge.published { color: #237a48; border: 1px solid #b8e3c7; background: #e6f7ec; }
.calendar-publication-badge.withdrawn { color: #b42318; border: 1px solid #f2b8bd; background: #fff0f1; }
.calendar-publication-badge.archived { color: #59677a; border: 1px solid #d8dee7; background: #f2f4f7; }
.calendar-publication-row-actions { position: relative; display: flex; gap: 5px; justify-content: flex-end; }
.calendar-publication-row-actions > button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; color: #34445a; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; }
.calendar-publication-row-actions > button:last-of-type { border-color: transparent; }
.calendar-publication-row-actions .button-svg { width: 13px; height: 13px; }
.calendar-publication-row-menu { position: fixed; z-index: 180; width: 220px; overflow: hidden; padding: 5px; border: 1px solid var(--calendar-border); border-radius: 7px; background: #fff; box-shadow: 0 14px 36px rgba(24,42,67,.2); }
.calendar-publication-row-menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; color: #34445a; border: 0; border-radius: 4px; background: transparent; font-size: 9px; text-align: left; }
.calendar-publication-row-menu button:hover { color: var(--color-sidebar-bg,var(--primary)); background: color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 7%,#fff); }
.calendar-publication-row-menu .button-svg { width: 13px; height: 13px; }
.calendar-publication-history > footer { padding: 9px 13px; color: #68778b; border-top: 1px solid var(--calendar-border); font-size: 8px; }
.calendar-publication-empty { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 22px; color: #65748a; text-align: center; }
.calendar-publication-empty .card-svg { width: 34px; height: 34px; color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-empty h4, .calendar-publication-empty p { margin: 0; }
.calendar-publication-empty h4 { color: #25364d; font-size: 12px; } .calendar-publication-empty p { font-size: 9px; }
.calendar-publication-side-card { padding: 0 14px 13px; }
.calendar-publication-summary-list p { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 7px; margin: 0; padding: 10px 0; border-top: 1px solid var(--calendar-border); }
.calendar-publication-summary-list p:first-child { border-top: 0; }
.calendar-publication-summary-list .button-svg { width: 16px; height: 16px; color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-summary-list span { color: #34445a; font-size: 8.5px; }
.calendar-publication-summary-list b { color: #1f2d40; font-size: 8.5px; text-align: right; }
.calendar-publication-summary-list b small { display: block; color: #66758a; font-size: 7.5px; font-weight: 600; }
.calendar-publication-side-card.quick > div { display: grid; }
.calendar-publication-side-card.quick button { width: 100%; display: grid; grid-template-columns: 20px minmax(0,1fr) 14px; align-items: center; gap: 8px; padding: 10px 0; color: #27384f; border: 0; border-top: 1px solid var(--calendar-border); background: transparent; text-align: left; }
.calendar-publication-side-card.quick button:first-child { border-top: 0; }
.calendar-publication-side-card.quick button:disabled { opacity: .45; cursor: not-allowed; }
.calendar-publication-side-card.quick button.withdraw { color: #a33b32; }
.calendar-publication-side-card.quick button > .button-svg { width: 15px; height: 15px; color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-side-card.quick button.withdraw > .button-svg { color: #b42318; }
.calendar-publication-side-card.quick button span { display: grid; gap: 2px; font-size: 8.5px; font-weight: 750; }
.calendar-publication-side-card.quick button small { color: #68778b; font-size: 7.5px; font-weight: 500; }
.calendar-publication-side-card.rules p { display: grid; grid-template-columns: 15px minmax(0,1fr); gap: 7px; margin: 0; padding: 7px 0; color: #536278; font-size: 8px; line-height: 1.4; }
.calendar-publication-side-card.rules .button-svg { width: 12px; height: 12px; color: #26965a; }

.calendar-publication-modal > article { width: min(760px,calc(100% - 32px)); }
.calendar-publication-modal .school-calendar-modal-body { display: grid; align-content: start; gap: 13px; }
.calendar-publication-version-step { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: center; gap: 10px; }
.calendar-publication-version-step > span { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--calendar-border); border-radius: 6px; background: #fbfcfd; }
.calendar-publication-version-step small { color: #68778b; font-size: 9px; } .calendar-publication-version-step b { color: #1f2d40; font-size: 15px; }
.calendar-publication-version-step > .button-svg { justify-self: center; width: 17px; height: 17px; color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-confirm-summary, .calendar-publication-modal-warnings, .calendar-publication-detail-counts, .calendar-publication-audit { padding: 13px; border: 1px solid var(--calendar-border); border-radius: 6px; }
.calendar-publication-confirm-summary h3, .calendar-publication-modal-warnings h3, .calendar-publication-detail-counts h3 { margin: 0 0 10px; color: #27384f; font-size: 11px; }
.calendar-publication-confirm-summary > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.calendar-publication-confirm-summary p { display: grid; gap: 3px; margin: 0; padding: 9px; border-radius: 5px; background: #f7f9fc; text-align: center; }
.calendar-publication-confirm-summary p b { color: var(--color-sidebar-bg,var(--primary)); font-size: 17px; } .calendar-publication-confirm-summary p span { color: #65748a; font-size: 8px; }
.calendar-publication-modal-warnings { border-color: #efcf91; background: #fff9ec; }
.calendar-publication-modal-warnings h3 { display: flex; align-items: center; gap: 7px; color: #9b5b00; }
.calendar-publication-modal-warnings .button-svg { width: 14px; height: 14px; }
.calendar-publication-modal-warnings p { margin: 5px 0 0; color: #74521b; font-size: 9px; }
.calendar-publication-form { display: grid; gap: 12px; }
.calendar-publication-form > label:not(.calendar-publication-check), .calendar-publication-filter-form label, .calendar-publication-compare-form label { display: grid; gap: 5px; color: #34445a; font-size: 9px; font-weight: 800; }
.calendar-publication-form textarea, .calendar-publication-filter-form input, .calendar-publication-filter-form select, .calendar-publication-compare-form select { width: 100%; min-height: 35px; padding: 8px 10px; color: #23344b; border: 1px solid var(--calendar-border); border-radius: 5px; background: #fff; font: inherit; }
.calendar-publication-audience-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.calendar-publication-audience-chips b { padding: 5px 8px; color: var(--color-sidebar-bg,var(--primary)); border: 1px solid color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 25%,#fff); border-radius: 99px; background: color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 5%,#fff); font-size: 8px; }
.calendar-publication-check { display: flex; align-items: flex-start; gap: 8px; color: #4d5d72; font-size: 9px; line-height: 1.4; }
.calendar-publication-check input { margin-top: 1px; accent-color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-detail-head { display: flex; align-items: center; gap: 8px; }
.calendar-publication-detail-head > b { color: var(--color-sidebar-bg,var(--primary)); font-size: 9px; }
.calendar-publication-detail-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
.calendar-publication-detail-grid > div { grid-template-columns: 120px minmax(0,1fr) !important; }
.calendar-publication-detail-grid > div.wide { grid-column: 1 / -1; }
.calendar-publication-detail-counts { display: flex; flex-wrap: wrap; gap: 10px; }
.calendar-publication-detail-counts h3 { width: 100%; }
.calendar-publication-detail-counts p { min-width: 120px; display: grid; gap: 2px; margin: 0; color: #65748a; font-size: 8.5px; }
.calendar-publication-detail-counts p b { color: var(--color-sidebar-bg,var(--primary)); font-size: 16px; }
.calendar-publication-audit summary { color: #27384f; font-size: 10px; font-weight: 800; cursor: pointer; }
.calendar-publication-audit summary span { float: right; }
.calendar-publication-audit > p { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--calendar-border); color: #44546a; font-size: 8.5px; }
.calendar-publication-audit > p:first-of-type { margin-top: 9px; }
.calendar-publication-audit p b { text-transform: capitalize; } .calendar-publication-audit p span { color: #68778b; }
.calendar-publication-compare-modal > article { width: min(900px,calc(100% - 32px)); }
.calendar-publication-compare-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; gap: 10px; }
.calendar-publication-compare-form button { min-height: 35px; }
.calendar-publication-diff-summary { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 6px; background: color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 7%,#fff); }
.calendar-publication-diff-summary b { color: var(--color-sidebar-bg,var(--primary)); font-size: 18px; } .calendar-publication-diff-summary span { color: #34445a; font-size: 9px; }
.calendar-publication-diff-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.calendar-publication-diff-groups section { min-width: 0; padding: 11px; border: 1px solid var(--calendar-border); border-radius: 6px; }
.calendar-publication-diff-groups h3 { display: flex; justify-content: space-between; margin: 0 0 7px; color: #27384f; font-size: 10px; }
.calendar-publication-diff-groups h3 span { color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-diff-groups article { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 7px; padding: 7px 0; border-top: 1px solid var(--calendar-border); }
.calendar-publication-diff-groups article > b { align-self: start; padding: 3px 5px; border-radius: 4px; font-size: 7px; text-align: center; }
.calendar-publication-diff-groups article > b.added { color: #237a48; background: #e6f7ec; } .calendar-publication-diff-groups article > b.modified { color: #865a00; background: #fff3d6; } .calendar-publication-diff-groups article > b.cancelled, .calendar-publication-diff-groups article > b.removed { color: #b42318; background: #fff0f1; }
.calendar-publication-diff-groups article p { display: grid; gap: 2px; margin: 0; color: #34445a; font-size: 8.5px; } .calendar-publication-diff-groups article small { color: #68778b; font-size: 7.5px; }
.calendar-publication-diff-groups section > p, .calendar-publication-compare-empty { margin: 0; color: #68778b; font-size: 8.5px; }
.calendar-publication-compare-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.calendar-publication-compare-empty .card-svg { width: 35px; height: 35px; color: var(--color-sidebar-bg,var(--primary)); }
.calendar-publication-report-summary { display: flex; flex-wrap: wrap; gap: 7px; }
.calendar-publication-report-summary b { padding: 5px 8px; border-radius: 99px; font-size: 8px; } .calendar-publication-report-summary .blocking { color: #b42318; background: #fff0f1; } .calendar-publication-report-summary .warning { color: #945d00; background: #fff3d6; } .calendar-publication-report-summary .valid { color: #237a48; background: #e6f7ec; }
.calendar-publication-report-list { display: grid; gap: 7px; }
.calendar-publication-report-list article { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--calendar-border); border-radius: 5px; }
.calendar-publication-report-list article > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; }
.calendar-publication-report-list .button-svg { width: 12px; height: 12px; }
.calendar-publication-report-list article.valid > span { color: #237a48; background: #e6f7ec; } .calendar-publication-report-list article.warning > span { color: #945d00; background: #fff3d6; } .calendar-publication-report-list article.blocking > span { color: #b42318; background: #fff0f1; }
.calendar-publication-report-list article div { min-width: 0; } .calendar-publication-report-list article b { color: #2b3b51; font-size: 9px; } .calendar-publication-report-list article p { margin: 3px 0 0; color: #68778b; font-size: 8px; }
.calendar-publication-report-list article > button { padding: 5px 7px; color: var(--color-sidebar-bg,var(--primary)); border: 1px solid color-mix(in srgb,var(--color-sidebar-bg,var(--primary)) 30%,#fff); border-radius: 4px; background: #fff; font-size: 8px; font-weight: 800; }
.calendar-publication-filter-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }

/* Readable, consistent type scale for Publication et historique. */
.calendar-publication-intro { font-size: 12px; line-height: 1.5; }
.calendar-publication-current > h3,
.calendar-publication-validation > h3,
.calendar-publication-side-card > h3,
.calendar-publication-history > header h3 { font-size: 15px; line-height: 1.3; }
.calendar-publication-current .calendar-publish-status { padding: 5px 9px; font-size: 10.5px; }
.calendar-publication-current-grid small { font-size: 10.5px; line-height: 1.35; }
.calendar-publication-current-grid strong { font-size: 12.5px; line-height: 1.4; }
.calendar-publication-current-grid article:first-child strong { font-size: 23px; }
.calendar-publication-current-grid em { font-size: 9.5px; }
.calendar-publication-current-grid span,
.calendar-publication-current-grid button { font-size: 10px; line-height: 1.35; }
.calendar-publication-validation b { font-size: 11px; line-height: 1.35; }
.calendar-publication-validation small { font-size: 10px; line-height: 1.35; }
.calendar-publication-report-link { font-size: 10.5px; line-height: 1.4; }
.calendar-publication-history > header button { font-size: 11px; }
.calendar-publication-history table { min-width: 880px; }
.calendar-publication-history th { font-size: 10.5px; line-height: 1.35; }
.calendar-publication-history td { height: 56px; font-size: 11px; line-height: 1.35; }
.calendar-publication-history td > b { font-size: 11.5px; }
.calendar-publication-history td > small { font-size: 9.5px; line-height: 1.4; }
.calendar-publication-badge { font-size: 9.5px; }
.calendar-publication-row-menu button { font-size: 11px; }
.calendar-publication-history > footer { font-size: 10px; }
.calendar-publication-empty h4 { font-size: 14px; }
.calendar-publication-empty p { font-size: 11px; }
.calendar-publication-summary-list span,
.calendar-publication-summary-list b { font-size: 11px; line-height: 1.35; }
.calendar-publication-summary-list b small { font-size: 9.5px; line-height: 1.35; }
.calendar-publication-side-card.quick button span { font-size: 11px; line-height: 1.35; }
.calendar-publication-side-card.quick button small { font-size: 9.5px; line-height: 1.35; }
.calendar-publication-side-card.rules p { font-size: 10.5px; line-height: 1.5; }
.calendar-publication-version-step small,
.calendar-publication-form > label:not(.calendar-publication-check),
.calendar-publication-filter-form label,
.calendar-publication-compare-form label,
.calendar-publication-check,
.calendar-publication-detail-head > b,
.calendar-publication-modal-warnings p { font-size: 11px; line-height: 1.4; }
.calendar-publication-confirm-summary h3,
.calendar-publication-modal-warnings h3,
.calendar-publication-detail-counts h3,
.calendar-publication-diff-groups h3,
.calendar-publication-audit summary { font-size: 12.5px; line-height: 1.35; }
.calendar-publication-confirm-summary p span,
.calendar-publication-audience-chips b,
.calendar-publication-detail-counts p,
.calendar-publication-audit > p,
.calendar-publication-diff-summary span,
.calendar-publication-diff-groups article p,
.calendar-publication-diff-groups section > p,
.calendar-publication-compare-empty,
.calendar-publication-report-list article p { font-size: 10.5px; line-height: 1.4; }
.calendar-publication-diff-groups article small { font-size: 9.5px; }
.calendar-publication-diff-groups article > b,
.calendar-publication-report-summary b,
.calendar-publication-report-list article > button { font-size: 10px; }
.calendar-publication-report-list article b { font-size: 11px; line-height: 1.35; }

.calendar-publication-side-card.quick {
  color: #fff;
  border-color: color-mix(in srgb, var(--color-sidebar-bg,var(--primary)) 78%, #fff);
  background: var(--color-sidebar-bg,var(--sidebar-bg,var(--primary)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-sidebar-bg,var(--primary)) 22%, transparent);
}
.calendar-publication-side-card.quick > h3 { color: #fff; }
.calendar-publication-side-card.quick button,
.calendar-publication-side-card.quick button.withdraw { color: #fff; border-top-color: rgba(255,255,255,.28); }
.calendar-publication-side-card.quick button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.calendar-publication-side-card.quick button > .button-svg,
.calendar-publication-side-card.quick button.withdraw > .button-svg { color: #fff; }
.calendar-publication-side-card.quick button small { color: rgba(255,255,255,.76); }
.calendar-publication-side-card.quick button:disabled { color: rgba(255,255,255,.64); opacity: 1; }
.calendar-publication-side-card.quick button:disabled > .button-svg { color: rgba(255,255,255,.58); }
.calendar-publication-side-card.quick button:disabled small { color: rgba(255,255,255,.52); }

/* Shared readable type scale across the non-publication calendar tabs. */
.school-calendar-day > div > small { font-size: 9px; }
.calendar-event-chip { font-size: 9.5px; }
.school-calendar-side-card.upcoming > div > button > span small { font-size: 9.5px; }
.calendar-event-month { font-size: 8.5px; }
.calendar-draft-marker { font-size: 9px; }
.school-calendar-side-card.upcoming p small,
.school-calendar-validation small,
.school-calendar-period-card dt { font-size: 10px; }
.school-calendar-period-card dd small { font-size: 9.5px; }

.calendar-period-meta small { font-size: 9.5px; }
.calendar-periods-table th { font-size: 10px; }
.calendar-period-status { font-size: 9.5px; }
.calendar-period-recap small,
.calendar-period-side-card.current > small,
.calendar-period-side-card.checks b,
.calendar-validation-message-list small,
.calendar-message-filters button { font-size: 10px; }
.calendar-period-form label { font-size: 10.5px; }
.calendar-period-form input,
.calendar-period-form select,
.calendar-period-form textarea { font-size: 11px; }
.calendar-field-error,
.calendar-validation-summary span { font-size: 9.5px; }

.calendar-closures-panel > header button b,
.calendar-events-panel > header button b { font-size: 9px; }
.calendar-closure-side-card.impacts small,
.calendar-closure-form label > small { font-size: 9.5px; }
.calendar-modal-description,
.calendar-form-alert { font-size: 10px; }

.calendar-events-table th { font-size: 10px; }
.calendar-events-table td > small,
.calendar-event-title small,
.calendar-event-category,
.calendar-event-status,
.calendar-event-audience { font-size: 9.5px; }
.calendar-events-pagination,
.calendar-events-pagination select,
.calendar-event-next > em,
.calendar-event-next footer > small,
.calendar-event-next footer b span,
.calendar-event-side-card.summary span,
.calendar-event-side-card.checks b,
.calendar-event-report-link { font-size: 10px; }
.calendar-event-audiences label span,
.calendar-event-audiences > p,
.calendar-event-other-audiences summary,
.calendar-event-period-note,
.school-calendar-modal .calendar-event-targeting > header small,
.calendar-event-structure-source,
.calendar-event-no-structure,
.calendar-event-source small,
.calendar-event-notify small { font-size: 9.5px; }

.calendar-closure-switches label.unavailable,
#schoolCalendarClosureActionForm label.unavailable { color: #718095; }
.calendar-closure-switches label.unavailable input,
#schoolCalendarClosureActionForm label.unavailable input { cursor: not-allowed; }
.calendar-notification-availability { display: block; margin-top: 2px; color: #718095; font-size: 9.5px; font-weight: 600; line-height: 1.35; }

@media (max-width: 1100px) {
  .calendar-publication-layout { grid-template-columns: 1fr; }
  .calendar-publication-layout > aside { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .calendar-publication-top, .calendar-publication-layout > aside { grid-template-columns: 1fr; }
  .calendar-publication-current-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 0; }
  .calendar-publication-current-grid article:nth-child(odd) { border-left: 0; }
  .calendar-publication-current-grid article:last-child { grid-column: 1 / -1; }
  .calendar-publication-diff-groups { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .calendar-publication-history > header { align-items: stretch; flex-direction: column; }
  .calendar-publication-history > header > div { display: grid; grid-template-columns: 1fr; }
  .calendar-publication-current-grid, .calendar-publication-confirm-summary > div, .calendar-publication-detail-grid, .calendar-publication-filter-form { grid-template-columns: 1fr !important; }
  .calendar-publication-current-grid article { padding: 8px 14px; border-left: 0; border-top: 1px solid var(--calendar-border); }
  .calendar-publication-current-grid article:first-child { border-top: 0; }
  .calendar-publication-current-grid article:last-child { grid-column: auto; }
  .calendar-publication-compare-form { grid-template-columns: 1fr; }
  .calendar-publication-version-step { grid-template-columns: 1fr; }
  .calendar-publication-version-step > .button-svg { transform: rotate(90deg); }
  .calendar-publication-report-list article { grid-template-columns: 22px minmax(0,1fr); }
  .calendar-publication-report-list article > button { grid-column: 2; width: max-content; }
}

@media print {
  .calendar-publication-row-actions, .calendar-publication-history > header button, .calendar-publication-side-card.quick, .calendar-publication-modal footer { display: none !important; }
  .calendar-publication-layout { display: block; }
  .calendar-publication-layout > aside { margin-top: 16px; }
}

/* Selected calendar rebrand: elegant academic planner, visual treatment only. */
.school-calendar-main-card {
  --calendar-overview-ink: var(--color-sidebar-bg, var(--sidebar-bg, var(--dark-blue, #0b2f5b)));
  padding: 0;
  border-color: color-mix(in srgb, var(--calendar-overview-ink) 22%, #dce5ed);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(10, 37, 64, .1);
}
.school-calendar-main-card > header {
  min-height: 88px;
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(115deg, color-mix(in srgb, var(--calendar-overview-ink) 90%, #071f3b), var(--calendar-overview-ink));
}
.school-calendar-main-card > header button {
  width: 40px;
  height: 35px;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}
.school-calendar-main-card > header button:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}
.school-calendar-main-card > header .calendar-today-button {
  min-width: 104px;
  padding-inline: 13px;
  color: #fff;
  font-size: 10.5px;
}
.school-calendar-main-card > header h3 {
  color: #fff;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -.025em;
}
.calendar-month-title-icon,
.school-calendar-year-picker { color: #fff; }
.calendar-month-title-icon { width: 26px; height: 26px; }
.school-calendar-view-switch {
  padding: 2px;
  border-color: rgba(255, 255, 255, .7);
  border-radius: 8px;
  background: rgba(3, 21, 43, .22);
}
.school-calendar-view-switch button {
  min-width: 72px;
  color: #fff;
  font-size: 11px;
  border-radius: 6px !important;
  background: transparent;
}
.school-calendar-view-switch button.active {
  color: #fff;
  background: color-mix(in srgb, var(--primary) 82%, #4fa7ef);
  box-shadow: 0 5px 13px rgba(0, 0, 0, .18);
}
.calendar-month-arrow .button-svg { width: 16px; height: 16px; }
.school-calendar-view-switch .button-svg { width: 14px; height: 14px; }

.school-calendar-weekdays {
  margin: 0 14px;
  border: 1px solid #cfd9e3;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #fff, #f8fbfd);
}
.school-calendar-weekdays span {
  min-height: 48px;
  color: color-mix(in srgb, var(--calendar-overview-ink) 88%, #174e7a);
  border-right: 1px solid #cfd9e3;
  font-size: 12px;
  letter-spacing: .015em;
}
.school-calendar-grid {
  margin: 0 14px;
  border: 1px solid #cfd9e3;
  border-radius: 0 0 9px 9px;
  background: #fff;
}
.school-calendar-day {
  min-height: 88px;
  padding: 8px;
  border-right: 1px solid #d5dee7;
  border-bottom: 1px solid #d5dee7;
  background: #fff;
}
.school-calendar-day > b {
  width: 34px;
  height: 34px;
  color: #111827;
  font-size: 16px;
  font-weight: 750;
}
.school-calendar-day.weekend { background: #fff; }
.school-calendar-day.weekend > b { color: #ce1f17; }
.school-calendar-day.outside,
.school-calendar-day.weekend.outside { background: #fafbfc; }
.school-calendar-day.outside > b { color: #a5adb7; }
.school-calendar-day.today > b {
  border-color: var(--calendar-overview-ink);
  background: var(--calendar-overview-ink);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--calendar-overview-ink) 32%, transparent);
}
.school-calendar-day > div { right: 8px; bottom: 8px; left: 8px; gap: 3px; }
.calendar-event-chip {
  height: 22px;
  padding-inline: 7px;
  color: #0d60b0;
  border: 1px solid #bcd9f4;
  border-radius: 4px;
  background: #edf6ff;
  font-size: 10px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}
.calendar-event-chip:hover { filter: brightness(.98); text-decoration: none; }
.calendar-event-chip.meeting { color: #7136b8; border-color: #d7c0f1; background: #f4ecff; }
.calendar-event-chip.assessment { color: #bc5600; border-color: #f3c58f; background: #fff4e7; }
.calendar-event-chip.holiday,
.calendar-event-chip.vacation,
.calendar-event-chip.closure,
.calendar-event-chip.other_closure { color: #207242; border-color: #b6dcbf; background: #eaf7ed; }
.calendar-event-chip.public_holiday { color: #5e6873; border-color: #cfd5dc; background: #f0f2f4; }
.calendar-event-chip.pedagogical { color: #0b5eae; border-color: #bcd9f4; background: #edf6ff; }
.school-calendar-list { padding: 14px 16px 4px; }
.school-calendar-legend {
  gap: 11px 27px;
  padding: 18px 20px 20px;
  color: #24364b;
  font-size: 11px;
}
.school-calendar-legend i { width: 14px; height: 14px; border-radius: 3px; }

@media (max-width: 720px) {
  .school-calendar-main-card { padding: 0; border-radius: 9px; }
  .school-calendar-main-card > header { min-height: 0; padding: 12px; }
  .school-calendar-main-card > header button { width: 38px; height: 35px; }
  .school-calendar-main-card > header .calendar-today-button { min-width: 88px; padding-inline: 9px; font-size: 10px; }
  .school-calendar-main-card > header h3 { font-size: 17px; }
  .calendar-month-title-icon { width: 20px; height: 20px; }
  .school-calendar-view-switch button { min-width: 56px; font-size: 9.5px; }
  .school-calendar-weekdays,
  .school-calendar-grid { margin-inline: 7px; }
  .school-calendar-weekdays span { min-height: 38px; font-size: 8.5px; }
  .school-calendar-day { min-height: 60px; padding: 4px; }
  .school-calendar-day > b { width: 28px; height: 28px; font-size: 13px; }
  .school-calendar-day > div { right: 3px; bottom: 3px; left: 3px; }
  .calendar-event-chip { height: 16px; padding-inline: 3px; font-size: 7.5px; }
  .school-calendar-legend { gap: 8px 14px; padding: 12px; font-size: 9px; }
}

@media print {
  .school-calendar-main-card { box-shadow: none; }
  .school-calendar-main-card > header { color: #102a46; border-bottom: 1px solid #cfd9e3; background: #fff; }
  .school-calendar-main-card > header h3,
  .school-calendar-main-card > header button,
  .calendar-month-title-icon,
  .school-calendar-year-picker { color: #102a46; }
}