@layer barberSidebar217 {
/* One header row for the toggle and brand. The same slots remain when collapsed. */
#app .side,#app.sideCollapsed208 .side{
 position:fixed!important;inset:0 auto 0 0!important;height:100dvh!important;
 width:222px!important;padding:16px 10px 14px!important;transform:none!important;
 display:flex!important;flex-direction:column!important;gap:4px!important;
 overflow:hidden!important;cursor:default!important;
}
#app.sideCollapsed208 .side{width:76px!important}
#app .sideHeader217{
 flex:0 0 88px!important;height:88px!important;min-height:88px!important;
 margin:0 10px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;
 grid-template-rows:44px 32px!important;gap:12px!important;align-items:center!important;
}
#app .sideToggle208{
 position:static!important;grid-column:1!important;grid-row:1!important;
 width:44px!important;height:44px!important;min-width:44px!important;
 padding:0!important;display:grid!important;place-items:center!important;
 margin:0!important;line-height:1!important;font-size:16px!important;
}
#app .sideHeader217 .brand{
 grid-column:2!important;grid-row:1!important;display:block!important;
 font-size:21px!important;white-space:nowrap!important;letter-spacing:-.7px!important;
}
#app .sideHeader217 .eyebrow{
 grid-column:1 / -1!important;grid-row:2!important;display:block!important;
 margin:0!important;height:32px!important;line-height:16px!important;
 font-size:11px!important;letter-spacing:2px!important;overflow:hidden!important;
}
#app .nav{
 flex:1 1 auto!important;min-height:0!important;display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:50px!important;gap:6px!important;align-content:start!important;
 overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:thin;
}
#app.sideCollapsed208 .nav{scrollbar-width:none!important}
#app.sideCollapsed208 .nav::-webkit-scrollbar{display:none!important}
#app .nav button,#app.sideCollapsed208 .nav button{
 display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;
 align-items:center!important;height:50px!important;min-height:50px!important;
 max-height:50px!important;min-width:0!important;font-size:16px!important;gap:0!important;padding:0 4px!important;
 justify-content:start!important;text-align:left!important;white-space:nowrap!important;
}
#app .nav button svg{
 grid-column:1!important;grid-row:1!important;justify-self:center!important;
 width:24px!important;height:24px!important;min-width:24px!important;
}
#app .nav button span{
 grid-column:2!important;grid-row:1!important;display:block!important;
 white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#app.sideCollapsed208 .sideHeader217 .brand,
#app.sideCollapsed208 .sideHeader217 .eyebrow,
#app.sideCollapsed208 .nav button span{visibility:hidden!important;pointer-events:none!important}
#app .side footer{
 flex:0 0 auto!important;display:grid!important;gap:8px!important;
 margin:8px 0 0!important;font-size:12px!important;min-width:0!important;
}
#app .side footer>span{
 display:block!important;height:16px!important;max-width:100%!important;
 line-height:16px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#app.sideCollapsed208 .side footer>span{visibility:hidden!important}
#app .side footer button{
 margin:0!important;width:100%!important;height:32px!important;
 padding:4px 2px!important;font-size:12px!important;
}
#app .main{margin-left:222px!important}
#app.sideCollapsed208 .main{margin-left:76px!important}
@media(max-width:760px){
 #app .side{width:230px!important}
 #app .main,#app.sideCollapsed208 .main{margin-left:76px!important}
}
@media(prefers-reduced-motion:reduce){#app .side{transition:none!important}}
}