/* Calendar grid, events and the modal. */
#weekdays {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--hero-fade);
}

.weekday {
    padding: 12px 6px;
    color: var(--hero-muted);
    font-size: .72rem;
    font-weight: 720;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

#calendar {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.month-calendar {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    grid-template-rows: repeat(var(--month-weeks,6),minmax(76px,1fr));
    height: 100%;
}

.day {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    container-type: size;
    flex-direction: column;
    padding: 8px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--transition);
}

.day:hover {
    background: var(--color-surface-hover);
}

.date {
    flex-shrink: 0;
    display: grid;
    width: var(--touch-target);
    height: var(--touch-target);
    margin-bottom: 6px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 650;
    cursor: pointer;
}

.other-month {
    color: var(--color-text-muted);
    opacity: .52;
}

.today {
    background: var(--color-brand-soft);
    color: var(--today-text);
    font-weight: 800;
}

.event {
    display: flex;
    width: 100%;
    min-height: var(--touch-target);
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 4px 7px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--status-upcoming-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: .7rem;
    text-align: left;
    white-space: nowrap;
}


.event-status-red {
    background: var(--status-absent-bg);
    color: var(--color-text);
}

.event-status-green {
    background: var(--status-present-bg);
    color: var(--color-text);
}

.event-status-blue {
    background: var(--status-upcoming-bg);
    color: var(--color-text);
}

.event-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.event-time {
    flex-shrink: 0;
    font-weight: 750;
}

.event-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-events {
    min-height: var(--touch-target);
    padding: 12px 5px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: .7rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.more-events:hover {
    color: var(--color-accent);
}

#modalOverlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--overlay);
    backdrop-filter: blur(6px);
}

#modal {
    width: min(460px,100%);
    max-height: min(80vh,680px);
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
}

#modalContent h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
}

/* ── Moodle deadlines (4B-UI): the Due chip, its bar, the Week strip and the card ── */
.due {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    padding: 2px 6px;
    overflow: hidden;
    border: 1px dashed var(--color-warning);
    border-radius: 6px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font: inherit;
    font-size: .72rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.due:hover {
    filter: brightness(1.08);
}

.due-flag {
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.due-time {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.due-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.due-tag {
    flex: 0 0 auto;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-surface);
    color: inherit;
    font-size: .6rem;
    font-weight: 700;
}

.due-state-submitted, .due-state-past {
    border-style: solid;
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.due-state-submitted .due-flag {
    color: var(--color-success);
}

.due-state-overdue {
    border-style: solid;
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* In a day panel or the day pop-up: a full row, as easy to tap as a class card. */
.due.due-in-panel, #modalContent .due {
    min-height: var(--touch-target);
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: .82rem;
}

.event-bar.due-bar-due {
    background: var(--color-warning);
}

.event-bar.due-bar-overdue {
    background: var(--color-danger);
}

.event-bar.due-bar-submitted, .event-bar.due-bar-past {
    background: var(--color-border);
}

.week-due-strip {
    display: grid;
    grid-template-columns: 56px repeat(7,minmax(0,1fr));
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.week-due-label {
    display: grid;
    place-items: center;
    border-right: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .64rem;
}

.week-due-cell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
    border-right: 1px solid var(--color-border);
}

.week-due-cell .due {
    margin: 0;
}

.deadline-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.deadline-course {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-brand-soft);
    color: var(--color-accent);
    font-size: .72rem;
    font-weight: 700;
}

.deadline-kind, .deadline-muted, .deadline-moved, .deadline-note {
    color: var(--color-text-muted);
}

.deadline-kind {
    font-size: .75rem;
}

.deadline-rows {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px 10px;
    margin: 0 0 14px;
    font-size: .86rem;
}

.deadline-rows dt {
    color: var(--color-text-muted);
}

.deadline-rows dd {
    margin: 0;
}

.deadline-rows .due-tag {
    margin-left: 6px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.deadline-state {
    font-weight: 650;
}

.deadline-state-pending {
    color: var(--color-warning);
}

.deadline-state-overdue {
    color: var(--color-danger);
}

.deadline-state-done {
    color: var(--color-success);
}

.deadline-state-unknown {
    color: var(--color-text-muted);
    font-weight: 400;
}

.deadline-moved {
    margin: 0 0 14px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
}

.deadline-note {
    margin: 0 0 14px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-surface-raised);
    font-size: .8rem;
}

.deadline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.deadline-btn {
    display: inline-flex;
    min-height: var(--touch-target);
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text);
    font: inherit;
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.deadline-btn-primary {
    border-color: transparent;
    background: var(--seg-on-bg);
    color: var(--seg-on-text);
}