/* sidebar-nav.css */
.nav{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--sidebar-border) transparent;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:var(--sidebar-border);border-radius:999px}
.nav-title{font-size:13px;font-weight:700;color:var(--sidebar-text-group);letter-spacing:.4px;padding:0 16px;margin:8px 10px 4px;height:44px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--sidebar-border);border-radius:8px;text-align:left;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .25s ease,border-color .25s ease;position:relative;box-sizing:border-box}
.nav-title:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.nav-title::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-green);border-radius:8px 0 0 8px;opacity:.6;transition:opacity .25s}
.nav-title:hover::before{opacity:1}
.nav-title::after{content:"\25B8";font-size:14px;opacity:.5;transition:transform .3s ease,opacity .25s;flex-shrink:0}
.nav-title:hover::after{opacity:.8}
.nav-title.expanded::after{content:"\25BE";opacity:.7}
.nav-section-items{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease,padding .25s ease;padding:0}
.nav-section-items.expanded{max-height:600px;opacity:1;padding:4px 0}
.nav button{display:flex;align-items:center;width:calc(100% - 20px);margin:2px 10px;border:none;background:transparent;color:var(--sidebar-text);padding:0 14px;height:44px;font-size:13px;font-weight:500;text-align:left;cursor:pointer;gap:10px;border-radius:8px;position:relative;transition:all .25s ease;-webkit-tap-highlight-color:transparent;line-height:1.3;box-sizing:border-box}
.nav button::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--brand-green-light);border-radius:0 3px 3px 0;transition:transform .25s ease}
.nav button:hover{background:rgba(255,255,255,.06);color:var(--sidebar-active)}
.nav button:hover::before{transform:translateY(-50%) scaleY(1)}
.nav button:active{transform:scale(.98);background:rgba(255,255,255,.08)}
.nav button.active{color:var(--sidebar-active);font-weight:600;background:var(--sidebar-active-bg)}
.nav button.active::before{transform:translateY(-50%) scaleY(1);background:var(--brand-green);height:70%}
.nav button svg,.nav button .nav-icon{flex-shrink:0;width:18px;height:18px;opacity:.7;transition:opacity .2s,transform .2s}
.nav button:hover svg,.nav button:hover .nav-icon,.nav button.active svg,.nav button.active .nav-icon{opacity:1}
.nav button .nav-badge{margin-left:auto;min-width:20px;height:20px;border-radius:999px;background:var(--danger-red);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.nav button .nav-badge.blue{background:var(--brand-green-light)}
.sidebar-divider{height:1px;background:var(--sidebar-border);flex-shrink:0;margin:6px 20px}
@keyframes navItemSlideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.nav-section-items.expanded button{animation:navItemSlideIn .25s ease forwards}
.nav-section-items.expanded button:nth-child(1){animation-delay:.02s}
.nav-section-items.expanded button:nth-child(2){animation-delay:.04s}
.nav-section-items.expanded button:nth-child(3){animation-delay:.06s}
.nav-section-items.expanded button:nth-child(4){animation-delay:.08s}
.nav-section-items.expanded button:nth-child(5){animation-delay:.1s}
.nav-section-items.expanded button:nth-child(6){animation-delay:.12s}
.nav-section-items.expanded button:nth-child(7){animation-delay:.14s}
.nav-section-items.expanded button:nth-child(8){animation-delay:.16s}
.nav-title:focus-visible,.nav button:focus-visible{outline:2px solid var(--brand-green-light);outline-offset:2px}
@media(max-width:768px){.nav button{height:48px;font-size:14px;padding:0 16px}.nav-title{height:48px;font-size:14px}}
@media(max-width:375px){.nav button{height:46px;font-size:13px}.nav-title{height:46px;font-size:13px}}
@media(min-width:769px) and (max-width:1024px){.nav button{height:42px;font-size:12px}.nav-title{height:42px;font-size:12px}}