/* ================================================================
   packetDistributionPie — scoped to its own tag so nothing here can
   leak into (or be leaked into by) any other component's CSS. See
   this session's datasource-common.css incident: an unscoped shared
   class name silently broke once its stylesheet started loading
   globally instead of only while one specific dialog was open.
   ================================================================ */

packet-distribution-pie {
  display: block;
}

packet-distribution-pie .pdp-container {
  position: relative;
  width: 100%;
  height: 200px;
  margin: 4px 0 8px;
}

/* The empty message (icon + one line of text) doesn't need the full
   200px a real pie+legend needs — keeping the box that tall while empty
   just pushes it (and its text) further down the dialog/page than
   necessary, sometimes past the fold. */
packet-distribution-pie .pdp-container--empty {
  height: 100px;
}

packet-distribution-pie .pdp-canvas {
  width: 100% !important;
  height: 100% !important;
}

packet-distribution-pie .pdp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  color: #8E97B4;
  font-size: 13px;
}

packet-distribution-pie .pdp-empty md-icon {
  font-size: 32px;
  width: 32px;
  height: 32px;
  color: #C5CCDF;
}