/* SLPT-R28-B16PWA9-SMART-SIDEBAR-VISUAL-REFINEMENT-20260830
   Approved visual refinement derived from selected Preview 2.
   Presentation only: no route, role, event, data, state, or layout-owner changes.
   The existing SLPT burgundy identity remains canonical.
*/

/* ---------- visual tokens scoped to the smart sidebar ---------- */
#appView #nav.r28pwa6-ready{
  --r28pwa9-burgundy:#a32e3a;
  --r28pwa9-burgundy-dark:#852630;
  --r28pwa9-burgundy-soft:rgba(163,46,58,.075);
  --r28pwa9-burgundy-border:rgba(163,46,58,.20);
  --r28pwa9-ink:#253247;
  --r28pwa9-muted:#66758b;
  --r28pwa9-border:rgba(100,116,139,.14);
  --r28pwa9-surface:rgba(255,255,255,.72);
  --r28pwa9-surface-strong:rgba(255,255,255,.92);
}

/* ---------- clearer group hierarchy ---------- */
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle{
  min-height:40px!important;
  height:40px!important;
  margin:8px 0 3px!important;
  padding:5px 7px!important;
  gap:9px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  color:var(--r28pwa9-muted)!important;
  font-size:10.5px!important;
  letter-spacing:.095em!important;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease!important;
}
#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;
  border-radius:9px!important;
  background:var(--r28pwa9-surface-strong)!important;
  border:1px solid var(--r28pwa9-border)!important;
  box-shadow:0 1px 2px rgba(15,23,42,.035)!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:hover,
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:focus-visible{
  background:rgba(255,255,255,.60)!important;
  border-color:var(--r28pwa9-border)!important;
  color:var(--r28pwa9-ink)!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle[aria-expanded="true"]{
  background:var(--r28pwa9-burgundy-soft)!important;
  border-color:var(--r28pwa9-burgundy-border)!important;
  color:var(--r28pwa9-burgundy-dark)!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle[aria-expanded="true"] .r28pwa6-group-icon{
  color:var(--r28pwa9-burgundy-dark)!important;
  border-color:var(--r28pwa9-burgundy-border)!important;
  background:rgba(255,255,255,.88)!important;
}
#appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-chevron{
  width:16px!important;
  max-width:16px!important;
  color:#8d9aae!important;
  font-size:14px!important;
}

/* ---------- route-card rhythm and active state ---------- */
#appView #nav.r28pwa6-ready > button[data-r28pwa6-group]:not([data-r28pwa6-pu-tab]){
  min-height:44px!important;
  margin:0 0 4px!important;
  border-radius:11px!important;
  border:1px solid rgba(100,116,139,.105)!important;
  background:rgba(255,255,255,.64)!important;
  box-shadow:0 1px 2px rgba(15,23,42,.025)!important;
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-group]:not([data-r28pwa6-pu-tab]):hover,
#appView #nav.r28pwa6-ready > button[data-r28pwa6-group]:not([data-r28pwa6-pu-tab]):focus-visible{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(100,116,139,.18)!important;
  box-shadow:0 2px 7px rgba(15,23,42,.055)!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-group].active:not([data-r28pwa6-pu-tab]){
  background:rgba(163,46,58,.085)!important;
  border-color:rgba(163,46,58,.22)!important;
  box-shadow:inset 3px 0 0 var(--r28pwa9-burgundy),0 2px 7px rgba(87,24,33,.045)!important;
  color:var(--r28pwa9-burgundy-dark)!important;
}

/* ---------- Plans & Users contextual entries ---------- */
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]{
  min-height:36px!important;
  height:auto!important;
  margin:0 4px 3px 42px!important;
  width:calc(100% - 46px)!important;
  padding:7px 9px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  color:#69788d!important;
  font-size:10.75px!important;
  font-weight:690!important;
  line-height:1.16!important;
  background:transparent!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]:hover,
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]:focus-visible{
  background:rgba(255,255,255,.68)!important;
  border-color:rgba(100,116,139,.12)!important;
  color:#39475d!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]::before{
  width:6px!important;
  height:6px!important;
  flex-basis:6px!important;
  background:#c4cedb!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab].active{
  background:rgba(163,46,58,.07)!important;
  border-color:rgba(163,46,58,.14)!important;
  color:var(--r28pwa9-burgundy-dark)!important;
}
#appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab].active::before{
  background:var(--r28pwa9-burgundy)!important;
}

/* ---------- collapsed desktop rail ---------- */
@media (min-width:901px){
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:not(.r28pwa6-empty){
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:5px auto!important;
    border-radius:13px!important;
    border:1px solid transparent!important;
    background:transparent!important;
  }
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:not(.r28pwa6-empty):hover,
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle:not(.r28pwa6-empty):focus-visible{
    background:rgba(255,255,255,.78)!important;
    border-color:var(--r28pwa9-border)!important;
  }
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle .r28pwa6-group-icon{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
    border-radius:10px!important;
  }
}

/* ---------- tablet / PWA touch polish ---------- */
@media (max-width:900px){
  #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle,
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle{
    min-height:44px!important;
    height:44px!important;
    margin:8px 0 3px!important;
    padding:6px 8px!important;
    border-radius:12px!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:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
  }
  #appView #nav.r28pwa6-ready > button[data-r28pwa6-group]:not([data-r28pwa6-pu-tab]),
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > button[data-r28pwa6-group]:not([data-r28pwa6-pu-tab]){
    min-height:46px!important;
    margin-bottom:5px!important;
    border-radius:12px!important;
  }
  #appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab],
  html[data-sidebar-collapsed="true"] #appView #nav.r28pwa6-ready > button[data-r28pwa6-pu-tab]{
    min-height:42px!important;
    margin-left:42px!important;
    margin-right:3px!important;
    width:calc(100% - 45px)!important;
    max-width:calc(100% - 45px)!important;
    padding:8px 10px!important;
    font-size:11px!important;
  }
}

/* Keyboard focus stays visible without changing the pointer-event owner. */
#appView #nav.r28pwa6-ready > button:focus-visible{
  outline:2px solid rgba(163,46,58,.36)!important;
  outline-offset:2px!important;
}

/* Motion remains restrained and can be disabled at OS level. */
@media (prefers-reduced-motion:reduce){
  #appView #nav.r28pwa6-ready > .r28pwa6-group-toggle,
  #appView #nav.r28pwa6-ready > button[data-r28pwa6-group]{
    transition:none!important;
  }
}