/* Cores dos indicadores da Visao geral (painel do lojista) e, no fim, o espaco da
   linha Taxa de pagamento + Funil. Nada de dado ou comportamento. Vale para todos
   os temas de Aparencia.
   Cada cor tem uma funcao:
     verde-esmeralda = dinheiro e sucesso (faturamento, pago, alta)
     ciano           = volume e desempenho (conversao, funil)
     dourado         = 1o lugar do ranking
     neutro          = estrutura (cards, bordas, rotulos, total de pedidos)
     vermelho        = so problema real (queda, cancelado, "maior queda")
   Os seletores repetem o prefixo do merchant-workspace.css para vencer as regras
   antigas (inline e dos temas) sem depender da ordem dos arquivos. */
body.dropos-workspace[data-panel=merchant] #overviewContent {
  --fin-pos: #34d399; --fin-pos-hi: #6ee7b7; --fin-pos-soft: rgba(52, 211, 153, .12); --fin-pos-line: rgba(52, 211, 153, .34);
  --fin-info: #22d3ee; --fin-info-hi: #67e8f9; --fin-info-soft: rgba(34, 211, 238, .12); --fin-info-line: rgba(34, 211, 238, .5);
  --fin-gold: #f5c451; --fin-gold-hi: #ffdf86; --fin-gold-soft: rgba(245, 196, 81, .14); --fin-gold-line: rgba(245, 196, 81, .5);
  --fin-neg: #f87171;
  --fin-card: #11151c; --fin-card-2: #151a22; --fin-line: #252c37; --fin-line-hi: #344050;
  --fin-ink: #f1f5f9; --fin-ink-2: #cbd5e1; --fin-mut: #9aa4b2; --fin-mut-2: #7c8696;
}

