/*
 * Sales plan.
 *
 * The page used to be three stacked panels plus a card per representative inside
 * a fourth panel — a panel in a panel in a panel. Two things follow from that:
 * chrome outweighed the numbers, and representatives could not be compared with
 * each other because each one lived in its own box.
 *
 * Now: one summary panel, then a flat aligned list. Section names are quiet
 * eyebrows; the figures carry the weight, because on a plan page the number is
 * the content and everything else is furniture.
 */

/* ---------------------------------------------------------------- summary */

/*
 * Follows the brand book summary: a labelled panel whose figures sit in bordered
 * tiles on the same white surface. The tile is outlined, not filled — panels are
 * one surface, and the block is told apart by its label and structure.
 */
.fs-plan-summary__body {
  display: grid;
  gap: var(--fs-space-3);
}

.fs-plan-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-space-3);
}

.fs-plan-figure {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--fs-color-primary-line) 58%, #fff);
  border-radius: var(--fs-radius-md);
}

.fs-plan-figure__label {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Grey like the label it belongs to, and masked so the icon file's own stroke —
   black here, blue there — cannot make one figure louder than its neighbour. */
.fs-plan-figure__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentcolor;
  mask-image: var(--fs-plan-figure-icon, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  -webkit-mask-image: var(--fs-plan-figure-icon, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
}

/* The aim the figure is measured against, directly under the figure. */
.fs-plan-figure__against {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
}

.fs-plan-figure > strong {
  color: var(--fs-color-text);
  font-size: var(--fs-text-xl);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.fs-currency {
  margin-left: 4px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-weight: 500;
}

.fs-plan-figure__bar {
  display: grid;
  gap: 5px;
}

.fs-plan-figure__bar > span {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
}

progress.fs-plan-track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  appearance: none;
  background: var(--fs-color-border-subtle);
  border: 0;
  border-radius: 999px;
}

progress.fs-plan-track::-webkit-progress-bar {
  background: var(--fs-color-border-subtle);
  border-radius: 999px;
}

progress.fs-plan-track::-webkit-progress-value {
  background: var(--fs-plan-track-tone, var(--fs-color-primary));
  border-radius: 999px;
}

progress.fs-plan-track::-moz-progress-bar {
  background: var(--fs-plan-track-tone, var(--fs-color-primary));
  border-radius: 999px;
}

.fs-plan-track--days {
  --fs-plan-track-tone: var(--fs-color-success);
}

.fs-plan-track--debt {
  --fs-plan-track-tone: var(--fs-color-danger);
}

/* --------------------------------------------------------- secondary rows */

/* Derived numbers: a ledger, not cards. Banding carries the eye across the gap. */
.fs-plan-rows {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-plan-rows[hidden] {
  display: none;
}

.fs-plan-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
}

.fs-plan-rows li:nth-child(even) {
  background: var(--fs-color-selected-subtle);
}

.fs-plan-rows span {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

.fs-plan-rows strong {
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- people */

/* Only the column track is ours; the panel, header and row chrome come from fs-datalist. */
.fs-plan-people__head,
.fs-plan-person__summary {
  grid-template-columns:
    minmax(180px, 2.2fr)
    minmax(150px, 1.4fr)
    minmax(140px, 1.3fr)
    minmax(140px, 1.3fr)
    28px;
  gap: 0 16px;
}

.fs-plan-people__head span:nth-child(n + 2) {
  text-align: right;
}

.fs-plan-person:last-child .fs-plan-person__summary {
  border-bottom: 0;
}

/* An opened representative is a selected row, so it carries the selection colour. */
.fs-plan-person[open] .fs-plan-person__summary {
  background: var(--fs-color-selected);
  color: var(--fs-color-selected-text);
}

.fs-plan-person__summary {
  cursor: pointer;
  list-style: none;
}

.fs-plan-person__summary::-webkit-details-marker {
  display: none;
}

.fs-plan-person__name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fs-plan-person__name strong {
  overflow: hidden;
  color: var(--fs-color-text);
  font-size: var(--fs-text-md);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-plan-person__name span {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
}

/* Result over target: one cell, the achieved number first and the aim under it. */
.fs-plan-person__amount {
  display: grid;
  gap: 1px;
  justify-items: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fs-plan-person__amount strong {
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  font-weight: 600;
}

.fs-plan-person__amount > span {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
}

/*
 * Rate cell: the bar sits under its own number so the two read as one unit and
 * every representative's bar starts at the same x — which is the whole point of
 * a list, and exactly what per-representative cards prevented.
 */
.fs-plan-person__rate {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.fs-plan-person__rate > strong {
  font-size: var(--fs-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fs-plan-person__rate--done > strong {
  color: var(--fs-color-success-text);
}

.fs-plan-person__rate--debt > strong {
  color: var(--fs-color-danger-text);
}

.fs-plan-person__rate progress {
  width: 100%;
}

.fs-plan-person__chevron {
  position: relative;
  width: 20px;
  height: 20px;
  justify-self: end;
}

.fs-plan-person__chevron::after {
  position: absolute;
  top: 5px;
  left: 6px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--fs-color-text-muted);
  border-bottom: 1.5px solid var(--fs-color-text-muted);
  content: "";
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.fs-plan-person[open] .fs-plan-person__chevron::after {
  top: 8px;
  transform: rotate(225deg);
}

/* Aligns with the row above it, which takes its inset from fs-datalist. */
.fs-plan-person__details {
  padding: 4px 16px 16px;
  background: var(--fs-color-surface-hover);
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

.fs-plan-people__empty {
  padding: 32px 16px;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .fs-plan-people__head {
    display: none;
  }

  .fs-plan-person__summary {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 12px 14px;
  }

  .fs-plan-person__name {
    grid-column: 1;
  }

  .fs-plan-person__chevron {
    grid-column: 2;
    grid-row: 1;
  }

  .fs-plan-person__amount,
  .fs-plan-person__rate {
    grid-column: 1 / -1;
    justify-items: stretch;
    text-align: left;
  }

  .fs-plan-person__amount strong,
  .fs-plan-person__amount > span {
    text-align: left;
  }

  /* Off the grid, a bare number says nothing: the label comes back with it. */
  .fs-plan-person__amount::before,
  .fs-plan-person__rate::before {
    display: block;
    margin-bottom: 2px;
    color: var(--fs-color-text-muted);
    font-size: var(--fs-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .fs-plan-person__rate > strong {
    text-align: left;
  }
}

@media (max-width: 1100px) {
  .fs-plan-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .fs-plan-figures {
    grid-template-columns: 1fr;
  }
}