/* ============================================================== as vendas, na administracao

   Duas pecas: o resumo de 30 dias na visao geral, e a lista dos ultimos pagamentos na vista de
   vendas. A lateral responde "quanto entrou?"; a lista responde "de quem, e em que pe". As duas
   somem quando a cobranca esta desligada — ver `js/admin.vendas.js`. */

/* ------------------------------------------------------------------------- a lateral */

.vendas-lateral { display: grid; gap: 4px; }

/* O numero grande e em ouro: e a cor do dinheiro. */
.vendas-total { margin: 2px 0 0; font-family: var(--titulo); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ouro); font-variant-numeric: tabular-nums; }
.vendas-sub { margin: 0 0 8px; font-size: 0.78rem; color: var(--texto-fraco); }

.vendas-linhas { margin: 0; display: grid; gap: 3px; }

.vendas-linhas div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--texto-tenue);
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--preto) 40%, transparent);
  font-size: 0.82rem;
  color: var(--texto-fraco);
}

.vendas-linhas dt { margin: 0; }
.vendas-linhas dd { margin: 0; color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pago sem resgate e dinheiro parado: leva a faixa de ouro das filas de dinheiro. */
.vendas-linhas div:nth-child(2) { border-left-color: var(--ouro); }
.vendas-linhas div:nth-child(2) dd { color: var(--ouro); }
.vendas-linhas div:nth-child(3) { border-left-color: var(--erro); }

/* --------------------------------------------------------------------------- a lista */

.vendas-nota { margin: 0 0 0.9rem; }

.vendas-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-g); background: var(--vidro); box-shadow: var(--relevo), var(--sombra-cartao); }

.vendas-tabela { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

.vendas-tabela th {
  text-align: left;
  padding: 0.7rem 0.9rem;
  font-family: var(--maquina);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  background: color-mix(in srgb, var(--elevado) 70%, transparent);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.vendas-tabela td { padding: 0.6rem 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--linha) 60%, transparent); vertical-align: middle; white-space: nowrap; }
.vendas-tabela tr:last-child td { border-bottom: 0; }
.vendas-tabela tbody tr:hover { background: var(--vidro-alto); }

.vendas-quando { color: var(--texto-fraco); font-size: 0.8rem; }
.vendas-valor { font-variant-numeric: tabular-nums; }
.vendas-via { color: var(--texto-fraco); }

/* O cliente e um botao com cara de link: clicar preenche a busca de licencas com o id. */
.vendas-cliente { font: inherit; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; color: var(--roxo-claro); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.vendas-cliente:hover, .vendas-cliente:focus-visible { color: var(--texto); background: none; }

/* O estado e uma pilula com cor semantica: verde pago, ambar pendente, vermelho estornado. */
.vendas-estado { display: inline-block; padding: 2px 9px; border: 1px solid var(--borda); border-radius: 999px; font-size: 0.74rem; color: var(--texto-fraco); }
.vendas-estado--aprovado { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.vendas-estado--pendente { color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 35%, transparent); background: color-mix(in srgb, var(--atencao) 8%, transparent); }
.vendas-estado--estornado { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 35%, transparent); background: color-mix(in srgb, var(--erro) 8%, transparent); }

.vendas-sem-resgate { color: var(--ouro); font-weight: 600; }
#vendas-mais { margin-top: 0.75rem; }