/* Global Modal Scrolling Fixes */
/* Ensures all modals can scroll properly to access buttons */

/* Modal dialog should be constrained to viewport */
.modal.bit-modal .modal-dialog {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    margin: 1.75rem auto; /* Standard Bootstrap margin */
}

/* Modal content flex container */
.modal.bit-modal .modal-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(90vh - 3.5rem); /* Account for dialog margins */
}

/* Modal header should not scroll */
.modal.bit-modal .modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--bs-modal-header-border-color);
}

/* Modal body should scroll when content is too tall */
.modal.bit-modal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* Important for Firefox */
}

/* Modal footer should not scroll */
.modal.bit-modal .modal-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--bs-modal-footer-border-color);
}

/* Ensure the modal backdrop doesn't interfere */
.modal.bit-modal {
    overflow: hidden !important;
}

/* Handle different modal sizes */
.modal.bit-modal .modal-dialog.modal-sm {
    max-width: 300px;
}

.modal.bit-modal .modal-dialog.modal-lg {
    max-width: 800px;
}

.modal.bit-modal .modal-dialog.modal-xl {
    max-width: 1140px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .modal.bit-modal .modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .modal.bit-modal .modal-content {
        max-height: calc(100vh - 1rem);
    }
}

/* Ensure sticky elements work within scrollable modal body */
.modal.bit-modal .modal-body .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.modal.bit-modal .modal-body .sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: white;
}

/* Fix for nested scrollable areas within modal body */
.modal.bit-modal .modal-body .overflow-auto {
    max-height: 400px;
}

/* Ensure forms in modals can scroll properly */
.modal.bit-modal .modal-body form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Handle tall content gracefully */
.modal.bit-modal .modal-body > *:last-child {
    margin-bottom: 0;
}

/* Ensure dropdowns appear above modal footer */
.modal.bit-modal .modal-body .tom-select .ts-dropdown,
.modal.bit-modal .modal-body .ts-wrapper .ts-dropdown,
.modal.bit-modal .modal-body .autocomplete-dropdown,
.modal.bit-modal .ts-dropdown,
.ts-wrapper .ts-dropdown,
.modal .ts-dropdown {
    z-index: 1060 !important; /* Above modal footer */
}

/* Allow dropdowns to escape modal containers for appointment modals */
/* The :has() selector targets elements when they contain #appointment-modal */
.modal.bit-modal .modal-content:has(#appointment-modal),
.modal.bit-modal .modal-body:has(#appointment-modal) {
    overflow: visible !important;
}

/* Fallback: also target by data-controller attribute */
.modal.bit-modal .modal-content:has([data-controller*="appointment"]),
.modal.bit-modal .modal-body:has([data-controller*="appointment"]) {
    overflow: visible !important;
}

/* Make modal footer stay below dropdowns */
.modal.bit-modal .modal-footer {
    position: relative;
    z-index: 1;
    background: var(--bs-modal-bg, #fff);
}