/*
 * schedule_event_modal.css — viewport-fit treatment for the Schedule modal,
 * plus the week-view weekday layout (5 columns visible, weekend scrolls in).
 *
 * The modal embeds a FullCalendar that grows tall in day view, so its content
 * can run below the fold. Both breakpoints keep the footer (Cancel / Schedule)
 * persistently in view and scroll only the body.
 *
 * Mobile (<768px): full-bleed sheet — dialog fills the screen, footer sticks.
 * Desktop (>=768px): cap the content at the viewport height (minus the dialog's
 *   default 1.75rem top+bottom margin) so a tall calendar scrolls inside the
 *   body instead of pushing the page down; a short form still sizes to content
 *   (max-height is a ceiling, not a fixed height).
 *
 * Sourced from base.html, where the modal itself is included. Bootstrap already
 * makes .modal-content a flex column and .modal-body flex:1 1 auto, so the
 * desktop rules only add the height ceiling and the body scroll container.
 */

/* Fix sticky footer on mobile when calendar switches to day view */
@media (max-width: 767.98px) {
    #scheduleEventModal .modal-dialog {
        height: 100%;
        max-height: 100%;
        margin: 0;
    }
    #scheduleEventModal .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0;
    }
    #scheduleEventModal .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #scheduleEventModal .modal-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #dee2e6;
        z-index: 1050;
    }
    #scheduleEventModal .modal-footer .dropdown-menu {
        z-index: 1060;
    }
    /* Days/Duration controls take their own row so Cancel + Schedule sit on a
       stable bottom row — otherwise they wrap back and forth as the duration
       text changes width ("2h" vs "2h 30m"). */
    #scheduleEventModal .modal-footer > .me-auto {
        flex-basis: 100%;
    }
}

/* Desktop: cap at viewport height, scroll the body, keep the footer in view */
@media (min-width: 768px) {
    #scheduleEventModal .modal-content {
        max-height: calc(100vh - 3.5rem);
    }
    #scheduleEventModal .modal-body {
        overflow-y: auto;
        min-height: 0;
    }
}

/* Toolbar: FullCalendar's defaults are sized for a full page, not a modal.
   The date-range title moves onto its own full-width line above the buttons,
   so the nav cluster (prev/next, Today) and the view cluster (Week/Month)
   share one clean row instead of wrapping around the title. */
#scheduleEventModal .fc-header-toolbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    margin-bottom: 0.75rem !important;
}
#scheduleEventModal .fc-toolbar-chunk:has(.fc-toolbar-title) {
    order: -1;
    flex-basis: 100%;
    text-align: center;
}
#scheduleEventModal .fc-toolbar-title {
    font-size: 1.05rem;
    white-space: nowrap;
}
/* Comfortable thumb-sized tap targets */
#scheduleEventModal .fc-button {
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
}

/* Week view: Mon-Fri fill the width; Sat/Sun overflow past the right edge and
   are reached by horizontal scroll (weekends are end-of-week, not hidden). The
   grid is 7 equal columns, so 140% width puts 5 columns in the viewport. */
#scheduleEventModal .fc-dayGridWeek-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#scheduleEventModal .fc-dayGridWeek-view > .fc-scrollgrid {
    min-width: 140%;
}
/* Single-row view: stretch the day cells to fill the modal body instead of
   leaving a strip of grid over a sea of whitespace. */
#scheduleEventModal .fc-dayGridWeek-view .fc-daygrid-day-frame {
    min-height: clamp(240px, 48vh, 440px);
}

/* Earlier days of the current week render (headers, day numbers) but read as
   spent: dimmed, no hover affordance (the controller skips their handlers). */
#scheduleEventModal .fc-daygrid-day.fc-day-past {
    background-color: #f1f3f5;
    opacity: 0.55;
}

/* The day-view selection block glides between sizes instead of jumping: the
   controller mutates the same event (setDates) so this node survives, and
   FullCalendar positions it via inline `inset`, which is animatable. Each
   dial step interrupts the in-flight transition, reading as continuous
   travel. FC's drag mirror is a separate element, so resizing by hand is
   unaffected. */
#scheduleEventModal .fc-timegrid-event-harness:has(.schedule-selection-event) {
    transition: inset 180ms ease-out;
}

/* Duration dial (footer dropup): CSS scroll-snap wheel picker. The 40px item
   height is load-bearing — schedule_modal_controller.js (DIAL_ITEM_H) computes
   scroll offsets from it, and the ::before/::after spacers are
   (dial height - item height) / 2 so the end options can reach the centre. */
#scheduleEventModal .duration-dial-wrap {
    position: relative;
}
#scheduleEventModal .duration-dial {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#scheduleEventModal .duration-dial::-webkit-scrollbar {
    display: none;
}
#scheduleEventModal .duration-dial::before,
#scheduleEventModal .duration-dial::after {
    content: '';
    display: block;
    height: 80px;
}
#scheduleEventModal .duration-dial__item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    scroll-snap-align: center;
    cursor: pointer;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}
#scheduleEventModal .duration-dial__item.is-active {
    color: #212529;
    font-weight: 600;
}
/* Centre selection band */
#scheduleEventModal .duration-dial-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.5rem;
    right: 0.5rem;
    height: 40px;
    transform: translateY(-50%);
    background: rgba(13, 110, 253, 0.08);
    border-radius: 0.5rem;
    pointer-events: none;
}
/* Fade options into the panel edges, dial-style. Uses the dropdown's own
   background colour so a themed panel doesn't get white bars. */
#scheduleEventModal .duration-dial-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        var(--bs-dropdown-bg, #fff) 0%,
        transparent 30%,
        transparent 70%,
        var(--bs-dropdown-bg, #fff) 100%
    );
    pointer-events: none;
}