/* Modal Fix Styles - Prevent freezing and layout issues */

/* Ensure modals have proper z-index hierarchy */
.modal {
    z-index: var(--z-index-modal, 1050) !important;
}

.modal-backdrop {
    z-index: var(--z-index-modal-backdrop, 1040) !important;
}

/* Prevent form validation from interfering with modal display */
.modal input:invalid,
.modal textarea:invalid,
.modal select:invalid {
    /* Don't show browser validation tooltips in modals */
    box-shadow: none !important;
}

/* Hide validation messages for hidden inputs */
input[type="hidden"]:invalid {
    box-shadow: none !important;
}

input[style*="display: none"]:invalid,
input[style*="display:none"]:invalid {
    box-shadow: none !important;
}

/* Ensure modal content doesn't cause scrolling issues */
.modal-dialog {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

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

/* Prevent backdrop from interfering with interactions */
.modal-backdrop {
    pointer-events: auto !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* Emergency reset button styling */
.emergency-modal-reset {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: var(--z-index-emergency, 9999) !important;
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.emergency-modal-reset:hover {
    background: #c82333 !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
}

/* Fix for potential Bootstrap conflicts */
.modal.fade {
    transition: opacity 0.15s linear !important;
}

.modal.fade .modal-dialog {
    transition: transform 0.15s ease-out !important;
    transform: translate(0, -50px) !important;
}

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

/* Ensure form controls in modals behave properly */
.modal .form-control:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Hide browser validation tooltips that can cause issues */
.modal input::-webkit-validation-bubble,
.modal textarea::-webkit-validation-bubble,
.modal select::-webkit-validation-bubble {
    display: none !important;
}

/* Prevent invalid pseudo-class from causing layout issues */
.modal input:invalid:not(:focus),
.modal textarea:invalid:not(:focus),
.modal select:invalid:not(:focus) {
    border-color: inherit !important;
    box-shadow: none !important;
}

/* Only show validation styling when form is submitted */
.modal .was-validated input:invalid,
.modal .was-validated textarea:invalid,
.modal .was-validated select:invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

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

.backdrop-debug-active {
    background-color: rgba(255, 0, 0, 0.3) !important;
}

/* Error recovery notification */
.error-recovery-active {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: var(--z-index-emergency, 9999) !important;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
    color: white !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    text-align: center !important;
}

/* Enhanced emergency button */
.emergency-modal-reset {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: var(--z-index-emergency, 9999) !important;
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease !important;
}

.emergency-modal-reset:hover {
    background: #c82333 !important;
    transform: scale(1.1) !important;
}

.emergency-modal-reset:active {
    transform: scale(0.95) !important;
}

/* Add pulse animation to emergency button */
@keyframes emergency-pulse {
    0% { box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3); }
    50% { box-shadow: 0 2px 20px rgba(220, 53, 69, 0.7); }
    100% { box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3); }
}

.emergency-modal-reset.pulse {
    animation: emergency-pulse 1.5s infinite !important;
}