/**
 * Poupex Play 4.0 — Extrato e Histórico Financeiro
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-statement
 *
 * Sprint 6 do redesign.
 *
 * Um componente para as duas telas — `historico.php` (extrato por
 * categoria) e `ganhos.php` (depósitos e saques). Elas já compartilhavam
 * `.empty-state`, `.finance-tabs` e `transacao_extrato_info()`.
 *
 * CONSOLIDAÇÃO: o bloco `<style>` embutido no fim de `historico.php`
 * (39 linhas, 11 cores de selo em paletas arbitrárias) foi removido e
 * reescrito aqui sobre a paleta oficial. Nenhuma categoria perdeu
 * identificação — as cores passaram a ter significado semântico.
 *
 * Nenhum dos dois arquivos contém JavaScript.
 */

/* ============================================================
   1 · CONTÊINER
   ============================================================ */

.pp4-statement {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-5);
  color: var(--pp4-color-text);
}

/* Cabeçalho da página → design-system/shell.css (seção 8).
   Removido no Sprint 9: este bloco existia igual aqui, em wallet.css e
   em finance-flow.css/statement.css. O parcial `_page_header.php` serve
   dez telas, então o tratamento pertence ao shell, não ao escopo .pp4-statement. */

.pp4-statement .history-intro {
  margin: 0;
  font-size: var(--pp4-text-md);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   2 · RESUMO DO PERÍODO
   ============================================================ */

.pp4-stmt-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-3);
}

.pp4-stmt-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-stmt-cell__label {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-stmt-cell__value {
  font-size: 1.375rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--pp4-color-text);
}

.pp4-stmt-cell--in .pp4-stmt-cell__value { color: var(--pp4-color-success); }
.pp4-stmt-cell--out .pp4-stmt-cell__value { color: var(--pp4-color-danger); }

/* ============================================================
   3 · ABAS DE CATEGORIA  →  design-system/tabs.css
   ============================================================

   Removido no Sprint 9. `.history-tab` e `.finance-tab` eram estilizados
   aqui e, de novo, em `wallet.css` — duas cópias que já divergiam em
   min-width e padding. Agora existe um componente só, em `tabs.css`,
   carregado depois deste arquivo. */

/* ============================================================
   4 · LISTA DE MOVIMENTAÇÕES
   ============================================================ */

.pp4-statement .history-list,
.pp4-statement .finance-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  overflow: hidden;
}

/* —— Cabeçalho de dia —— */
.pp4-stmt-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-3) var(--pp4-space-5);
  background: var(--pp4-color-surface-2);
  border-bottom: 1px solid var(--pp4-color-border);
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-stmt-day__total {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp4-color-text) !important;
}

/* —— Linha —— */
.pp4-statement .history-row,
html[data-theme] .pp4-statement .history-row,
.pp4-statement .finance-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-4) var(--pp4-space-5) !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pp4-color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-statement .history-row:last-child,
.pp4-statement .finance-row:last-child { border-bottom: 0 !important; }

.pp4-statement .history-row:hover,
.pp4-statement .finance-row:hover { background: var(--pp4-color-surface-2) !important; }

.pp4-statement .history-row__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.pp4-statement .history-row__title {
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text) !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.pp4-statement .history-row__sub {
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-statement .history-row__sub--saldo {
  font-variant-numeric: tabular-nums;
  opacity: 1;
}

.pp4-statement .history-row__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
}

.pp4-statement .history-row__value,
html[data-theme] .pp4-statement .history-row__value {
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--pp4-color-success) !important;
}

.pp4-statement .history-row__value--debit,
html[data-theme] .pp4-statement .history-row__value--debit {
  color: var(--pp4-color-danger) !important;
}

.pp4-statement .history-row__value--reinvest,
html[data-theme] .pp4-statement .history-row__value--reinvest {
  color: var(--pp4-color-text-muted) !important;
}

