/*
  Wortic macOS UI Kit — Wallet Usage
  wm-wallet-usage

  Consumo de crédito NO TEMPO, por tipo de operação. Compõe .wm-card (moldura)
  e a família chart-* já pronta: o gráfico embutido usa literalmente as
  classes de components/chart-bar/chart-bar.css (wm-chart-bar, __plot,
  __barra--serie-N, __legend, __table) — este arquivo não desenha barra
  nenhuma, só o que é específico de wallet-usage (cabeçalho, período,
  tendência, detalhamento por tipo). Ver docs/wallet-usage.json.

  Regra do briefing: "consumo por período precisa deixar claro QUAL período,
  com data, não só 'últimos 30 dias'" — por isso __period sempre imprime o
  intervalo de datas por extenso, e __periods (o seletor) nunca é a única
  pista de qual janela está em tela.
*/

@layer components {
  .wm-wallet-usage {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
  }

  .wm-wallet-usage__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wm-space-6);
    flex-wrap: wrap;
  }

  .wm-wallet-usage__title-group {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
    min-width: 0;
  }

  .wm-wallet-usage__title {
    margin: 0;
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }

  /* A data por extenso é obrigatória — nunca só "últimos N dias" (regra do
     briefing). O ícone reforça, nunca substitui, o texto. */
  .wm-wallet-usage__period {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
  }
  .wm-wallet-usage__period .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
    color: var(--wm-label-tertiary);
  }
  .wm-wallet-usage__period-days {
    color: var(--wm-label-tertiary);
  }

  /* Gancho de texto dentro de __period — recebe a data por extenso; sem
     regra própria além de herdar a cor do pai (existe para o JS ter um
     seletor estável, ver wallet-usage.js renderizar()). */
  .wm-wallet-usage__period-label {
    color: inherit;
  }

  .wm-wallet-usage__periods {
    flex: none;
  }

  .wm-wallet-usage__summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--wm-space-3) var(--wm-space-4);
  }

  .wm-wallet-usage__summary-value {
    font-size: var(--wm-font-size-title-2);
    font-weight: var(--wm-font-weight-bold);
    letter-spacing: var(--wm-letter-spacing-tighter);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }

  .wm-wallet-usage__summary-unit {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
  }

  /* Tendência: ícone + texto, nunca só a cor (mesma regra de sinal do
     wallet-ledger). "Alta" de CONSUMO é aviso (mais gasto), não celebração —
     por isso usa --wm-warning, e "baixa" usa --wm-success. */
  .wm-wallet-usage__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-medium);
  }
  .wm-wallet-usage__trend .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }
  .wm-wallet-usage__trend--alta { color: var(--wm-warning); }
  .wm-wallet-usage__trend--baixa { color: var(--wm-success); }
  .wm-wallet-usage__trend--estavel { color: var(--wm-label-tertiary); }

  /* O gráfico embutido reaproveita chart-bar.css inteiro; aqui só tiramos a
     sombra/padding próprios da figura standalone quando ela mora dentro de
     OUTRO cartão (o wm-card do wallet-usage já dá a moldura). */
  .wm-wallet-usage__chart.wm-chart-bar {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  /* Detalhamento por tipo — mesma ideia de wallet-balance__types (lista,
     nunca somado num número só de moedas diferentes), mas aqui são
     OPERAÇÕES no período, não saldos de moeda distinta. */
  .wm-wallet-usage__breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    list-style: none;
    margin: 0;
    padding: var(--wm-space-5) 0 0;
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }

  .wm-wallet-usage__breakdown-item {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
  }

  .wm-wallet-usage__breakdown-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-primary);
  }

  .wm-wallet-usage__breakdown-value {
    flex: none;
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }

  .wm-wallet-usage__breakdown-pct {
    font-weight: var(--wm-font-weight-regular);
    color: var(--wm-label-tertiary);
  }

  /* Vazio — sem consumo no período; NÃO reusa o bloco genérico de
     chart-engine (data-wm-chart-vazio já cobre o gráfico), este é o texto
     de apoio abaixo dele explicando o que preencheria a tela. */
  .wm-wallet-usage__empty-note {
    margin: 0;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    text-align: center;
  }
}