/* ============================================================================
   pwa-mobile.css — global mobile-friendliness layer for GlobalTrade ERP
   ----------------------------------------------------------------------------
   Loaded after the template CSS. Goal: make every page usable on phones
   without editing 100+ views individually. The Larkon template is already
   responsive (collapsible sidebar, Bootstrap grid); this file closes the
   common ERP gaps: wide tables, edge-to-edge cards, iOS input zoom, notch
   safe-areas, and oversized fixed widths.
   ============================================================================ */

/* iOS Safari zooms the page when a focused input has font-size < 16px.
   Force >=16px on form controls on small screens to stop the jarring zoom. */
@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .input-group-text,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="date"] {
    font-size: 16px !important;
  }
}

/* Any table dropped straight into the page (not already inside a scroller)
   gets a horizontal scroll on small screens via the .pwa-table-scroll wrapper
   that pwa-mobile.js injects. Keep cells from wrapping into unreadable stacks. */
@media (max-width: 767.98px) {
  .pwa-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pwa-table-scroll > table,
  .table-responsive > table {
    min-width: 560px; /* let columns keep their width and scroll instead of crushing */
  }

  /* Reduce heavy desktop padding so content isn't cramped on phones. */
  .card-body { padding: 0.9rem; }
  .p-content, .container-xxl, .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }

  /* Stack toolbar/action button rows that were laid out horizontally. */
  .d-flex.justify-content-between.flex-wrap > * { margin-bottom: 0.35rem; }

  /* Make primary action buttons comfortable tap targets. */
  .btn { min-height: 38px; }

  /* KPI / stat grids collapse to a single column on the narrowest screens. */
  .row > [class*="col-"] { margin-bottom: 0.5rem; }
}

/* Notch / home-indicator safe areas (works with viewport-fit=cover).
   Only adds insets where the OS reports them; 0 on normal devices. */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Horizontal scrollbars look cleaner/thinner on touch. */
.pwa-table-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar { height: 6px; }
.pwa-table-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb { background: rgba(120,120,130,.45); border-radius: 6px; }

/* Never let an element force the page wider than the viewport on mobile. */
@media (max-width: 767.98px) {
  img, canvas, svg, iframe, pre, code { max-width: 100%; }
  body { overflow-x: hidden; }
}