/* GEGENEREERD — bron: generator/skeleton-rust-umadb/static/css/pwa.css. Niet hier wijzigen; fix de bron en draai ./generate. */
/* De app op het beginscherm: de installeer-banner, en wat er anders is als de app als app draait
   (geen browserbalk). Leunt op de tokens van het design-systeem, met een nette terugval. */

.pwa-banner {
  position: fixed; z-index: 1000;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px;
  background: var(--color-bg-surface, #fff);
  color: var(--color-text, #1e1e1e);
  border: 1px solid var(--color-border, #e3e3e3);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  font: 14px/1.4 var(--font-body, system-ui, -apple-system, sans-serif);
  max-width: 520px; margin: 0 auto;
}
.pwa-banner-icoon { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.pwa-banner-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pwa-banner-tekst strong { font-weight: 600; }
.pwa-banner-tekst span { color: var(--color-text-muted, #5c554e); }
.pwa-banner-knop {
  flex: none; font: inherit; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border: 0; border-radius: var(--radius-md, 8px);
  background: var(--color-primary, #1f2937); color: var(--color-text-on-primary, #fff);
}
.pwa-banner-sluit {
  flex: none; align-self: flex-start; cursor: pointer;
  width: 32px; height: 32px; margin: -4px -4px 0 0;
  font: 22px/1 system-ui, sans-serif; border: 0; background: none;
  color: var(--color-text-muted, #5c554e);
}

/* Als app (vanaf het beginscherm): geen browser-gedrag dat verraadt dat het een website is. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  body { -webkit-tap-highlight-color: transparent; padding-bottom: env(safe-area-inset-bottom, 0px); }
  button, a, nav, .hub-nav { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}