/* SIAPIYA_GLOBAL_SHELL_FINAL_A11Y_V37051
   Global Shell & Navigation UX Wave 4 — Final Consistency & Accessibility Polish.
   CSS/landmark polish only; existing routing, permissions, Quick Access, and command palette remain authority. */

html{
  scroll-padding-top:5.75rem;
}

#dashboardApp{
  --siapiya-shell-final-touch:2.75rem;
  --siapiya-shell-final-gap:.65rem;
  --siapiya-shell-final-surface:color-mix(in srgb,var(--bs-body-bg) 96%,var(--bs-tertiary-bg));
}

/* Skip link: first keyboard escape hatch after dashboard becomes visible. */
#dashboardApp .siapiya-skip-link{
  position:fixed;
  z-index:1095;
  top:.5rem;
  inset-inline-start:.5rem;
  transform:translateY(-160%);
  padding:.55rem .72rem;
  border:2px solid var(--bs-primary);
  border-radius:.62rem;
  background:var(--bs-body-bg);
  color:var(--bs-primary);
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 .45rem 1.25rem rgba(15,23,42,.16);
}

#dashboardApp .siapiya-skip-link:focus{
  transform:translateY(0);
}

/* Stable shell rhythm */
#dashboardApp .content-area{
  min-width:0;
}

#dashboardApp #appTopbar{
  min-height:4.35rem;
  gap:var(--siapiya-shell-final-gap);
  padding-block:.55rem;
}

#dashboardApp #appTopbar > *{
  min-width:0;
}

#dashboardApp #mainContent{
  min-height:calc(100dvh - 6rem);
  padding-block-start:.8rem;
}

#dashboardApp #mainContent:focus{
  outline:none;
}

#dashboardApp #mainContent:focus-visible{
  outline:3px solid color-mix(in srgb,var(--bs-primary) 48%,transparent);
  outline-offset:-3px;
  border-radius:.7rem;
}

/* Unified touch target for shell controls without changing business buttons inside page content. */
#dashboardApp :is(
  #appTopbar,
  #sidebarMenu,
  #bottomNav,
  #mobileMenu,
  #mobileMenuBottom
) :is(a,button){
  min-block-size:var(--siapiya-shell-final-touch);
}

/* Desktop navigation consistency */
#dashboardApp #sidebarMenu{
  overscroll-behavior:contain;
}

#dashboardApp #sidebarMenu > div{
  padding-bottom:1rem;
}

#dashboardApp #sidebarMenu [data-siapiya-nav][data-page]{
  display:flex;
  align-items:center;
  gap:.62rem;
  min-height:2.8rem;
}

#dashboardApp #sidebarMenu [data-siapiya-nav][data-page] > i{
  flex:0 0 1.15rem;
  text-align:center;
}

/* Bottom-nav final geometry and safe area */
#dashboardApp #bottomNav{
  min-height:calc(4.35rem + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
}

#dashboardApp #bottomNav .bottom-nav-item{
  position:relative;
  min-width:0;
  padding-block:.42rem;
}

#dashboardApp #bottomNav .bottom-nav-item span{
  overflow:hidden;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Bottom sheet / mobile drawer respect device safe areas. */
#dashboardApp #mobileMenuBottom .offcanvas-body{
  padding-bottom:max(1rem,env(safe-area-inset-bottom));
}

#mobileMenu .offcanvas-body{
  padding-bottom:max(1rem,env(safe-area-inset-bottom));
}

/* Quick Access and account menu share final surface geometry. */
#dashboardApp :is(
  .siapiya-quick-nav-panel,
  #accountMenuButton + .dropdown-menu
){
  border-color:var(--siapiya-shell-border);
  border-radius:.92rem;
}

#dashboardApp :is(
  .siapiya-quick-nav-button,
  #accountMenuButton
){
  min-block-size:var(--siapiya-shell-final-touch);
}

/* Generic shell loading / empty / error presentation.
   These selectors only style existing states; they do not infer business outcomes. */
#dashboardApp #mainContent :is(.alert-danger,.alert-warning,.alert-info,.alert-success){
  border-radius:.82rem;
  line-height:1.45;
}

#dashboardApp #mainContent :is(.alert-danger,.alert-warning) :is(a,button,.btn){
  min-block-size:2.65rem;
}

#dashboardApp #mainContent td[colspan].text-center{
  padding-block:1.1rem;
}

