/*
  Wortic macOS UI Kit — Wallet Meter
  wm-wallet-meter

  Medidor de consumo AO VIVO durante uma operação longa. Compõe
  components/progress/progress.css inteiro (.wm-progress, .wm-progress__fill,
  .wm-progress--indeterminate, .wm-spinner) — nenhuma barra é desenhada com
  CSS novo aqui.

  Regra do briefing, não-negociável: o progresso mostrado tem que vir do
  HOSPEDEIRO de verdade (mesmo princípio de upload-queue — xhr.upload real
  ou leitura de bloco real, nunca cronômetro fingindo). Quando o hospedeiro
  não sabe quanto falta, o estado é INDETERMINADO — a barra de vaivém do
  kit, nunca uma barra "enchendo" por tempo como se soubesse o total.
*/

@layer components {
  .wm-wallet-meter {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-5);
    max-width: 420px;
  }

  .wm-wallet-meter__header {
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
  }

  .wm-wallet-meter__icon {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
  }
  .wm-wallet-meter__icon .wm-icon {
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
  }
  .wm-wallet-meter[data-wm-wallet-meter-estado="concluido"] .wm-wallet-meter__icon {
    background: var(--wm-success-fill);
    color: var(--wm-success);
  }
  .wm-wallet-meter[data-wm-wallet-meter-estado="erro"] .wm-wallet-meter__icon {
    background: var(--wm-error-fill);
    color: var(--wm-error);
  }

  .wm-wallet-meter__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

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

  /* O detalhe de progresso real — "quadro 340 de 720", nunca só "processando".
     Some quando o estado é indeterminado (ver __status--indeterminado). */
  .wm-wallet-meter__status {
    margin: 0;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    font-variant-numeric: tabular-nums;
  }

  .wm-wallet-meter__progress-row {
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
  }
  /* [hidden] tem especificidade menor que a classe acima e perderia para
     `display: flex` sem este override explícito — mesma armadilha já
     resolvida em upload-queue.css. Usado quando o JS troca de estado
     (em-andamento → concluído/erro) e some com a barra. */
  .wm-wallet-meter__progress-row[hidden],
  .wm-wallet-meter__status[hidden],
  .wm-wallet-meter__actions[hidden],
  .wm-wallet-meter__resolution[hidden] {
    display: none;
  }
  .wm-wallet-meter__progress-row .wm-progress {
    flex: 1 1 auto;
  }
  .wm-wallet-meter__progress-pct {
    flex: none;
    min-width: 3ch;
    text-align: end;
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }

  /* Consumo ao vivo — o número sobe em tempo real junto da barra, sempre
     inteiro (crédito não é float). "de até X estimados" ancora no que
     wallet-estimate já prometeu, sem duplicar a lógica de faixa aqui. */
  .wm-wallet-meter__consumption {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--wm-space-2) var(--wm-space-3);
    padding: var(--wm-space-4) var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    background: var(--wm-fill-quaternary, var(--wm-fill-secondary));
  }

  .wm-wallet-meter__consumption-value {
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }
  .wm-wallet-meter__consumption-unit {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
  }
  .wm-wallet-meter__consumption-estimate {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }

  /* Reserva liberada — quando a operação termina (sucesso ou erro), a
     mensagem diz explicitamente o que aconteceu com o crédito reservado
     que não foi usado (regra do modelo de reserva: nunca fica implícito). */
  .wm-wallet-meter__resolution {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    margin: 0;
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
  }
  .wm-wallet-meter__resolution .wm-icon {
    flex: none;
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
    margin-block-start: 2px;
  }
  .wm-wallet-meter__resolution--sucesso { color: var(--wm-success); }
  .wm-wallet-meter__resolution--erro { color: var(--wm-error); }

  .wm-wallet-meter__actions {
    display: flex;
    gap: var(--wm-space-4);
  }

  @media (prefers-reduced-motion: reduce) {
    /* wm-progress--indeterminate já reduz para 2.4s em progress.css; nada
       extra a fazer aqui — só documentando que o componente não adiciona
       nenhuma outra animação própria. */
  }
}