/* Global responsive fixes for small screens */
/* Keep very small and focused rules to avoid breaking desktop layout */
:root{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}

/* Allow flex children to shrink inside narrow viewports */
.min-h-screen, .min-h-screen * { min-width: 0; }

/* Ensure main centered container can shrink on small screens */
@media (max-width: 1024px) {
  .mx-auto, .max-w-7xl { max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }
  main { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}

/* Table wrapper safety */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-width: 0; max-width: 100%; }
.table-responsive table { width: max-content; min-width: 0; table-layout: auto; }
.table-responsive th, .table-responsive td { overflow-wrap: anywhere; }

/* Tailwind overrides that can force elements wider than their container */
.min-w-full { min-width: 0 !important; }

/* Prevent images and large elements from forcing page width */
img, iframe, embed, object, video { max-width: 100%; height: auto; }

/* Small helper to ensure horizontal pan gesture is captured by inner scroll areas */
.scroll-x-touch { -webkit-overflow-scrolling: touch; touch-action: pan-x; }

/* Keep common action groups usable on narrow phones. */
@media (max-width: 639px) {
  .app-card { border-radius: .9rem; }
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  input, select, textarea { max-width: 100%; }
  footer .max-w-7xl { justify-content: center !important; text-align: center; }
  footer .max-w-7xl > div { justify-content: center; }
}