/* BUILD 214A1 — MOBILE UX ANCHOR STABILITY LOCK
   Goal: mobile chrome stays anchored to the visual viewport instead of behaving like floating cards.
   Scope: phone/tablet shell only. Desktop layout is intentionally untouched. */

@media (max-width:800px){
  html{
    --as214a1-topbar-h:64px;
    --as214a1-tabbar-h:70px;
    scroll-padding-top:calc(var(--as214a1-topbar-h) + env(safe-area-inset-top,0px));
    scroll-padding-bottom:calc(var(--as214a1-tabbar-h) + env(safe-area-inset-bottom,0px));
  }

  html,body,#app{
    width:100%;
    min-height:100%;
    overflow-x:hidden!important;
  }

  #app .workspace94.as211v11a-shell{
    min-height:100dvh!important;
    width:100%!important;
    overflow-x:hidden!important;
  }

  /* Top application chrome: one anchored bar, never a drifting/floating card. */
  #app .workspace94.as211v11a-shell .workspace91c-topbar,
  #app .workspace94.as211v11a-shell .workspace86-topbar{
    position:fixed!important;
    top:var(--as-visual-top,0px)!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    min-width:0!important;
    height:calc(var(--as214a1-topbar-h) + env(safe-area-inset-top,0px))!important;
    min-height:calc(var(--as214a1-topbar-h) + env(safe-area-inset-top,0px))!important;
    margin:0!important;
    padding:calc(7px + env(safe-area-inset-top,0px)) 10px 7px!important;
    border-radius:0!important;
    transform:none!important;
    z-index:220!important;
    box-sizing:border-box!important;
  }

  /* Content starts below the anchored top bar and clears the bottom navigation. */
  #app .workspace94.as211v11a-shell .workspace91c-main,
  #app .workspace94.as211v11a-shell .workspace86-main{
    margin:0!important;
    width:100%!important;
    min-width:0!important;
    padding-top:calc(var(--as214a1-topbar-h) + env(safe-area-inset-top,0px))!important;
    overflow:visible!important;
  }
  #app .workspace94.as211v11a-shell .workspace91c-main>.content{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding-bottom:calc(var(--as214a1-tabbar-h) + 18px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Bottom navigation: fixed to screen edge. Remove the raised/floating dock treatment. */
  #app .workspace94.as211v11a-shell .as94-mobile-tabbar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    min-height:calc(var(--as214a1-tabbar-h) + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    transform:none!important;
    box-shadow:0 -10px 30px rgba(0,0,0,.24)!important;
    z-index:230!important;
    box-sizing:border-box!important;
    contain:layout paint;
  }
  #app .workspace94.as211v11a-shell .as94-mobile-tab,
  #app .workspace94.as211v11a-shell .as94-mobile-scan{
    transform:none!important;
    translate:none!important;
    margin:0!important;
  }

  /* Side drawer and its backdrop stay tied to the viewport. */
  #app .workspace94.as211v11a-shell .workspace91c-sidebar,
  #app .workspace94.as211v11a-shell .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    z-index:260!important;
    padding-top:calc(14px + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;
  }
  #app .workspace94.as211v11a-shell .sidebar-backdrop{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    z-index:250!important;
  }

  /* Modal backdrop is viewport-bound. The card itself remains internally scrollable. */
  body>.modal-backdrop.workspace94.as-modal-root,
  .workspace94.as-modal-root{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:var(--as-visual-height,100dvh)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:1000!important;
    place-items:end stretch!important;
  }
  .workspace94.as-modal-root .modal-card{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    max-height:var(--as-visual-height,100dvh)!important;
    margin:0!important;
    border-radius:18px 18px 0 0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  /* Mobile-card tables must not leave desktop sticky table headers floating over cards. */
  #app .workspace94.as211v11a-shell .as94-mobile-card-table th{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
  }

  /* Toast stays above the permanent bottom navigation instead of drifting at page bottom. */
  body>.toast{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(var(--as214a1-tabbar-h) + 10px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    z-index:1300!important;
    box-sizing:border-box!important;
  }

  /* Keyboard mode: bottom nav is hidden by the existing UX rule; keep the top bar stable
     and give the editor the full remaining visual viewport. */
  html[data-keyboard="open"] #app .workspace94.as211v11a-shell .workspace91c-main>.content{
    padding-bottom:24px!important;
  }
  html[data-keyboard="open"] body>.toast{
    bottom:12px!important;
  }

  /* Horizontal controls scroll inside their own rail; they never reposition the page chrome. */
  #app .workspace94.as211v11a-shell .tabs,
  #app .workspace94.as211v11a-shell .workforce-clean-tabs,
  #app .workspace94.as211v11a-shell .payroll-scope-tabs,
  #app .workspace94.as211v11a-shell .planner-view-tabs,
  #app .workspace94.as211v11a-shell .planner-week-controls,
  #app .workspace94.as211v11a-shell .route-chip-strip{
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

@media (max-width:480px){
  #app .workspace94.as211v11a-shell .workspace91c-topbar,
  #app .workspace94.as211v11a-shell .workspace86-topbar{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  #app .workspace94.as211v11a-shell .as94-mobile-tabbar{
    padding-left:5px!important;
    padding-right:5px!important;
  }
}