/* ============================================================
   UCMS Provider Scheduler (Epic 1) - design prototype
   Performance family: screens 20 and 21.

     20-performance.html            <- board frame 172:6252
     21-performance-earnings.html   <- 172:6252, earnings open

   Loads AFTER css/styles.css and css/calendar.css. The shell, the
   collapsible rail, the segmented control, the message boxes, the
   stat cards and the section toolbar all come from those two files
   and from css/availability.css unchanged; this file adds only the
   three things this section needs that nothing else in the set has:
   a figure that carries a reference point under it, a bar chart, and
   a placeholder tile.

   Colour, 2026-08-07: no rule below states a colour value, and no
   rule below reads --pp-cta. The call-to-action colour is not on
   these two screens at all: Performance reports, it does not advance
   anything, and the colour lock says a screen with no advancing
   action carries none. Chart data reads --pp-primary, the accent ink,
   which clears 4.96:1 as a mark and can never be mistaken for a
   button. The four session figures read the CDS status ramps, which
   is what the board drew and what the rest of the set already uses
   for the same three meanings.

   Styling source of truth: TELUS Consistency Design System (CDS),
   reference/cds/. Sample data is illustrative throughout.
   ============================================================ */

/* ============================================================
   Readability, scoped to this section

   The shared stat label and the shared message body are neutral-350,
   which measures 3.36:1 on white. That is under the 4.5:1 line for
   normal text. Both are moved one step down the same neutral ramp
   here, to neutral-450 at 9.66:1. The override is scoped to .perf so
   it changes only the two new screens; the rest of the set carries
   the same pair and wants the same fix in a pass of its own.
   ============================================================ */
.perf .stat__label,
.perf .msg-box__body {
  color: var(--cds-neutral-450);
}

/* ---------- Figures in the brand face ----------
   HN for TELUS gives a comma and a full stop the same wide advance as a
   digit while tabular figures are on, so "$8,975" reads as "$8 , 975"
   and "53.8%" reads as "53 . 8%". Tabular figures earn their place in a
   column that has to line up, which on these two screens is the bar
   chart's value column and nothing else. Every other figure sits alone
   on a card or inside a sentence, so it takes the proportional cut.
   Scoped to .perf: no other screen in the set is touched. */
.perf .stat__value,
.perf .score__value,
.perf .stat__foot,
.perf .earn__lines,
.perf .perf-range__period,
.perf .score__meta,
.perf .info-note {
  font-variant-numeric: normal;
}

/* ============================================================
   Date range

   The board drew four pills with the chosen one filled. That is the
   segmented control calendar.css already ships, so it is reused: the
   chosen range is the wash with body ink on it, never a solid fill.
   The line under it states the actual dates the range covers, because
   "Last 30 Days" is only meaningful once you know which 30.
   ============================================================ */
.perf-range {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cds-space-50);
}

.perf-range__period {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* ---------- Section toolbar note ---------- */
.perf-hint {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* ============================================================
   Figures

   .stat comes from styles.css. Here it is a reading, not a link, so
   the hover lift is taken back off and a foot line is added under the
   label for the reference point crit 239:615 asks for.
   ============================================================ */
.stat--plain {
  cursor: default;
}

.stat--plain:hover {
  border-color: var(--cds-neutral-100);
  background: var(--cds-neutral-0);
}

.stat__foot {
  margin-top: var(--cds-space-75);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cds-space-50) var(--cds-space-100);
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* The mark and its words are two flex items, never three. A bare text node
   beside the number counts as its own item, so the 8px gap landed on top of
   the space already inside the sentence and printed "38  new". */
.stat__pair {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-50);
}

.stat__pair-text {
  white-space: nowrap;
}

/* Two 10px marks, which is inside the 44px the colour lock allows a
   solid fill on. They sit beside their own words, so neither colour
   carries a meaning on its own. */
.stat__key {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stat__key--new {
  background: var(--pp-primary);
}

.stat__key--returning {
  background: var(--cds-orange-400);
}

/* The three session outcomes keep the meanings the rest of the set
   already gives these ramps: green completed, orange cancelled, red
   missed. The label beside each figure says the same thing in words,
   so the colour is never the only signal. */
/* 2026-08-19, Figma final: sessions completed reads in the accent and
   sessions cancelled reads red. The green step stays declared for the
   badge family that still uses it. */
.stat__value--good {
  color: var(--cds-green-400);
}

.stat__value--info {
  color: var(--pp-primary);
}

.stat__value--warn {
  color: var(--cds-orange-400);
}

.stat__value--bad {
  color: var(--cds-red-400);
}

.stat__value--neutral {
  color: var(--cds-neutral-500);
}

.stats--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- The (i) beside an earnings label ----------
   An inline disclosure, not a popover. The set already learned that
   a popover inside a card gets clipped by the card that holds it, so
   the note opens in the flow under the figure. */
.stat__label-row {
  display: flex;
  align-items: center;
  gap: var(--cds-space-25);
}

.info-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--cds-radius-xsmall);
  background: transparent;
  color: var(--pp-primary);
  cursor: pointer;
}

