/* Tablet layout safeguards for iPad Pro (portrait and landscape viewports). */
@media (min-width: 768px) and (max-width: 1194px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  #root,
  main,
  section {
    min-width: 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-left: max(1.5rem, env(safe-area-inset-left));
  }

  /* The desktop breakpoint starts at 1024px, which is also an iPad Pro
     portrait width. Keep dense dashboards readable instead of squeezing
     four or five data cards into that viewport. */
  .lg\:grid-cols-3,
  .lg\:grid-cols-4,
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid > *,
  .flex > * {
    min-width: 0;
  }

  .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .overflow-x-auto table {
    min-width: max-content;
  }

  input,
  select,
  textarea,
  button,
  [role="button"] {
    font-size: max(16px, 1em);
  }

  button,
  [role="button"],
  a {
    touch-action: manipulation;
  }
}

@media (min-width: 768px) and (max-width: 1194px) and (orientation: landscape) {
  .container {
    padding-right: max(2rem, env(safe-area-inset-right));
    padding-left: max(2rem, env(safe-area-inset-left));
  }
}