/* ============================================
   CALENDAR GRID VIEW — shared monthly calendar layout
   ============================================
   Used by calendar.html (public/member calendar) and event-manager.html
   (Leadership's create/edit tool) -- both render the same underlying
   events through the same grid, so this lives in one file instead of
   two copies that can silently drift apart (which is exactly how the
   July-2026 scrollbar/hover-explode bug happened -- event-manager.html
   never got the has-multi fix calendar.html did). Paired with
   js/calendar-grid.js for the rendering logic itself. */

.calendar-grid-container {
    display: none;
    background: var(--surface-bg);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--aether-dim);
    border-radius: 4px;
}
.calendar-grid-container.is-active {
    display: block;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(20, 29, 56, 0.3);
    border-bottom: 1px solid var(--aether-dim);
}

.calendar-title {
    font-family: 'Cinzel', serif;
    color: var(--crystal-gold);
    font-size: 1.5rem;
}

.calendar-nav-btn {
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--aether-dim);
    color: var(--aether);
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
}
.calendar-nav-btn:hover {
    background: color-mix(in srgb, var(--aether-dim) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: rgba(20, 29, 56, 0.3);
    border-bottom: 1px solid var(--aether-dim);
}

.weekday {
    padding: 0.75rem;
    text-align: center;
    color: var(--parchment-dim);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    border-right: 1px solid rgba(58, 138, 156, 0.2);
    /* Grid items default to min-width:auto, which floors their size at
       their own content+padding rather than letting them shrink below
       that to fit the 1fr share -- on a narrow phone that pushes the
       whole 7-column row wider than the viewport and clips the last
       column (Sat). .calendar-day (the day-number cells below) already
       has overflow:hidden, which happens to sidestep this same quirk --
       this is that fix, explicit, for the header row it was missing. */
    min-width: 0;
}
.weekday:last-child {
    border-right: none;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 500px; /* Ensure consistent grid height across months */
}

.calendar-day {
    border-right: 1px solid rgba(58, 138, 156, 0.2);
    border-bottom: 1px solid rgba(58, 138, 156, 0.2);
    padding: 0.5rem;
    min-height: 100px;
    max-height: 100px;
    position: relative;
    transition: background 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    background: rgba(13, 20, 40, 0.15);
}
.calendar-day:hover {
    background: color-mix(in srgb, var(--aether) 14%, transparent);
}
.day-events-scroll {
    height: calc(100% - 1.5rem); /* Space below the day number */
    overflow-y: hidden; /* Collapsed cell never scrolls -- overflow is only ever revealed via the has-multi hover overlay below */
    position: relative;
}
.calendar-day:nth-child(7n) {
    border-right: none;
}
.calendar-day.blank-cell {
    /* Leading/trailing spacer cells for days outside the selected
       month -- intentionally featureless (no border-tinted hover,
       no cursor, no content) so they read as empty space rather
       than a dimmed "other month" cell with nothing in it. */
    cursor: default;
    pointer-events: none;
}
.calendar-day.today {
    /* No background of its own -- was a hardcoded cyan rgba(),
       which (a) didn't react to the active theme and (b) tinted
       over the same blurred custom background every other cell
       shows, making today's cell look like a flat, opaque patch
       instead of matching everything around it. The border alone
       is enough to mark it as today. */
    border: 1px solid var(--aether);
    cursor: pointer;
}

.day-number {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--parchment-dim);
    margin-bottom: 0.5rem;
}
.calendar-day.today .day-number {
    color: var(--aether);
    font-weight: bold;
}

.day-event {
    background: rgba(217, 184, 112, 0.15);
    border-left: 2px solid var(--crystal-gold);
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: var(--parchment);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.2s ease;
}
.day-event:hover {
    background: rgba(217, 184, 112, 0.3);
}
.day-event.ended {
    background: rgba(217, 184, 112, 0.05);
    border-left-color: var(--aether-dim);
    opacity: 0.55;
}
.day-event.ended:hover {
    background: rgba(217, 184, 112, 0.15);
}

/* Hover-zoom for days with more than one event -- the cell itself
   doesn't grow (that would reflow the whole grid row), instead the
   event list breaks out via position:absolute and expands past the
   cell's own bounds, overlapping whatever's below/beside it with a
   higher z-index. Reverts the instant the mouse leaves. Mobile has
   no hover, but tapping a day already opens the full day list via
   the page's onDayClick callback -- same "see everything for this
   day" outcome through the existing tap interaction, nothing extra
   needed there. */