.pp4-statement .history-row__time {
  font-size: var(--pp4-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   5 · SELOS DE CATEGORIA
   ============================================================

   Substituem o bloco <style> que ficava no fim de historico.php.
   Ali havia 11 cores de paletas soltas (amarelo 234,179,8 · céu
   56,189,248 · ouro 196,168,94 …). Agora cada selo usa uma cor com
   significado: entrada verde, saída vermelha, conversão roxa,
   promocional âmbar, produto azul, administrativo neutro. */

.pp4-statement .history-badge,
html[data-theme] .pp4-statement .history-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-3) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: 10px;
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Entradas */
.pp4-statement .history-badge--deposito,
.pp4-statement .history-badge--tarefas,
.pp4-statement .history-badge--poufit {
  background: var(--pp4-color-success-soft) !important;
  color: var(--pp4-color-success) !important;
}

/* Saídas */
.pp4-statement .history-badge--saque {
  background: var(--pp4-color-danger-soft) !important;
  color: var(--pp4-color-danger) !important;
}

/* Conversão */
.pp4-statement .history-badge--reinvest {
  background: var(--pp4-color-purple-soft) !important;
  color: var(--pp4-color-purple-bright) !important;
}

/* Promocional */
.pp4-statement .history-badge--bolao,
.pp4-statement .history-badge--bonus {
  background: var(--pp4-color-warning-soft) !important;
  color: var(--pp4-color-warning) !important;
}

/* Produtos e rede */
.pp4-statement .history-badge--poufinancas,
.pp4-statement .history-badge--trade,
.pp4-statement .history-badge--indicacao {
  background: var(--pp4-color-blue-soft) !important;
  color: var(--pp4-color-blue-bright) !important;
}

/* Administrativo */
.pp4-statement .history-badge--ajuste {
  background: var(--pp4-color-surface-3) !important;
  color: var(--pp4-color-text-secondary) !important;
}

/* ============================================================
   6 · TABELA DE DEPÓSITOS E SAQUES (ganhos.php)
   ============================================================ */

.pp4-statement .finance-table,
html[data-theme] .pp4-statement .finance-table {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.pp4-statement .finance-table__head {
  display: none;
}

.pp4-statement .finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "id valor status" "nota nota nota";
  align-items: center;
  row-gap: 6px;
  column-gap: var(--pp4-space-3);
}

.pp4-statement .finance-row__id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  flex-wrap: wrap;
  font-family: var(--pp4-font-mono);
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-statement .finance-row__tag,
html[data-theme] .pp4-statement .finance-row__tag {
  padding: 2px 8px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-3) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  font-family: var(--pp4-font-sans);
  font-size: 10px;
  font-weight: var(--pp4-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pp4-statement .finance-row__value,
html[data-theme] .pp4-statement .finance-row__value {
  grid-area: valor;
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.pp4-statement .finance-row__value--deposito,
html[data-theme] .pp4-statement .finance-row__value--deposito {
  color: var(--pp4-color-success) !important;
}

.pp4-statement .finance-row__value--saque,
html[data-theme] .pp4-statement .finance-row__value--saque {
  color: var(--pp4-color-danger) !important;
}

.pp4-statement .finance-row__note {
  grid-area: nota;
  margin: 0;
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-statement .finance-row__note strong { color: var(--pp4-color-text) !important; }

/* —— Selo de situação —— */
.pp4-statement .status-pill,
html[data-theme] .pp4-statement .status-pill {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0 !important;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-3) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  white-space: nowrap;
  box-shadow: none !important;
}

/* Classes reais de `ganho_status_label()`: --success, --warning, --danger. */
.pp4-statement .status-pill--success,
html[data-theme] .pp4-statement .status-pill--success {
  background: var(--pp4-color-success-soft) !important;
  color: var(--pp4-color-success) !important;
}

.pp4-statement .status-pill--warning,
html[data-theme] .pp4-statement .status-pill--warning {
  background: var(--pp4-color-warning-soft) !important;
  color: var(--pp4-color-warning) !important;
}

.pp4-statement .status-pill--danger,
html[data-theme] .pp4-statement .status-pill--danger {
  background: var(--pp4-color-danger-soft) !important;
  color: var(--pp4-color-danger) !important;
}

/* `app.css:4442` dá à nota fundo claro e borda azul; `brand-theme` troca
   a borda por ouro. Aqui a nota é texto, não caixa. */
.pp4-statement .finance-row .finance-row__note,
html[data-theme] .pp4-statement .finance-row .finance-row__note {
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* ============================================================
   7 · ESTADO VAZIO
   ============================================================ */

.pp4-statement .empty-state,
html[data-theme] .pp4-statement .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-16) var(--pp4-space-5) !important;
  margin: 0 !important;
  border: 1px dashed var(--pp4-color-border-strong) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  text-align: center;
  box-shadow: none !important;
}

.pp4-statement .empty-state__icon,
html[data-theme] .pp4-statement .empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-statement .empty-state__icon svg {
  width: 34px;
  height: 34px;
  color: currentColor !important;
  stroke: currentColor !important;
}

.pp4-statement .empty-state p {
  margin: 0;
  font-size: var(--pp4-text-base);
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   8 · RODAPÉ DA LISTA
   ============================================================ */

.pp4-stmt-foot {
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border-top: 1px solid var(--pp4-color-border);
  background: var(--pp4-color-surface-2);
  font-size: var(--pp4-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   9 · NEUTRALIZAÇÃO DO TEMA LEGADO
   ============================================================

   `brand-theme.css:768` usa a cadeia de 4 `:not()` (0,6,0) sobre
   `.card`; aqui o alvo é `.history-row` e `.empty-state`, que estão
   na mesma lista de seletores da linha 775. */

.pp4-statement .history-row:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-statement .empty-state:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary) {
  border-color: var(--pp4-color-border) !important;
}

.pp4-statement .history-row:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary) {
  background-color: transparent !important;
}

.pp4-statement .empty-state:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary) {
  background-color: var(--pp4-color-surface) !important;
}

/* `.shell--app .history-row__value--credit` e
   `.shell--app .fin-extrato-link__value` pintam de ouro em 0,2,0. */
.pp4-statement .history-list .history-row__value,
.pp4-statement .finance-rows .finance-row__value {
  color: var(--pp4-color-success) !important;
}

.pp4-statement .history-list .history-row__value--debit,
.pp4-statement .finance-rows .finance-row__value--saque {
  color: var(--pp4-color-danger) !important;
}

.pp4-statement .history-list .history-row__value--reinvest {
  color: var(--pp4-color-text-muted) !important;
}

/* `.shell--app p` = 0,1,1 e `.shell--app .history-row__meta` = 0,2,0. */
.pp4-statement .history-list .history-row__sub,
.pp4-statement .history-list .history-row__time,
.pp4-statement .finance-rows .finance-row__note,
.pp4-statement .empty-state p,
.pp4-statement .history-intro {
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   10 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1023px) {
  .pp4-stmt-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pp4-statement { gap: var(--pp4-space-4); }
  .pp4-statement .page-header__title { font-size: 1.5rem; }
  .pp4-stmt-summary { grid-template-columns: minmax(0, 1fr); }

  .pp4-statement .history-row,
  .pp4-statement .finance-row {
    padding: var(--pp4-space-3) var(--pp4-space-4) !important;
    gap: var(--pp4-space-3);
  }

  .pp4-stmt-day { padding: var(--pp4-space-3) var(--pp4-space-4); }

  .pp4-statement .finance-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id valor" "status status" "nota nota";
    row-gap: 8px;
  }
  .pp4-statement .status-pill { justify-self: start; }
}

@media (max-width: 359px) {
  .pp4-statement .history-row__value { font-size: var(--pp4-text-md); }
}

/* ============================================================
   11 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-statement *,
  .pp4-statement *::before,
  .pp4-statement *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}