/* SIAPIYA_GLOBAL_SHELL_NAVIGATION_V37048
   Global Shell & Navigation UX Wave 1.
   Visual/navigation-context only; route/permission authority remains existing JS. */

#dashboardApp{
  --siapiya-shell-border:color-mix(in srgb,var(--bs-border-color) 92%,transparent);
  --siapiya-shell-muted:color-mix(in srgb,var(--bs-body-color) 66%,transparent);
  --siapiya-shell-radius:.82rem;
}

/* Topbar page context / breadcrumb */
#dashboardApp .topbar-title-wrap{
  min-width:0;
}

#dashboardApp .topbar-breadcrumb{
  display:flex;
  align-items:center;
  gap:.28rem;
  min-width:0;
  margin-top:.08rem;
  color:var(--siapiya-shell-muted);
  font-size:.69rem;
  line-height:1.25;
}

#dashboardApp .topbar-breadcrumb span{
  overflow:hidden;
  max-width:18rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#dashboardApp .topbar-breadcrumb i{
  flex:0 0 auto;
  color:var(--bs-border-color);
  font-size:.62rem;
}

#dashboardApp .topbar-breadcrumb [aria-current="page"]{
  color:var(--bs-body-color);
  font-weight:700;
}

/* Active nav is consistent in desktop sidebar and both mobile menus. */
#dashboardApp :is(#sidebarMenu,#mobileMenu,#mobileMenuBottom) [data-siapiya-nav][data-page]{
  position:relative;
}

#dashboardApp :is(#sidebarMenu,#mobileMenu,#mobileMenuBottom) [data-siapiya-nav][data-page].active{
  font-weight:750;
}

#dashboardApp #sidebarMenu [data-siapiya-nav][data-page].active{
  box-shadow:inset 3px 0 0 var(--bs-primary);
}

#dashboardApp :is(#mobileMenu,#mobileMenuBottom) [data-siapiya-nav][data-page].active{
  box-shadow:inset 3px 0 0 var(--bs-primary);
}

/* Domain grouping: labels are applied only to the first visible item of each section. */
#dashboardApp :is(#sidebarMenu,#mobileMenu,#mobileMenuBottom) [data-siapiya-section-start="1"]{
  margin-top:1.55rem;
}

#dashboardApp :is(#sidebarMenu,#mobileMenu,#mobileMenuBottom) [data-siapiya-section-start="1"]::before{
  content:attr(data-siapiya-section-label);
  position:absolute;
  inset-inline-start:.78rem;
  top:-1.18rem;
  color:var(--siapiya-shell-muted);
  font-size:.6rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;
  pointer-events:none;
}

#dashboardApp #sidebarMenu [data-siapiya-section-start="1"]:first-of-type{
  margin-top:1.15rem;
}

/* "Lainnya" tells mobile users when the current page lives outside the four direct tabs. */
#dashboardApp #bottomNav .bottom-nav-item.is-context-active{
  color:var(--bs-primary);
}

#dashboardApp #bottomNav .bottom-nav-item.is-context-active::after{
  content:"";
  position:absolute;
  top:.34rem;
  inset-inline-end:calc(50% - 1rem);
  width:.42rem;
  height:.42rem;
  border-radius:999px;
  background:currentColor;
}

#dashboardApp #bottomNav .bottom-nav-item[data-siapiya-context-active] span::after{
  content:" •";
}

/* Shell focus clarity */
#dashboardApp :is(
  #sidebarMenu,#mobileMenu,#mobileMenuBottom,#bottomNav
) :is(a,button):focus-visible{
  outline:3px solid color-mix(in srgb,var(--bs-primary) 55%,transparent);
  outline-offset:2px;
  box-shadow:none!important;
}

/* Main frame behaves consistently across workspaces. */
#dashboardApp .siapiya-main-frame{
  min-width:0;
}

#dashboardApp #mainContent{
  min-width:0;
  scroll-margin-top:6.5rem;
}

#dashboardApp #mainContent > :first-child{
  scroll-margin-top:7rem;
}

/* Compact but clear topbar. */
#dashboardApp #appTopbar{
  border-bottom-color:var(--siapiya-shell-border);
}

#dashboardApp .topbar-page-title{
  text-wrap:balance;
}

#dashboardApp .topbar-page-subtitle{
  color:var(--siapiya-shell-muted);
}

/* Dark mode */
[data-bs-theme="dark"] #dashboardApp{
  --siapiya-shell-muted:color-mix(in srgb,var(--bs-body-color) 72%,transparent);
  --siapiya-shell-border:color-mix(in srgb,var(--bs-border-color) 96%,transparent);
}

/* Tablet/mobile */
@media (max-width:767.98px){
  #dashboardApp #appTopbar{
    gap:.48rem;
    padding-inline:.72rem;
  }

  #dashboardApp .topbar-title-wrap{
    flex:1 1 auto;
    overflow:hidden;
  }

  #dashboardApp .topbar-page-title{
    overflow:hidden;
    font-size:1rem;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #dashboardApp .topbar-page-subtitle{
    display:none;
  }

  #dashboardApp .topbar-breadcrumb{
    margin-top:.12rem;
    font-size:.65rem;
  }

  #dashboardApp .topbar-breadcrumb span{
    max-width:10.5rem;
  }

  #dashboardApp #accountMenuButton .account-meta{
    display:none;
  }

  #dashboardApp #accountMenuButton{
    min-width:2.8rem;
    min-height:2.8rem;
    padding:.35rem;
  }

  #dashboardApp :is(#mobileMenu,#mobileMenuBottom) [data-siapiya-section-start="1"]{
    margin-top:1.65rem;
  }

  #dashboardApp #mainContent{
    padding-bottom:calc(5.9rem + env(safe-area-inset-bottom));
  }
}

@media (max-width:420px){
  #dashboardApp #appTopbar{
    padding-inline:.58rem;
  }

  #dashboardApp .topbar-brand-icon{
    display:none;
  }

  #dashboardApp .topbar-breadcrumb span{
    max-width:8.2rem;
  }

  #dashboardApp :is(#mobileMenu,#mobileMenuBottom) [data-siapiya-section-start="1"]::before{
    inset-inline-start:.65rem;
    font-size:.57rem;
  }
}

/* High contrast */
@media (forced-colors:active){
  #dashboardApp #sidebarMenu [data-siapiya-nav][data-page].active,
  #dashboardApp :is(#mobileMenu,#mobileMenuBottom) [data-siapiya-nav][data-page].active{
    outline:2px solid Highlight;
    box-shadow:none;
  }

  #dashboardApp #bottomNav .bottom-nav-item.is-context-active::after{
    background:Highlight;
  }

  #dashboardApp :is(
    #sidebarMenu,#mobileMenu,#mobileMenuBottom,#bottomNav
  ) :is(a,button):focus-visible{
    outline:3px solid Highlight;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #dashboardApp :is(
    #sidebarMenu,#mobileMenu,#mobileMenuBottom,#bottomNav
  ) *{
    transition:none!important;
    scroll-behavior:auto!important;
  }
}