.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

/*
 * Every Dashboard card shares one max height, so a row is never
 * stretched tall by one box with more data than its neighbors. Cards
 * are flex columns so a .scrollable-list inside can flex-grow to fill
 * whatever space is left under the heading and scroll internally
 * rather than pushing the card (and its row) taller.
 */
.dashboard-grid > .card {
  display: flex;
  flex-direction: column;
  max-height: 420px;
}

/*
 * Opt-out for pages that reuse .dashboard-grid purely for its side-by-side
 * card layout (e.g. a Release's Milestones/Release Notes cards) rather
 * than a real many-widget Dashboard — those don't need the 420px cap,
 * and capping them squeezes a .scrollable-list inside down to a sliver
 * (barely one row tall) whenever the card also holds a form below the
 * list, which is illegible rather than a helpful scroll affordance.
 */
.dashboard-grid--unbounded > .card {
  max-height: none;
}

.chart-card {
  text-align: center;
}

.chart-donut-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-3) 0;
}

.chart-donut-label {
  font-size: 16px;
  font-weight: 700;
  fill: var(--color-text);
}

.chart-bar {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-border);
  margin: var(--space-3) 0;
}

.chart-bar-segment {
  height: 100%;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.8rem;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.legend-pass { background-color: var(--color-success); }
.legend-fail { background-color: var(--color-danger); }
.legend-blocked { background-color: var(--color-warning); }
.legend-skipped { background-color: #94A3B8; }
.legend-not_run { background-color: var(--color-border); }

.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.trend-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.trend-bar {
  width: 10px;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
}

.trend-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.release-list,
.activity-list,
.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

/*
 * Caps Dashboard widget lists with an internal scrollbar, so a card
 * doesn't keep growing taller (and pushing the rest of the page down,
 * and stretching its whole grid row) as more items accumulate. flex: 1
 * lets it fill whatever space is left under the card's heading (up to
 * max-height) instead of a height guessed independently of its card;
 * min-height is a real 180px floor, not the usual flex-basis-reset 0 —
 * a plain 0 lets a card with something else below the list (e.g.
 * Release's Milestones + Add Milestone form) squeeze it down to an
 * illegibly short sliver instead of leaving it a comfortable size and
 * making the *card* grow instead (see .dashboard-grid--unbounded for
 * pages that opt out of the 420px card cap for exactly this reason).
 * max-height is a fallback cap for use outside a flex column context.
 * Not applied to full list pages (e.g. the dedicated Notifications
 * page), only these dashboard widget previews.
 */
.scrollable-list {
  flex: 1;
  min-height: 180px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  /*
   * A partially-visible row at the top/bottom edge (the whole point of
   * a capped-height scrollable list) reads as a rendering glitch without
   * this — a hard clip straight through a row's text/buttons. Fading it
   * out instead makes "there's more, scroll" an intentional-looking cue.
   * Kept to a small fixed amount (not proportional to the list's own
   * height) so it never eats a whole row's worth of a short list.
   */
  mask-image: linear-gradient(to bottom, transparent, black 8px, black calc(100% - 8px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8px, black calc(100% - 8px), transparent);
}

.scrollable-list::-webkit-scrollbar {
  width: 6px;
}

.scrollable-list::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 999px;
}

.release-list li,
.activity-list li {
  border-bottom: 1px solid var(--color-border);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.release-list li:first-child,
.activity-list li:first-child {
  padding-top: 0;
}

.release-list li:last-child,
.activity-list li:last-child {
  border-bottom: none;
}

.notification-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
}

.notification-list li:last-child {
  border-bottom: none;
}

.notification-unread {
  background-color: rgba(37, 99, 235, 0.06);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.severity-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.notification-bell {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 999px;
  line-height: 1.4;
}