/*
 * schedule_event_modal.css — viewport-fit treatment for the Schedule modal.
 *
 * 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;
    }
}

/* 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;
    }
}