/*
 * The four zones on the overview and the "Auswertung" page
 * (Dashboard::ReportsController, Launch-Paket L6). Bars are plain CSS: a width
 * in percent on a track, no chart package and no build step. The head numbers
 * reuse .customer-stats and .tile.
 */
@layer components {
  .stat-zone {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: start;
  }

  /* Trend against last month, next to the figure it belongs to */
  .trend {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .trend--up {
    color: var(--color-positive);
  }

  .trend--down,
  .trend--flat,
  .trend--new {
    color: var(--color-ink-dark);
  }

  /* One row per dish, hour or source: label, figure, track */
  .stat-bars {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .stat-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    align-items: baseline;
  }

  .stat-bar__label {
    overflow-wrap: anywhere;
    font-weight: 600;
    text-align: start;
  }

  .stat-bar__value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
  }

  .stat-bar__track {
    grid-column: 1 / -1;
    background-color: var(--color-ink-lightest);
    border-radius: 2px;
    block-size: 8px;
    display: block;
    overflow: hidden;
  }

  .stat-bar__fill {
    background-color: var(--color-accent);
    border-radius: 2px;
    block-size: 100%;
    display: block;
  }

  .stat-bar__note {
    grid-column: 1 / -1;
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
    text-align: start;
  }

  /* "Trichter": one row per source under the four bars (M4) */
  .funnel-sources {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .funnel-source {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    align-items: baseline;
    border-block-start: 1px dashed var(--color-ink-lightest);
    padding-block-start: 8px;
    text-align: start;
  }

  .funnel-source__label {
    font-weight: 600;
  }

  .funnel-source__rate {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
  }

  .funnel-source__steps {
    grid-column: 1 / -1;
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* "Jetzt handeln" when a pickup is already overdue */
  .tile--alert {
    --tile-bg: var(--color-negative-soft);
    --tile-border: transparent;
  }

  /* "Gesparte Provision": the last and quietest tile on the overview */
  .tile--side {
    --tile-bg: transparent;
  }

  .tile__value--side {
    font-size: var(--text-large);
  }

  .setup--compact .setup__step {
    padding-block: 8px;
  }
}