/* ═══════════════════════════════════════════════════════════════════════
   Calendar — the look from scratch/redesign/calendar.html

   The page keeps the Heron.MudCalendar component and its markup; this
   restyles it rather than rebuilding it, so the filters, RSVP handling and
   the list/month toggle all keep working. The classes below are the
   component's own (.mud-cal-*), plus the toolbar MudPaper around it.
═══════════════════════════════════════════════════════════════════════ */

/* ── The page sits on the stage backdrop, like the mock ──────────────── */
.portal-shell.tt-calendar-page {
    background-image: var(--tt-form-scrim), var(--tt-cal-bg);
    background-size: cover, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* ── The calendar itself becomes one glass card ──────────────────────── */
.tt-calendar-page .mud-cal,
.tt-calendar-page .mud-cal.mud-paper,
.tt-calendar-page .mud-cal-outlined {
    background: var(--tt-panel);
    border: 1px solid var(--tt-border);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    box-shadow: none;
    padding: 18px;
    overflow: hidden;
}

/* Month / week / day switcher and the date navigation. */
.tt-calendar-page .mud-cal-toolbar {
    background: transparent;
    margin-bottom: 12px;
    font-weight: 800;
}
.tt-calendar-page .mud-cal-toolbar .mud-button-root {
    border-radius: 999px;
    font-weight: 700;
    text-transform: none;
}
.tt-calendar-page .mud-cal-toolbar .mud-button-root.mud-button-filled {
    background: var(--tt-orange-wash);
    color: var(--tt-orange);
    box-shadow: none;
}

/* ── Attendance legend inside the toolbar ────────────────────────────────
   Rendered in ToolbarContent, so it sits between the date picker and the
   Month/Week/Day switcher. Hidden on phones, where the toolbar already
   scrolls sideways and the switcher matters more than the legend. */
.tt-calendar-page .cal-rsvp-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--tt-muted);
    white-space: nowrap;
    margin-inline-start: 6px;
}
.tt-calendar-page .cal-rsvp-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tt-calendar-page .cal-rsvp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.tt-calendar-page .cal-rsvp-dot--outline {
    background: transparent;
    border: 1.5px solid var(--tt-muted);
    border-radius: 2px;
}
@media (max-width: 700px) {
    .tt-calendar-page .cal-rsvp-legend { display: none; }
    /* The card clips anything wider than the screen, so the Month/Week/Day switcher wraps
       onto its own line under the date navigation instead of running off the edge. */
    .tt-calendar-page .mud-cal-toolbar { flex-wrap: wrap; height: auto; row-gap: 8px; }
}

/* ── Grid ────────────────────────────────────────────────────────────── */
.tt-calendar-page .mud-cal-grid,
.tt-calendar-page .mud-cal-month-view {
    border: 1px solid var(--tt-border);
    border-radius: 14px;
    overflow: hidden;
}

.tt-calendar-page .mud-cal-grid-header,
.tt-calendar-page .mud-cal-month-grid-header,
.tt-calendar-page .mud-cal-day-header {
    background: transparent;
    border: 0;
    color: var(--tt-lede);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
}

/* Month cells size to their row track (the fixed-height grid), never to a hard
   minimum — a minimum would push the rows past the viewport and bring the page
   scroll back. Week/day time cells keep their minimum. */
.tt-calendar-page .mud-cal-month-cell {
    background: var(--tt-cal-cell);
    border-right: 1px solid var(--tt-border-faint);
    border-bottom: 1px solid var(--tt-border-faint);
    min-height: 0;
}
.tt-calendar-page .mud-cal-time-cell {
    background: var(--tt-cal-cell);
    border-right: 1px solid var(--tt-border-faint);
    border-bottom: 1px solid var(--tt-border-faint);
    min-height: 78px;
}

/* Days spilling in from the neighbouring months read as background, not content. */
.tt-calendar-page .mud-cal-month-outside,
.tt-calendar-page .mud-cal-month-outside .mud-cal-month-cell-title {
    color: var(--tt-muted);
    opacity: .55;
}

.tt-calendar-page .mud-cal-month-cell-title,
.tt-calendar-page .mud-cal-month-link {
    color: var(--tt-text);
    font-weight: 600;
    font-size: .92rem;
}

/* Today gets the filled orange disc from the mock. */
.tt-calendar-page .mud-cal-today .mud-cal-month-cell-title,
.tt-calendar-page .mud-cal-month-cell.mud-cal-today .mud-cal-month-link {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tt-orange);
    color: #fff;
    font-weight: 800;
}

/* ── Event chips inside a day ────────────────────────────────────────── */
.tt-calendar-page .mud-cal-cell-template,
.tt-calendar-page .mud-cal-cell-template-chip {
    background: transparent;
    box-shadow: none;
}

.tt-calendar-page .cal-chip-title {
    color: var(--tt-text);
    font-weight: 600;
    font-size: .8rem;
}
.tt-calendar-page .cal-chip-time { color: var(--tt-muted); font-size: .75rem; }

/* The mock marks an event with a small dot before its title. */
.tt-calendar-page .cal-chip-header::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tt-orange);
    margin-right: 7px;
    flex: 0 0 auto;
}

/* The "+" for days whose events overflow the fitted row. */
.tt-calendar-page .mud-cal-overflow-message {
    color: var(--tt-orange);
    font-weight: 800;
    font-size: .8rem;
}

/* ── The filter panel above the calendar ─────────────────────────────── */
.tt-calendar-page .mud-paper.pa-3 {
    background: var(--tt-panel);
    border: 1px solid var(--tt-border);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    box-shadow: none;
}

.tt-calendar-page .mud-button-root.mud-button-outlined {
    border-radius: 999px;
    border-color: var(--tt-border-input);
    color: var(--tt-text);
    text-transform: none;
    font-weight: 700;
}

/* The mock centres the day number in its cell; event chips stay left-aligned. */
.tt-calendar-page .mud-cal-month-cell { text-align: center; }
.tt-calendar-page .mud-cal-cell-template,
.tt-calendar-page .cal-chip-header { text-align: left; }

/* The mini-overview dialog shows three months side by side on desktop, but
   three ~95px columns are unreadable on a phone — stack them. The inline
   style needs !important to lose the specificity fight. */
@media (max-width: 700px) {
    .cal-overview-grid { grid-template-columns: 1fr !important; }
}