/**
 * AIDocBot - Modals Component
 * Design System Version 1.0
 * 
 * Works with Bootstrap 5.x modal system
 * DO NOT override Bootstrap's core modal positioning
 */

/* ========================================
   MODAL BACKDROP ENHANCEMENT
   ======================================== */

.modal-backdrop {
    backdrop-filter: blur(4px);
}

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

/* ========================================
   MODAL DIALOG ENHANCEMENTS
   ======================================== */

.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* ========================================
   MODAL HEADER
   ======================================== */

.modal-header {
    padding: var(--space-6);
    border-bottom: var(--border-width) solid var(--neutral-200);
    background: white;
}

.modal-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--neutral-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .modal-title i {
        font-size: var(--text-2xl);
    }

/* ========================================
   MODAL BODY
   ======================================== */

.modal-body {
    padding: var(--space-6);
    color: var(--neutral-700);
}

    .modal-body p:last-child {
        margin-bottom: 0;
    }

    /* Custom scrollbar for modal body */
    .modal-body::-webkit-scrollbar {
        width: 8px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: var(--neutral-100);
        border-radius: var(--radius-base);
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: var(--neutral-300);
        border-radius: var(--radius-base);
    }

        .modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--neutral-400);
        }

/* ========================================
   MODAL FOOTER
   ======================================== */

.modal-footer {
    padding: var(--space-6);
    border-top: var(--border-width) solid var(--neutral-200);
    background: var(--neutral-50);
    gap: var(--space-3);
}

/* ========================================
   CLOSE BUTTON ENHANCEMENT
   ======================================== */

.btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    opacity: 0.5;
    transition: all var(--transition-fast);
}

    .btn-close:hover {
        opacity: 1;
        background: var(--neutral-100);
        border-radius: var(--radius-base);
    }

    .btn-close:focus {
        opacity: 1;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        outline: none;
    }

/* ========================================
   MODAL CONTENT VARIANTS
   ======================================== */

/* Confirmation Modal */
.modal-confirm .modal-header {
    background: var(--warning-light);
    border-bottom-color: var(--warning);
}

.modal-confirm .modal-title {
    color: var(--warning-dark);
}

/* Success Modal */
.modal-success .modal-header {
    background: var(--success-light);
    border-bottom-color: var(--success);
}

.modal-success .modal-title {
    color: var(--success-dark);
}

/* Error Modal */
.modal-error .modal-header {
    background: var(--error-light);
    border-bottom-color: var(--error);
}

.modal-error .modal-title {
    color: var(--error-dark);
}

/* ========================================
   MODAL ANIMATIONS (Bootstrap Compatible)
   ======================================== */

/* Enhance Bootstrap's fade animation */
.modal.fade .modal-dialog {
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .modal-dialog {
        margin: var(--space-4);
        max-width: calc(100% - var(--space-8));
    }

    .modal-dialog-lg,
    .modal-dialog-xl {
        max-width: calc(100% - var(--space-8));
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-4);
    }

    .modal-title {
        font-size: var(--text-lg);
    }

    .modal-footer {
        flex-direction: column;
    }

        .modal-footer > * {
            width: 100%;
        }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.modal:focus {
    outline: none;
}

.modal-dialog:focus {
    outline: none;
}

/* Ensure focus is visible on interactive elements */
.modal-content button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}