/*
 * 360LM universal bottom-safe-area helper.
 *
 * Adds reasonable padding to the BOTTOM of common scrolling containers so the
 * last item is never hidden behind a sticky bottom nav / totals bar / FAB.
 *
 * Loaded by every PWA via:
 *   <link rel="stylesheet" href="/shared/safe-bottom.css">
 *
 * SAFETY: uses CSS max() so we only ever INCREASE padding, never reduce it.
 * Existing PWA styles that already have generous padding-bottom remain
 * dominant; the rule only kicks in if a PWA's bottom padding is below 100px.
 *
 * `!important` is required because most PWAs already have `.body { padding: ... }`
 * with higher specificity than a single class selector. The `max()` guard
 * means even with !important we don't SHRINK anything.
 *
 * 100px = comfortable margin (64px bnav typical + 16px breathing room + safe area)
 * env(safe-area-inset-bottom, 16px) = iPhone notch / Android gesture handle
 *
 * To override in a PWA (rare):
 *   :root { --safe-bottom-min: 140px; }
 *
 * Loaded 2026-06-04 per user feedback that content was hidden behind
 * sticky bottoms across multiple PWAs.
 */

:root {
  --safe-bottom-min: 100px;
}

/* Scrolling containers used across 360LM PWAs. Matches the patterns we've
   standardised on: .body (sales, customers, finance, expense, tour-pg…),
   .scr (customers, tour-pg, credit-card), .screen (sales, multi-screen
   PWAs). The selector chain is wide on purpose — class names vary by PWA. */
.body,
.scr,
.screen {
  padding-bottom: max(
    var(--safe-bottom-min),
    calc(env(safe-area-inset-bottom, 16px) + 84px)
  ) !important;
}

/* Native body scrolling fallback for PWAs that don't use the .body/.scr/.screen pattern */
body {
  scroll-padding-bottom: var(--safe-bottom-min);
}

/* Print: remove the helper so it doesn't waste page space */
@media print {
  .body, .scr, .screen { padding-bottom: 0 !important; }
}