@media (max-width: 768px) {

  /* ------------------------------------------------------------
     1. Sidlayout / naturlig scroll
     ------------------------------------------------------------ */

  html {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto;
  }

  body {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* ------------------------------------------------------------
     2. Textfält / sökfält / datumfält
     Förhindrar iOS Safari från att auto-zooma vid fokus.
     ------------------------------------------------------------ */

  input,
  textarea,
  select,
  [contenteditable="true"],
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  .flatpickr-input {
    font-size: 16px !important;
  }

  /* ------------------------------------------------------------
     3. Bakgrundsscroll när modal är öppen
     Klassen sätts av mobile-global.js.
     ------------------------------------------------------------ */

  html.modal-open,
  body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* ------------------------------------------------------------
     4. Dokumentförhandsvisning på mobil
     ------------------------------------------------------------ */

  #preview-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  #preview-modal .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
  }

  #preview-modal .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #preview-modal .modal-body {
    min-height: 0;
    overflow: hidden !important;
  }

  #preview-modal #preview-content,
  #preview-modal .preview-content,
  #preview-modal .pdf-viewer,
  #preview-modal .pdf-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y pinch-zoom;
  }

  #preview-modal canvas,
  #preview-modal img {
    max-width: none;
    touch-action: pan-x pan-y pinch-zoom;
  }

  /* ------------------------------------------------------------
     5. Zoomknappar / toolbar
     Förhindrar dubbel-tap från att trigga sidzoom.
     ------------------------------------------------------------ */

  #preview-modal button,
  #preview-modal .preview-toolbar,
  #preview-modal [data-zoom-in],
  #preview-modal [data-zoom-out],
  #preview-modal .zoom-in,
  #preview-modal .zoom-out {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
}




@media (max-width: 768px) {
  #preview-modal #preview-target {
    touch-action: pan-x pan-y pinch-zoom !important;
    -ms-touch-action: pan-x pan-y pinch-zoom !important;
  }

    #preview-modal #preview-target canvas,
    #preview-modal #preview-target img,
    #preview-modal #preview-target video,
    #preview-modal #preview-target #pdfViewer {
      touch-action: pan-x pan-y pinch-zoom !important;
    }
}
@media (max-width: 768px) {
  #preview-modal,
  #preview-modal .modal,
  #preview-modal .modal-dialog,
  #preview-modal .modal-content,
  #preview-modal .custom-modal-body,
  #preview-modal .modal-rotator-viewport,
  #preview-modal .modal-rotator-canvas {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

    #preview-modal,
    #preview-modal .modal,
    #preview-modal .modal-dialog,
    #preview-modal .modal-content,
    #preview-modal .custom-modal-body {
      background: #25303D !important;
    }
}
@media (max-width: 768px) {
  .main-container {
    padding-bottom: 0 !important;
  }

  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 768px) {
  input,
  select,
  textarea,
  .flatpickr-input,
  .flatpickr-mobile,
  input.flatpickr-input,
  input[type="date"] {
    font-size: 16px !important;
  }
}


@media (max-width: 768px) {

  #preview-modal,
  #preview-modal .modal,
  #preview-modal .modal-dialog,
  #preview-modal .modal-content,
  #preview-modal .custom-modal-body {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    background: #25303D !important;
  }

    #preview-modal .custom-modal-body {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }

  

    #preview-modal #preview-target {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: auto !important;
      touch-action: pan-x pan-y pinch-zoom !important;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

      #preview-modal #preview-target canvas,
      #preview-modal #preview-target img,
      #preview-modal #preview-target video,
      #preview-modal #preview-target #pdfViewer {
        touch-action: pan-x pan-y pinch-zoom !important;
      }

    #preview-modal .preview-zoom-fab {
      display: flex !important;
      position: absolute !important;
      right: 10px !important;
      bottom: calc(16px + env(safe-area-inset-bottom)) !important;
      z-index: 200000 !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    #preview-modal #rotate-preview {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 200001 !important;
    }
}

@media (max-width: 768px) {
  html body input,
  html body textarea,
  html body select,
  html body .flatpickr-input,
  html body .flatpickr-mobile,
  html body input[type="date"],
  html body input[type="text"] {
    font-size: 16px !important;
  }
}
@media (max-width: 768px) {

  #preview-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #25303D !important;
    overflow: hidden !important;
  }

    #preview-modal .modal-dialog,
    #preview-modal .modal-content {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      margin: 0 !important;
      background: #25303D !important;
    }

    #preview-modal .custom-modal-body {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      background: #25303D !important;
      overflow: hidden !important;
    }

    #preview-modal .modal-rotator-viewport {
      position: relative !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: hidden !important;
    }

    #preview-modal .modal-rotator-canvas {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
    }

    #preview-modal #preview-target {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: auto !important;
      background: #25303D !important;
      touch-action: pan-x pan-y pinch-zoom !important;
    }

    #preview-modal .preview-zoom-fab {
      display: flex !important;
      position: absolute !important;
      right: 10px !important;
      bottom: calc(16px + env(safe-area-inset-bottom)) !important;
      z-index: 200000 !important;
    }

    #preview-modal #rotate-preview {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
}
@media (max-width: 768px) {

  html,
  body {
    min-height: 100dvh !important;
  }

  .top-wrapper {
    min-height: 100dvh !important;
  }

  .main-container {
    min-height: 100dvh !important;
    padding-bottom: 70px !important;
  }

  #file-explorer {
    min-height: calc(100dvh - 70px) !important;
  }
}

@media (max-width: 768px) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  .flatpickr-input,
  .flatpickr-mobile,
  input.flatpickr-input,
  input.flatpickr-mobile {
    font-size: 16px !important;
    line-height: 1.5 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}
@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  .flatpickr-input,
  .flatpickr-mobile {
    font-size: 16px !important;
  }
}




@media (max-width: 768px) {
  #preview-modal .modal-dialog {
    margin: 0 auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: none !important;
  }

  #preview-modal .modal-content {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }

  #preview-modal .custom-modal-body {
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
  }
}


@media (max-width: 768px) {
  #preview-modal {
    padding: 8px !important;
  }

    #preview-modal .pv-modal-dialog {
      width: calc(100vw - 16px) !important;
      max-width: calc(100vw - 16px) !important;
      height: calc(100dvh - 16px) !important;
      max-height: calc(100dvh - 16px) !important;
      margin: 0 auto !important;
    }

    #preview-modal .custom-modal-body {
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      border-radius: 14px !important;
      overflow: hidden !important;
    }
}