/* The year overview stays within the application window; event lists scroll inside. */
.calendar-page { flex:1;min-height:0; }
.calendar-page > :not(.calendar-layout) { flex-shrink:0; }
.calendar-heading { margin-bottom:9px; }
.calendar-heading p { display:block;font-size:11px;color:#839388;margin:4px 0 0; }
.calendar-create { min-height:34px;padding:8px 14px;font-size:12px; }
.calendar-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:33px;margin-bottom:7px; }
.calendar-year-control { display:flex;align-items:center;gap:5px; }
.calendar-year-control .icon-button { width:28px;height:28px;background:#fff; }
.calendar-year-control svg { width:14px;height:14px; }
.reverse-arrow { transform:rotate(180deg); }
#calendar-year { appearance:textfield;width:74px;border:0;background:transparent;text-align:center;font-size:21px;font-weight:600;letter-spacing:-.7px;padding:3px;color:#304c3c; }
#calendar-year::-webkit-inner-spin-button,#calendar-year::-webkit-outer-spin-button { appearance:none;margin:0; }
.calendar-current-year { font-size:10px;color:#768d7f;background:#fff;padding:7px 10px;border-radius:18px;margin-left:5px;white-space:nowrap; }
.calendar-summary { font-size:11px;color:#829589; }
.calendar-list-toggle { display:none; }
.calendar-legend { display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:10px;font-size:10px;color:#7e8d83; }
.calendar-legend > span { display:flex;align-items:center;gap:5px; }
.calendar-legend i,.event-dot { width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0; }
.calendar-layout { flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:13px; }
.year-grid { min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:9px; }
.calendar-month { display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;border-radius:15px;padding:9px 10px 8px;text-align:left;gap:4px; }
.calendar-month:hover { box-shadow:inset 0 0 0 1px #8ac3a5; }
.calendar-month.current-month { box-shadow:inset 0 0 0 1px #bad9c7; }
.mini-month-heading { display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0;font-size:11px; }
.mini-month-heading strong { font-weight:650; }
.mini-month-heading > span { display:grid;place-items:center;min-width:16px;height:16px;background:var(--soft);border-radius:6px;color:var(--green);font-size:9px;padding:0 3px; }
.mini-weekdays,.mini-days { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px; }
.mini-weekdays { font-size:8px;color:#9aa79f;text-align:center;flex-shrink:0; }
.mini-days { flex:1;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr));font-size:9px; }
.mini-day { display:grid;place-items:center;line-height:1;border-radius:3px;color:#63776a;min-width:0; }
.mini-day.weekend { color:#a9aaa0; }
.mini-day.has-events { color:#314d3a;font-weight:600; }
.mini-day.is-today { outline:1px solid var(--green);outline-offset:-1px;color:var(--green);font-weight:700; }
.year-agenda { display:flex;flex-direction:column;min-height:0;background:white;border-radius:17px;padding:12px 9px; }
.year-agenda-heading { display:flex;align-items:center;gap:8px;justify-content:space-between;padding:0 5px 10px;flex-shrink:0; }
.year-agenda-heading h2 { margin:0;font-size:12px;font-weight:600; }
#year-event-count { font-size:10px;color:#8c9e92;background:var(--wash);border-radius:8px;min-width:20px;text-align:center;padding:3px; }
.calendar-event-list { display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;padding:1px 3px 3px;scrollbar-width:thin;scrollbar-color:#c0d2c5 transparent;overscroll-behavior:contain; }
.year-agenda > .calendar-event-list { flex:1; }
.calendar-event { display:flex;flex-direction:column;gap:6px;flex-shrink:0;min-width:0;width:100%;background:var(--event-background);border-left:3px solid var(--event-color);border-radius:12px;padding:10px;text-align:left; }
.calendar-event:hover { box-shadow:inset 0 0 0 1px var(--event-color); }
.event-type-line { display:flex;align-items:center;gap:4px;color:var(--event-color);font-size:9px; }
.event-type-line .event-dot { width:5px;height:5px;background:var(--event-color); }
.event-type-line > span:last-child { margin-left:auto;color:#7e8d83;font-size:9px;white-space:nowrap; }
.calendar-event strong { font-size:12px;font-weight:600;line-height:1.5;overflow-wrap:anywhere; }
.event-range { font-size:10px;color:#718477;line-height:1.5; }
.event-row-notes { font-size:10px;color:#87958c;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6;overflow-wrap:anywhere; }
.calendar-empty { display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:160px;color:#8c9e92;padding:10px 0; }
.calendar-empty > svg { width:25px;height:25px;margin-bottom:14px;color:#b1c2b6; }
.calendar-empty strong { font-size:12px;font-weight:550; }
.calendar-empty p { font-size:11px;line-height:1.8; }
.calendar-empty .secondary-button { margin-top:6px;font-size:10px;padding:8px 11px; }
.calendar-footer { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font-size:10px;color:#8c9e92;min-height:17px; }
.calendar-footer > span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.calendar-footer button { flex-shrink:0;font-size:10px;color:#6b977f; }
#calendar-feedback button,.calendar-month-feedback button { text-decoration:underline;font-weight:600; }
.calendar-month-dialog { width:530px; }
.calendar-month-dialog .dialog-heading { margin-bottom:15px; }
.month-weekdays,.month-detail-days { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px; }
.month-weekdays { text-align:center;font-size:11px;color:#95a49b;margin-bottom:6px; }
.month-day { min-height:39px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:9px;background:#f7f8f7;font-size:12px; }
.month-day.weekend { color:#a0a397; }
.month-day.is-today { box-shadow:inset 0 0 0 1px #8bc5a5; }
.month-day[aria-pressed="true"] { outline:2px solid var(--green);outline-offset:-2px;color:#234a33;font-weight:650; }
.day-event-dots { display:flex;align-items:center;justify-content:center;gap:2px;height:4px; }
.day-event-dots i { width:4px;height:4px;border-radius:50%; }
.month-agenda-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:20px 0 10px; }
.month-agenda-heading h3 { font-size:12px;margin:0;font-weight:600; }
.month-agenda-heading .secondary-button { display:flex;align-items:center;gap:5px;font-size:11px;padding:8px 10px; }
.month-agenda-heading svg { width:13px;height:13px; }
.month-event-list { max-height:190px; }
.calendar-no-events { font-size:12px;line-height:1.7;color:#97a79b;margin:7px 0; }
.calendar-month-feedback { font-size:11px;line-height:1.8;color:#609277;margin-top:10px; }
.event-dialog select,.event-dates input { display:block;width:100%;min-width:0;border:1px solid #e4ebe6;border-radius:12px;background:var(--wash);padding:11px 12px;font-size:13px;color:#3a5143; }
.event-period-toggle { display:flex;gap:8px;align-items:center;font-size:12px;font-weight:500; }
.event-period-toggle input { width:16px;height:16px;margin:0;accent-color:var(--green); }
.event-dates { display:flex;gap:12px; }
.event-dates > div { flex:1;min-width:0; }
.event-dates label { margin-top:5px; }
.event-duration { font-size:11px;line-height:1.7;color:#8a9f91;margin:9px 0 0;min-height:18px; }
.event-dialog textarea { min-height:65px; }
@media(max-width:1100px) and (min-width:821px) { .calendar-layout { grid-template-columns:minmax(0,1fr) 220px; } .year-grid { grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr)); } }
@media(max-width:820px) {
  .calendar-heading p { display:none; }
  .calendar-heading { margin-bottom:6px; }
  .calendar-create { min-height:32px;padding:7px 11px;font-size:11px; }
  .calendar-toolbar { min-height:31px;gap:6px;margin-bottom:7px; }
  .calendar-year-control { gap:2px; }
  #calendar-year { font-size:19px;width:60px; }
  .calendar-year-control .icon-button { width:25px;height:28px; }
  .calendar-current-year { font-size:9px;padding:6px 7px;margin-left:3px; }
  .calendar-summary { display:none; }
  .calendar-list-toggle { display:block;background:white;border-radius:15px;font-size:10px;padding:7px 10px;color:#6b8976; }
  .calendar-legend { gap:5px 10px;font-size:9px;margin-bottom:8px; }
  .calendar-legend i { width:5px;height:5px; }
  .calendar-layout { display:flex;flex-direction:column;gap:0; }
  .year-grid { flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px; }
  .calendar-month { border-radius:11px;padding:7px 5px 5px;gap:3px; }
  .mini-month-heading { font-size:9px;gap:2px; }
  .mini-month-heading > span { font-size:8px;min-width:12px;height:12px;border-radius:4px; }
  .mini-weekdays { font-size:7px;gap:0; }
  .mini-days { font-size:8px;gap:1px; }
  .year-agenda { display:none; }
  .calendar-page.show-events .year-grid { display:none; }
  .calendar-page.show-events .year-agenda { display:flex;flex:1; }
  .calendar-event { padding:12px; }
  .calendar-event strong { font-size:13px; }
  .event-type-line,.event-range { font-size:11px; }
  .calendar-footer { margin-top:7px;font-size:9px; }
  .calendar-footer > #calendar-feedback { font-size:9px; }
  .calendar-footer > button { font-size:9px; }
  .calendar-month-dialog { padding:20px; }
  .calendar-month-dialog .dialog-heading h2 { font-size:21px; }
  .month-detail-days { gap:4px; }
  .month-day { min-height:36px;font-size:12px;border-radius:7px; }
  .month-event-list { max-height:165px; }
  .month-agenda-heading h3 { font-size:11px; }
  .month-agenda-heading .secondary-button { min-height:35px;font-size:10px; }
  .event-dialog select,.event-dates input { font-size:16px;min-height:44px;padding:10px 8px; }
  .event-dates { gap:8px; }
  .event-dates label { font-size:11px; }
  .event-duration { font-size:10px; }
}
@media(max-height:600px) { .calendar-heading p { display:none; } .calendar-legend { margin-bottom:7px; } .calendar-month { padding-block:6px;gap:2px; } .calendar-heading { margin-bottom:5px; } }
@media(max-height:480px) and (max-width:820px) { .calendar-legend { display:none; } .mini-weekdays { display:none; } .calendar-footer { margin-top:4px; } }
@media(max-width:380px) { .event-dates { flex-direction:column;gap:10px; } }