/* Overview charts use only persisted feed and outbound queue counts. */
.queue-status-list {
  display: grid;
  gap: 11px;
  margin-top: 17px;
}

.queue-chart {
  display: flex;
  height: 8px;
  overflow: hidden;
  border: 1px solid #26333e;
  border-radius: 10px;
  background: #18232d;
}

.queue-chart-segment {
  min-width: 2px;
  flex-basis: 0;
  transition: flex-grow .25s ease;
}

.queue-chart-segment.queued,
.queue-status-fill.queued,
.queue-status-dot.queued { background: #7da4ff; }
.queue-chart-segment.processing,
.queue-status-fill.processing,
.queue-status-dot.processing { background: #58c99b; }
.queue-chart-segment.retry_wait,
.queue-status-fill.retry_wait,
.queue-status-dot.retry_wait { background: #e5b761; }
.queue-chart-segment.sent,
.queue-status-fill.sent,
.queue-status-dot.sent { background: #648095; }
.queue-chart-segment.dead,
.queue-status-fill.dead,
.queue-status-dot.dead { background: #f17e83; }

.queue-chart-empty {
  width: 100%;
  background: linear-gradient(90deg, #1a2731, #24313b);
}

.queue-chart-total,
.feed-health-total {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.queue-chart-total strong,
.feed-health-total strong {
  color: #e0e8ef;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.04em;
}

.queue-chart-total span,
.feed-health-total span {
  color: #778797;
  font-size: 9px;
}

.queue-status-row {
  display: grid;
  grid-template-columns: 78px minmax(40px, 1fr) 34px;
  align-items: center;
  gap: 9px;
}

.queue-status-label,
.feed-health-legend > div > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #95a3b0;
  font-size: 9px;
}

.queue-status-dot,
.queue-status-fill {
  display: block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.queue-status-track {
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #202c37;
}

.queue-status-fill {
  height: 100%;
  max-width: 100%;
  border-radius: 5px;
  transition: width .25s ease;
}

.queue-status-row strong {
  color: #cbd5de;
  font-size: 9px;
  font-weight: 560;
  text-align: right;
}

.feed-health-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 19px;
  margin-top: 28px;
}

.feed-health-visual { min-width: 0; }
.feed-health-track {
  display: flex;
  height: 10px;
  overflow: hidden;
  border: 1px solid #293640;
  border-radius: 10px;
  background: #202a34;
}
.feed-health-track i { display: block; height: 100%; transition: width .25s ease; }
.feed-health-track i.enabled { background: linear-gradient(90deg, #339b73, #60d7a3); }
.feed-health-track i.disabled { background: #596574; }
.feed-health-total { margin-top: 14px; }

.feed-health-legend { display: grid; gap: 12px; }
.feed-health-legend > div,
.feed-health-legend > div > span { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.feed-health-legend > div > span { justify-content: flex-start; }
.feed-health-legend strong { color: #d3dce4; font-size: 10px; font-weight: 600; }
.feed-health-legend i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #60d7a3; }
.feed-health-legend i.disabled { background: #697887; }
.feed-health-legend .feed-health-errors { padding-top: 10px; border-top: 1px solid #26323d; }
.feed-health-errors i { background: #e5b761; }

@media (max-width: 720px) {
  .feed-health-summary { grid-template-columns: minmax(0, 1fr) 106px; gap: 12px; margin-top: 22px; }
}