/* Mobile-safe Add/Edit modal positioning: avoids fixed centered modals being clipped
   when mobile browser chrome or the keyboard changes the visible viewport. */
@media (max-width: 780px){
  #addCardModal,
  #editCardModal{
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;

    transform: none !important;
    margin: 0 !important;

    display: none;
    flex-direction: column;
  }

  #addCardModal.open,
  #editCardModal.open{
    display: flex !important;
  }

  #addCardModal .modal-body,
  #editCardModal .modal-body{
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #addCardModal .modal-footer,
  #editCardModal .modal-footer{
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
  }
}