/* Scope these alignment changes to the education catalogue only. */
#educationItemList, #educationItemList .managed-item-row,
#educationItemList .managed-item-row > div, #educationItemList .education-source-details {
  text-align: left;
}
#educationItemList .managed-item-title, #educationItemList .education-course-actions {
  justify-content: flex-start;
}
#annualLeavePeriodFields { min-width: 0; }
#annualLeaveRecordForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#annualLeaveRecordForm > .span-2 { grid-column: 1 / -1; }
.leave-period-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.leave-period-days { display: flex; flex-wrap: wrap; gap: 8px; max-height: 240px; overflow: auto; padding: 4px; }
.leave-period-days label { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; }
.leave-period-days input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.leave-period-days label:has(input:checked) { background: #eef5ff; border-color: #9bbbf1; }
.leave-period-days label:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.leave-period-total { display: block; margin-top: 10px; color: var(--navy); font-size: 13px; }
@media(max-width:520px) { #annualLeaveRecordForm, .leave-period-dates { grid-template-columns: 1fr; } }

.leave-calendar { display:block; max-width:100%; overflow-x:auto; }
.leave-calendar-weekdays, .leave-calendar-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); column-gap:1px; }
.leave-calendar-weekdays { border-bottom:1px solid var(--line); }
.leave-calendar-week { min-height:98px; grid-template-rows:26px repeat(var(--leave-lanes),24px) minmax(12px,1fr); row-gap:4px; border-bottom:1px solid var(--line); }
.leave-calendar-week:last-child { border-bottom:0; }
.leave-calendar .leave-calendar-day { grid-row:1 / -1; min-width:0; min-height:0; padding:7px 8px; }
.leave-calendar-event { z-index:1; min-width:0; margin:0 5px; padding:3px 7px; overflow:hidden; border-radius:5px; background:#e4efff; color:#1c5798; font-size:11px; font-weight:750; line-height:18px; text-overflow:ellipsis; white-space:nowrap; }
.leave-calendar-event.additional { background:#e3f5ee; color:#17664f; }
.leave-calendar-event.continues-before { margin-left:0; border-top-left-radius:0; border-bottom-left-radius:0; }
.leave-calendar-event.continues-after { margin-right:0; border-top-right-radius:0; border-bottom-right-radius:0; }
.leave-calendar-event.continues-before::before { content:'‹ '; }
.leave-calendar-event.continues-after::after { content:' ›'; }
.leave-period-record { margin-bottom:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.leave-period-record > summary { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px 16px; color:var(--navy); font-size:13px; cursor:pointer; }
.leave-period-record > summary span { color:var(--blue); font-size:12px; }
.leave-period-record > summary span::after { content:' ▾'; }
.leave-period-record[open] > summary span::after { content:' ▴'; }
.leave-period-record > p { margin:8px 0; color:var(--muted); font-size:12px; }
.leave-period-record .leave-record-row { margin:8px 0 0; }
@media(max-width:640px) { .leave-calendar-weekdays, .leave-calendar-week { min-width:574px; } }