.info-btn svg {
  width: 16px;
  height: 16px;
}

.info-btn:hover {
  background: var(--pp-primary-tint);
}

.info-note {
  margin-top: var(--cds-space-50);
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* ---------- Earnings ---------- */
.earn {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-150);
}

.earn__lines {
  margin-top: var(--cds-space-75);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* The board tinted the total card. It is the sum of the two beside
   it rather than a state, so the emphasis is the neutral surface
   rather than any part of the brand ramp. */
.stat--total {
  background: var(--pp-state-wash);
}

.stat--total:hover {
  background: var(--pp-state-wash);
  border-color: var(--cds-neutral-100);
}

/* ============================================================
   Charts

   Two cards side by side. The board had three charts here; Bryan
   320:492 removes the client graph and 345:2246 turns the assessment
   pie into a provider scorecard, so two remain.
   ============================================================ */
.perf-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cds-space-150);
  align-items: start;
}

.perf-card {
  padding: var(--cds-padding-large);
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-150);
}

.perf-card__title {
  font-size: var(--cds-txt-subhead-size);
  line-height: var(--cds-line-height-subhead);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
}

/* The chart's own total, which is the sum of the bars above it. Derived from
   what is already on the page, not a new figure. */
.perf-card__foot {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* ---------- Bar chart ----------
   Rows rather than a plotted canvas: every value is real text on the
   page, so the chart reads the same to a screen reader as it does to
   the eye and the bar itself is decoration. */
.bars {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-75);
}

.bars__row {
  display: grid;
  grid-template-columns: minmax(0, 148px) minmax(0, 1fr) 56px;
  align-items: center;
  gap: var(--cds-space-75);
}

.bars__name {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

.bars__track {
  height: 16px;
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-100);
  overflow: hidden;
}

.bars__fill {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: var(--cds-radius-xsmall);
  background: var(--pp-primary);
  transition: width 200ms ease-out;
}

.bars__value {
  text-align: right;
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
  font-variant-numeric: tabular-nums;
}

.bars--compact .bars__row {
  grid-template-columns: minmax(0, 64px) minmax(0, 1fr) 44px;
}

.bars--compact .bars__track {
  height: 12px;
}

/* ---------- Scorecard ---------- */
.score {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-100);
}

.score__head {
  display: flex;
  align-items: baseline;
  gap: var(--cds-space-50);
}

.score__value {
  font-size: var(--cds-hd-headline-size);
  line-height: var(--cds-line-height-headline);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--pp-primary);
}

.score__unit {
  font-size: var(--cds-txt-body-size);
  color: var(--cds-neutral-450);
}

.score__meta {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* ---------- Placeholder tile ----------
   Bryan 345:2246 asks for a placeholder for the second scorecard
   chart. It is drawn as an empty slot rather than filled with an
   invented measure.

   It sits under both chart cards rather than inside the scorecard: the
   note asks for a placeholder for another chart, so a slot the width of
   the chart row reads as one, and taking it out of the scorecard closed
   most of the height gap between the two cards.
   ---------- */
.ph {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-25);
  padding: var(--cds-padding-large);
  border: 1px dashed var(--cds-neutral-200);
  border-radius: var(--cds-radius-small);
  background: var(--cds-neutral-10);
}

/* 2026-08-19, Figma final: the reserved slot is a solid card with a
   larger title, not a dashed placeholder box. */
.ph--solid {
  border-style: solid;
  border-color: var(--cds-neutral-100);
  background: var(--cds-neutral-0);
}

.ph--solid .ph__title {
  font-size: var(--cds-txt-subhead-size);
  line-height: var(--cds-line-height-subhead);
}

.ph__title {
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
}

.ph__body {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* ============================================================
   Narrow widths
   ============================================================ */
@media (max-width: 1180px) {
  .stats--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .perf-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .stats--four {
    grid-template-columns: minmax(0, 1fr);
  }

  .bars__row {
    grid-template-columns: minmax(0, 108px) minmax(0, 1fr) 48px;
  }
}