/* Overlay sekarang menggunakan Flexbox untuk menengahkan konten */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    
    /* Kunci untuk membuat posisi Center */
    display: none; /* Akan diubah jadi 'flex' lewat JS */
    align-items: center; 
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Konten Modal yang Adaptif */
.modal-content {
    background: white;
    width: 100%;
    max-width: 900px; /* Lebar maksimal desktop */
    border-radius: 12px;
    height: 90%;
    /* HAPUS left: 50% di sini */
    position: relative; /* Gunakan relative, jangan absolute agar flexbox bekerja */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
    
    /* Tambahan agar isi modal flexbox juga untuk scroll */
    display: flex;
    flex-direction: column;
}

/* Header tetap mempertahankan gaya yang Anda inginkan */
.modal-header {
    background: #00008B;
    color: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 15px;
    max-height: 70vh;
    overflow-y: auto;
    flex-grow: 1;
    overflow-y: auto;
}

/* Tombol tetap rapi di kanan */
.modal-actions {
    display: flex;
    gap: 10px; /* Di desktop kita buat berjajar ke samping agar lebih estetik */
}

.opendata-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.opendata-table td {
    padding: 5px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
}

.opendata-table td:first-child { font-weight: bold; width: 40%; }

.btn-print { background: #27ae60; color: white; border: none; padding: 5px 15px; border-radius: 4px; cursor: pointer; margin-right: 10px; }
.btn-close { background: #ed0c1b; color: white; border: none; padding: 5px 15px; border-radius: 4px; cursor: pointer; margin-right: 10px; }

/* CSS Khusus Print */
@media print {
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea { position: absolute; left: 0; top: 0; width: 100%; }
}
@media (max-width: 600px) {
    .modal-actions {
        flex-direction: column; /* Di HP tetap bertumpuk seperti gambar sebelumnya */
        gap: 5px;
    }
}

/* Animasi sederhana agar modal tidak kaku */
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}