/* V8.63 - Mobile document modal stays readable and images support gesture zoom. */
@media (max-width: 820px) {
  #documentModalBackdrop {
    background: rgba(15, 23, 42, .32);
    backdrop-filter: blur(2px);
  }

  #documentModalBackdrop .document-modal,
  #documentModalBackdrop .document-list {
    background: #f4f7fb !important;
    color: #15233b !important;
  }

  #documentModalBackdrop .document-modal > header,
  #documentModalBackdrop .document-checklist,
  #documentModalBackdrop .document-upload-form {
    background: #fff !important;
    color: #15233b !important;
  }

  #documentModalBackdrop .document-list article.document-card {
    border-color: #d8e0eb !important;
    background: #fff !important;
    color: #15233b !important;
    box-shadow: 0 4px 14px rgba(35, 55, 85, .07);
  }

  #documentModalBackdrop .document-card-heading strong,
  #documentModalBackdrop .document-list .document-file-name {
    color: #15233b !important;
  }

  #documentModalBackdrop .document-card-meta small,
  #documentModalBackdrop .document-list article small {
    color: #65748a !important;
  }
}

.document-mobile-viewer {
  background: #eef2f7 !important;
  color: #15233b !important;
}

.document-mobile-viewer header {
  background: #fff !important;
  color: #15233b !important;
  border-bottom: 1px solid #d8e0eb;
}

.document-mobile-viewer header small { color: #65748a !important; }
.document-mobile-viewer header a,
.document-mobile-viewer header button {
  border-color: #d8e0eb !important;
  background: #f7f9fc !important;
  color: #1d4ed8 !important;
}

.document-mobile-viewer main {
  position: relative;
  overflow: hidden !important;
  padding: 12px !important;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.document-mobile-viewer main::after {
  content: "Chụm 2 ngón để phóng to · Kéo 1 ngón để di chuyển";
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .78);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  pointer-events: none;
}

.document-mobile-viewer img,
.document-mobile-viewer img.zoomed {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
  transition: transform .16s ease-out;
  -webkit-user-drag: none;
}

.document-mobile-viewer.is-gesturing img { transition: none; }
.document-mobile-viewer img.is-zoomed { cursor: grab; }