#dashboardApp #mainContent td[colspan].text-center :is(.spinner-border,.spinner-grow){
  margin-inline-end:.35rem;
}

#dashboardApp #mainContent :is(.spinner-border,.spinner-grow)[role="status"]{
  vertical-align:-.125em;
}

#dashboardApp #mainContent :is(
  .text-muted,
  .text-secondary
).small{
  line-height:1.45;
}

/* Focus consistency across every global navigation surface. */
#dashboardApp :is(
  #appTopbar,
  #sidebarMenu,
  #bottomNav,
  #mobileMenu,
  #mobileMenuBottom,
  .siapiya-quick-nav-panel
) :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--bs-primary) 58%,transparent);
  outline-offset:2px;
  box-shadow:none!important;
}

/* Active navigation remains perceivable beyond color. */
#dashboardApp :is(
  #sidebarMenu,
  #mobileMenu,
  #mobileMenuBottom
) [data-siapiya-nav][data-page].active{
  text-decoration-thickness:.12em;
  text-underline-offset:.2em;
}

#dashboardApp #bottomNav .bottom-nav-item.active span{
  font-weight:800;
}

/* Preserve readable shell while zoomed / narrow. */
@media (max-width:991.98px){
  #dashboardApp #appTopbar{
    min-height:4rem;
  }

  #dashboardApp #mainContent{
    min-height:calc(100dvh - 8.7rem);
  }
}

@media (max-width:767.98px){
  html{
    scroll-padding-top:4.75rem;
  }

  #dashboardApp #appTopbar{
    position:sticky;
    top:0;
    z-index:1025;
    min-height:3.85rem;
    padding-top:max(.48rem,env(safe-area-inset-top));
    background:color-mix(in srgb,var(--bs-body-bg) 94%,transparent);
    backdrop-filter:saturate(135%) blur(12px);
  }

  #dashboardApp #mainContent{
    min-height:calc(100dvh - 9rem);
    padding-top:.62rem;
    padding-bottom:calc(6.25rem + env(safe-area-inset-bottom));
  }

  #dashboardApp #bottomNav{
    padding-inline:max(.22rem,env(safe-area-inset-left)) max(.22rem,env(safe-area-inset-right));
  }

  #dashboardApp :is(#mobileMenu,#mobileMenuBottom) .btn-close{
    min-width:2.75rem;
    min-height:2.75rem;
  }

  #dashboardApp .siapiya-skip-link{
    top:max(.4rem,env(safe-area-inset-top));
    inset-inline-start:max(.4rem,env(safe-area-inset-left));
  }
}

@media (max-width:420px){
  #dashboardApp #appTopbar{
    gap:.32rem;
  }

  #dashboardApp #bottomNav .bottom-nav-item{
    font-size:.68rem;
  }

  #dashboardApp #bottomNav .bottom-nav-item i{
    font-size:1rem;
  }

  #dashboardApp #mainContent{
    padding-inline:.52rem;
  }
}

/* Dark mode */
[data-bs-theme="dark"] #dashboardApp .siapiya-skip-link{
  background:var(--bs-body-bg);
  box-shadow:0 .55rem 1.4rem rgba(0,0,0,.32);
}

[data-bs-theme="dark"] #dashboardApp #appTopbar{
  border-bottom-color:color-mix(in srgb,var(--bs-border-color) 90%,transparent);
}

/* Windows/high-contrast and other forced-color environments. */
@media (forced-colors:active){
  #dashboardApp .siapiya-skip-link{
    border-color:Highlight;
    background:Canvas;
    color:LinkText;
    box-shadow:none;
  }

  #dashboardApp #mainContent:focus-visible,
  #dashboardApp :is(
    #appTopbar,
    #sidebarMenu,
    #bottomNav,
    #mobileMenu,
    #mobileMenuBottom,
    .siapiya-quick-nav-panel
  ) :is(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:3px solid Highlight;
  }

  #dashboardApp :is(
    #sidebarMenu,
    #mobileMenu,
    #mobileMenuBottom
  ) [data-siapiya-nav][data-page].active{
    outline:2px solid Highlight;
  }
}

/* Respect reduced-motion without changing component state. */
@media (prefers-reduced-motion:reduce){
  #dashboardApp .siapiya-skip-link,
  #dashboardApp #appTopbar,
  #dashboardApp #bottomNav,
  #dashboardApp :is(
    #sidebarMenu,
    #mobileMenu,
    #mobileMenuBottom,
    .siapiya-quick-nav-panel
  ) *{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}