/*
  Wortic macOS UI Kit — Wallet Autotopup
  wm-wallet-autotopup

  Recarga automática: gatilho (abaixo de quanto recarrega), valor (quanto
  recarrega) e TETO MENSAL — a proteção contra fuga de gasto. Compõe
  .wm-settings-group/.wm-settings-row (as três linhas de configuração),
  .wm-field/.wm-field--stepper (os números) e .wm-progress (consumo do teto
  no mês) — nenhum controle novo é desenhado aqui.

  Regra do briefing, não-negociável: o teto mensal fica SEMPRE visível
  junto do gatilho (mesmo grupo de configuração, nunca numa tela separada),
  e o componente deixa EXPLÍCITO o que acontece quando o teto é atingido —
  a recarga automática para, e se o saldo continuar caindo o serviço para
  de funcionar. Nunca deixar essa consequência implícita.

  Raiz é <div>, nunca <form> — se o hospedeiro envolver isto num form de
  salvar preferências, o form fica FORA deste componente.
*/

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

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

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

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

  .wm-wallet-autotopup__subtitle {
    margin: 0;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }

  /* Campo numérico dentro de uma settings-row — largura curta, alinhado à
     direita (mesmo idioma de qualquer stepper do kit). */
  .wm-wallet-autotopup .wm-settings-row__control .wm-field {
    width: 128px;
  }
  .wm-wallet-autotopup .wm-field__input {
    text-align: end;
  }

  /* Desativado: as linhas de configuração continuam legíveis (nunca
     escondidas), só esmaecidas — o usuário ainda vê o que ESTAVA
     configurado antes de religar. */
  .wm-wallet-autotopup[data-wm-wallet-autotopup-estado="desativado"] .wm-settings-group,
  .wm-wallet-autotopup[data-wm-wallet-autotopup-estado="desativado"] .wm-wallet-autotopup__cap {
    opacity: 0.5;
    pointer-events: none;
  }

  /* ------------------------------------------------------------
     Teto mensal — a proteção central deste componente. Fica no
     MESMO cartão do gatilho, nunca numa tela separada.
     ------------------------------------------------------------ */
  .wm-wallet-autotopup__cap {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    padding: var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    background: var(--wm-fill-quaternary, var(--wm-fill-secondary));
  }

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

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

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

  .wm-wallet-autotopup__cap-usage {
    margin: 0;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    font-variant-numeric: tabular-nums;
  }

  /* Barra perto do teto — aviso visual além do texto (que já é a fonte
     de verdade), reaproveitando o token de warning em vez de um novo
     gradiente. */
  .wm-wallet-autotopup__cap[data-wm-perto-do-teto="true"] .wm-progress__fill {
    background: var(--wm-warning);
  }

  /* A explicação da CONSEQUÊNCIA — nunca implícita. Ícone + texto sempre
     visíveis, não um tooltip. */
  .wm-wallet-autotopup__cap-explain {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    margin: 0;
    padding-block-start: var(--wm-space-3);
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
    color: var(--wm-label-secondary);
  }
  .wm-wallet-autotopup__cap-explain .wm-icon {
    flex: none;
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
    margin-block-start: 2px;
    color: var(--wm-label-tertiary);
  }

  /* Teto atingido neste mês — a recarga PAROU; banner de aviso, nunca só
     a barra cheia sem explicação. */
  .wm-wallet-autotopup__cap-reached {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    padding: var(--wm-space-4) var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    background: var(--wm-error-fill);
    color: var(--wm-error);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
  }
  .wm-wallet-autotopup__cap-reached .wm-icon {
    flex: none;
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
    margin-block-start: 2px;
  }
  .wm-wallet-autotopup__cap-reached strong {
    font-weight: var(--wm-font-weight-semibold);
  }

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