/* ── Documenso Mobile Signing Fix ── */
/* Applied via nginx sub_filter injection  */

@media (max-width: 896px) {

  /* ── 1. Base layout ── */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    min-height: 100vh !important;
  }

  /* ── 2. PDF page container ──
     Documenso wraps each PDF page in a div with relative positioning.
     Force it to scale to viewport width.                              */
  [class*="page-"],
  [data-page-number],
  canvas {
    max-width: 100vw !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ── 3. Signature/Date field overlays ──
     These are absolutely positioned over the PDF canvas.
     On mobile the canvas shrinks but the fields stay at
     desktop pixel coords — so they appear detached.
     Switching to relative makes them flow below the document. */
  [data-field-type],
  [data-inserted="true"],
  [class*="field"][class*="signature"],
  [class*="field"][class*="date"],
  [class*="SignaturePad"],
  [class*="signature-pad"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 90vw !important;
    min-height: 64px !important;
    margin: 12px auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
  }

  /* ── 4. "Firmar Documento" bottom bar ──
     Keep it fixed at the bottom so user can always tap it.  */
  [class*="DocumentActionButton"],
  [class*="signing-auth"],
  [class*="SigningForm"] > div:last-child,
  nav[class*="bottom"],
  .sticky {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: white !important;
    padding: 12px 16px !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15) !important;
  }

  /* ── 5. Add bottom padding so content isn't hidden under fixed bar ── */
  main, [role="main"] {
    padding-bottom: 80px !important;
  }

  /* ── 6. Signature drawing canvas inside the modal ── */
  canvas[class*="signature"],
  canvas[style*="cursor: crosshair"],
  canvas[style*="cursor:crosshair"] {
    width: 100% !important;
    height: 200px !important;
    touch-action: none !important;
  }
}