/* static/unstuck_ops/css/nav.css */
.mobile-tabbar {
  position: sticky;
  bottom: 0;
  z-index: 1030; /* above content, below modals/offcanvas */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tabbar .tab-item {
  text-decoration: none;
  color: var(--bs-light, #f8f9fa);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  padding: .5rem .25rem;
  font-size: .75rem;
}
.mobile-tabbar .tab-item i {
  font-size: 1.25rem;
  line-height: 1;
}
.mobile-tabbar .tab-item.active,
.mobile-tabbar .tab-item:focus,
.mobile-tabbar .tab-item:hover {
  color: var(--bs-primary, #0d6efd);
}
@media (min-width: 992px) {
  .mobile-tabbar { display: none; }
}

/* Utility to give content bottom room on mobile so tabbar doesn't cover it */
.has-mobile-tabbar {
  padding-bottom: 3.5rem; /* ~tabbar height */
}

/* --- NEW: ensure navbar (and its dropdowns) sit above contextual subnav --- */
.navbar.sticky-top {
  /* Bootstrap's sticky-top is 1020; raise above context subnav (1025) and tabbar (1030) */
  z-index: 1035;
}

/* Optional: raise dropdown slightly; note it cannot exceed the navbar’s stacking context */
.navbar .dropdown-menu {
  z-index: 1036; /* stays within navbar’s 1035 stacking context, but helps vs siblings */
}