/* AGGRESSIVE Modal Fix Styles - Nuclear approach to prevent freezing */

/* NUCLEAR: Disable ALL form validation in modals */
.modal input,
.modal textarea,
.modal select {
    /* Remove all validation styling */
    box-shadow: none !important;
    border-color: #ced4da !important;
    background-image: none !important;
}

/* NUCLEAR: Hide all validation states and messages in modals */
.modal input:invalid,
.modal textarea:invalid,
.modal select:invalid,
.modal input:valid,
.modal textarea:valid,
.modal select:valid,
.modal input:required,
.modal textarea:required,
.modal select:required {
    box-shadow: none !important;
    border-color: #ced4da !important;
    background-image: none !important;
}

/* NUCLEAR: Hide all validation feedback in modals */
.modal .invalid-feedback,
.modal .invalid-tooltip,
.modal .valid-feedback,
.modal .valid-tooltip {
    display: none !important;
}

/* NUCLEAR: Disable HTML5 validation bubbles completely */
.modal input::-webkit-validation-bubble,
.modal textarea::-webkit-validation-bubble,
.modal select::-webkit-validation-bubble,
input::-webkit-validation-bubble,
textarea::-webkit-validation-bubble,
select::-webkit-validation-bubble {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* NUCLEAR: Remove validation styling from was-validated forms in modals */
.modal .was-validated input,
.modal .was-validated textarea,
.modal .was-validated select,
.modal .was-validated input:valid,
.modal .was-validated textarea:valid,
.modal .was-validated select:valid,
.modal .was-validated input:invalid,
.modal .was-validated textarea:invalid,
.modal .was-validated select:invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 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;
}

/* Disable focus trapping issues */
.modal:focus,
.modal-dialog:focus,
.modal-content:focus {
    outline: none !important;
}

/* Hide validation for hidden inputs globally */
input[type="hidden"]:invalid,
input[style*="display: none"]:invalid,
input[style*="display:none"]:invalid,
input[disabled]:invalid,
textarea[disabled]:invalid,
select[disabled]:invalid {
    box-shadow: none !important;
    border-color: inherit !important;
}

/* Modal layout fixes */
.modal-dialog {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

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

/* Backdrop fixes */
.modal-backdrop {
    pointer-events: auto !important;
}

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

/* Body scroll prevention */
body.modal-open {
    overflow: hidden !important;
}

/* Bootstrap animation fixes */
.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;
}

/* Form control focus styling (non-validation) */
.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;
}

/* Emergency 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;
    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;
}

/* Pulse animation for 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;
}

/* 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;
}

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

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

/* NUCLEAR: Override any remaining validation styles globally */
*::-webkit-validation-bubble {
    display: none !important;
}

/* Force remove any validation tooltips */
.tooltip.bs-tooltip-auto[role="tooltip"] {
    display: none !important;
}

/* Hide any validation-related popovers */
.popover.bs-popover-auto[role="tooltip"] {
    display: none !important;
}