/* HCP AC Panel Sidebar V8
   Loaded LAST. Owns the customer-panel sidebar so legacy responsive CSS cannot
   turn the navigation into a grid or collapse product sections unexpectedly. */

.panel-app > .sidebar {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.panel-app > .sidebar > nav {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.panel-app > .sidebar > nav > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Shared section labels */
.panel-app .sidebar .navgroup,
.panel-app .sidebar .nav-clean-heading,
.panel-app .sidebar .nav-team-title {
  display: block !important;
  width: 100% !important;
  margin: 18px 0 7px !important;
  padding: 0 10px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  background: transparent !important;
  color: rgba(255,255,255,.50) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}
.panel-app .sidebar .nav-team-title span { display: block !important; }
.panel-app .sidebar .nav-team-title small { display: none !important; }

/* Product areas are permanent/open, not accordion cards. */
.panel-app .sidebar .nav-clean-section,
.panel-app .sidebar .nav-team-area {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel-app .sidebar .nav-clean-link,
.panel-app .sidebar .nav-team-group > a,
.panel-app .sidebar > nav > a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  margin: 2px 0 !important;
  padding: 10px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255,255,255,.64) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.panel-app .sidebar .nav-clean-link:hover,
.panel-app .sidebar .nav-team-group > a:hover,
.panel-app .sidebar > nav > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.035) !important;
}
.panel-app .sidebar .nav-clean-link.active,
.panel-app .sidebar .nav-team-group > a.active,
.panel-app .sidebar > nav > a.active {
  color: #fff !important;
  background: linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.035)) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: inset 3px 0 0 #fff !important;
}

/* Only these folders fold: Server + Configuration. */
.panel-app .sidebar .nav-clean-folder {
  display: block !important;
  width: 100% !important;
  margin: 5px 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.018) !important;
  overflow: hidden !important;
}
.panel-app .sidebar .nav-clean-folder > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  list-style: none !important;
  cursor: pointer !important;
  user-select: none !important;
  background: transparent !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.panel-app .sidebar .nav-clean-folder > summary::-webkit-details-marker { display:none !important; }
.panel-app .sidebar .nav-clean-folder > summary::after { display:none !important; content:none !important; }
.panel-app .sidebar .nav-clean-chevron {
  display:block !important;
  position:relative !important;
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
}
.panel-app .sidebar .nav-clean-chevron::before,
.panel-app .sidebar .nav-clean-chevron::after {
  content:'' !important;
  position:absolute !important;
  top:8px !important;
  width:7px !important;
  height:1.5px !important;
  border-radius:2px !important;
  background:rgba(255,255,255,.60) !important;
  transition:transform .16s ease !important;
}
.panel-app .sidebar .nav-clean-chevron::before { left:2px !important; transform:rotate(45deg) !important; }
.panel-app .sidebar .nav-clean-chevron::after { right:2px !important; transform:rotate(-45deg) !important; }
.panel-app .sidebar .nav-clean-folder[open] .nav-clean-chevron::before { transform:rotate(-45deg) !important; }
.panel-app .sidebar .nav-clean-folder[open] .nav-clean-chevron::after { transform:rotate(45deg) !important; }
.panel-app .sidebar .nav-clean-folder-links {
  display:block !important;
  width:100% !important;
  padding:5px 7px 7px !important;
  border-top:1px solid rgba(255,255,255,.055) !important;
  box-sizing:border-box !important;
}
.panel-app .sidebar .nav-clean-folder:not([open]) > .nav-clean-folder-links { display:none !important; }
.panel-app .sidebar .nav-clean-folder-links > a {
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:38px !important;
  box-sizing:border-box !important;
  margin:2px 0 !important;
  padding:9px 12px 9px 18px !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
  color:rgba(255,255,255,.58) !important;
  background:transparent !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
}
.panel-app .sidebar .nav-clean-folder-links > a:hover { color:#fff !important; background:rgba(255,255,255,.04) !important; }
.panel-app .sidebar .nav-clean-folder-links > a.active {
  color:#fff !important;
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:inset 2px 0 0 #fff !important;
}

/* Team area is fully expanded. Group names are labels only. */
.panel-app .sidebar .nav-team-area { margin-top: 4px !important; }
.panel-app .sidebar .nav-team-body {
  display:block !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
  padding:0 !important;
}
.panel-app .sidebar .nav-team-group {
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:8px 0 6px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.045) !important;
  background:transparent !important;
}
.panel-app .sidebar .nav-team-group:last-child { border-bottom:0 !important; }
.panel-app .sidebar .nav-team-group-title {
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:4px 10px 6px !important;
  color:rgba(255,255,255,.34) !important;
  font-size:9px !important;
  line-height:1.3 !important;
  font-weight:850 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.panel-app .sidebar .nav-team-group > a { padding-left:18px !important; min-height:38px !important; font-size:12px !important; }

/* Foot follows the navigation so long Team Areas can actually be scrolled through. */
.panel-app .sidebar .side-foot {
  position:static !important;
  flex:0 0 auto !important;
  margin-top:18px !important;
  padding:18px 0 10px !important;
  background:#050505 !important;
  border-top:1px dashed rgba(255,255,255,.10) !important;
}

/* Old product/workspace wrappers are never rendered in V8, but neutralize them if cached markup appears. */
.panel-app .sidebar .nav-product-static { display:none !important; }

@media (max-width: 900px) {
  .app.panel-app { display:block !important; grid-template-columns:1fr !important; }
  .app.panel-app > .sidebar > nav {
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:2px !important;
  }
  .app.panel-app > .sidebar .navgroup,
  .app.panel-app > .sidebar .side-foot { grid-column:auto !important; }
}

@media (max-width: 760px) {
  .app.panel-app > .sidebar {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:min(84vw, 340px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    padding:20px 16px 28px !important;
    border-right:1px solid rgba(255,255,255,.10) !important;
    border-bottom:0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .panel-app .sidebar .nav-clean-link,
  .panel-app .sidebar > nav > a { min-height:46px !important; padding-top:11px !important; padding-bottom:11px !important; }
  .panel-app .sidebar .nav-clean-folder > summary { min-height:48px !important; }
  .panel-app .sidebar .nav-clean-folder-links > a,
  .panel-app .sidebar .nav-team-group > a { min-height:42px !important; }
}

/* V9: make Team Area a clearly separated management zone. */
.panel-app .sidebar .nav-team-area{
  margin-top:28px!important;
  padding-top:18px!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
  position:relative!important;
}
.panel-app .sidebar .nav-team-area::before{
  content:'TEAM AREA'!important;
  display:block!important;
  margin:0 10px 10px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
}
.panel-app .sidebar .nav-team-area .nav-team-title{display:none!important}
.panel-app .sidebar .nav-team-body{padding-top:2px!important}