/* =========================
   MODAL BASE STYLES - Higher specificity to override Bootstrap defaults
   ========================= */

/* Ensure modals always appear above everything else */
.modal {
    z-index: 1080 !important; /* Above navbar (1070) and navbar dropdowns (1075) */
}

.modal-backdrop {
    z-index: 1079 !important; /* Just below modal but above navbar */
}

.modal .card {
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2), 0 8px 20px -8px rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    margin-bottom: 1rem !important;
    transition: all 0.3s ease !important;
}

.modal .card-body {
    padding: 1.5rem !important;
}

.modal .card-header {
    border-radius: 1rem 1rem 0 0 !important;
    padding: 1.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.modal .modal-content {
    height: 300% !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 1rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.modal .modal-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    padding: 1.5rem !important;
}

.modal .modal-title {
    color: #086973 !important;
    font-weight: 700 !important;
}

.modal .modal-body {
    padding: 1.5rem !important;
}

.modal .modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    padding: 1.5rem !important;
    background: #fafbfc !important;
    border-radius: 0 0 1rem 1rem !important;
}

    .modal .modal-footer .btn {
        opacity: 1 !important;
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
        border: 1px solid transparent !important;
        background-clip: padding-box !important;
        border-radius: 0.5rem !important;
    }

/* =========================
   MODAL RESPONSIVE STYLES - Specific selectors to override Bootstrap
   ========================= */

/* Large tablets and below */
@media (max-width: 991.98px) {
    .modal .modal-xl,
    .modal-xl {
        max-width: 95% !important;
        margin: 0.5rem auto !important;
    }
}

/* Small tablets and below */
@media (max-width: 767.98px) {
    .modal .card {
        margin-bottom: 1rem !important;
        border-radius: 0.75rem !important;
    }

    .modal .card-body {
        padding: 1rem !important;
    }

    .modal .card-header {
        padding: 1rem !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
    }

    .modal .modal-xl,
    .modal-xl {
        max-width: 95% !important;
        margin: 0.5rem auto !important;
    }

    .modal .modal-dialog {
        margin: 0.5rem !important;
    }

    .modal .modal-content {
        border-radius: 1rem !important;
        margin: 0 !important;
    }

    .modal .modal-header {
        background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
        border-radius: 1rem 1rem 0 0 !important;
        padding: 1rem 1.5rem !important;
    }

    .modal .modal-body {
        padding: 1.5rem !important;
    }

    .modal .modal-footer {
        background: #fafbfc !important;
        border-radius: 0 0 1rem 1rem !important;
    }
}

@media (max-width: 575.98px) {
    .modal .modal-xl,
    .modal-xl {
        max-width: 98% !important;
        margin: 0.25rem auto !important;
    }

    .modal .modal-dialog {
        margin: 0.25rem !important;
    }

    .modal .modal-content {
        margin: 0 !important;
        border-radius: 0.75rem !important;
    }

    .modal .modal-header {
        padding: 1rem !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
    }

    .modal .modal-body {
        padding: 1rem !important;
    }

    .modal .modal-footer {
        padding: 1rem !important;
        gap: 0.75rem !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
    }

        .modal .modal-footer .btn {
            font-size: 1rem !important;
            padding: 0.75rem 1rem !important;
            width: 100% !important;
            margin: 0 !important;
        }
}

/* Desktop layout (576px and up) - Simplified and more specific */
@media (min-width: 576px) {
    .modal .modal-footer {
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 1.5rem !important;
        background: #fafbfc !important;
        border-top: 1px solid #e2e8f0 !important;
        border-radius: 0 0 1rem 1rem !important;
    }
    
    .modal .modal-footer .btn {
        width: auto !important;
    }
}

/* =========================
   MODAL Z-INDEX PRIORITY ENFORCEMENT
   ========================= */

/* Force modals to always be on top, even if other elements try to compete */
#confirmModal.modal.show {
    z-index: 1090 !important;
}

#confirmModal.modal.show .modal-dialog {
    z-index: 1091 !important;
}

#confirmModal.modal.show .modal-content {
    z-index: 1092 !important;
}

.modal.show {
    z-index: 1080 !important;
}

.modal.show .modal-dialog {
    z-index: 1081 !important;
}

.modal.show .modal-content {
    z-index: 1082 !important;
}

/* Ensure modal backdrop is properly layered */
.modal-backdrop.show {
    z-index: 1079 !important;
}

/* Override any potential conflicts with high z-index elements */
.modal-open .modal {
    z-index: 1080 !important;
}