.roji-calendar{background:#fff;border:1px solid #dce3ed;border-radius:16px;padding:20px;margin:20px 0;color:#243d4e}.calendar-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.calendar-heading h2{margin:0}.calendar-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;overflow-x:auto;padding-bottom:10px}.calendar-days>section{background:#f6f8fc;border:1px solid #dde5ee;border-radius:10px;padding:12px;min-width:0}.calendar-days h3{font-size:1rem}.roji-calendar ul{list-style:none;padding:0}.roji-calendar li{padding:10px 0;border-top:1px solid #dce3ed;overflow-wrap:anywhere}.roji-calendar li span,.roji-calendar li small{display:block}.roji-calendar li p{white-space:pre-wrap}.calendar-range,.calendar-clock{display:flex;gap:12px;flex-wrap:wrap}.calendar-range label,.calendar-dialog label{display:block;margin:12px 0}.calendar-check{display:flex;align-items:center;gap:8px;margin:12px 0}.calendar-accounts{padding:15px 0}.calendar-accounts section{border-top:1px solid #ddd;padding:12px}.calendar-connect{display:flex;flex-wrap:wrap;gap:8px}.calendar-dialog{max-width:600px;width:calc(100vw - 40px);max-height:90dvh;overflow:auto;border:1px solid #ccd6df;border-radius:16px;padding:24px}.calendar-dialog input:not([type=checkbox]),.calendar-dialog textarea,.calendar-dialog select{display:block;box-sizing:border-box;max-width:100%;padding:8px}.calendar-dialog textarea,.calendar-dialog input:not([type=checkbox]){width:100%}.calendar-dialog [hidden]{display:none}.calendar-clock label{flex:1}.calendar-dialog [data-review-panel]{background:#f0f5fa;padding:15px;margin-top:12px}.roji-calendar button:focus-visible,.calendar-dialog button:focus-visible{outline:3px solid #d69d2e;outline-offset:3px}@media(max-width:650px){.calendar-days{grid-template-columns:1fr;overflow:visible}.calendar-dialog{padding:16px}.calendar-heading>div{display:flex;flex-wrap:wrap;gap:6px}}

:is(.admin-workspace #dashboard-navigation,.teacher-sidebar nav) button .roji-date-icon{display:grid;grid-template-rows:12px 1fr;align-items:center;justify-items:center;width:32px;height:32px;min-width:32px;box-sizing:border-box;overflow:hidden;border:1.5px solid #edbd52;border-radius:5px;background:transparent;color:#edbd52;vertical-align:middle;font-style:normal;font-weight:700;flex-shrink:0;padding:0 0 2px;line-height:1}
:is(.admin-workspace #dashboard-navigation,.teacher-sidebar nav) button .roji-date-icon [data-calendar-month]{display:block;width:100%;box-sizing:border-box;background:transparent;color:#edbd52;text-align:center;font-size:0.5625rem;letter-spacing:.5px;text-indent:.5px;padding:0;line-height:12px}
:is(.admin-workspace #dashboard-navigation,.teacher-sidebar nav) button .roji-date-icon [data-calendar-day]{display:block;width:100%;box-sizing:border-box;background:transparent;color:#edbd52;text-align:center;font-size:1.0625rem;line-height:16px;letter-spacing:0;padding:0;align-self:start}
.teacher-sidebar nav [data-shared-tools="Calendar"]{display:flex;align-items:center;gap:12px}.admin-workspace nav [data-page="Calendar"]{display:flex;align-items:center;gap:12px}

.calendar-appearance{display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding:12px;background:#f5f8fc;border-radius:10px;margin-bottom:12px}.calendar-appearance label{display:flex;flex-direction:column;gap:5px;flex:1 1 170px}.calendar-appearance input{max-width:100%;min-width:0;box-sizing:border-box}.calendar-appearance input[type=color]{width:52px;height:38px;padding:3px}.calendar-appearance [role=status]{flex-basis:100%}.calendar-color-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0;overflow-wrap:anywhere}.calendar-color-legend>span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.calendar-color-legend i{width:12px;height:12px;border-radius:50%;border:1px solid #0003;display:inline-block}.roji-calendar li.calendar-colored-item{border-left:4px solid var(--calendar-account-color);padding:8px;margin:8px 0;background:white;border-radius:4px}
.student-report-page label{display:flex;flex-direction:column;gap:5px}.report-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0}.student-report-page input,.student-report-page select{max-width:100%;box-sizing:border-box;padding:8px}.student-report-page .report-sample-toggle{flex-direction:row;align-items:center;margin:14px 0}.student-report-page td{vertical-align:top;overflow-wrap:anywhere}.student-report-page table{width:100%;min-width:680px}.student-report-page .notice{padding:14px;border:1px solid #dce4ed;border-radius:8px;background:#f5f8fc}.student-report-page [role=status]{margin:16px 0}

/* Compact calendar settings icons to the subnavigation scale. */
:is(.admin-workspace #dashboard-navigation .student-subnavigation,.teacher-sidebar nav .teacher-settings-subnav) button .roji-date-icon{width:22px;height:22px;min-width:22px;grid-template-rows:8px 1fr;border-width:1.2px;border-radius:3px;padding-bottom:1px}
:is(.admin-workspace #dashboard-navigation .student-subnavigation,.teacher-sidebar nav .teacher-settings-subnav) button .roji-date-icon [data-calendar-month]{font-size:0.375rem;line-height:8px;letter-spacing:.3px;text-indent:.3px}
:is(.admin-workspace #dashboard-navigation .student-subnavigation,.teacher-sidebar nav .teacher-settings-subnav) button .roji-date-icon [data-calendar-day]{font-size:0.6875rem;line-height:11px}

.meeting-staff-options{max-height:220px;overflow:auto;display:grid;gap:9px}.meeting-staff-options label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.meeting-staff-options label[hidden]{display:none}.meeting-staff-options small{font-size:0.6875rem;color:#53697a}.notification-feed{display:grid;gap:12px;margin-top:18px}.notification-item{padding:18px!important;border:1px solid #d1ddeb;border-radius:10px;background:white}.notification-new{border-left:4px solid #225ba9}.notification-item h2{font-size:1.125rem!important;margin-top:0}.notification-item h2 small{font-size:0.75rem;color:#225ba9}.notification-item>div{margin-top:12px}

@media(min-width:651px){.calendar-days{grid-template-columns:repeat(5,minmax(150px,1fr))}}

/* Native date/time widgets and fieldsets must shrink inside enlarged dialogs. */
.calendar-dialog{box-sizing:border-box;overscroll-behavior:contain}
.calendar-dialog form,.calendar-dialog label,.calendar-dialog fieldset,.calendar-range > *{min-width:0;max-width:100%;box-sizing:border-box}
.calendar-dialog input,.calendar-dialog select,.calendar-dialog textarea{min-width:0;font:inherit}
.calendar-dialog select{width:100%}
.calendar-dialog .calendar-clock label{flex:1 1 8rem}
.calendar-dialog button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.calendar-dialog fieldset{margin-inline:0}
.meeting-staff-options:focus-visible{outline:3px solid #102d42;outline-offset:3px}
.notification-item > div{display:flex;flex-wrap:wrap;gap:.5rem}
.notification-item button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.notification-item time{font-size:.8125rem}
.student-report-page button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.student-report-page .report-filter-grid > *{min-width:0;max-width:100%}
.student-report-page input,.student-report-page select{min-width:0;width:100%;box-sizing:border-box}
.student-report-page input[type=number]{width:8rem;max-width:100%}
#attendance-ledger select{min-width:0;max-width:100%}
#attendance-ledger summary{white-space:normal;overflow-wrap:anywhere}