.school-calendar-shell {
    display: grid;
    gap: 1rem;
}

.school-calendar-hero,
.school-calendar-toolbar,
.school-calendar-grid,
.school-calendar-modal__dialog,
.school-calendar-form,
.school-calendar-event-detail,
.school-calendar-empty {
    border: 1px solid rgba(126, 175, 224, .5);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 52px rgba(7, 45, 85, .08);
}

.school-calendar-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
}

.school-calendar-hero__stats {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    gap: .55rem;
}

.school-calendar-hero__stats span {
    border: 1px solid rgba(126, 175, 224, .55);
    border-radius: 999px;
    padding: .55rem .75rem;
    background: linear-gradient(135deg, rgba(225, 242, 255, .9), rgba(245, 255, 247, .9));
    color: #07355f;
    font-weight: 800;
}

.school-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    padding: .75rem;
}

.school-calendar-toolbar__month {
    display: grid;
    gap: .15rem;
    min-width: min(100%, 18rem);
    margin-right: auto;
}

.school-calendar-toolbar__month strong {
    color: #07355f;
    font-size: 1.25rem;
}

.school-calendar-toolbar__month span {
    color: #5c7088;
    font-size: .9rem;
}

.school-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .35rem;
    padding: .75rem;
}

.school-calendar-grid__head {
    padding: .55rem;
    color: #476179;
    font-weight: 900;
    text-align: center;
}

.school-calendar-day {
    display: grid;
    align-content: start;
    gap: .4rem;
    min-height: 8.4rem;
    padding: .65rem;
    border: 1px solid rgba(126, 175, 224, .55);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(239, 249, 255, .82));
    color: #072d55;
    text-align: left;
    cursor: pointer;
}

.school-calendar-day:hover,
.school-calendar-day.is-selected {
    border-color: #176fa9;
    box-shadow: 0 12px 28px rgba(23, 111, 169, .16);
    transform: translateY(-1px);
}

.school-calendar-day.is-muted {
    opacity: .54;
}

.school-calendar-day.is-today {
    background: linear-gradient(145deg, rgba(232, 249, 255, .98), rgba(237, 255, 248, .92));
}

.school-calendar-day.has-priority-low {
    border-color: rgba(38, 158, 96, .42);
}

.school-calendar-day.has-priority-medium {
    border-color: rgba(214, 157, 36, .48);
}

.school-calendar-day.has-priority-high {
    border-color: rgba(204, 62, 62, .54);
}

.school-calendar-day.has-priority-critical {
    border-color: rgba(126, 61, 174, .58);
}

.school-calendar-day__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(225, 242, 255, .92);
    font-weight: 950;
}

.school-calendar-day.is-today .school-calendar-day__number {
    color: #fff;
    background: linear-gradient(135deg, #0d5b8c, #14987c);
}

.school-calendar-day__events {
    display: grid;
    gap: .35rem;
}

.school-calendar-event-chip {
    display: grid;
    gap: .12rem;
    border-left: 4px solid #176fa9;
    border-radius: .75rem;
    padding: .35rem .45rem;
    background: rgba(255, 255, 255, .86);
    color: #082b4d;
    font-size: .78rem;
    line-height: 1.15;
}

.school-calendar-event-chip.is-low {
    border-left-color: #259963;
    background: linear-gradient(135deg, rgba(232, 249, 239, .96), rgba(248, 255, 251, .9));
}

.school-calendar-event-chip.is-medium {
    border-left-color: #d79a1f;
    background: linear-gradient(135deg, rgba(255, 247, 224, .96), rgba(255, 253, 245, .9));
}

.school-calendar-event-chip.is-high {
    border-left-color: #c9343e;
    background: linear-gradient(135deg, rgba(255, 235, 237, .96), rgba(255, 248, 249, .9));
}

.school-calendar-event-chip.is-critical {
    border-left-color: #7e3daf;
    background: linear-gradient(135deg, rgba(247, 235, 255, .96), rgba(252, 248, 255, .9));
}

.school-calendar-event-chip small {
    color: #60758d;
    font-weight: 700;
}

.school-calendar-modal__dialog {
    width: min(980px, calc(100vw - 1rem));
    max-height: min(86vh, 920px);
    overflow: auto;
    padding: 1rem;
}

.school-calendar-modal__content,
.school-calendar-modal__events {
    display: grid;
    gap: .85rem;
}

.school-calendar-event-detail,
.school-calendar-empty,
.school-calendar-form {
    padding: .9rem;
}

.school-calendar-event-detail {
    display: flex;
    justify-content: space-between;
    gap: .85rem;
}

.school-calendar-event-detail.is-low {
    border-left: 5px solid #259963;
}

.school-calendar-event-detail.is-medium {
    border-left: 5px solid #d79a1f;
}

.school-calendar-event-detail.is-high {
    border-left: 5px solid #c9343e;
}

.school-calendar-event-detail.is-critical {
    border-left: 5px solid #7e3daf;
}

.school-calendar-priority-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .22rem .55rem;
    margin-left: .35rem;
    font-size: .74rem;
    font-weight: 900;
}

