/* Modal Fix CSS for Public Help Desk */

/* Ensure modals are properly layered */
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

/* Fix modal not showing properly */
.modal.fade:not(.show) {
    display: none !important;
}

.modal.show {
    display: block !important;
}

/* Ensure modal content is clickable */
.modal-dialog {
    position: relative;
    z-index: 1051;
}

/* Fix backdrop click issues - reduced opacity for better visibility */
.modal-backdrop.show {
    opacity: 0.2; /* Reduced from 0.5 to make it less dark/visible */
}

/* Optional class for completely transparent backdrop */
.modal-backdrop.transparent {
    opacity: 0 !important;
}

/* Prevent modal from being hidden behind other elements */
.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Fix scrolling issues */
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Ensure buttons are clickable */
.modal-footer .btn,
.modal-header .btn-close {
    position: relative;
    z-index: 1052;
}

/* Fix modal animation issues */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

/* Emergency fallback styles */
.modal.force-show {
    display: block !important;
    background: rgba(0, 0, 0, 0.5);
}

.modal.force-show .modal-dialog {
    transform: none !important;
    opacity: 1 !important;
}

/* Debug styles */
.modal-debug {
    border: 2px solid red !important;
}

.modal-debug .modal-dialog {
    border: 2px solid blue !important;
}

.modal-debug .modal-content {
    border: 2px solid green !important;
}

/* Fix for nested modal issues */
.modal .modal {
    position: static;
}

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

/* Fix for forms inside modals */
.modal form {
    margin: 0;
}

.modal .form-control,
.modal .form-select,
.modal .btn {
    position: relative;
    z-index: auto;
}

/* Loading state for modals */
.modal.loading .modal-body {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.loading .modal-body::before {
    content: "Loading...";
    font-size: 16px;
    color: #6c757d;
}