/* ── Phones, tablets and foldables ────────────
   Loaded (and versioned) on every site page, after the page's own styles.
   Fixes from the 2026-09-29 device audit (folded phone 280px, phone 360px,
   tablet 768px). In one file for the same reason as theme-dark.css: /css is
   cached for a year, so shared files cannot be changed in place without
   re-versioning every page.
──────────────────────────────────────────── */

/* No rubber-band bounce past the page ends, and no sideways panning when a
   section starts off-screen for a slide-in animation (Let's Connect, UK, US).
   clip, unlike hidden, does not create a scroll container, so sticky
   sidebars and headers keep working. */
html, body { overscroll-behavior-y: none; overflow-x: clip; }

/* iPhones and iPads zoom into any form field under 16px when it is tapped,
   at any width (a phone in landscape is 844px wide). !important because
   several pages size their search boxes and forms by id. */
@media (max-width: 768px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }
}

@media (max-width: 768px) {

  /* Dashboard > Timesheet: the week switcher was wider than a phone. */
  .week-nav { flex-wrap: wrap; gap: var(--sp-2); }
  .week-nav h3 { min-width: 0; flex: 1 1 auto; font-size: var(--fs-lg); }
  /* Save Draft + Submit for Approval did not fit side by side. */
  #ts-actions { flex-wrap: wrap; }
  #ts-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Admin: stat cards and list rows ran past the screen edge. */
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-stat, .admin-stat-info { min-width: 0; }
  .admin-stat-value, .admin-stat-label { overflow-wrap: anywhere; }
  .eoi-field-item { flex-wrap: wrap; }
  /* Right-aligned button rows grew off the left edge instead of wrapping. */
  .flex.justify-end { flex-wrap: wrap; }
  /* Compliance: the four view tabs did not fit on one line. Two by two. */
  .cmp-tabs { flex-wrap: wrap; }
  .cmp-tabs .cmp-tab { flex: 1 1 calc(50% - 2px); justify-content: center; text-align: center; }
  /* Compliance calendar: month name and arrows did not fit beside each other. */
  body .cmpcal-nav { flex-wrap: wrap; }
  body .cmpcal-header-label { min-width: 0; }
}

@media (max-width: 400px) {
  .admin-stats { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Dashboard > My Stats: charts forced their cards wider than the screen.
   body prefix and !important to beat the styles stats.js injects. */
@media (max-width: 960px) {
  body .stats-row { grid-template-columns: minmax(0, 1fr) !important; }
  body .stats-row > .dash-card { min-width: 0; }
  body .stats-row canvas { max-width: 100%; }
}

/* UK services and pricing: the category tabs forced the page wider than a
   small phone instead of scrolling inside their own row. */
.browser-layout > * { min-width: 0; }

/* UAE page: the four figures did not fit two-up on a folded phone. */
@media (max-width: 400px) {
  .stat-strip .stat-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 0 12px; }
  .stat-strip .stat-item { padding: 22px 8px; overflow-wrap: anywhere; }
  /* UK services and pricing: price and button did not fit side by side. */
  .service-card .service-price-col { flex-wrap: wrap; }
}

/* Touch screens: links that were too small to tap reliably (Apple and
   Google both recommend about 44px). Padding enlarges the tap area without
   moving anything. */
@media (pointer: coarse) {
  .footer-contact a { min-height: 44px; }
  .sf-contact a { display: flex; align-items: center; min-height: 44px; }
  .region-flag { padding: 8px 5px; border-radius: 0; }
  .region-flag img { border-radius: 2px; }
  .lp-nav-link { padding-top: 10px; padding-bottom: 10px; }
  .tm-link { display: inline-block; padding: 10px 0; }
  .btn-icon { min-width: 44px; min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .if-star { padding: 6px; }
  #cmp-back-to-landing { min-height: 40px; }
}