/* ---------- Cards de indicador ---------- */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi {
  background: linear-gradient(160deg, var(--fin-card-2), var(--fin-card)) !important;
  border: 1px solid var(--fin-line) !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:hover {
  border-color: var(--fin-line-hi) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-lab { color: var(--fin-mut) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-ico {
  background: rgba(148, 163, 184, .1) !important; color: var(--fin-ink-2) !important; border: 0 !important; box-shadow: none !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-val { color: var(--fin-ink) !important; }

/* Faturamento: o card principal, em esmeralda */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi.rev {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(16, 185, 129, .17), transparent 58%),
    linear-gradient(160deg, #13201c, #10171a) !important;
  border-color: var(--fin-pos-line) !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi.rev:hover {
  border-color: rgba(52, 211, 153, .58) !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, .15) !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi.rev .k-val {
  background: linear-gradient(90deg, var(--fin-pos-hi), var(--fin-pos)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: none !important; text-shadow: none !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi.rev .k-ico { background: var(--fin-pos-soft) !important; color: var(--fin-pos) !important; }

/* Pedidos pagos: sucesso (filete e icone verdes, numero branco) */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(2) { box-shadow: inset 0 2px 0 rgba(52, 211, 153, .6) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(2) .k-ico { background: var(--fin-pos-soft) !important; color: var(--fin-pos) !important; }

/* Total de pedidos: volume, fica neutro de proposito */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(3) .k-val { color: #e2e8f0 !important; }

/* Conversao: desempenho, em ciano */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(4) { box-shadow: inset 0 2px 0 rgba(34, 211, 238, .55) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(4) .k-ico { background: var(--fin-info-soft) !important; color: var(--fin-info) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(4) .k-val { color: var(--fin-info-hi) !important; }

/* Variacao vs periodo anterior: selo verde quando sobe, vermelho quando cai, neutro parado */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-var.up,
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-var.down {
  width: fit-content; max-width: 100%; padding: 2px 8px; border-radius: 8px;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-var.up { color: var(--fin-pos) !important; background: rgba(52, 211, 153, .1); }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-var.down { color: var(--fin-neg) !important; background: rgba(248, 113, 113, .1); }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-var.flat { color: var(--fin-mut-2) !important; }
/* Faturamento em queda: o card perde o brilho verde (o valor continua verde, e dinheiro que entrou) */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi.rev:has(.k-var.down) {
  background: linear-gradient(160deg, var(--fin-card-2), var(--fin-card)) !important;
  border-color: rgba(248, 113, 113, .3) !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(2):has(.k-var.down),
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpis > .vg-kpi:nth-child(4):has(.k-var.down) {
  box-shadow: inset 0 2px 0 rgba(248, 113, 113, .45) !important;
}

/* Contagem animada dos numeros: piscava em vermelho */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi .k-val.vg-scrambling {
  color: var(--fin-ink-2) !important; -webkit-text-fill-color: var(--fin-ink-2) !important; text-shadow: none !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-kpi.rev .k-val.vg-scrambling {
  color: var(--fin-pos) !important; -webkit-text-fill-color: var(--fin-pos) !important;
}

/* ---------- Grafico de faturamento ----------
   Linha esmeralda para ciano: a curva sobe e desce sem que um dia fraco pareca alarme. */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-chart #vgGrad stop:first-child { stop-color: #34d399 !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-chart #vgGrad stop:last-child { stop-color: #22d3ee !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-chart #vgFill stop:first-child { stop-color: rgba(52, 211, 153, .26) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-chart #vgFill stop:last-child { stop-color: rgba(52, 211, 153, 0) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-chart .ln {
  stroke: url(#vgGrad) !important; filter: drop-shadow(0 4px 10px rgba(16, 185, 129, .22)) !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-chart .dt {
  fill: #0f1916 !important; stroke: var(--fin-pos); stroke-width: 1.6; filter: none !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-chart .gl { stroke: #262e3a !important; }

/* ---------- Taxa de pagamento (rosca) ---------- */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-donut #vgGrad2 stop:first-child { stop-color: #34d399 !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-donut #vgGrad2 stop:last-child { stop-color: #22d3ee !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-donut .vg-leg span:first-child i { background: var(--fin-pos) !important; }

/* ---------- Funil de conversao ----------
   Um tom por etapa (pela chave data-etapa, porque a presell so aparece em quem usa):
   azul no topo, violeta na presell, ciano no checkout, verde em pagaram. A % de
   queda continua vermelha; etapa maior que a anterior (acesso direto) fica neutra. */
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row[data-etapa=visitantes] { --fs-hi: #8b9bff; --fs: #5b6cf0; --fs-lo: #2e3a8f; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row[data-etapa=presell] { --fs-hi: #b79cff; --fs: #8b5cf6; --fs-lo: #4c2a99; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row[data-etapa=presell_cta] { --fs-hi: #a5a8ff; --fs: #7c6cf5; --fs-lo: #3d3693; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row[data-etapa=produto] { --fs-hi: #4fa3ff; --fs: #2f80ed; --fs-lo: #1d4f91; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row[data-etapa=checkout] { --fs-hi: #38d4ee; --fs: #0ea5c6; --fs-lo: #0e6178; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row[data-etapa=pix] { --fs-hi: #3ee0c5; --fs: #14b8a6; --fs-lo: #0f6b62; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row[data-etapa=pago] { --fs-hi: #34d399; --fs: #10b981; --fs-lo: #065f46; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row .funil-num { background: color-mix(in srgb, var(--fs, #5b6cf0) 16%, transparent) !important; color: var(--fs-hi, #8b9bff) !important; border-color: color-mix(in srgb, var(--fs, #5b6cf0) 60%, transparent) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row .funil-lbl > span:first-child { color: var(--fs-hi, #8b9bff) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row .funil-bar > div { background: linear-gradient(90deg, var(--fs, #5b6cf0), var(--fs-lo, #2e3a8f)) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row .funil-right > div:first-child { color: var(--fs-hi, #8b9bff) !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox > .funil-row:has(.funil-direto) .funil-right > div:first-child { color: #9aa4b2 !important; }

/* ---------- Listas (mais vendidos, order bumps) ---------- */
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-rank .n {
  background: rgba(148, 163, 184, .1) !important; color: var(--fin-ink-2) !important; border-color: #2b3340 !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .vg-rank:nth-child(1 of .vg-rank) .n {
  background: var(--fin-gold-soft) !important; color: var(--fin-gold) !important; border-color: var(--fin-gold-line) !important;
}

/* ---------- Ranking mensal (card da Visao geral e aba Ranking) ----------
   1o lugar em dourado; 2o prata e 3o bronze seguem as medalhas que ja existem. */
body.dropos-workspace[data-panel=merchant] .drop-podium .dp-place-1 .dp-avatar {
  box-shadow: 0 0 0 4px rgba(245, 196, 81, .14), 0 0 24px rgba(245, 196, 81, .28) !important;
}
body.dropos-workspace[data-panel=merchant] .drop-podium .dp-place-1 .dp-name { color: #fff3cf !important; }
body.dropos-workspace[data-panel=merchant] .drop-podium .dp-place-1 .dp-value { color: var(--fin-gold, #f5c451) !important; }
body.dropos-workspace[data-panel=merchant] .drop-podium .dp-place-1 .dp-step {
  background: linear-gradient(180deg, rgba(245, 196, 81, .34), rgba(177, 133, 0, .1)) !important;
  border-color: rgba(245, 196, 81, .6) !important; color: #ffd970 !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .35), 0 -6px 26px rgba(245, 196, 81, .12) !important;
}
body.dropos-workspace[data-panel=merchant] .drop-podium .dp-place:not(.dp-place-1) .dp-value { color: #5eead4 !important; }

/* ---------- Linha Taxa de pagamento + Funil ----------
   O card da taxa ocupava metade da largura com uma rosca so e ficava mais baixo que o
   funil (buraco embaixo). Agora: taxa em 1/3, funil em 2/3, os dois da mesma altura,
   rosca maior no centro e pagos/pendentes em dois blocos. */
@media (min-width: 901px) {
  body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row {
    grid-template-columns: minmax(270px, 1fr) minmax(0, 2fr) !important; align-items: stretch !important;
  }
}
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row > .vg-card:has(> .vg-donut) {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row > .vg-card:has(> .vg-donut) > h3 { margin: 0 0 6px !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row .vg-card > .vg-donut {
  flex: 1 1 auto; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 172px auto !important;
  align-content: center; justify-items: center; gap: 22px !important; margin: 18px 0 4px !important; padding: 0 !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row .vg-donut > svg { grid-area: 1 / 1; width: 172px !important; height: 172px !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row .vg-donut > .mid { grid-area: 1 / 1; align-self: center; margin: 0 !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row .vg-donut > .mid b { font-size: 32px !important; }
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row .vg-donut > .vg-leg {
  grid-area: 2 / 1; width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row .vg-donut > .vg-leg > span {
  display: flex; align-items: center; justify-content: center; gap: 2px; padding: 11px 10px; border-radius: 10px;
  background: rgba(148, 163, 184, .06); border: 1px solid var(--fin-line); color: var(--fin-ink-2);
  font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.dropos-workspace[data-panel=merchant] #overviewContent .ov-conversion-row .vg-donut > .vg-leg > span:first-child {
  background: rgba(52, 211, 153, .07); border-color: rgba(52, 211, 153, .25); color: var(--fin-ink);
}
/* Celular: o selo "MAIOR QUEDA" cobria o numero da barra; a % de queda em vermelho ao lado continua */
@media (max-width: 600px) {
  body.dropos-workspace[data-panel=merchant] #overviewContent #funilBox .funil-maxdrop { display: none !important; }
}

/* ---------- Atualizacao automatica sem piscar ----------
   O painel se atualiza sozinho a cada 12 s. Depois da primeira pintura, a Visao geral
   ganha .ov-quiet (admin.html, _ovPintaSemPiscar): as animacoes de entrada (grafico se
   desenhando, cards subindo, barras crescendo, podio chegando) vao direto ao estado
   final em vez de repetir a cada atualizacao. */
#overviewContent.ov-quiet *, #overviewContent.ov-quiet *::before, #overviewContent.ov-quiet *::after {
  animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important;
}
#overviewContent.ov-quiet .vg-chart .ln { stroke-dashoffset: 0 !important; }
#overviewContent.ov-quiet .vg-chart :is(.ar, .dt) { opacity: 1 !important; }
#overviewContent.ov-quiet #funilBox .funil-bar > div { transform: none !important; }