/* Shared application frame. Page-specific layouts cannot resize navigation. */
.app-shell{--shell-sidebar:190px;--shell-gutter:16px}
.app-shell.sidebar-folded{--shell-sidebar:64px}
.app-shell .sidebar{width:var(--shell-sidebar);padding:24px 12px}
.app-shell .brand{font-size:24px;gap:8px;padding:0 12px 0 10px;line-height:36px}
.app-shell .workspace-label{margin:34px 10px 13px;font-size:9px;letter-spacing:1.4px}
.app-shell .sidebar .nav{font-size:12px;line-height:18px;padding:11px 10px;gap:10px;border-radius:6px}
.app-shell .sidebar .nav-submenu{padding:3px 0 6px 26px}
.app-shell .sidebar .nav-submenu .nav{font-size:12px;line-height:18px;padding:9px 12px;margin:2px 0}
.app-shell .sidebar-footer{margin-top:auto;font-size:9px}
.app-shell main{margin-left:var(--shell-sidebar);width:calc(100% - var(--shell-sidebar));max-width:none;padding:12px var(--shell-gutter);height:100dvh;scrollbar-gutter:stable}
.app-shell:not(.compact-workspace) main{overflow:auto}
.app-shell .sidebar-toggle{top:27px;right:12px;width:22px;height:25px;font-size:24px}
.app-shell.sidebar-folded .sidebar{padding-left:9px;padding-right:9px}
.app-shell.sidebar-folded .sidebar .brand{padding:0;justify-content:center;margin-bottom:55px}
.app-shell.sidebar-folded .sidebar .nav{justify-content:center;padding:11px 8px;font-size:18px}
.app-shell.sidebar-folded .sidebar-toggle{top:64px;right:20px}
.app-shell.sidebar-folded .sidebar .nav-submenu .nav{justify-content:flex-start;font-size:12px;padding:9px 12px}
/* Use compact typography in purchasing without constraining long forms to a table viewport. */
.app-shell.purchase-workspace h1{font-size:20px;line-height:1.3;letter-spacing:-.4px}
.app-shell.purchase-workspace .page-title{margin:16px 0 18px}
.app-shell.purchase-workspace .editor{font-size:13px}
.app-shell.purchase-workspace main>header{height:40px;font-size:12px;margin-bottom:6px}
.app-shell.purchase-workspace main>header .button{font-size:12px;padding:6px 12px}
@media(min-width:701px) and (max-width:800px){
 .app-shell{--shell-sidebar:64px}
 .app-shell .sidebar{padding-left:9px;padding-right:9px}
 .app-shell .sidebar .brand>span,.app-shell .workspace-label,.app-shell .sidebar .nav>span,.app-shell .sidebar-footer{display:none}
 .app-shell .sidebar .brand{justify-content:center;padding:0;margin-bottom:25px}
 .app-shell .sidebar .nav{justify-content:center;font-size:18px}
 .app-shell .sidebar-toggle{display:none}
 .app-shell .sidebar .nav-group[open] .nav-submenu{display:none;position:absolute;left:54px;top:0;width:215px;background:#fff;border:1px solid #e2e3ea;border-radius:8px;padding:8px;z-index:90;box-shadow:0 8px 28px #171a3020}
 .app-shell .sidebar .nav-group[open]:hover .nav-submenu,.app-shell .sidebar .nav-group[open]:focus-within .nav-submenu{display:block}
 .app-shell .sidebar .nav-submenu .nav{justify-content:flex-start;font-size:12px}
 .app-shell .sidebar .nav-submenu .nav>span{display:inline}
}
@media(max-width:700px){
 .app-shell,.app-shell.sidebar-folded{--shell-sidebar:0px;--shell-gutter:7px;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 .app-shell .sidebar,.app-shell.sidebar-folded .sidebar{position:static;width:100%!important;padding:7px 12px;flex:0 0 46px;gap:10px;height:46px;min-height:46px;justify-content:flex-start;flex-wrap:nowrap;border-bottom:1px solid #e1e7ed}
 .app-shell .sidebar .brand,.app-shell.sidebar-folded .sidebar .brand{font-size:19px;line-height:28px;margin:0;padding:0}
 .app-shell .sidebar .brand>span,.app-shell.sidebar-folded .sidebar .brand>span{display:inline}
 .app-shell .sidebar .nav,.app-shell.sidebar-folded .sidebar .nav{padding:6px;font-size:13px;line-height:18px;gap:5px}
 .app-shell .sidebar .nav>span,.app-shell.sidebar-folded .sidebar .nav>span,.app-shell .sidebar-toggle,.app-shell .workspace-label,.app-shell .sidebar-footer{display:none}
 .app-shell .sidebar .nav-group{flex-basis:auto}
 .app-shell .sidebar .nav-group[open] .nav-submenu,.app-shell.sidebar-folded .sidebar .nav-group[open] .nav-submenu{position:absolute;top:100%;right:0;left:auto;width:220px;display:block;padding:8px;background:#fff;border:1px solid #e2e3ea;box-shadow:0 8px 28px #171a3020;border-radius:8px;z-index:90}
 .app-shell .sidebar .nav-submenu .nav>span,.app-shell.sidebar-folded .sidebar .nav-submenu .nav>span{display:inline}
 .app-shell main,.app-shell.sidebar-folded main{margin-left:0;width:100%;height:auto;flex:1;min-height:0;padding:7px;scrollbar-gutter:stable}
 .app-shell.purchase-workspace main>header{height:34px;margin-bottom:6px}
}

/* Keep the full Saby action visible next to the catalogue path, including selection mode. */
.workspace-context:has(.saby-update){min-height:44px;flex-basis:auto}
.workspace-context .saby-update{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;margin-left:auto;padding:7px 12px;border:1px solid #008cf0;border-radius:6px;background:#008cf0;color:#fff;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap;text-decoration:none}
.workspace-context .saby-update:hover{background:#0078d4;border-color:#0078d4;color:#fff}
.workspace-context .saby-update:focus-visible{outline:3px solid #393e7b;outline-offset:3px}
.workspace-context .saby-update span{font-size:19px;line-height:18px}
.workspace-context .saby-update+.collapse-tree{margin-left:0}
@media(max-width:700px){
 .workspace-context:has(.saby-update){flex-wrap:wrap;gap:7px;padding:6px 10px}
 .workspace-context:has(.saby-update) .context-location{flex:1 1 100%;overflow:hidden}
 .workspace-context .saby-update{margin-left:0}
 .workspace-context .saby-update+.collapse-tree{margin-left:auto}
}