/* ============================================================
   v43 PWA bottom navigation hard fix
   Problem: iOS/PWA dynamic viewport made the bottom nav "detach"
   while scrolling down/up.
   ============================================================ */

:root{
  --mobile-bottom-h: 96px;
}

/* На мобильных и PWA нижнее меню всегда привязано к visual viewport */
@media (max-width: 860px){
  html,
  body{
    min-height:100%!important;
    overscroll-behavior-y:none!important;
  }

  body{
    padding-bottom:calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom, 0px))!important;
  }

  .main{
    padding-bottom:calc(var(--mobile-bottom-h) + 28px + env(safe-area-inset-bottom, 0px))!important;
  }

  .mobile-bottom{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    bottom:constant(safe-area-inset-bottom)!important;
    bottom:env(safe-area-inset-bottom, 0px)!important;
    z-index:2147483000!important;
    width:100vw!important;
    max-width:100vw!important;
    min-height:calc(78px + env(safe-area-inset-bottom, 0px))!important;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px))!important;
    margin:0!important;
    transform:translate3d(0,0,0)!important;
    will-change:transform!important;
    contain:layout paint style!important;
    background:rgba(255,255,255,.97)!important;
    -webkit-backdrop-filter:saturate(160%) blur(18px)!important;
    backdrop-filter:saturate(160%) blur(18px)!important;
    border-top:1px solid rgba(219,229,242,.95)!important;
    box-shadow:0 -14px 34px rgba(15,23,42,.08)!important;
  }

  .mobile-bottom.is-pwa-fixed{
    position:fixed!important;
    transform:translate3d(0,0,0)!important;
  }

  .mobile-bottom a{
    min-width:0!important;
    min-height:62px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:8px 4px!important;
    border-radius:16px!important;
    transform:translateZ(0)!important;
  }

  .mobile-bottom a.active{
    background:#eef4ff!important;
  }

  /* Чтобы последняя карточка не уходила под меню */
  #pageContent,
  .page-content,
  .dashboard-grid,
  .card:last-child,
  .salary-v5-page,
  .reports-page{
    scroll-margin-bottom:calc(var(--mobile-bottom-h) + 24px)!important;
  }
}

/* В режиме standalone усиливаем низ, так как iOS PWA иногда меняет viewport при скролле */
@media (display-mode: standalone){
  @media (max-width: 860px){
    :root{
      --mobile-bottom-h: 104px;
    }

    .mobile-bottom{
      min-height:calc(84px + env(safe-area-inset-bottom, 0px))!important;
      padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))!important;
    }

    .main{
      padding-bottom:calc(124px + env(safe-area-inset-bottom, 0px))!important;
    }
  }
}

/* Не печатать нижнее меню */
@media print{
  .mobile-bottom{
    display:none!important;
  }
}