/* ==========================================================================
   Dashboard
   ========================================================================== */

/* ── Page header ──────────────────────────────────────────────────────── */
.pl-dash__updated {
  color: var(--text-faint);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-dash__summary .ui-status-indicator {
  color: var(--text-dim);
}

.pl-dash__summary a {
  color: inherit;
  text-decoration: none;
}

.pl-dash__summary a:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 3px;
}

.pl-dash__summary-skel {
  width: min(100%, 24rem);
}

.pl-dash__summary b {
  color: var(--text);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* ── Framed lists: needs attention, jobs and evals ────────────────────── */
.pl-dash__list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  list-style: none;
}

.pl-dash__list > li + li {
  border-top: 1px solid var(--line);
}

/* One row per problem: what, since when, the one thing to do. */
.pl-dash__issue {
  display: grid;
  grid-template-areas: "subject what since action";
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 6rem 7.5rem;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  min-height: var(--row-h);
  padding: var(--space-3) var(--space-5);
}

.pl-dash__subject {
  grid-area: subject;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.pl-dash__subject > .ui-status-dot {
  margin-top: calc((1lh - var(--dot)) / 2);
}

.pl-dash__subject-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pl-dash__subject-name {
  overflow: hidden;
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dash__subject-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 3px;
}

.pl-dash__subject-kind {
  overflow: hidden;
  color: var(--text-faint);
  font-size: var(--text-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dash__what {
  grid-area: what;
  min-width: 0;
  color: var(--text-dim);
  font-size: var(--text-13);
}

.pl-dash__what strong {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.pl-dash__since {
  grid-area: since;
  color: var(--text-faint);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.pl-dash__issue > .ui-button {
  grid-area: action;
  justify-self: end;
}

/* Since when sits in its own column on a wide page, after the kind otherwise. */
.pl-dash__since-inline {
  display: none;
}

@container main (max-width: 64rem) {
  .pl-dash__issue {
    grid-template-areas: "subject what action";
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 7.5rem;
  }

  .pl-dash__since {
    display: none;
  }

  .pl-dash__since-inline {
    display: inline;
  }
}

@container main (max-width: 46rem) {
  .pl-dash__issue {
    grid-template-areas: "subject action" "what what";
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: var(--space-4);
  }

  .pl-dash__what {
    padding-left: calc(var(--dot) + var(--space-3));
  }
}

/* ── Usage: the range's figures, each against the period before ───────── */
/* Text and chart side by side in a wide cell, stacked in a narrow one. */
.pl-dash__kpi {
  container: kpi / inline-size;
}

.pl-dash__kpi-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pl-dash__kpi-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

@container kpi (min-width: 19rem) {
  .pl-dash__kpi-body {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-5);
  }
}

@container kpi (max-width: 12rem) {
  .pl-dash__delta-vs {
    display: none;
  }
}

.pl-dash__kpi-label {
  align-self: flex-start;
  text-decoration: none;
}

.pl-dash__kpi-label:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 3px;
}

/* The section description doubles as the charts' one legend. */

.pl-dash__key-line {
  display: inline-block;
  width: var(--space-3);
  height: 0;
  margin-right: var(--space-1);
  border-top: 2px solid var(--chart-1);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.pl-dash__key-line--prev {
  border-top-color: var(--chart-muted);
}

.pl-dash__delta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: var(--text-12);
  white-space: nowrap;
}

.pl-dash__delta > svg {
  flex: none;
}

.pl-dash__delta b {
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Colour only where the direction is good or bad (errors, latency). */
.pl-dash__delta--warning b,
.pl-dash__delta--warning > svg {
  color: var(--warning);
}

.pl-dash__delta--success b,
.pl-dash__delta--success > svg {
  color: var(--success);
}

.pl-dash__delta-vs {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Two columns: models and activity | fleet and other work ──────────── */
.pl-dash__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-6);
  align-items: start;
}

/* Stacked, the sections take one order: models, fleet, jobs, activity. */
.pl-dash__col {
  display: contents;
}

.pl-dash__models { order: 1; }
.pl-dash__fleet-section { order: 2; }
.pl-dash__work-section { order: 3; }
.pl-dash__activity-section { order: 4; }
.pl-dash__setup-section { order: 0; }

@container main (min-width: 72rem) {
  .pl-dash__cols {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  }

  .pl-dash__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
  }
}

/* ── Models ───────────────────────────────────────────────────────────── */
.pl-dash__models {
  --table-min: 34rem;
}

.pl-dash__model {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.pl-dash__model {
  flex-wrap: nowrap;
}

.pl-dash__brand {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.pl-dash__model-id {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dash__why {
  overflow: hidden;
  color: var(--text-dim);
  font-size: var(--text-12);
  text-overflow: ellipsis;
}

.pl-dash__why--danger {
  color: var(--danger);
}

.pl-dash__trend {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  max-width: 100%;
}

/* A fixed width for the figure keeps the rows' trends in one column. */
.pl-dash__trend-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 3.5rem;
}

.pl-dash__trend-num > :first-child {
  color: var(--text);
}

.pl-dash__trend-delta {
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: var(--text-11);
}

.pl-dash__trend-delta.pl-dash__delta--warning {
  color: var(--warning);
}

.pl-dash__trend-delta.pl-dash__delta--success {
  color: var(--success);
}

/* ── GPU fleet ────────────────────────────────────────────────────────── */
.pl-dash__fleet {
  container: fleet / inline-size;
  gap: var(--space-5);
}

.pl-dash__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.pl-dash__figure {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-24);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.pl-dash__figure-of {
  color: var(--text-dim);
  font-size: var(--text-13);
}

/* How the fleet splits: a thin bar, its figures in the legend below. */
.pl-dash__split {
  display: flex;
  gap: 2px;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-full);
}

.pl-dash__split > span {
  min-width: var(--space-1);
}

.pl-dash__split-serving { background: var(--chart-1); }
.pl-dash__split-idle { background: var(--chart-1-soft); }
.pl-dash__split-jobs { background: var(--chart-6); }
.pl-dash__split-free { background: var(--bg-hover); }
.pl-dash__split-off { background: var(--warning); }

.pl-dash__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  color: var(--text-dim);
  font-size: var(--text-12);
  list-style: none;
}

.pl-dash__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.pl-dash__legend b {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.pl-dash__clusters {
  display: grid;
  gap: var(--space-5);
}

@container fleet (min-width: 36rem) {
  .pl-dash__clusters {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    column-gap: var(--space-8);
  }
}

.pl-dash__cluster {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.pl-dash__cluster-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.pl-dash__cluster-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-13);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dash__cluster-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 3px;
}

.pl-dash__cluster-gpu {
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
  font-size: var(--text-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dash__cluster-held {
  margin-left: auto;
  color: var(--text-dim);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-dash__cluster-held b {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.pl-dash__node-free {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-dash__nodes {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-dash__node {
  display: grid;
  grid-template-columns: minmax(3.5rem, 5rem) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tile);
  padding-inline: var(--space-1);
  border-radius: var(--radius-sm);
}

.pl-dash__node:hover {
  background: var(--bg-hover);
}

.pl-dash__node-name {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dash__node-state {
  justify-self: end;
  min-width: 0;
  font-size: var(--text-12);
}

.pl-dash__node-state .ui-status-indicator {
  color: var(--text-dim);
  font-size: var(--text-12);
}

.pl-dash__gpus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* One square per GPU: filled = busy, outlined with a tint = held but idle,
   hairline = free, slashed = not reporting. Fill and outline, not hue alone,
   tell busy from idle. */
.pl-dash__gpu {
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: calc(var(--radius-sm) / 2);
}

.pl-dash__gpu--serving { background: var(--chart-1); }
.pl-dash__gpu--jobs { background: var(--chart-6); }

.pl-dash__gpu--serving-idle {
  background: var(--chart-1-soft);
  box-shadow: inset 0 0 0 1.5px var(--chart-1);
}

.pl-dash__gpu--jobs-idle {
  background: var(--chart-6-soft);
  box-shadow: inset 0 0 0 1.5px var(--chart-6);
}

.pl-dash__gpu--free {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.pl-dash__gpu--off {
  background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--warning) calc(50% - 0.75px), var(--warning) calc(50% + 0.75px), transparent calc(50% + 0.75px));
  box-shadow: inset 0 0 0 1.5px var(--warning);
}

/* ── Jobs and evals: a row per kind of work ───────────────────────────── */
.pl-dash__work {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.pl-dash__work:hover {
  background: var(--bg-hover);
}

.pl-dash__work-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pl-dash__work-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
  font-weight: var(--weight-medium);
}

.pl-dash__work-title a {
  color: inherit;
  text-decoration: none;
}

/* The row is the link. */
.pl-dash__work-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pl-dash__work-title span {
  color: var(--text-dim);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}

.pl-dash__work-detail {
  overflow: hidden;
  color: var(--text-faint);
  font-size: var(--text-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dash__work > svg {
  color: var(--text-faint);
}

/* ── First run: the steps to a first served request ───────────────────── */
.pl-dash__steps {
  counter-reset: step;
}

.pl-dash__step {
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.pl-dash__step-mark {
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-12);
}

.pl-dash__step--done .pl-dash__step-mark {
  background: var(--success-soft);
  box-shadow: none;
  color: var(--success);
}

.pl-dash__step--current .pl-dash__step-mark {
  box-shadow: inset 0 0 0 1.5px var(--text);
  color: var(--text);
}

.pl-dash__step-title {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.pl-dash__step--done .pl-dash__step-title {
  color: var(--text-dim);
}

.pl-dash__step-text {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: var(--text-13);
}

.pl-dash__step--todo .pl-dash__step-text {
  color: var(--text-faint);
}

@container main (max-width: 40rem) {
  .pl-dash__step {
    grid-template-columns: var(--tile) minmax(0, 1fr);
    padding-inline: var(--space-4);
  }

  .pl-dash__step > .ui-button {
    grid-column: 2;
    justify-self: start;
  }
}

/* A node holding both deployments and jobs can't say which GPUs are which. */
.pl-dash__gpu--mixed { background: var(--text-faint); }
.pl-dash__gpu--mixed-idle { box-shadow: inset 0 0 0 1.5px var(--text-faint); }
.pl-dash__split-mixed { background: var(--text-faint); }

.pl-dash__kpi-body .ui-trend { min-width: 0; }

@container kpi (min-width: 19rem) {
  .pl-dash__kpi-body .ui-trend__plot { height: var(--space-12); }
}

/* A row's own trend: no axis, no hover; the figure beside it carries the value. */
.pl-dash__mini {
  flex: none;
  width: var(--space-16);
}

.pl-dash__mini .ui-trend__plot { height: var(--icon-lg); }

.pl-dash__more-row {
  display: flex;
  justify-content: center;
  padding: var(--space-2);
}

.pl-dash__cluster-bar {
  height: var(--space-1);
}

.pl-dash__section-note {
  color: var(--text-dim);
  font-size: var(--text-13);
}

/* Phones lay the figures two a row; a third takes the row to itself. */
@container main (max-width: 520px) {
  .ui-metric-grid > .pl-dash__kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}