/* REV app: one fixed bottom navigation and one independently scrollable
   content viewport. Covers home, trips, services and secondary app pages.
   Map/navigation keeps its dedicated full-screen Leaflet layout. */
html[data-rev-app="1"]{
  --rev-app-tabs-clearance:calc(74px + env(safe-area-inset-bottom));
}
html[data-rev-app="1"] body:not(.rev-map-one){
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  overscroll-behavior:none;
}
/* Trips and Services have their own app-shell; make it a full-height column. */
html[data-rev-app="1"] body:not(.rev-map-one)>.app-shell{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
html[data-rev-app="1"] body:not(.rev-map-one)>header,
html[data-rev-app="1"] body:not(.rev-map-one)>.app-shell>header{
  flex:0 0 auto!important;
}
/* A direct main covers Home / Energy / Support; an app-shell main covers
   Trips / Services; a top-level .wrap covers Profile and legacy sections. */
html[data-rev-app="1"] body:not(.rev-map-one)>main,
html[data-rev-app="1"] body:not(.rev-map-one)>.app-shell>main,
html[data-rev-app="1"] body:not(.rev-map-one)>.wrap{
  flex:1 1 auto!important;
  min-height:0!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scroll-padding-bottom:var(--rev-app-tabs-clearance);
  padding-bottom:calc(var(--rev-app-tabs-clearance) + 20px)!important;
}
/* Keep the bottom bar anchored to the mobile viewport (or the 440px
   desktop shell) while only the page content moves. */
html[data-rev-app="1"] body:not(.rev-map-one) #rev-app-bottom-nav{
  position:fixed!important;
  inset:auto 0 0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  transform:none!important;
  flex:none!important;
  z-index:99999!important;
  touch-action:manipulation;
}
html[data-rev-app="1"] body:not(.rev-map-one) #rev-app-bottom-nav a{
  min-width:0;
}
/* Don't cover focused form controls with the keyboard or bottom bar. */
html[data-rev-app="1"] body:not(.rev-map-one) :is(main,.wrap) :is(input,select,textarea,button){
  scroll-margin-bottom:var(--rev-app-tabs-clearance);
}
/* The sign-in and full-screen startup overlay remain deliberately modal.
   Other content must not scroll beneath them. The separate map cockpit
   retains its special navigation-end behavior. */

/* Profile has several real account/Bale panels after its original .wrap.
   Scrolling only .wrap would trap those important forms outside the 100dvh
   frame, so its entire page document is the scroll region instead. The tab
   bar remains fixed by the existing shared rule. */
/* Prevent root/body overflow propagation: the body's 100dvh box is the
   actual scroll container on mobile, not the surrounding document. */
html[data-rev-app="1"]:has(> body > #revSharedVehiclePanel){
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}
html[data-rev-app="1"] body:not(.rev-map-one):has(> #revSharedVehiclePanel){
  display:block!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--rev-app-tabs-clearance)!important;
  scroll-padding-bottom:var(--rev-app-tabs-clearance);
}
html[data-rev-app="1"] body:not(.rev-map-one):has(> #revSharedVehiclePanel)>.wrap{
  display:block!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  flex:none!important;
  overflow:visible!important;
  padding-bottom:16px!important;
}