/* =========================================================
   MijnSerenity 7.4.6 — navigatie altijd zichtbaar

   De navigatie blijft op iPad/iPhone altijd in beeld. Bij het
   openen van het toetsenbord verhuist de balk naar de onderrand
   van de zichtbare Visual Viewport, dus direct boven het toetsenbord.
   ========================================================= */

:root{
  --nav-height:58px;
  --ms744-nav-button:42px;
  --ms744-nav-top:auto;
}

body{
  padding-bottom:
    calc(
      var(--nav-height) +
      env(safe-area-inset-bottom) +
      10px
    ) !important;
}

main,
#app,
.app-shell,
.ms708-native-pager > .ms708-native-page{
  padding-bottom:
    calc(
      var(--nav-height) +
      env(safe-area-inset-bottom) +
      14px
    ) !important;
}

body > .bottom-nav.ms744-compact-nav,
.bottom-nav.ms744-compact-nav{
  position:fixed !important;
  inset:auto 0 0 0 !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:var(--ms751-nav-bottom,0px) !important;

  width:100% !important;
  max-width:100% !important;
  height:calc(var(--nav-height) + env(safe-area-inset-bottom)) !important;
  min-height:calc(var(--nav-height) + env(safe-area-inset-bottom)) !important;
  max-height:calc(var(--nav-height) + env(safe-area-inset-bottom)) !important;

  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:5px !important;
  padding:6px 7px env(safe-area-inset-bottom) !important;
  margin:0 !important;
  box-sizing:border-box !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;

  background:rgba(2,11,19,.94) !important;
  border-top:1px solid rgba(113,220,255,.18) !important;
  box-shadow:0 -8px 24px rgba(0,0,0,.25) !important;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);

  transform:none !important;
  translate:none !important;
  perspective:none !important;
  contain:none !important;
  isolation:isolate;
  will-change:top !important;

  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:2147483000 !important;
}

/*
   Op iOS/iPadOS volgt de balk de echte zichtbare viewport. Wanneer
   het toetsenbord opent, komt de balk erboven te staan; hij wordt
   nooit verborgen.
*/
html.ms744-ios-viewport body > .bottom-nav.ms744-compact-nav,
html.ms744-ios-viewport .bottom-nav.ms744-compact-nav{
  position:fixed !important;
  inset:auto 0 var(--ms751-nav-bottom,0px) 0 !important;
  top:auto !important;
  bottom:var(--ms751-nav-bottom,0px) !important;
}

body > .bottom-nav.ms744-compact-nav::-webkit-scrollbar,
.bottom-nav.ms744-compact-nav::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

.bottom-nav.ms744-compact-nav .bottom-nav-item,
.bottom-nav.ms744-compact-nav.ms709-icon-nav .bottom-nav-item{
  flex:0 0 var(--ms744-nav-button) !important;
  width:var(--ms744-nav-button) !important;
  min-width:var(--ms744-nav-button) !important;
  max-width:var(--ms744-nav-button) !important;
  height:var(--ms744-nav-button) !important;
  min-height:var(--ms744-nav-button) !important;
  max-height:var(--ms744-nav-button) !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:13px !important;
  background:transparent;
}

.bottom-nav.ms744-compact-nav .bottom-nav-item span,
.bottom-nav.ms744-compact-nav.ms709-icon-nav .bottom-nav-item span{
  margin:0 !important;
  font-size:21px !important;
  line-height:1 !important;
}

.bottom-nav.ms744-compact-nav .bottom-nav-item small{
  display:none !important;
}

.bottom-nav.ms744-compact-nav .bottom-nav-item.active{
  background:rgba(79,203,242,.14) !important;
  box-shadow:inset 0 0 0 1px rgba(99,217,249,.23) !important;
}

body.ms708-native-pages-active .bottom-nav.ms744-compact-nav,
.bottom-nav.ms744-compact-nav.bottom-nav-auto-hidden,
.bottom-nav.ms744-compact-nav.bottom-nav-viewport-fixed,
.bottom-nav.ms744-compact-nav.bottom-nav-always-visible,
body.ms744-keyboard-open > .bottom-nav.ms744-compact-nav,
body.ms744-nav-repositioning > .bottom-nav.ms744-compact-nav{
  display:flex !important;
  transform:none !important;
  translate:none !important;
  contain:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Boven het toetsenbord iets steviger contrast. */
body.ms744-keyboard-open > .bottom-nav.ms744-compact-nav{
  background:rgba(2,11,19,.98) !important;
  box-shadow:0 -5px 18px rgba(0,0,0,.38) !important;
}

@media(max-width:430px){
  :root{
    --nav-height:54px;
    --ms744-nav-button:39px;
  }

  body > .bottom-nav.ms744-compact-nav,
  .bottom-nav.ms744-compact-nav{
    gap:4px !important;
    padding-top:5px !important;
  }

  .bottom-nav.ms744-compact-nav .bottom-nav-item span{
    font-size:20px !important;
  }
}

/* 7.18.21 — oude startdashboard nooit tonen terwijl Marine Glass opstart. */
@media(max-width:1024px){
  body #appView:not(.hidden) #dashboard #ms71510Dashboard#ms71510Dashboard{display:none!important}
  body #appView:not(.hidden) #dashboard > #msMarineGlass#msMarineGlass{display:block!important}
}