/**
 * Modal Fixes CSS
 * แก้ไขปัญหา Modal แสดงผลไม่ถูกต้อง - Version 3
 */

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

/* Modal backdrop - Fixed positioning covering entire screen */
#assignModal:not(.hidden),
#statusModal:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background-color: rgba(75, 85, 99, 0.5) !important; /* bg-gray-600 bg-opacity-50 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
}

/* Hide when needed */
#assignModal.hidden,
#statusModal.hidden {
    display: none !important;
}

/* Inner container - no longer needs flex, parent handles it */
#assignModal > div,
#statusModal > div {
    display: block !important;
    width: 100% !important;
    max-width: 28rem !important;
}

/* Modal content box - this is where scrolling happens */
#assignModal > div > div,
#statusModal > div > div {
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
}

/* Responsive modal width */
@media (max-width: 640px) {
    #assignModal,
    #statusModal {
        padding: 1rem 0.5rem !important;
    }
    
    #assignModal > div,
    #statusModal > div {
        max-width: 95% !important;
    }
}