/*
  Wortic macOS UI Kit — Wallet Ledger
  wm-wallet-ledger

  O histórico de crédito: cada linha diz QUANDO, O QUÊ (a operação que
  causou o lançamento), QUANTO e o SALDO DEPOIS. "Por que fui cobrado?" é
  a pergunta nº 1 do suporte de qualquer sistema de crédito — por isso a
  célula de operação (__op) nunca é só "Consumo": é sempre "Geração de
  vídeo — Projeto Landing Page", com o recurso nomeado, na PRÓPRIA linha,
  nunca só atrás do botão de expandir.

  Compõe components/table-responsive/table-responsive.css inteiro — a
  mesma raiz carrega as duas classes (wm-table-responsive +
  wm-wallet-ledger) e a MESMA <table>, os MESMOS data-wm-prioridade e o
  MESMO botão de alcance. Este arquivo só acrescenta o que é específico
  de um lançamento de crédito: tipo, sinal, saldo depois e o vínculo de
  estorno com a cobrança original (regra 6 do briefing — estorno nunca
  é uma linha que só ajusta o saldo em silêncio).

  Reserva é estado real (regra 4): uma reserva em andamento aparece como
  LINHA própria, tipo "reserva", com o selo "Pendente" — ela não é um
  lançamento definitivo e ninguém deve confundir com um consumo já
  fechado.
*/

@layer components {
  .wm-wallet-ledger__table .wm-wallet-ledger__col-quando { width: 15%; }
  .wm-wallet-ledger__table .wm-wallet-ledger__col-op { width: 45%; }
  .wm-wallet-ledger__table .wm-wallet-ledger__col-quanto { width: 20%; }
  .wm-wallet-ledger__table .wm-wallet-ledger__col-saldo { width: 20%; }

  .wm-wallet-ledger__op {
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
    min-width: 0;
    white-space: normal;
  }

  .wm-wallet-ledger__op-icon {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wm-fill-secondary);
    color: var(--wm-label-secondary);
  }
  .wm-wallet-ledger__op-icon .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }

  /* Cor do círculo por TIPO de lançamento — nunca a única pista (o
     texto do rótulo e o sinal do valor já dizem o mesmo). */
  tr[data-wm-tipo="compra"] .wm-wallet-ledger__op-icon,
  tr[data-wm-tipo="estorno"] .wm-wallet-ledger__op-icon {
    background: var(--wm-success-fill);
    color: var(--wm-success);
  }
  tr[data-wm-tipo="reserva"] .wm-wallet-ledger__op-icon {
    background: var(--wm-warning-fill);
    color: var(--wm-warning);
  }
  tr[data-wm-tipo="ajuste"] .wm-wallet-ledger__op-icon {
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
  }

  .wm-wallet-ledger__op-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .wm-wallet-ledger__op-title {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-primary);
  }

  /* O RECURSO — a resposta de verdade a "por que fui cobrado?": qual
     projeto, qual arquivo, qual geração. Nunca omitido. */
  .wm-wallet-ledger__op-resource {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
  }

  /* Regra 6: estorno é linha própria, ligada à cobrança original — nunca
     um ajuste silencioso no saldo. */
  .wm-wallet-ledger__op-ref {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-1);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-accent);
    text-decoration: none;
  }
  .wm-wallet-ledger__op-ref:hover { text-decoration: underline; }
  .wm-wallet-ledger__op-ref:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }
  .wm-wallet-ledger__op-ref .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }

  /* Regra 7 (o espírito dela aplicado ao ledger): o sinal do valor é
     SEMPRE escrito ("+", "-"), a cor nunca é a única informação. */
  .wm-wallet-ledger__amount {
    font-variant-numeric: tabular-nums;
    font-weight: var(--wm-font-weight-semibold);
    white-space: nowrap;
  }
  .wm-wallet-ledger__amount--credito { color: var(--wm-success); }
  .wm-wallet-ledger__amount--debito { color: var(--wm-label-primary); }
  .wm-wallet-ledger__amount-unit {
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-regular);
    color: var(--wm-label-tertiary);
    margin-inline-start: var(--wm-space-1);
  }

  .wm-wallet-ledger__balance-after {
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-secondary);
    white-space: nowrap;
  }
  /* Saldo depois negativo — mesma cor de erro usada em wallet-balance;
     nunca escondido dentro do extrato. */
  .wm-wallet-ledger__balance-after--negativo {
    color: var(--wm-error);
    font-weight: var(--wm-font-weight-semibold);
  }

  /* Linha de reserva pendente: tracejado + selo, para nunca ser
     confundida com um lançamento já fechado. */
  tr[data-wm-pendente="true"] {
    background: var(--wm-fill-tertiary);
  }
  tr[data-wm-pendente="true"] .wm-wallet-ledger__op-title {
    color: var(--wm-label-secondary);
  }

  .wm-wallet-ledger__pending-badge {
    margin-inline-start: var(--wm-space-3);
  }

  .wm-wallet-ledger__type-badge {
    margin-inline-start: var(--wm-space-3);
  }

  /* Rodapé de resumo do período mostrado, acima da tabela — total
     debitado/creditado no filtro atual (composição com data-toolbar). */
  .wm-wallet-ledger__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-8);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
    background: var(--wm-surface-primary);
  }
  .wm-wallet-ledger__summary-item {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
  }
  .wm-wallet-ledger__summary-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--wm-letter-spacing-wide);
    color: var(--wm-label-tertiary);
  }
  .wm-wallet-ledger__summary-value {
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }
  .wm-wallet-ledger__summary-value--credito { color: var(--wm-success); }

  /* A célula do estado vazio precisa vencer tbody td (table-responsive):
     sem isto, `white-space: nowrap` + `max-width: 0` da célula genérica
     corta a frase de explicação na borda do contêiner — visto na tela,
     não é coisa que o checador de classes pega. */
  .wm-wallet-ledger__table tbody td:has(.wm-wallet-ledger__empty) {
    max-width: none;
    overflow: visible;
    white-space: normal;
  }

  .wm-wallet-ledger__empty {
    padding: var(--wm-space-13) var(--wm-space-8);
    text-align: center;
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-subheadline);
    white-space: normal;
  }
}