.school-calendar-priority-chip.is-low {
    background: #e5f8ed;
    color: #11633e;
}

.school-calendar-priority-chip.is-medium {
    background: #fff2cc;
    color: #805514;
}

.school-calendar-priority-chip.is-high {
    background: #ffe1e5;
    color: #92232d;
}

.school-calendar-priority-chip.is-critical {
    background: #f0ddff;
    color: #622990;
}

.school-calendar-event-detail p {
    margin: .35rem 0;
    color: #42566f;
}

.school-calendar-event-detail small {
    color: #5d7088;
    font-weight: 700;
}

.school-calendar-event-detail__actions,
.school-calendar-modal__actions,
.school-calendar-form__checks,
.school-calendar-roles div {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.school-calendar-form {
    display: grid;
    gap: .85rem;
}

.school-calendar-range-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    border: 1px dashed rgba(126, 175, 224, .58);
    border-radius: 1rem;
    padding: .65rem;
    background: linear-gradient(135deg, rgba(241, 248, 255, .95), rgba(255, 252, 242, .88));
}

.school-calendar-range-tools small {
    color: #526d86;
    font-weight: 750;
}

.school-calendar-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
}

.school-calendar-form label,
.school-calendar-roles label {
    display: grid;
    gap: .3rem;
    font-weight: 850;
    color: #12395d;
}

.school-calendar-form input,
.school-calendar-form select,
.school-calendar-form textarea {
    width: 100%;
}

.school-calendar-form__checks label,
.school-calendar-roles label {
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    border: 1px solid rgba(126, 175, 224, .45);
    border-radius: 999px;
    padding: .45rem .65rem;
    background: rgba(241, 248, 255, .86);
}

.school-calendar-feedback {
    border-radius: 1rem;
    padding: .75rem .9rem;
    font-weight: 850;
}

.school-calendar-feedback.is-ok {
    background: #e7f8ef;
    color: #0f6844;
}

.school-calendar-feedback.is-danger {
    background: #fff1f2;
    color: #a3212f;
}

@media (max-width: 760px) {
    .school-calendar-hero,
    .school-calendar-event-detail {
        display: grid;
    }

    .school-calendar-grid {
        gap: .25rem;
        padding: .45rem;
    }

    .school-calendar-grid__head {
        font-size: .72rem;
        padding: .35rem .15rem;
    }

    .school-calendar-day {
        min-height: 5.8rem;
        padding: .38rem;
        border-radius: .8rem;
    }

    .school-calendar-day__number {
        width: 1.65rem;
        height: 1.65rem;
        font-size: .84rem;
    }

    .school-calendar-event-chip {
        font-size: .68rem;
        padding: .28rem .35rem;
    }
}
