/* Desempenho comercial — same frame as Financeiro › Visão Geral: a masthead with
   filters, one joined KPI panel, then a grid of cards that size themselves by
   their own container, never by the window. */
@scope (.closer-insights) {
  :scope {
    --_surface: var(--color-surface);
    --_muted: var(--color-surface-muted);
    --_border: var(--color-border-muted);
    --_ink: var(--color-text-heading);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    container: closers / inline-size;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :scope > * {
    min-inline-size: 0;
  }

  .closer-insights__masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-shrink: 0;
    padding-block: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--_border);
  }

  .closer-insights__eyebrow {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }

  .closer-insights__title {
    margin-top: var(--space-xs);
    color: var(--_ink);
    font-size: clamp(var(--text-heading-2), 3vw, var(--text-heading-1));
    font-weight: var(--font-semibold);
  }

  .closer-insights__thesis {
    max-inline-size: 46rem;
    margin-top: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-body);
  }

  /* Filters: presets above, the exact range and scope below. */
  .closer-insights__filters {
    display: grid;
    justify-items: start;
    gap: var(--space-md);
    min-inline-size: 0;
  }

  .closer-insights__periods {
    display: inline-flex;
    flex-wrap: wrap;
    max-inline-size: 100%;
    padding: 3px;
    border: 1px solid var(--_border);
    border-radius: var(--radius-xl);
    background: var(--_muted);
  }

  .closer-insights__period {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-sm, var(--text-caption));
    font-weight: var(--font-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .closer-insights__period:hover {
    color: var(--_ink);
    text-decoration: none;
  }

  .closer-insights__period[aria-current="true"] {
    background: var(--_surface);
    box-shadow: var(--shadow-xs);
    color: var(--_ink);
  }

  .closer-insights__period:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .closer-insights__filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-sm);
  }

  .closer-insights__field {
    display: grid;
    gap: var(--space-2xs, 0.25rem);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
  }

  @container closers (width < 40rem) {
    .closer-insights__filters,
    .closer-insights__filter-row {
      inline-size: 100%;
    }

    .closer-insights__field {
      flex: 1 1 9rem;
    }

    .closer-insights__field .search-filter__input {
      inline-size: 100%;
    }
  }

  /* KPI tiles: the 1px grid gap over the border color draws the dividers, so any
     column count keeps clean lines. */
  .closer-insights__summary,
  .closer-insights__card {
    flex-shrink: 0;
    border: 1px solid var(--_border);
    border-radius: var(--radius-xl);
    background: var(--_surface);
    box-shadow: var(--shadow-xs);
  }

  .closer-insights__summary {
    overflow: hidden;
    container: kpis / inline-size;
  }

  .closer-insights__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--_border);
  }

  .closer-insights__metric {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    min-inline-size: 0;
    padding: var(--space-lg);
    background: var(--_surface);
  }

  /* The stage's hue as a short rule: the same key the charts below use. */
  .closer-insights__metric[style*="--_stage"] .closer-insights__metric-label::before {
    content: "";
    display: inline-block;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    margin-inline-end: var(--space-xs);
    border-radius: var(--radius-full);
    background: var(--_stage);
    vertical-align: 0.05em;
  }

  .closer-insights__metric--lead {
    background: linear-gradient(var(--color-primary-muted), var(--color-primary-muted)), var(--_surface);
  }

  @container kpis (width >= 36rem) {
    .closer-insights__metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Six across only when a money figure still fits its tile whole. */
  @container kpis (width >= 78rem) {
    .closer-insights__metrics {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @container kpis (width < 22rem) {
    .closer-insights__metrics {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .closer-insights__metric-label {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .closer-insights__metric-value {
    overflow: hidden;
    color: var(--_ink);
    font-family: var(--font-mono);
    font-size: clamp(var(--text-heading-5), 2.2cqi, var(--text-heading-3));
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .closer-insights__delta {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
  }

  .closer-insights__delta--good {
    color: var(--color-success-text);
  }

  .closer-insights__delta--bad {
    color: var(--color-error-text);
  }

  /* Cards */
  .closer-insights__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

  @container closers (width >= 54rem) {
    .closer-insights__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .closer-insights__card--wide {
      grid-column: 1 / -1;
    }
  }

  .closer-insights__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-md);
    min-inline-size: 0;
    padding: var(--space-lg);
    container: card / inline-size;
  }

  .closer-insights__card .echart {
    min-inline-size: 0;
  }

  .closer-insights__card--empty {
    place-items: center;
    min-block-size: 14rem;
    color: var(--color-text-secondary);
  }

  .closer-insights__card--detail {
    background: linear-gradient(var(--_muted), var(--_muted)), var(--_surface);
  }

  .closer-insights__card-title {
    color: var(--_ink);
    font-size: var(--text-heading-5);
    font-weight: var(--font-semibold);
  }

  .closer-insights__card-hint {
    margin-top: var(--space-2xs, 0.25rem);
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  .closer-insights__empty {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  .closer-insights__num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

  .closer-insights__person {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-inline-size: 0;
    color: var(--_ink);
    font-weight: var(--font-semibold);
  }

  .closer-insights__avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;

    &.avatar-color-0 { background-color: var(--blue-600); }
    &.avatar-color-1 { background-color: var(--emerald-600); }
    &.avatar-color-2 { background-color: var(--amber-600); }
    &.avatar-color-3 { background-color: var(--rose-600); }
    &.avatar-color-4 { background-color: var(--violet-600); }
    &.avatar-color-5 { background-color: var(--teal-600); }
    &.avatar-color-6 { background-color: var(--orange-600); }
    &.avatar-color-7 { background-color: var(--pink-600); }
  }

  /* Readouts: the figures worth reading before the chart. */
  .closer-insights__readout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .closer-insights__readout dt {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .closer-insights__readout div[style*="--_stage"] dt::before {
    content: "";
    display: inline-block;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    margin-inline-end: var(--space-xs);
    border-radius: var(--radius-full);
    background: var(--_stage);
    vertical-align: 0.05em;
  }

  .closer-insights__readout dd {
    margin-top: var(--space-2xs, 0.25rem);
    color: var(--_ink);
    font-family: var(--font-mono);
    font-size: var(--text-heading-5);
    font-variant-numeric: tabular-nums;
  }

  .closer-insights__readout--pair dd {
    font-size: var(--text-heading-3);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
  }

  @container card (width >= 30rem) {
    .closer-insights__readout {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .closer-insights__readout--pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container card (width >= 44rem) {
    .closer-insights__readout--quad {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @container card (width >= 30rem) and (width < 44rem) {
    .closer-insights__readout--quad {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container card (width < 30rem) {
    .closer-insights__readout > div {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-sm);
    }
  }

  /* Funnel: each stage a bar centred on the axis, as wide as its share of the
     period's leads. Real text beside every bar, so it reads at any width. */
  .closer-insights__funnel-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-lg);
  }

  @container card (width >= 52rem) {
    .closer-insights__funnel-layout {
      grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.4fr);
    }
  }

  .closer-insights__funnel {
    display: grid;
    gap: var(--space-sm);
    list-style: none;
  }

  .closer-insights__funnel-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "label count share"
      "bar bar bar";
    align-items: baseline;
    gap: var(--space-2xs, 0.25rem) var(--space-sm);
  }

  .closer-insights__funnel-label {
    grid-area: label;
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
  }

  .closer-insights__funnel-count {
    grid-area: count;
    color: var(--_ink);
    font-family: var(--font-mono);
    font-size: var(--text-heading-6, var(--text-body));
    font-variant-numeric: tabular-nums;
  }

  .closer-insights__funnel-share {
    grid-area: share;
    min-inline-size: 3.5rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .closer-insights__funnel-bar {
    display: flex;
    grid-area: bar;
    justify-content: center;
    block-size: 1.75rem;
    border-radius: var(--radius-md);
    background: var(--_muted);
  }

  .closer-insights__funnel-bar span {
    inline-size: max(calc(var(--share, 0) * 1%), 4px);
    border-radius: var(--radius-md);
    background: var(--_stage);
    transition: inline-size 400ms ease;
  }

  /* Tables */
  .closer-insights__table-scroll {
    overflow-x: auto;
  }

  .closer-insights__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .closer-insights__table th,
  .closer-insights__table td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--_border);
    text-align: start;
    vertical-align: middle;
  }

  .closer-insights__table thead th {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .closer-insights__table thead .closer-insights__num {
    font-family: inherit;
  }

  .closer-insights__table tbody th {
    font-weight: var(--font-normal, 400);
  }

  .closer-insights__table tbody tr:last-child > * {
    border-bottom: 0;
  }

  .closer-insights__table tfoot th,
  .closer-insights__table tfoot td {
    border-top: 2px solid var(--color-border);
    border-bottom: 0;
    color: var(--_ink);
    font-weight: var(--font-semibold);
  }

  .closer-insights__table--board {
    min-inline-size: 62rem;
  }

  /* Long headers break onto two lines so the Gargalo column fits beside them. */
  .closer-insights__table--board thead th {
    white-space: normal;
    vertical-align: bottom;
  }

  .closer-insights__table--board .closer-insights__signal {
    min-inline-size: 7rem;
  }

  .closer-insights__table--board th,
  .closer-insights__table--board td {
    padding-inline: var(--space-xs);
  }

  .closer-insights__table .closer-insights__person {
    white-space: nowrap;
  }

  .closer-insights__signal {
    display: grid;
    grid-template-columns: minmax(4rem, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    min-inline-size: 8.5rem;
  }

  .closer-insights__signal-track {
    display: block;
    block-size: var(--space-xs);
    border-radius: var(--radius-full);
    background: var(--_muted);
  }

  .closer-insights__signal-track span {
    display: block;
    inline-size: var(--completion);
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-primary);
  }

  .closer-insights__signal strong {
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
  }

  .closer-insights__bottleneck {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs, 0.25rem) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    white-space: nowrap;
  }

  .closer-insights__bottleneck--machine {
    background: var(--color-success-muted);
    color: var(--color-success-text);
  }

  .closer-insights__bottleneck--needs-closing {
    background: var(--color-warning-muted);
    color: var(--color-warning-text);
  }

  .closer-insights__bottleneck--needs-pipeline {
    background: var(--color-info-muted);
    color: var(--color-info-text);
  }

  .closer-insights__bottleneck--in-construction {
    background: var(--_muted);
    color: var(--color-text-secondary);
  }

  /* A card too narrow for ten columns turns each salesperson into a block — name
     and bottleneck on top, the figures labelled below — instead of a table that
     scrolls sideways, like the agenda in Visão Geral. */
  @container card (width < 68rem) {
    .closer-insights__table--board {
      min-inline-size: 0;
    }

    .closer-insights__table--board thead {
      display: none;
    }

    .closer-insights__table--board tbody tr {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      gap: var(--space-sm) var(--space-md);
      padding-block: var(--space-md);
      border-bottom: 1px solid var(--_border);
    }

    .closer-insights__table--board tbody tr:last-child {
      border-bottom: 0;
    }

    .closer-insights__table--board tbody th,
    .closer-insights__table--board tbody td {
      padding: 0;
      border: 0;
    }

    .closer-insights__table--board tbody th {
      grid-column: 1 / span 3;
      grid-row: 1;
    }

    .closer-insights__table--board .closer-insights__board-bottleneck {
      grid-column: 4;
      grid-row: 1;
      justify-self: end;
    }

    .closer-insights__table--board td[data-label] {
      display: grid;
      gap: var(--space-2xs, 0.25rem);
      text-align: start;
    }

    .closer-insights__table--board td[data-label]::before {
      content: attr(data-label);
      overflow: hidden;
      color: var(--color-text-muted);
      font-family: var(--font-sans, inherit);
      font-size: var(--text-xs);
      font-weight: var(--font-semibold);
      letter-spacing: var(--tracking-wide);
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .closer-insights__table--board .closer-insights__signal {
      min-inline-size: 0;
    }
  }

  @container card (width < 32rem) {
    .closer-insights__table--board tbody tr {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .closer-insights__table--board tbody th {
      grid-column: 1 / -1;
    }

    .closer-insights__table--board .closer-insights__board-bottleneck {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: start;
    }
  }

  /* Bottleneck legend: each badge beside the rule that earns it. */
  .closer-insights__legend {
    display: grid;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--_border);
  }

  .closer-insights__legend-title {
    max-inline-size: 60rem;
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
  }

  .closer-insights__legend-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm) var(--space-lg);
  }

  .closer-insights__legend-item {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-sm);
  }

  .closer-insights__legend-item dd {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  @container card (width >= 60rem) {
    .closer-insights__legend-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container card (width < 28rem) {
    .closer-insights__legend-item {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2xs, 0.25rem);
    }
  }

  /* Ranking: position, person, a bar against the leader, the figure. */
  .closer-insights__ranking {
    display: grid;
    list-style: none;
  }

  .closer-insights__rank {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(4rem, 0.8fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-xs);
    border-bottom: 1px solid var(--_border);
    font-size: var(--text-sm);
  }

  .closer-insights__rank:last-child {
    border-bottom: 0;
  }

  .closer-insights__rank .closer-insights__person {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .closer-insights__rank-position {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
  }

  .closer-insights__rank:first-child .closer-insights__rank-position {
    color: var(--_ink);
    font-weight: var(--font-bold);
  }

  .closer-insights__rank-bar {
    display: block;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--_muted);
  }

  .closer-insights__rank-bar span {
    display: block;
    inline-size: calc(var(--share, 0) * 1%);
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-primary);
  }

  @container card (width < 22rem) {
    .closer-insights__rank {
      grid-template-columns: 2rem minmax(0, 1fr) auto;
    }

    .closer-insights__rank-bar {
      display: none;
    }
  }

  /* Drill-down */
  .closer-insights__detail-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  @container card (width >= 48rem) {
    .closer-insights__detail-charts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .closer-insights__detail-chart {
    display: grid;
    gap: var(--space-sm);
    min-inline-size: 0;
    padding: var(--space-md);
    border: 1px solid var(--_border);
    border-radius: var(--radius-lg);
    background: var(--_surface);
  }

  .closer-insights__detail-title {
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
  }

  @media (prefers-reduced-motion: reduce) {
    .closer-insights__period,
    .closer-insights__funnel-bar span {
      transition: none;
    }
  }
}