/* PATH: /public/css/wallet.css */

.vx-wallet-card{
  border-radius: 22px;
  background: var(--vx-surface);
  border: 1px solid var(--vx-border-2);
  padding: 14px;
  box-shadow: none;
}

.vx-wallet-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.vx-wallet-hello{
  font-size: 13px;
  color: var(--vx-muted);
}

.vx-wallet-balance-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 6px;
}

.vx-wallet-balance{
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.9px;
  color: var(--vx-text);
}

.vx-wallet-eye{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--vx-border-2);
  background: rgba(138,5,190,.08);
  color: var(--vx-brand);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, background .12s ease;
}

.vx-wallet-eye:hover{
  background: rgba(138,5,190,.12);
}
.vx-wallet-eye:active{
  transform: scale(.98);
}

.vx-wallet-sub{
  font-size: 12px;
  color: var(--vx-muted);
  margin-top: 2px;
}

.vx-wallet-meta{
  text-align:right;
}

.vx-wallet-actions{
  display:flex;
  gap:10px;
  margin-top: 12px;
}

.vx-round-btn{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.vx-round-btn i{ font-size: 20px; }

/* ====== LEDGER (/ledger) — visual Nubank-like sem mudar estrutura ====== */

.vx-ledger{
  padding: 0;
}

.vx-ledger-top{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

/* mantém seu box do jeito que está, só dá espaçamento */
.vx-ledger-walletCard{
  margin-top: 2px;
}

/* painel search + filtros */
.vx-ledger-panel{
  border-radius: var(--vx-r-lg);
  background: var(--vx-surface);
  border: 1px solid var(--vx-border-2);
  padding: 12px;
  box-shadow: var(--vx-shadow-xs);
}

/* search (bonito, mas continua o mesmo comportamento) */
.vx-ledger-search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--vx-border-2);
  background: color-mix(in srgb, var(--vx-surface) 92%, transparent);
}

.vx-ledger-search i{
  color: var(--vx-muted);
  font-size: 16px;
}

.vx-ledger-search input{
  flex:1;
  border:0;
  outline:0;
  background: transparent;
  color: var(--vx-text);
  font-weight: 800;
  letter-spacing: var(--vx-ls-tight);
}

.vx-ledger-search input::placeholder{
  color: var(--vx-muted);
  font-weight: 700;
}

.vx-wf-to-suggest{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--vx-border-2);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-xs);
  max-height: 260px;
  overflow: auto;
}

.vx-wf-to-suggest-item{
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  color: var(--vx-text);
}

.vx-wf-to-suggest-item + .vx-wf-to-suggest-item{
  border-top: 1px solid var(--vx-border-2);
}

.vx-wf-to-suggest-item:hover{
  background: color-mix(in srgb, var(--vx-brand) 6%, var(--vx-surface));
}

.vx-wf-to-suggest-avatar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--vx-border-2);
  background: rgba(138,5,190,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--vx-brand);
  overflow: hidden;
  flex: 0 0 auto;
}

.vx-wf-to-suggest-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vx-wf-to-suggest-nick{
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.vx-wf-to-suggest-name{
  font-size: 12px;
  color: var(--vx-muted);
  line-height: 1.2;
}

.vx-wf-to-suggest-tag{
  margin-left: auto;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  color: var(--vx-muted);
  border: 1px solid var(--vx-border-2);
  padding: 3px 8px;
}

.vx-wf-to-suggest-error{
  border-top: 1px solid var(--vx-border-2);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--vx-muted);
}

/* filtros (chips) — mesmos textos, só fica lindo */
.vx-ledger-filters{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-bottom: 15px;
  -webkit-overflow-scrolling: touch;
}
.vx-ledger-filters::-webkit-scrollbar{ height: 6px; }
.vx-ledger-filters::-webkit-scrollbar-thumb{ background: rgba(11,18,32,.10); border-radius: 999px; }

