:root{--mobile-nav-h:72px}
html{scroll-behavior:smooth}
body{overscroll-behavior-y:none}
@media(max-width:820px){
  body{padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom,0px))}
  .card,.panel,.dashboard-card,.stat-card{border-radius:20px!important}
  input,select,textarea,button,.btn{min-height:44px}
  table{font-size:13px}
  .table-wrap,.report-table-wrap,.safety-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .modal,.dialog{max-height:calc(100vh - 32px);overflow:auto}
}
.mobile-pwa-bottom-nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:62px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid rgba(201,10,10,.16);box-shadow:0 18px 45px rgba(15,23,42,.18);border-radius:24px;z-index:9999;display:none;align-items:center;justify-content:space-around;padding:0 8px}
.mobile-pwa-bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;color:#6b7280;text-decoration:none;font-size:10px;font-weight:800;min-width:54px}
.mobile-pwa-bottom-nav a .ico{font-size:18px;line-height:1}
.mobile-pwa-bottom-nav a.active,.mobile-pwa-bottom-nav a:active{color:#c90a0a}
.mobile-pwa-bottom-nav .badge{position:absolute;top:-4px;right:8px;min-width:18px;height:18px;border-radius:99px;background:#c90a0a;color:#fff;font-size:10px;display:none;align-items:center;justify-content:center;padding:0 5px}
.pwa-install-banner{position:fixed;left:14px;right:14px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:10000;background:#650505;color:#fff;border-radius:20px;padding:14px;box-shadow:0 18px 45px rgba(0,0,0,.22);display:none;align-items:center;justify-content:space-between;gap:12px}
.pwa-install-banner strong{display:block}.pwa-install-banner span{font-size:12px;opacity:.86}.pwa-install-banner button{border:0;border-radius:14px;padding:10px 12px;font-weight:900}.pwa-install-banner .install{background:#fff;color:#a30808}.pwa-install-banner .close{background:rgba(255,255,255,.16);color:#fff}
@media(max-width:820px){.mobile-pwa-bottom-nav{display:flex}.pwa-install-banner{display:none}}
@media(display-mode:standalone){.pwa-install-banner{display:none!important}}


/* Mobile/PWA native scrolling safety net. Public/login page remains unchanged unless authenticated app body exists. */
@media (max-width: 980px) {
  body.app-body:not(.modal-open),
  body.app-body:not(.modal-open) .app-shell,
  body.app-body:not(.modal-open) .app-main {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================================================
   PUBLIC LANDING SCROLL RESTORE - PWA scrollfix1
   Keeps the public landing/login page scrollable after PWA/cache updates.
   Authenticated app pages still use their normal modal/body lock behavior.
   ========================================================= */
html:not(:has(body.app-body)),
html:not(:has(body.app-body)) body:not(.modal-open) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  position: static !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

body:not(.app-body):not(.modal-open) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  position: static !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}

body:not(.app-body) .public-shell,
body:not(.app-body) .public-main,
body:not(.app-body) .landing-page,
body:not(.app-body) main {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  touch-action: pan-y !important;
}