.modal-overlay {
    position: fixed;
    z-index : 999999;
    inset: 0;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    padding: 16px;
}
.modal-overlay.open {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: min(720px, calc(100vw - 32px));
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.modal h2 {
    margin: 0 0 10px;
}

.modal p {
    margin: 10px 0 20px;
}

.modal-buttons {
    display: flex;
    justify-content: space-between;
}

.modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-confirm {
    background-color: #28a745;
    color: #fff;
}

.btn-cancel {
    background-color: #dc3545;
    color: #fff;
}

.btn-confirm:hover {
    background-color: #218838;
}

.btn-cancel:hover {
    background-color: #c82333;
}

@media (max-width: 990px) {
    .modal-overlay { padding: 16px; justify-content: center; }
    .modal {
        font-size: 1rem;
        width: calc(100vw - 32px);
        padding: 16px;
    }
}

/* Detail modal variants */
.modal.modal-detail {
    width: min(720px, calc(100vw - 32px));
}

.modal-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }

.modal-close { background: transparent; border: none; font-size: 22px; cursor: pointer; }
.modal-close:focus { outline: 2px solid #93c5fd; border-radius: 6px; }

.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 9999px;
    background: #EEF2FF;
    color: #3730A3;
    border: 1px solid #C7D2FE;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 10px 0;
    }
}

.detail-section h3 {
    margin: 10px 0 6px 0;
    font-size: 16px;
}

.detail-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

/* ===== Modal reset & overrides for consistent centering and spacing ===== */
#modalOverlay, #detailOverlay {
    /* Overlay-specific spacing; visibility handled by .modal-overlay/.open */
    padding: 24px;
}

#modalOverlay .modal, #detailOverlay .modal {
    width: 100%;
    max-width: 680px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 20px;
    box-sizing: border-box;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    margin: 0 auto;
    overscroll-behavior: contain;
}

#modalOverlay .modal-header h2 {
    font-size: 18px;
    color: #111827;
}

#modalOverlay .modal p { color: #374151; }

@media (max-width: 990px) {
    #modalOverlay, #detailOverlay { padding: 16px; }
    #modalOverlay .modal, #detailOverlay .modal {
        max-width: 680px;
        width: calc(100vw - 32px);
        border-radius: 12px;
        padding: 16px;
    }
    #modalOverlay .modal-header h2, #detailOverlay .modal-header h2 { font-size: 16px; }
}