/* Modal Container System for Bootstrap 5 */

/* Modal Container - central location for all modals */
#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none; /* Allow clicks to pass through when no modals */
}

/* When modals are in container, they should receive pointer events */
#modal-container .modal {
    pointer-events: auto;
}

#modal-container .modal-backdrop {
    pointer-events: auto;
}

/* Mobile fullscreen for all modals */
@media (max-width: 767.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-dialog:not(.modal-fullscreen) .modal-content {
        height: 100%;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-dialog:not(.modal-fullscreen) .modal-body {
        flex: 1;
        overflow-y: auto;
    }
}