/* VF_FORCE_DESKTOP_SIDEBAR_V4
   These six custom pages use a static sidebar on desktop.
   Mobile remains sidebar-free and uses the existing app/mobile navigation. */

:root{
  --vf-v4-side-width:252px;
  --vf-v4-side-left:14px;
  --vf-v4-side-gap:28px;
}

#vfDesktopSidebarV4{
  box-sizing:border-box;
}

@media(min-width:931px){
  html body.vf-v4-shell-page{
    box-sizing:border-box !important;
    padding-left:calc(
      var(--vf-v4-side-width) +
      var(--vf-v4-side-left) +
      var(--vf-v4-side-gap)
    ) !important;
  }

  html body.vf-v4-shell-page #vfDesktopSidebarV4{
    position:fixed !important;
    z-index:2147482000 !important;
    top:14px !important;
    bottom:14px !important;
    left:var(--vf-v4-side-left) !important;
    width:var(--vf-v4-side-width) !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    overflow:hidden !important;
    padding:15px 12px 13px !important;
    border:1px solid rgba(255,255,255,.86) !important;
    border-radius:27px !important;
    background:rgba(255,255,255,.91) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 22px 58px rgba(40,52,91,.12) !important;
    -webkit-backdrop-filter:blur(26px) saturate(1.14) !important;
    backdrop-filter:blur(26px) saturate(1.14) !important;
    transform:none !important;
  }

  html body.vf-v4-shell-page .vf-main{
    width:auto !important;
    max-width:none !important;
    margin-left:0 !important;
  }

  html body.vf-v4-shell-page .vf-content{
    width:100% !important;
    max-width:1560px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  html body.vf-v4-shell-page .vf-mobile-nav,
  html body.vf-v4-shell-page .vfp-mobile-nav,
  html body.vf-v4-shell-page .mobile-nav,
  html body.vf-v4-shell-page .mobile-hamburger,
  html body.vf-v4-shell-page .vf-mobile-hamburger{
    display:none !important;
  }
}

#vfDesktopSidebarV4 .vf-v4-brand{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px 13px;
  color:#10182c;
  text-decoration:none;
}

#vfDesktopSidebarV4 .vf-v4-brand-mark{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  flex:0 0 39px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(145deg,#4fcbd2 0%,#6b80ef 50%,#9863e6 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.5),
    0 10px 22px rgba(105,99,223,.24);
  font:950 18px/1 Inter,Arial,sans-serif;
  letter-spacing:-.06em;
}

#vfDesktopSidebarV4 .vf-v4-brand-name{
  color:#11192c;
  font:950 18px/1 Inter,Arial,sans-serif;
  letter-spacing:-.045em;
}

#vfDesktopSidebarV4 .vf-v4-brand-name span{
  background:linear-gradient(90deg,#5bbfd5,#6c82ef 45%,#9565e6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#vfDesktopSidebarV4 .vf-v4-scroll{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:2px 2px 8px;
  scrollbar-width:none;
}

#vfDesktopSidebarV4 .vf-v4-scroll::-webkit-scrollbar{
  display:none;
}

#vfDesktopSidebarV4 .vf-v4-label{
  margin:13px 10px 6px;
  color:#9aa3b6;
  font:900 9px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#vfDesktopSidebarV4 .vf-v4-nav{
  display:grid;
  gap:3px;
}

#vfDesktopSidebarV4 .vf-v4-nav a{
  min-height:43px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 11px;
  border-radius:13px;
  color:#4f5d76;
  background:transparent;
  text-decoration:none;
  font:800 12px/1 Inter,Arial,sans-serif;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

#vfDesktopSidebarV4 .vf-v4-nav a:hover{
  color:#4039b8;
  background:rgba(104,91,224,.07);
  transform:translateX(2px);
}

#vfDesktopSidebarV4 .vf-v4-nav a.active{
  color:#fff;
  background:linear-gradient(110deg,#5762d9 0%,#765fe4 49%,#8d63e8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 9px 22px rgba(102,86,211,.19);
}

#vfDesktopSidebarV4 .vf-v4-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  flex:0 0 20px;
}

#vfDesktopSidebarV4 .vf-v4-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#vfDesktopSidebarV4 .vf-v4-foot{
  padding:9px 2px 0;
  border-top:1px solid rgba(44,60,97,.07);
}

#vfDesktopSidebarV4 .vf-v4-foot .vf-v4-nav a{
  min-height:40px;
}

@media(max-width:930px){
  html body.vf-v4-shell-page{
    padding-left:0 !important;
  }

  #vfDesktopSidebarV4{
    display:none !important;
  }
}