/* =========================================================
   ASANI SHARED BOTTOM NAV — SINGLE SOURCE OF TRUTH
   Lead + Worker Calendar use this exact CSS.
   ========================================================= */

#sharedBottomNav{
  display:block;
}

#sharedBottomNav .bottom-nav{
  box-sizing:border-box !important;
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;

  width:min(100%,430px) !important;
  height:68px !important;
  min-height:68px !important;
  max-height:68px !important;

  margin:0 !important;
  padding:0 6px env(safe-area-inset-bottom) !important;

  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:0 !important;

  border:0 !important;
  border-top:1px solid #dfe7ec !important;
  border-radius:0 !important;

  background:#fff !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:9999 !important;
}

#sharedBottomNav .nav-item{
  box-sizing:border-box !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:7px 2px 6px !important;

  border:0 !important;
  border-radius:0 !important;
  outline:0;

  background:transparent !important;
  color:#607684 !important;
  text-decoration:none !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  place-items:unset !important;
  align-content:unset !important;
  gap:4px !important;

  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:8px !important;
  font-weight:650 !important;
  line-height:1 !important;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#sharedBottomNav .nav-item svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;

  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#sharedBottomNav .nav-item b{
  display:block !important;
  margin:0 !important;
  padding:0 !important;

  font-family:inherit !important;
  font-size:8px !important;
  font-weight:650 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  color:inherit !important;
}

#sharedBottomNav .nav-item.active{
  color:#ff5a00 !important;
}

#sharedBottomNav .nav-item:active{
  background:#fff7f2 !important;
}

#sharedBottomNav .nav-item:focus-visible{
  outline:2px solid rgba(255,90,0,.40) !important;
  outline-offset:-2px !important;
}

/* Exact same dark menu on both pages */
html[data-theme="dark"] #sharedBottomNav .bottom-nav{
  background:#101820 !important;
  border-top-color:#293943 !important;
}

html[data-theme="dark"] #sharedBottomNav .nav-item{
  background:transparent !important;
  color:#9db0ba !important;
}

html[data-theme="dark"] #sharedBottomNav .nav-item.active{
  color:#ff7625 !important;
}

html[data-theme="dark"] #sharedBottomNav .nav-item:active{
  background:#17232b !important;
}


/* V3 — force links and buttons to render identically */
#sharedBottomNav a.nav-item,
#sharedBottomNav button.nav-item{
  -webkit-appearance:none !important;
  appearance:none !important;
  font:inherit !important;
  text-align:center !important;
  vertical-align:middle !important;
}

#sharedBottomNav button.nav-item{
  border:none !important;
  box-shadow:none !important;
}

#sharedBottomNav .nav-item > svg{
  flex:0 0 20px !important;
}

#sharedBottomNav .nav-item > b{
  min-height:8px !important;
  display:block !important;
}


/* =========================================================
   V4 — precise icon/label alignment + sheets above nav
   ========================================================= */

/* Hard layout reset: every nav item is exactly icon row + label row */
#sharedBottomNav .bottom-nav{
  height:68px !important;
  min-height:68px !important;
  max-height:68px !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:stretch !important;
}

#sharedBottomNav .nav-item{
  width:100% !important;
  height:67px !important;
  min-height:67px !important;

  margin:0 !important;
  padding:8px 0 7px !important;

  display:grid !important;
  grid-template-rows:22px 10px !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  align-content:center !important;
  justify-content:center !important;

  gap:5px !important;
  text-align:center !important;
  line-height:1 !important;
}

#sharedBottomNav .nav-item > svg{
  grid-row:1 !important;
  grid-column:1 !important;

  display:block !important;
  width:20px !important;
  height:20px !important;

  margin:0 auto !important;
  padding:0 !important;
  align-self:center !important;
  justify-self:center !important;
}

#sharedBottomNav .nav-item > b{
  grid-row:2 !important;
  grid-column:1 !important;

  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:10px !important;

  margin:0 !important;
  padding:0 !important;

  text-align:center !important;
  align-self:center !important;
  justify-self:stretch !important;

  white-space:nowrap !important;
  line-height:10px !important;
  font-size:8px !important;
}

/*
  Requests/Documents/More sheets must not sit underneath the
  fixed shared navigation. Keep the sheet physically above it.
*/
#bottomSheet,
#sheet{
  bottom:68px !important;
  max-height:calc(100dvh - 92px - 68px) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding-bottom:24px !important;
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh){
  #bottomSheet,
  #sheet{
    max-height:calc(100vh - 160px) !important;
  }
}

/* Make the More controls clearly separated and always reachable */
#bottomSheet .offline-toggle,
#sheet .offline-toggle{
  display:block !important;
  width:100% !important;
  min-height:50px !important;
  margin-top:10px !important;
  flex:0 0 auto !important;
}

#bottomSheet .theme-toggle,
#sheet .theme-toggle{
  flex:0 0 auto !important;
}

/* When a sheet is open, its last control can scroll fully into view */
#bottomSheet #sheetBody,
#sheet #sheetBody{
  padding-bottom:10px !important;
}