/* ============================================
   MODAL.CSS — Detail modal component
   ============================================ */

.modal-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:24px; }
.modal-overlay.show { display:flex; }

.modal-content { background:var(--white); border-radius:var(--radius-xl); width:100%; max-width:600px; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.15); animation:modalIn 0.25s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(16px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }

.modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 16px; border-bottom:1px solid var(--gray-200); flex-shrink:0; }
.modal-title { font-size:1.125rem; font-weight:700; color:var(--gray-900); }
.modal-close { width:32px; height:32px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; transition:var(--transition); cursor:pointer; }
.modal-close:hover { background:var(--gray-200); }
.modal-close svg { width:16px; height:16px; color:var(--gray-500); }

.modal-body { padding:20px 24px; overflow-y:auto; flex:1; }
.modal-body .info-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--gray-100); font-size:0.8125rem; }
.modal-body .info-row:last-child { border-bottom:none; }
.modal-body .info-label { color:var(--gray-500); font-weight:500; }
.modal-body .info-value { color:var(--gray-900); font-weight:600; }

.modal-section { margin-top:20px; }
.modal-section-title { font-size:0.8125rem; font-weight:700; color:var(--gray-900); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--gray-200); }

.modal-footer { padding:16px 24px; border-top:1px solid var(--gray-200); display:flex; gap:8px; justify-content:flex-end; flex-shrink:0; }

@media(max-width:768px) {
    .modal-content { max-width:100%; margin:12px; max-height:90vh; }
}