.sidebar{border-right:1px solid var(--border-color);z-index:100;background:var(--bg-surface);border-top:none;border-bottom:none;border-left:none;border-radius:0;flex-direction:column;width:250px;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border-color);white-space:nowrap;padding:1.75rem 1.5rem}.logo-icon{flex-shrink:0;margin-right:.75rem}.logo-text{background:linear-gradient(135deg,#22c55e,#10b981);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.sidebar-nav{flex-direction:column;flex:1;gap:.25rem;padding:1.5rem .75rem;display:flex;overflow:hidden auto}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);transition:var(--transition);cursor:pointer;text-align:left;white-space:nowrap;background:0 0;border:none;align-items:center;width:100%;padding:.625rem .875rem;font-size:.875rem;font-weight:500;display:flex;overflow:hidden}.nav-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.nav-item.active{background:var(--accent-primary-subtle,#3b82f61a);color:var(--accent-primary);font-weight:600}.nav-icon{flex-shrink:0;width:20px;height:20px;margin-right:.875rem}.nav-label{opacity:1;transition:opacity .2s;overflow:hidden}.sidebar-footer{border-top:1px solid var(--border-color);flex-direction:column;gap:.25rem;padding:.75rem;display:flex}.sidebar-toggle{color:var(--text-muted)}.sidebar-toggle:hover{color:var(--accent-primary);background:var(--accent-primary-subtle)}.btn-logout{color:var(--text-muted)}.btn-logout:hover{color:var(--accent-danger);background:var(--accent-danger-subtle)}.sidebar-sync:hover{background:var(--accent-primary-subtle);color:var(--accent-primary)}.sidebar-sync.syncing{color:var(--accent-primary);pointer-events:none}.sidebar-collapsed{width:72px}.sidebar-collapsed .sidebar-header{justify-content:center;padding:1.5rem 0;display:flex}.sidebar-collapsed .logo-icon{margin-right:0}.sidebar-collapsed .nav-label{opacity:0;width:0;overflow:hidden}.sidebar-collapsed .sidebar-nav{align-items:center;padding:1.5rem .5rem}.sidebar-collapsed .nav-item{justify-content:center;width:48px;padding:.75rem}.sidebar-collapsed .nav-icon{margin-right:0}.sidebar-collapsed .sidebar-footer{align-items:center}.app-layout{min-height:100vh;display:flex;overflow-x:hidden}.main-content{padding:var(--page-padding);flex:1;min-width:0;margin-left:250px;transition:margin-left .3s cubic-bezier(.4,0,.2,1),padding-bottom .3s cubic-bezier(.4,0,.2,1);overflow-x:hidden}.sidebar-is-collapsed .main-content{margin-left:72px}.mobile-scroll-arrow,.mobile-extra-item{display:none}@media (max-width:768px){.app-layout{flex-direction:column}.main-content,.sidebar-is-collapsed .main-content{padding:var(--page-padding);min-width:0;margin-left:0;padding-bottom:80px}.sidebar,.sidebar.sidebar-collapsed{border-right:none;border-top:1px solid var(--border-color);z-index:999;flex-direction:row;height:64px;position:fixed;top:auto;bottom:0;overflow:hidden;width:100%!important}.sidebar-header,.sidebar-footer{display:none!important}.mobile-scroll-arrow{width:32px;color:var(--text-secondary);cursor:pointer;z-index:2;opacity:.6;background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:opacity .15s,background .15s;display:flex;position:absolute;top:0;bottom:0}.mobile-scroll-arrow:hover,.mobile-scroll-arrow:active{opacity:1}.mobile-scroll-left{left:0}.mobile-scroll-right{right:0}.sidebar-nav,.sidebar-collapsed .sidebar-nav{scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;flex-flow:row;align-items:center;gap:0;width:100%;height:64px;padding:0;overflow:auto hidden}.sidebar-nav::-webkit-scrollbar{display:none}.mobile-extra-item{cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;display:flex}.nav-item,.sidebar-collapsed .nav-item{scroll-snap-align:start;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:.15rem;width:25%;min-width:25%;padding:.35rem 0;font-size:.6rem}.sidebar-nav .nav-item:nth-child(4n+1){scroll-snap-align:start}.nav-icon,.sidebar-collapsed .nav-icon{width:20px;height:20px;margin-bottom:2px;margin-right:0}.nav-label,.sidebar-collapsed .nav-label{opacity:1;width:auto;overflow:visible}.mobile-logout-btn{color:var(--error-color,#ef4444)!important}}
