/* Modal for Docu card details using the same visual style */
.docu-modal-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.55); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.docu-modal-overlay.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }

.docu-modal { width: min(960px, 200vw); max-height: 88vh; background: #fff; border: 1px solid #d6d6d6; border-radius: 14px; box-shadow: 12px 12px 0 #4e84ff, 22px 22px 0 #4444bd; overflow: hidden; transform: translateY(8px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .25s ease; display: grid; grid-template-rows: auto 1fr; }
.docu-modal-overlay.open .docu-modal { transform: translateY(0) scale(1); opacity: 1; }

.docu-modal-header { display:flex; justify-content: space-between; align-items:center; padding: 12px; border-bottom: 1px solid #e2e2e2; }
.docu-modal-title { font-weight: 700; color:#111; }
.docu-modal-close { width: 36px; height: 36px; border-radius: 8px; border:1px solid #d6d6d6; background:#f6f6f6; cursor: pointer; }

.docu-modal-body { display:grid; grid-template-columns: 44% 56%; gap: 0; min-height: 420px; overflow: auto; }
.docu-modal-media { min-height: 420px; background-size: cover; background-position: center; }
.docu-modal-info { padding: 12px; display:grid; grid-template-rows: auto auto 1fr auto; gap:8px; }
.docu-modal-desc { color:#222; line-height:1.45; font-size:.98rem; }
.docu-modal-actions { margin-top: 6px; display:flex; gap:10px; }
.docu-modal-view, .docu-modal-download {
  appearance:none; padding:10px 14px; border-radius:10px; border:1px solid #d6d6d6; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.docu-modal-view { background:#eef9f5; color:#0a5a3a; box-shadow: 0 6px 0 -2px rgba(10,90,58,.25), 0 10px 12px -6px rgba(10,90,58,.25); }
.docu-modal-download { background:#f5f7ff; color:#143a8c; box-shadow: 0 6px 0 -2px rgba(20,58,140,.25), 0 10px 12px -6px rgba(20,58,140,.25); }
.docu-modal-view:hover { transform: translateY(-2px); }
.docu-modal-download:hover { transform: translateY(-2px); }

.docu-modal-download.is-disabled,
.docu-modal-view:disabled {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.2);
}

@media (max-width: 720px){
  .docu-modal { width: min(96vw, 720px); max-height: 90vh; }
  .docu-modal-body { grid-template-columns: 1fr; min-height: 280px; }
  .docu-modal-media { min-height: 240px; }
}