/*
  Wortic macOS UI Kit — Wallet Balance
  wm-wallet-balance

  O saldo de créditos. Duas leis não-negociáveis (ver docs/wallet-balance.json):

  1. Saldo sem equivalência é número vazio. "1.240 créditos" sozinho não diz
     nada — sempre junto: o que aquilo compra (__equivalence). É a linha mais
     importante do componente, não um detalhe menor.
  2. Crédito não é float. O gerador de cada linguagem recebe o saldo como
     INTEIRO (a menor unidade do crédito) e formata por aritmética de inteiro
     — nunca soma/subtrai ponto flutuante. Ver a nota extensa em
     code/wallet-balance.py.

  Reserva é estado real: __breakdown mostra Disponível / Reservado / Total
  como três números separados, nunca só "saldo". Ver docs > modelo_reserva.

  Compõe .wm-card (superfície) e .wm-badge (selo de tipo de crédito).
*/

@layer components {
  .wm-wallet-balance {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
    max-width: 360px;
  }

  .wm-wallet-balance__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wm-space-4);
  }

  .wm-wallet-balance__label {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }

  .wm-wallet-balance__label .wm-icon {
    color: var(--wm-accent);
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }

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

  .wm-wallet-balance__amount-value {
    font-size: var(--wm-font-size-large-title);
    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-balance__amount-unit {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-tertiary);
  }

  /* Saldo negativo: continua legível, nunca escondido — cor E o sinal no
     próprio número, mais a frase que explica o que fazer (regra 5). */
  .wm-wallet-balance[data-wm-estado="negativo"] .wm-wallet-balance__amount-value {
    color: var(--wm-error);
  }

  /* Regra 1: a equivalência mora logo abaixo do número, nunca escondida
     atrás de tooltip. É texto sempre visível. */
  .wm-wallet-balance__equivalence {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-normal);
  }
  .wm-wallet-balance__equivalence strong {
    color: var(--wm-label-primary);
    font-weight: var(--wm-font-weight-semibold);
  }

  /* Regra 4: reserva é estado real e visível — três números, nunca um só. */
  .wm-wallet-balance__breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wm-space-3);
    margin: 0;
    padding-block-start: var(--wm-space-5);
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }

  .wm-wallet-balance__breakdown-item {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
  }

  .wm-wallet-balance__breakdown dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--wm-letter-spacing-wide);
    color: var(--wm-label-tertiary);
  }

  .wm-wallet-balance__breakdown dd {
    margin: 0;
    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-balance__breakdown-item--reserved dd {
    color: var(--wm-warning);
  }

  /* Regra 7: nunca só cor — o selo de saldo baixo carrega ícone E texto. */
  .wm-wallet-balance__flag {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    align-self: flex-start;
    padding: var(--wm-space-1) var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-warning-fill);
    color: var(--wm-warning);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
  }
  .wm-wallet-balance__flag .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }
  .wm-wallet-balance__flag--negativo {
    background: var(--wm-error-fill);
    color: var(--wm-error);
  }

  .wm-wallet-balance__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    padding: var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    background: var(--wm-error-fill);
    color: var(--wm-label-primary);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
  }
  .wm-wallet-balance__notice .wm-icon {
    flex-shrink: 0;
    margin-block-start: 2px;
    color: var(--wm-error);
  }

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

  /* Vários tipos de crédito no mesmo widget (vídeo/texto/imagem) — cada
     linha é uma moeda distinta, com o próprio ícone e cor de acento;
     nunca somadas num único número, porque não são fungíveis entre si. */
  .wm-wallet-balance__types {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .wm-wallet-balance__type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wm-space-4);
  }

  .wm-wallet-balance__type-id {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-primary);
  }

  .wm-wallet-balance__type-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wm-fill-secondary);
    color: var(--wm-label-secondary);
  }
  .wm-wallet-balance__type-icon .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }
  .wm-wallet-balance__type[data-wm-tipo="video"] .wm-wallet-balance__type-icon {
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
  }
  .wm-wallet-balance__type[data-wm-tipo="imagem"] .wm-wallet-balance__type-icon {
    background: var(--wm-success-fill);
    color: var(--wm-success);
  }
  .wm-wallet-balance__type[data-wm-tipo="texto"] .wm-wallet-balance__type-icon {
    background: var(--wm-warning-fill);
    color: var(--wm-warning);
  }

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

  /* ------------------------------------------------------------
     Mini — cabe num cabeçalho ou numa barra lateral estreita. Uma
     linha só: ícone, número, e opcionalmente o botão de recarga.
     Nunca repinta a versão completa — é outra composição, mais curta.
     ------------------------------------------------------------ */
  .wm-wallet-balance--mini {
    display: inline-flex;
    /* .wm-wallet-balance (base) define flex-direction: column para o
       cartão cheio — sem resetar aqui, a mini herdava a coluna e
       empilhava ícone/texto/botão em vez de ficar numa linha só. */
    flex-direction: row;
    align-items: center;
    gap: var(--wm-space-4);
    max-width: none;
    padding: var(--wm-space-2) var(--wm-space-4) var(--wm-space-2) var(--wm-space-2);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-secondary);
  }

  .wm-wallet-balance--mini .wm-wallet-balance__mini-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
  }
  .wm-wallet-balance--mini .wm-wallet-balance__mini-icon .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }

  .wm-wallet-balance--mini[data-wm-estado="negativo"] .wm-wallet-balance__mini-icon {
    background: var(--wm-error-fill);
    color: var(--wm-error);
  }
  .wm-wallet-balance--mini[data-wm-estado="baixo"] .wm-wallet-balance__mini-icon {
    background: var(--wm-warning-fill);
    color: var(--wm-warning);
  }

  .wm-wallet-balance__mini-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  .wm-wallet-balance__mini-value {
    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-balance--mini[data-wm-estado="negativo"] .wm-wallet-balance__mini-value {
    color: var(--wm-error);
  }

  .wm-wallet-balance__mini-equivalence {
    font-size: 10px;
    color: var(--wm-label-tertiary);
  }

  .wm-wallet-balance__mini-add {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
    margin-inline-start: var(--wm-space-1);
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wm-label-secondary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-wallet-balance__mini-add:hover {
    background: var(--wm-fill-primary);
    color: var(--wm-accent);
  }
  .wm-wallet-balance__mini-add:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }
  .wm-wallet-balance__mini-add .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }
}