/* Professional sidebar for desktop. Keep the existing mobile dock untouched. */
@media (min-width:741px){
 #appShell.shell{grid-template-columns:268px minmax(0,1fr)}
 #appShell .atlasDesktopSidebar{
  background:linear-gradient(180deg,#132336 0%,#17283c 100%);
  padding:22px 13px 14px;
  min-height:100vh;height:100dvh;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.06);
 }
 #appShell .atlasDesktopSidebar .logo{
  padding:4px 12px 18px;margin:0;
  font-size:23px;letter-spacing:-.8px;
 }
 #appShell .atlasDesktopSidebar .logoMark{
  width:40px;height:40px;border-radius:12px;
  box-shadow:0 5px 18px rgba(65,193,167,.18);
 }
 #appShell .atlasDesktopSidebar .caption{display:none}
 #appShell .atlasDesktopContext{
  margin:2px 5px 17px;padding:12px 13px;
  display:flex;flex-direction:column;gap:5px;
  border:1px solid #3a5162;border-radius:12px;
  background:rgba(255,255,255,.045);min-width:0;
 }
 #appShell .atlasDesktopContext>span{
  font-size:9px;font-weight:800;letter-spacing:1.2px;color:#91b2c1;
 }
 #appShell .atlasDesktopContext>strong{
  color:#eef8fa;font-size:13px;font-weight:750;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
 #appShell .atlasDesktopSidebar #nav{
  display:flex;flex:1 1 0;min-height:0;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;gap:14px;padding:0 3px 15px;
  scrollbar-width:thin;scrollbar-color:#51697b transparent;
 }
 #appShell #nav .atlasNavGroup{display:flex;flex-direction:column;gap:3px;min-width:0}
 #appShell #nav .atlasNavHeading{
  padding:0 13px;margin:3px 0 6px;
  color:#87a1b5;font-size:10px;font-weight:800;letter-spacing:1.4px;
 }
 #appShell #nav .atlasNavGroup>button{
  position:relative;display:flex;align-items:center;gap:12px;
  width:100%;min-height:42px;flex-shrink:0;
  border-radius:10px;padding:9px 12px;text-align:left;
  color:#b9c9d8;background:transparent;
  font-size:13px;font-weight:580;line-height:1.25;
  transition:background .15s ease,color .15s ease;
 }
 #appShell #nav .atlasNavGroup>button:hover{color:#fff;background:rgba(255,255,255,.08)}
 #appShell #nav .atlasNavGroup>button.active{
  color:#e9fffa;background:rgba(45,185,157,.17);font-weight:750;
 }
 #appShell #nav .atlasNavGroup>button.active::before{
  content:'';position:absolute;left:0;top:10px;bottom:10px;
  width:3px;background:#4ed1b1;border-radius:3px;
 }
 #appShell #nav .atlasNavIcon{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;opacity:.88}
 #appShell #nav .atlasNavIcon svg{width:19px;height:19px;display:block}
 #appShell #nav .atlasNavText{min-width:0;white-space:normal}
 #appShell .atlasDesktopSidebar .sidefoot{
  display:block;flex:0 0 auto;margin:0 4px;
  padding:13px 11px 3px;border-top:1px solid #34495e;
  font-size:11px;line-height:1.6;color:#93aab9;
 }
 #appShell .atlasDesktopSidebar .sidefoot #who{color:#d6e7ed}
 #appShell .atlasDesktopSidebar .sidefoot #logout{
  display:flex;align-items:center;justify-content:flex-start;
  width:100%;padding:8px 0;margin-top:5px;
  color:#d9edf0;font-size:12px;font-weight:700;
 }
 #appShell .atlasDesktopSidebar .sidefoot #logout:hover{color:white}
}
@media (min-width:741px) and (max-width:1050px){
 #appShell.shell{grid-template-columns:224px minmax(0,1fr)}
 #appShell .atlasDesktopSidebar{padding:16px 9px 12px}
 #appShell #nav .atlasNavGroup>button{gap:8px;padding:8px 10px;font-size:12px}
}
@media (max-width:740px){
 #appShell .atlasDesktopContext{display:none!important}
}

/* Collapsible and permission-aware business settings section. */
@media (min-width:741px){
 #appShell #nav .atlasNavSettingsHeader{
  display:flex;align-items:center;gap:12px;width:100%;min-height:48px;
  padding:10px 12px;border:1px solid rgba(98,173,176,.3);
  border-radius:11px;background:rgba(46,162,151,.10);color:#e4f7f3;
  font-size:13px;font-weight:800;text-align:left;cursor:pointer;
 }
 #appShell #nav .atlasNavSettingsHeader:hover{background:rgba(46,162,151,.20)}
 #appShell #nav .atlasNavSettingsHeader.hasActiveChild{background:rgba(42,178,150,.16)}
 #appShell #nav .atlasNavSettingsChevron{margin-left:auto;font-size:18px;line-height:1;transition:transform .15s}
 #appShell #nav .atlasNavSettingsHeader[aria-expanded="true"] .atlasNavSettingsChevron{transform:rotate(180deg)}
 #appShell #nav .atlasNavSettingsItems{display:flex;flex-direction:column;gap:2px;margin:4px 0 0 11px;padding-left:11px;border-left:1px solid #395166}
 #appShell #nav .atlasNavSettingsItems[hidden]{display:none!important}
 #appShell #nav .atlasNavSettingsItems>button{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:41px;
  padding:9px 9px;border:0;border-radius:9px;background:transparent;
  color:#b9c9d8;font-size:12.5px;font-weight:570;text-align:left;
 }
 #appShell #nav .atlasNavSettingsItems>button:hover{background:rgba(255,255,255,.08);color:white}
 #appShell #nav .atlasNavSettingsItems>button.active{background:rgba(45,185,157,.17);color:#e9fffa;font-weight:750}
 #appShell #nav .atlasNavSettingsItems>button.active::before{
  content:'';position:absolute;top:9px;bottom:9px;left:0;width:3px;border-radius:3px;background:#4ed1b1
 }
 #appShell #nav .atlasNavSettingsItems .atlasNavIcon{width:18px;height:18px;flex-basis:18px}
 #appShell #nav .atlasNavSettingsItems .atlasNavIcon svg{width:17px;height:17px}
}