/* Grouped sidebar navigation */
.sidebar{gap:22px}
nav{display:flex;flex-direction:column;gap:2px}
.nav-item{padding:7px 12px!important;gap:11px;font-size:14px;border-radius:9px;min-height:36px}
.nav-item .nav-icon{flex:none;width:20px;height:20px;font-size:0;display:grid;place-items:center;color:#9a9fa9}
.nav-item .nav-icon svg{width:19px;height:19px}
.nav-item .nav-label{font-size:inherit;width:auto;text-align:left;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover .nav-icon{color:#6c717c}
.nav-item.active .nav-icon{color:#e97913}
.nav-group{margin-top:10px}
.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:none;padding:6px 12px;border-radius:8px;font:700 12px Outfit,'IBM Plex Sans Thai',sans-serif;letter-spacing:0;color:#9a9fa9}
.nav-group-toggle:hover{color:#6c717c;background:#f8f9fa}
.nav-group-toggle .chevron{width:15px;height:15px;transition:transform .15s ease}
.nav-group-toggle[aria-expanded="false"] .chevron{transform:rotate(-90deg)}
.nav-group-items{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.nav-group.collapsed .nav-group-items{display:none}
.nav-group.has-active .nav-group-toggle{color:#e97913}
.nav-divider{height:1px;background:#eff0f2;margin:12px 8px}
/* Icon rail on narrow screens: every item visible, headings become thin dividers */
@media(max-width:900px){
  .nav-item{justify-content:center;padding:9px 0!important}
  .nav-item .nav-label{display:none}
  .nav-item .nav-icon svg{width:21px;height:21px}
  .nav-group{margin-top:6px;padding-top:6px;border-top:1px solid #eff0f2}
  .nav-group-toggle{display:none}
  .nav-group.collapsed .nav-group-items{display:flex}
  .nav-divider{margin:6px 4px}
  .user-chip{justify-content:center}.user-chip>span:last-child{display:none}
}
main{align-self:start;margin:0 auto}