/* JUST AQAR — Unified Bottom Nav V30
   This component owns its complete appearance.
   It no longer depends on page-specific CSS, so services/home/dashboard match exactly.
*/

:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-nav-h: 68px;
}

/* Exact homepage visual language + exact 4-column role distribution */
.app-bottom-nav.ja-nav-v30{
  position:fixed !important;
  right:12px !important;
  left:12px !important;
  bottom:calc(var(--safe-bottom) + 10px) !important;
  z-index:6000 !important;

  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:var(--bottom-nav-h) !important;
  min-height:var(--bottom-nav-h) !important;
  max-height:var(--bottom-nav-h) !important;

  margin:0 !important;
  padding:0 10px !important;

  border:1px solid rgba(255,255,255,.55) !important;
  border-radius:30px !important;
  background:rgba(255,255,255,.76) !important;

  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
  box-shadow:0 18px 35px rgba(2,52,58,.14) !important;

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

  transform:none !important;
  overflow:visible !important;
}

.app-bottom-nav.ja-nav-v30 > a{
  position:relative !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:56px !important;
  min-height:56px !important;

  margin:0 !important;
  padding:0 4px !important;

  border:0 !important;
  border-radius:20px !important;
  background:transparent !important;
  box-shadow:none !important;

  color:var(--muted,#7c8b87) !important;
  text-decoration:none !important;

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

  flex:none !important;
  transform:none !important;
  overflow:hidden !important;
  transition:.2s ease !important;
}

.app-bottom-nav.ja-nav-v30 > a img,
.app-bottom-nav.ja-nav-v30 > a .nav-icon{
  display:block !important;
  width:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  max-height:22px !important;

  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

.app-bottom-nav.ja-nav-v30 > a > span{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;

  color:currentColor !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* long broker label: keep full wording usable without changing the bar geometry */
.app-bottom-nav.ja-nav-v30 > a[href*="broker_clients"] > span{
  font-size:8.5px !important;
  letter-spacing:-.2px !important;
}

.app-bottom-nav.ja-nav-v30 > a.active{
  color:var(--primary,#02343a) !important;
  background:rgba(25,188,149,.12) !important;
}

.app-bottom-nav.ja-nav-v30 > a:hover,
.app-bottom-nav.ja-nav-v30 > a:focus,
.app-bottom-nav.ja-nav-v30 > a:active{
  box-shadow:none !important;
  transform:none !important;
}

@media (max-width:390px){
  .app-bottom-nav.ja-nav-v30{
    right:9px !important;
    left:9px !important;
    padding-inline:6px !important;
  }

  .app-bottom-nav.ja-nav-v30 > a > span{
    font-size:9px !important;
  }

  .app-bottom-nav.ja-nav-v30 > a[href*="broker_clients"] > span{
    font-size:7.8px !important;
  }
}

/* Same behavior as the homepage: bottom nav is app/tablet only. */
@media (min-width:1100px){
  .app-bottom-nav.ja-nav-v30{
    display:none !important;
  }
}