/* Performance view layout + SLA atoms. Scoped under .ds-view.
   Tokens only; structural px follow the *-layout.scoped.css convention.
   Design: docs/specs/2026-08-04-sla-response-time-dashboard-design.md */

/* The tile grid is the Customer 360 grid under a Performance name, so both
   screens stay identical. If they ever diverge, promote the grid to the kit. */
/* Row unit is 180px, NOT the Customer 360 grid's 160px. The KPI tiles carry a
   44px hero number, a caption that wraps on a quarter-width tile, and a stat
   row; at 160px that overflowed and the tiles showed a scrollbar. Column spans
   and the breakpoint still match C360 exactly, so the two screens stay aligned
   where it is visible. */
.ds-view .ds-perf-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 180px;
  gap: var(--space-5);
  align-items: stretch;
}
.ds-view .ds-perf-grid > [data-w="quarter"]    { grid-column: span 3; }
.ds-view .ds-perf-grid > [data-w="third"]      { grid-column: span 4; }
.ds-view .ds-perf-grid > [data-w="half"]       { grid-column: span 6; }
.ds-view .ds-perf-grid > [data-w="two-thirds"] { grid-column: span 8; }
.ds-view .ds-perf-grid > [data-w="full"]       { grid-column: span 12; }
.ds-view .ds-perf-grid > [data-h="short"]      { grid-row: span 1; }
.ds-view .ds-perf-grid > [data-h="tall"]       { grid-row: span 2; }

@media (max-width: 980px) {
  .ds-view .ds-perf-grid > * { grid-column: 1 / -1; }
}

/* ── Hero metric ── */
.ds-view .ds-perf-hero { display: flex; align-items: baseline; gap: var(--space-2); }
.ds-view .ds-perf-hero__value {
  font-size: var(--fs-7);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.ds-view .ds-perf-hero__unit { font-size: var(--fs-5); font-weight: var(--fw-medium); color: var(--text-2); }
.ds-view .ds-perf-hero__caption { margin-top: var(--space-1); font-size: var(--fs-2); color: var(--text-2); }

/* Secondary stat row beneath a hero.
   Label and value sit on ONE line rather than stacked. A short tile gives ~103px
   of body height; stacking cost ~17px per row and pushed the content past it,
   which is why these tiles used to show a scrollbar. Going inline paid for the
   larger --fs-7 hero AND a larger value here, with no scrolling. */
.ds-view .ds-perf-substat {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-3); padding-top: var(--space-2);
  border-top: 1px solid var(--border-1);
}
.ds-view .ds-perf-substat > div {
  display: flex; align-items: baseline; gap: var(--space-2); min-width: 0;
}
.ds-view .ds-perf-substat dt {
  margin: 0; font-size: var(--fs-1); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.ds-view .ds-perf-substat dd {
  margin: 0; font-size: var(--fs-5);
  font-weight: var(--fw-semibold); color: var(--text-1); font-variant-numeric: tabular-nums;
}

/* Dense KPI tiles: trade a little card padding for number size. Targets any tile
   carrying a hero, so the Customer 360 Service tiles get it too — they sit on
   C360's shorter 160px rows AND carry an extra exclusion note, so they are the
   tightest case of all. The list tiles keep standard card breathing room. */
.ds-view .card:has(.ds-perf-hero) {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* ── Magnitude bar ──
   SINGLE HUE BY DESIGN. The status palette fails as categorical chart fills:
   in light mode Solved #0F766E vs Closed #64748B is dE 9.3 for normal vision,
   below the hard floor of 15 (validated 2026-08-05). Identity therefore comes
   from the row label and the status dot-pill, never from the fill. */
.ds-view .ds-perf-bars { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-view .ds-perf-bar__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.ds-view .ds-perf-bar__count {
  margin-left: auto; font-size: var(--fs-3);
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.ds-view .ds-perf-bar__track {
  height: 10px; background: var(--bg-hover);
  border-radius: var(--radius-sm); overflow: hidden;
}
.ds-view .ds-perf-bar__fill {
  height: 100%; background: var(--accent);
  border-radius: var(--radius-sm);
  transition: width var(--dur-base) var(--ease);
}
.ds-view .ds-perf-bar__fill[data-muted] { background: var(--text-3); }

/* ── Severity chip — icon + label + colour, never colour alone ── */
.ds-view .ds-perf-sev {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-1); font-weight: var(--fw-semibold); white-space: nowrap;
}
.ds-view .ds-perf-sev[data-sev="over"]    { color: var(--prio-high); background: var(--prio-high-tint); }
.ds-view .ds-perf-sev[data-sev="near"]    { color: var(--prio-med);  background: var(--prio-med-tint); }
.ds-view .ds-perf-sev[data-sev="waiting"] { color: var(--text-2);    background: var(--bg-hover); }