/* LokalMarketPH responsive hardening patch
   Keeps the current design, but prevents overflow and improves usability on phones, tablets, and desktop. */

* { box-sizing: border-box; }
html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body, #root {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
body {
  margin: 0;
  overscroll-behavior-x: none;
}
img, video, canvas, iframe {
  max-width: 100%;
}
svg { flex-shrink: 0; }

/* Prevent long emails, URLs, product names, and addresses from breaking mobile layouts. */
p, span, div, td, th, button, a, label, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}

/* Keep form controls mobile friendly and avoid iOS zoom-on-focus. */
input, select, textarea, button {
  max-width: 100%;
  font: inherit;
}
@media (max-width: 767px) {
  input, select, textarea, button {
    font-size: 16px !important;
  }
  input, select, textarea {
    min-height: 44px;
  }
  button, a[role="button"] {
    min-height: 44px;
  }
}

/* Header/search bar fixes. */
header {
  width: 100%;
  max-width: 100vw;
}
header .container,
header [class*="max-w-"] {
  width: 100%;
  max-width: min(1200px, 100vw) !important;
}
@media (max-width: 767px) {
  header {
    position: sticky;
    top: 0;
  }
  header .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  header .grid {
    gap: 0.5rem !important;
  }
  header input::placeholder {
    font-size: 0.92rem;
  }
}
@media (max-width: 420px) {
  header input::placeholder {
    color: transparent;
  }
}

/* Main content width and spacing. */
main, section, article {
  min-width: 0;
}
.container {
  width: 100%;
}
@media (max-width: 640px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  h1 { font-size: clamp(1.55rem, 7vw, 2.2rem) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(1.1rem, 4.6vw, 1.45rem) !important; line-height: 1.22 !important; }
}

/* Card and dashboard grid safety. */
.grid, .flex {
  min-width: 0;
}
.grid > *, .flex > * {
  min-width: 0;
}
@media (max-width: 767px) {
  .grid[class*="grid-cols-"] {
    max-width: 100%;
  }
  [class*="shadow"], [class*="rounded"] {
    max-width: 100%;
  }
}

/* Tables: wrap automatically so admin pages do not overflow on phones. */
.lm-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.75rem;
}
.lm-table-wrap table {
  min-width: 720px;
}
@media (max-width: 767px) {
  table {
    font-size: 0.875rem;
  }
  th, td {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Modal/dialog usability on small screens. */
[role="dialog"],
.fixed.inset-0 > div,
.fixed[class*="inset"] > div {
  max-width: calc(100vw - 1rem);
}
@media (max-width: 767px) {
  [role="dialog"],
  .fixed[class*="inset"] > div {
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Registration/upload sections. */
form {
  max-width: 100%;
}
input[type="file"] {
  max-width: 100%;
}
@media (max-width: 640px) {
  form [class*="grid-cols-2"],
  form [class*="grid-cols-3"],
  form [class*="grid-cols-4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  form .flex {
    flex-wrap: wrap;
  }
}

/* Product and feed cards should fill available mobile width without horizontal scroll. */
@media (max-width: 640px) {
  [class*="Product"], [class*="product"], [class*="Feed"], [class*="feed"] {
    max-width: 100%;
  }
}

/* Make wide admin/action button rows wrap neatly. */
@media (max-width: 767px) {
  .gap-2, .gap-3, .gap-4 {
    row-gap: 0.5rem;
  }
  button + button,
  a + a {
    margin-top: 0.125rem;
  }
}

/* Better print output for receipts. */
@media print {
  header, nav, .no-print, button {
    display: none !important;
  }
  body, #root {
    overflow: visible !important;
  }
  .lm-table-wrap {
    overflow: visible !important;
  }
  .lm-table-wrap table {
    min-width: 0 !important;
  }
}