/* Mobile / tablet fit-to-screen layer. Plain CSS (independent of the Tailwind build) loaded after app.css. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
img[class*="h-"], img.object-cover { height: revert-layer; }
.app-main, main { min-width: 0; }
pre, code { overflow-wrap: anywhere; }
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
.tbl td, .tbl th { overflow-wrap: anywhere; }
.tbl th { overflow-wrap: normal; }

@media (max-width: 1023px) {
  .app-main { padding: .75rem; }
  .app-header { padding-left: .5rem; padding-right: .5rem; gap: .5rem; }
  /* page action bars and card headers wrap instead of overflowing */
  .card-h { flex-wrap: wrap; row-gap: .5rem; }
  .card-h > * { max-width: 100%; }
  .btn { white-space: normal; text-align: center; }
  form.flex, .flex-wrap { row-gap: .5rem; }
}

@media (max-width: 639px) {
  body { font-size: 15px; }
  /* 16px inputs stop iOS from zooming on focus */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .input { font-size: 16px !important; }
  .input, select.input { width: 100%; }
  [class*="!w-auto"] { width: 100% !important; }
  .card-b { padding: .75rem; }
  .card-h { padding: .6rem .75rem; }
  /* every grid collapses to a single column unless it is a small stat grid */
  .grid[class*="sm:grid-cols"], .grid[class*="md:grid-cols"], .grid[class*="lg:grid-cols"] { grid-template-columns: minmax(0, 1fr); }
  .grid.grid-cols-2[class*="sm:"], .grid.grid-cols-2[class*="lg:"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > [class*="col-span-"] { grid-column: 1 / -1; }
  /* tool bars: buttons share the row */
  .flex.flex-wrap > .btn, .flex.flex-wrap > .btn-primary, .flex.flex-wrap > .btn-secondary, .flex.flex-wrap > a.btn-sm { flex: 1 1 auto; }
  .app-main .flex.flex-wrap.items-center.justify-between > .flex.flex-wrap.gap-2 { width: 100%; }
  /* tables that are not card-style scroll sideways inside their wrapper */
  table.tbl:not(.tbl-cards) { min-width: 36rem; }
  table.bs { min-width: 0; }
  .tbl thead th, .tbl tbody td { padding-left: .5rem; padding-right: .5rem; }
  /* card-style rows: keep long values from pushing the layout */
  table.tbl-cards td { flex-wrap: wrap; word-break: break-word; }
  table.tbl-cards td > * { max-width: 100%; }
  table.tbl-cards td[colspan] { display: block; text-align: center; }
  table.tbl-cards td:not([data-label]):before { content: none; }
  table.tbl-cards td.no-print, table.tbl-cards td:last-child { justify-content: flex-end; flex-wrap: wrap; gap: .35rem; }
  /* modals */
  .swal2-popup { width: 94vw !important; max-width: 94vw !important; padding: 1rem .75rem !important; }
  .swal2-html-container { margin: .75rem 0 0 !important; overflow-x: hidden; }
  .swal2-actions { flex-wrap: wrap; gap: .5rem; }
  .swal2-actions .swal2-styled { flex: 1 1 40%; margin: 0 !important; }
  /* floating chat button must not hide the footer buttons */
  .app-main { padding-bottom: 5rem; }
  /* charts */
  canvas { max-width: 100% !important; height: auto !important; }
}

@media (max-width: 380px) {
  .app-header #userBtn { padding: .15rem; }
  h1 { font-size: 1rem; }
}

/* landscape phones / small tablets: sidebar drawer stays narrow */
@media (max-width: 1023px) { #sidebar { width: min(18rem, 85vw); } }

@media print { html, body { overflow: visible; } table.tbl:not(.tbl-cards) { min-width: 0 !important; } }