/* v173: make each operating department a clearly separated sidebar block. */
.sidebar nav#nav{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  margin-top:18px;
  padding:2px 3px 8px;
  overflow-x:visible;
  overflow-y:auto;
  scrollbar-color:rgba(255,255,255,.28) transparent;
  scrollbar-width:thin;
}

.department-nav-block{
  position:relative;
  display:grid;
  gap:4px;
  flex:0 0 auto;
  padding:9px;
  border:1px solid #dbe4ef;
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 20px rgba(20,46,78,.08);
}

.department-nav-block[hidden]{display:none!important}

.department-nav-heading{
  display:grid;
  gap:1px;
  margin:0 2px 5px;
  padding:0 4px 7px;
  border-bottom:1px solid #dfe7f0;
}

.department-nav-heading span{
  color:#31445d;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.02em;
}

.department-nav-heading small{
  color:#7b8da5;
  font-size:9px;
  font-weight:700;
  line-height:1.35;
}

.sidebar nav#nav .department-nav-block>button,
.sidebar nav#nav .department-nav-block>.graphic-benefit-link{
  width:100%;
  min-width:0;
  margin:0;
}

.sidebar nav#nav .department-nav-block>button{
  display:flex;
  align-items:center;
  padding:10px 11px;
}

.department-nav-main{border-color:#d7e0ea;background:#fbfcfe}
.department-nav-graphic{border-color:#9ec5ff;background:linear-gradient(145deg,#f5f9ff,#fff)}
.department-nav-production{border-color:#fdba74;background:linear-gradient(145deg,#fff5e9,#fff)}
.department-nav-shipping{border-color:#5eead4;background:linear-gradient(145deg,#edfffb,#fff)}

.department-nav-graphic .department-nav-heading span{color:#1d4ed8}
.department-nav-production .department-nav-heading span{color:#c2410c}
.department-nav-shipping .department-nav-heading span{color:#0f766e}
.department-nav-graphic .department-nav-heading small{color:#5071a5}
.department-nav-production .department-nav-heading small{color:#9a3412}
.department-nav-shipping .department-nav-heading small{color:#0f766e}

.sidebar nav#nav .department-nav-graphic>.graphic-benefit-link{
  border-color:#ddd6fe;
  background:#f5f3ff;
  color:#6d28d9;
}

.sidebar nav#nav .department-nav-graphic>.graphic-benefit-link:hover,
.sidebar nav#nav .department-nav-graphic>.graphic-benefit-link:focus-visible{
  border-color:#a78bfa;
  background:#ede9fe;
  color:#5b21b6;
}

.department-nav-production>button.active,
.department-nav-production>button:hover{background:#ffedd5!important;color:#9a3412!important}
.department-nav-shipping>button.active,
.department-nav-shipping>button:hover{background:#ccfbf1!important;color:#0f766e!important}

/* Keep the fixed Hub-return button clear of the sidebar status description. */
.app-shell>.sidebar .online-note{
  flex:0 0 auto;
  margin-bottom:54px;
}

@media(max-width:760px){
  .sidebar nav#nav{
    flex-direction:row;
    gap:10px;
    margin-top:12px;
    padding:2px 2px 10px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x proximity;
  }

  .department-nav-block{
    flex:0 0 min(270px,82vw);
    scroll-snap-align:start;
  }

  .department-nav-heading{min-height:43px}
  .sidebar nav#nav .department-nav-block>button,
  .sidebar nav#nav .department-nav-block>.graphic-benefit-link{white-space:normal}
  .app-shell>.sidebar .online-note{margin-bottom:0}
}