.calendar-day.has-multi {
    position: relative;
}
.calendar-day.has-multi .day-events-scroll {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
    transform-origin: top center;
}
.calendar-day.has-multi:hover {
    z-index: 30;
    overflow: visible;
}
.calendar-day.has-multi:hover .day-events-scroll {
    position: absolute;
    top: 1.5rem;
    left: -6px;
    right: -6px;
    height: auto;
    max-height: min(320px, 60vh);
    overflow-y: auto;
    background: var(--void-deep);
    border: 1px solid var(--crystal-gold);
    border-radius: 6px;
    padding: 0.4rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    transform: scale(1.06);
    scrollbar-width: thin;
    scrollbar-color: var(--crystal-gold) transparent;
}
/* Bottom-row cells (or any cell where the overlay wouldn't fit below it
   in the current viewport) flip to open upward instead -- set via JS
   (initCalendarExplodeFlip in calendar-grid.js), since only real
   viewport geometry at hover time can know there isn't room below. */
.calendar-day.has-multi.explode-up .day-events-scroll {
    transform-origin: bottom center;
}
.calendar-day.has-multi.explode-up:hover .day-events-scroll {
    top: auto;
    bottom: 1.5rem;
}
.calendar-day.has-multi:hover .day-event {
    white-space: normal;
}
@media (prefers-reduced-motion: reduce) {
    .calendar-day.has-multi .day-events-scroll {
        transition: none;
    }
}

/* Touch devices have no hover, so the has-multi explode-on-hover above
   never fires -- every event past the first was completely invisible
   and unreachable there, not just less convenient to see. This surfaces
   a count instead (pointer-events:none so the tap still reaches the
   cell underneath, same "open this day" behavior as tapping anywhere
   else on it). Desktop already reveals everything via hover, so this
   only needs to show up at the same <900px width the page already uses
   to decide "this is a small screen" (see calendar.html's default-to-
   List-view check). */
.day-more-indicator {
    display: none;
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.6rem;
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    color: var(--crystal-gold);
    padding: 0.05rem 0.35rem;
    border-radius: 8px;
    border: 1px solid var(--aether-dim);
    pointer-events: none;
}
@media (max-width: 899px) {
    .calendar-day.has-multi .day-more-indicator {
        display: block;
    }
}

/* Phones: the default 0.75rem/0.5rem cell padding eats a big share of an
   already-tight 7-column budget at ~375px wide -- tightened here so each
   day number and its events stay legible instead of getting crushed. */
@media (max-width: 480px) {
    .weekday {
        padding: 0.35rem 0.15rem;
        font-size: 0.72rem;
    }
    .calendar-day {
        padding: 0.3rem;
    }
}

/* Grid view on a small screen is a deliberate manual switch (mobile
   defaults to List) -- the fixed 100px-tall cells never got revisited
   for that case, making a 6-row month unnecessarily long to scroll
   through. Same <900px cutoff as the has-multi indicator above. */
@media (max-width: 899px) {
    .calendar-day {
        min-height: 70px;
        max-height: 70px;
    }
    .day-events-scroll {
        height: calc(100% - 1.15rem);
    }
    .day-number {
        font-size: 0.78rem;
        margin-bottom: 0.2rem;
    }
    /* Verified live: with the event pill still showing, a tap anywhere
       near it hit that pill's own click handler (straight to just that
       one event) instead of the cell's -- and visually, its text
       collided with the "N events" badge in a cell this narrow. Hiding
       it removes both problems: nothing left to intercept the tap, so
       every tap on a busy day reliably opens the full list above. */
    .calendar-day.has-multi .day-event {
        display: none;
    }
}

/* Grid view, full-screen desktop browsers: fit the whole month
   (including 6-row months) inside the viewport without a page
   scrollbar, instead of a fixed 100px-per-row grid that clips the
   bottom row on common resolutions. Scoped to body.grid-active (set
   by switchView()) and min-width:900px -- List view and mobile/tablet
   keep the original scrolling page behavior untouched. */
@media (min-width: 900px) {
    body.grid-active {
        height: 100vh;
        overflow: hidden;
    }
    body.grid-active main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    body.grid-active .controls {
        margin-bottom: 1rem;
    }
    body.grid-active .calendar-grid-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    body.grid-active .calendar-days {
        flex: 1;
        grid-auto-rows: minmax(42px, 1fr);
        min-height: 0;
    }
    body.grid-active .calendar-day {
        min-height: 42px;
        max-height: none;
    }
}