/* SLPT-R28-B16PWA6-SMART-SIDEBAR-OPTION3-20260830
   Approved Option 3: compact icon rail + grouped smart drawer.
   Additive navigation presentation only. No content contrast changes.
   Existing route/RBAC/navigation handlers remain authoritative.
*/

/* Base group controls. Keep all navigation nodes as DIRECT #nav children so
   inherited ensureNav() insertBefore() contracts remain valid. */
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  min-height:34px!important;
  height:34px!important;
  margin:5px 0 2px!important;
  padding:5px 9px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#64748b!important;
  text-align:left!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:hover,
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:focus-visible{
  background:rgba(71,91,128,.075)!important;
  color:#334155!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle.r28pwa6-empty{display:none!important}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 28px!important;
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  max-width:28px!important;
  margin:0!important;
  padding:0!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.68)!important;
  border:1px solid rgba(100,116,139,.16)!important;
  color:#475569!important;
  font-size:14px!important;
  line-height:1!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-label{
  display:block!important;
  flex:1 1 auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  text-transform:inherit!important;
  color:inherit!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-chevron{
  display:block!important;
  flex:0 0 auto!important;
  width:14px!important;
  max-width:14px!important;
  margin-left:auto!important;
  padding:0!important;
  color:#94a3b8!important;
  font-size:15px!important;
  line-height:1!important;
  transform:rotate(-90deg)!important;
  transition:transform .16s ease!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle[aria-expanded="true"] .r28pwa6-group-chevron{
  transform:rotate(0deg)!important;
}

/* Group collapse owns presentation only; role visibility remains inherited. */
#appView #nav.r28pwa6-ready[data-r28pwa6-work-open="false"] > button[data-r28pwa6-group="work"],
#appView #nav.r28pwa6-ready[data-r28pwa6-centres-open="false"] > button[data-r28pwa6-group="centres"],
#appView #nav.r28pwa6-ready[data-r28pwa6-admin-open="false"] > button[data-r28pwa6-group="admin"],
#appView #nav.r28pwa6-ready[data-r28pwa6-more-open="false"] > button[data-r28pwa6-group="more"]{
  display:none!important;
}

/* Contextual Plans & Users sub-navigation: only while that workspace is active. */
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]{
  display:none!important;
  min-height:31px!important;
  height:31px!important;
  margin:0 0 1px 38px!important;
  width:calc(100% - 38px)!important;
  padding:5px 8px 5px 10px!important;
  border-radius:8px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#64748b!important;
  font-size:10.5px!important;
  font-weight:680!important;
  line-height:1.15!important;
}
#appView #nav.r28pwa6-ready[data-r28pwa6-pu-context="true"][data-r28pwa6-admin-open="true"] > button[data-r28pwa6-pu-tab]:not(.hidden){
  display:flex!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:999px;
  background:#cbd5e1;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab].active{
  background:rgba(78,91,183,.08)!important;
  color:#4f46a5!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab].active::before{background:#6366f1}

/* Expanded drawer: route items are visually subordinate to group controls. */
#appView #nav.r28pwa6-ready > button[data-r28pwa6-group]:not([data-page="dashboard"]):not([data-r28pwa6-pu-tab]){
  margin-top:0!important;
  margin-bottom:1px!important;
}

/* Desktop collapsed rail: Dashboard + four group controls only.
   Clicking a group control expands the existing professional sidebar and opens
   that group. This preserves the established global sidebar collapse owner. */
@media (min-width:901px){
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > button[data-r28pwa6-group],
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]{
    display:none!important;
  }
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:not(.r28pwa6-empty){
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:3px auto!important;
    padding:0!important;
    border-radius:12px!important;
  }
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-icon{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
  }
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-label,
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-chevron{
    display:none!important;
  }
}

/* Tablet / phone drawer. B16UX6 remains the canonical drawer geometry owner;
   this layer only owns grouping and readable group controls. */
@media (max-width:900px){
  #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle,
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:38px!important;
    height:38px!important;
    margin:7px 0 2px!important;
    padding:5px 8px!important;
  }
  #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-icon,
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-icon{
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
  }
  #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-label,
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-label,
  #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-chevron,
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-chevron{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  #appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab],
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]{
    margin-left:39px!important;
    width:calc(100% - 39px)!important;
    max-width:calc(100% - 39px)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-chevron{transition:none!important}
}