/* Gulwathe Supplied Ltd mockup — PWA + phone polish (R5). Tokens only (var(--…) from app.css); loaded after every
 * module sheet so its few long-hands win over the shorthands they refine. */

/* Safe areas (index.html opts into viewport-fit=cover). Each inset is 0 where there is no notch or home bar, so on
 * ordinary browsers and desktop nothing moves. The bottom bar, toasts, sheets and sticky Save bars already add
 * env(safe-area-inset-bottom) in app.css and the module sheets; the header needs the top inset. */
.topbar {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}

/* Update / install toasts: the toast stack's own look, plus a row of actions. */
.pwa-toast { align-items: flex-start; }
.pwa-toast__body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; flex: 1; }
.pwa-toast__msg { flex: 1 1 180px; min-width: 0; line-height: 1.4; text-wrap: pretty; }
.pwa-toast__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.pwa-toast .btn--sm { min-height: var(--tap); min-width: var(--tap); }
.pwa-toast .pwa-toast__later { color: inherit; border-color: currentColor; }
.pwa-share { display: inline-flex; vertical-align: -2px; }

/* 360px: the claims "Running totals by day" table was 11px wider than its box (the nowrap "Sold at <branch>" header).
 * Let its headers wrap and the table fit the column. */
@media (max-width: 719px) {
  .cl .cl-totals__t { width: 100%; }
  .cl .cl-totals__t th { white-space: normal; overflow-wrap: anywhere; }
}