.vx-ledger-chip{
  border: 1px solid var(--vx-border-2);
  background: var(--vx-surface);
  color: var(--vx-text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: var(--vx-ls-tight);
  white-space: nowrap;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.vx-ledger-chip:hover{
  background: color-mix(in srgb, var(--vx-brand) 6%, var(--vx-surface));
  border-color: color-mix(in srgb, var(--vx-brand) 18%, var(--vx-border-2));
}
.vx-ledger-chip:active{ transform: scale(.98); }

.vx-ledger-chip.is-active{
  background: linear-gradient(180deg, var(--vx-brand), var(--vx-brand-2));
  border-color: transparent;
  color:#fff;
  box-shadow: 0 14px 28px rgba(138,5,190,.18);
}

/* corpo */
.vx-ledger-body{
  padding: 10px 0 0;
}

.vx-ledger-loading{
  padding: 10px 0;
}

.vx-ledger-skel{
  height: 64px;
  border-radius: var(--vx-r-md);
  border: 1px solid var(--vx-border-2);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--vx-surface-2) 70%, transparent),
    color-mix(in srgb, var(--vx-surface) 70%, transparent),
    color-mix(in srgb, var(--vx-surface-2) 70%, transparent)
  );
  background-size: 200% 100%;
  animation: vx_skel 1.1s ease-in-out infinite;
  margin-bottom: 10px;
}
@keyframes vx_skel{
  0%{ background-position: 0% 0%; }
  100%{ background-position: -200% 0%; }
}

/* agrupamento por dia */
.vx-ledger-day{
  margin-top: 12px;
}

.vx-ledger-dayTitle{
  font-weight: 950;
  letter-spacing: -0.4px;
  font-size: 14px;
  color: var(--vx-muted);
  margin: 10px 2px 10px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.vx-ledger-dayTitle::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vx-brand) 60%, transparent);
  box-shadow: var(--vx-ring);
}

/* lista */
.vx-ledger-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* item */
.vx-ledger-item{
  border: 1px solid var(--vx-border-2);
  background: var(--vx-surface);
  border-radius: var(--vx-r-md);
  padding: 12px;
  box-shadow: var(--vx-shadow-xs);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  margin-bottom: 10px;
}
.vx-ledger-item:active{ transform: scale(.995); }

/* esquerda */
.vx-ledger-left{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.vx-ledger-ico{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;

  background: color-mix(in srgb, var(--vx-brand) 10%, var(--vx-surface));
  border: 1px solid color-mix(in srgb, var(--vx-brand) 18%, var(--vx-border-2));
  color: var(--vx-brand);
}

.vx-ledger-txt{ min-width:0; }

.vx-ledger-title{
  font-weight: 950;
  letter-spacing: -0.35px;
  color: var(--vx-text);
  line-height: 1.15;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vx-ledger-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--vx-muted);
  font-weight: 750;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vx-ledger-meta{
  margin-top: 7px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vx-ledger-pill{
  font-size: 11px;
  font-weight: 900;
  color: var(--vx-faint);
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--vx-border-2);
  background: color-mix(in srgb, var(--vx-surface) 92%, transparent);
  line-height: 1;
}
.vx-ledger-pill--code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
}

/* direita */
.vx-ledger-right{
  text-align:right;
  flex: 0 0 auto;
  min-width: 96px;
}

.vx-ledger-amount{
  font-weight: 950;
  letter-spacing: -0.4px;
  font-size: 15px;
  color: var(--vx-text);
  margin-top: 2px;
}

.vx-ledger-amount.is-pos{ color: var(--vx-success); }
.vx-ledger-amount.is-neg{ color: var(--vx-danger); }

/* cores por tipo */
.vx-ledger-item.is-in .vx-ledger-ico{
  background: color-mix(in srgb, var(--vx-success) 14%, var(--vx-surface));
  border-color: color-mix(in srgb, var(--vx-success) 22%, var(--vx-border-2));
  color: var(--vx-success);
}
.vx-ledger-item.is-out .vx-ledger-ico{
  background: color-mix(in srgb, var(--vx-danger) 12%, var(--vx-surface));
  border-color: color-mix(in srgb, var(--vx-danger) 20%, var(--vx-border-2));
  color: var(--vx-danger);
}
.vx-ledger-item.is-fee .vx-ledger-ico{
  background: color-mix(in srgb, var(--vx-warning) 14%, var(--vx-surface));
  border-color: color-mix(in srgb, var(--vx-warning) 22%, var(--vx-border-2));
  color: var(--vx-warning);
}

/* vazio */
.vx-ledger-empty{
  padding: 14px;
  border-radius: var(--vx-r-md);
  border: 1px dashed var(--vx-border-2);
  color: var(--vx-muted);
  background: color-mix(in srgb, var(--vx-surface) 86%, transparent);
}

/* dark */
body[data-theme="dark"] .vx-ledger-chip{
  background: color-mix(in srgb, var(--vx-surface) 86%, transparent);
}
body[data-theme="dark"] .vx-ledger-filters::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
}