/* ------------------------------------------------------------------
   Calendar modal UX
   ------------------------------------------------------------------
   Tutors could not see the day behind a session popup, so they had no
   way to check a neighbouring slot while picking a time.

   Desktop  : the dialog can be dragged by its header, and is nudged off
              centre so the calendar grid stays partly visible.
   Mobile   : the dialog becomes a bottom sheet — it covers the lower
              part of the screen and leaves the calendar visible above,
              with a grab handle for swipe-to-dismiss.

   Scoped to .cal-ux-modal, which calendar-modal-ux.js adds only to the
   calendar's own modals. Other modals in the app are untouched.
   ------------------------------------------------------------------ */

/* Mode flag. calendar-modal-ux.js reads this instead of re-evaluating the
   breakpoint with matchMedia, so the script and the stylesheet can never
   disagree about which layout is actually on screen. */
.cal-ux-modal {
    --cal-ux-mode: desktop;
}

@media (max-width: 767.98px) {
    .cal-ux-modal {
        --cal-ux-mode: sheet;
    }
}

/* ============================ DESKTOP ============================= */
@media (min-width: 768px) {

    /* Sit slightly above centre: leaves more of the grid readable and
       gives the dialog room to be dragged in either direction. */
    .cal-ux-modal .modal-dialog {
        margin-top: 2.5rem;
        transition: none; /* Bootstrap's slide transform fights dragging */
    }

    /* The header doubles as the drag handle. */
    .cal-ux-modal .modal-header {
        cursor: grab;
        user-select: none;
        touch-action: none;
    }

    .cal-ux-modal .modal-header:active,
    .cal-ux-modal.cal-ux-dragging .modal-header {
        cursor: grabbing;
    }

    /* Buttons inside the header must stay clickable, not draggable. */
    .cal-ux-modal .modal-header .btn-close,
    .cal-ux-modal .modal-header button,
    .cal-ux-modal .modal-header a {
        cursor: pointer;
    }

    /* Hint that the header is grabbable, without adding chrome. */
    .cal-ux-modal .modal-title::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 16px;
        margin-right: 10px;
        vertical-align: -3px;
        opacity: .45;
        background-image: radial-gradient(currentColor 1px, transparent 1px);
        background-size: 5px 5px;
        background-position: 0 2px;
    }

    /* While dragging, drop the dim so the calendar underneath is legible. */
    .cal-ux-modal.cal-ux-dragging ~ .modal-backdrop,
    .modal-backdrop.cal-ux-backdrop-faded {
        opacity: .06 !important;
    }

    .cal-ux-modal.cal-ux-moved .modal-dialog {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* Dragged dialogs are positioned by JS via transform. width is needed:
       Bootstrap sizes .modal-dialog with max-width only, so position:fixed
       would otherwise shrink-to-fit the dialog around its content. */
    .cal-ux-modal.cal-ux-moved .modal-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        will-change: transform;
    }
}

/* ============================= MOBILE ============================= */
@media (max-width: 767.98px) {

    /* custom.css force-fullscreens `.themeModal .modal-dialog.modal-lg` on mobile
       (min-height/height 100vh !important). Out-rank it so the sheet stays 78vh
       with the calendar visible above. */
    .themeModal.cal-ux-modal .modal-dialog.modal-lg {
        height: 78vh !important;
        min-height: 0 !important;
        max-height: 78vh !important;
        margin: 0 !important;
        top: auto !important;
    }
    /* Re-assert the sheet's own enter/exit transform over Bootstrap's fade slide
       with child combinators (cal-ux modals can nest in this blade). */
    .themeModal.cal-ux-modal.fade:not(.cal-ux-swiping) > .modal-dialog.modal-lg {
        transform: translateY(100%) !important;
    }
    .themeModal.cal-ux-modal.show:not(.cal-ux-swiping) > .modal-dialog.modal-lg {
        transform: translateY(0) !important;
    }
    .themeModal.cal-ux-modal .modal-dialog.modal-lg .modal-content {
        min-height: 0 !important;
        height: 100% !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .cal-ux-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        /* Leave the top of the screen showing the calendar. */
        height: 78vh;
        transform: translateY(100%);
        transition: transform .28s ease-out;
    }

    .cal-ux-modal.show .modal-dialog {
        transform: translateY(0);
    }

    /* Suppress Bootstrap's own fade-down transform on small screens. */
    .cal-ux-modal.fade .modal-dialog {
        transition: transform .28s ease-out;
    }

    .cal-ux-modal .modal-content {
        height: 100%;
        border-radius: 18px 18px 0 0;
        border: 0;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, .22);
        overflow: hidden;
    }

    /* Grab handle — the swipe target. */
    .cal-ux-modal .modal-header {
        position: relative;
        padding-top: 1.5rem;
        touch-action: none;
        user-select: none;
        flex: 0 0 auto;
    }

    .cal-ux-modal .modal-header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 42px;
        height: 4px;
        margin-left: -21px;
        border-radius: 2px;
        /* Light, not dark: themeModal headers are #374151 in this app. */
        background: rgba(255, 255, 255, .55);
    }

    /* The sheet body scrolls; the sheet itself does not. */
    .cal-ux-modal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep the backdrop light so the calendar reads through it. The class is
       added by calendar-modal-ux.js when a sheet opens — a `.cal-ux-modal ~`
       sibling selector can't match here because these modals sit inside the
       page layout while Bootstrap appends backdrops to <body>. */
    .modal-backdrop.cal-ux-backdrop-sheet {
        opacity: .28 !important;
    }

    /* Follow the finger during a swipe without the ease-out lag. */
    .cal-ux-modal.cal-ux-swiping .modal-dialog {
        transition: none;
    }

    /* Actions stay reachable above the sheet's bottom edge. */
    .cal-ux-modal .cal-modal-actions {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}