/* Responsive safety-net — loaded after the main stylesheet.
   Prevents cards/tables/images from bleeding past the edges of the
   viewport on phones, small phones, and tablets, without touching the
   app's own layout classes. */

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

html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  /* keep content clear of iPhone notches / rounded corners */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#root {
  max-width: 100%;
  overflow-x: hidden;
}

/* Media never forces the page wider than the screen */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* Long unbroken text (emails, ids, links) can force a card wider than
   its container on small screens — let it wrap or ellipsize instead
   of pushing the layout sideways. */
p,
span,
div,
td,
th,
a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tables are allowed to scroll horizontally within their own wrapper
   (the app already wraps them in overflow-x-auto) but must never force
   the whole page to scroll. */
table {
  max-width: 100%;
}

/* Flex/grid children default to a min-width of "auto", which is the
   most common hidden cause of cards/rows overflowing their container
   on mobile — this resets that default app-wide. */
.flex > *,
.grid > * {
  min-width: 0;
}

/* Buttons/inputs never exceed their container on narrow phones */
button,
input,
select,
textarea {
  max-width: 100%;
}

/* Extra-small phones (iPhone SE and similar, ~375px and under) */
@media (max-width: 380px) {
  .max-w-6xl,
  .max-w-5xl,
  .max-w-3xl,
  .max-w-xl,
  .max-w-lg,
  .max-w-md {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}