/* =========================================================
   FASE 27N
   Corrige textos brancos invisíveis na aba Vendas por Período
   e mantém cabeçalhos/títulos no padrão roxo com letra branca.
   ========================================================= */

.vp27-shell{
  --vp27n-dark: #0b1733;
  --vp27n-muted: #66738f;
  --vp27n-purple-1: #562d79;
  --vp27n-purple-2: #7648c9;
  --vp27n-purple-3: #8b5cf6;
}

/* =========================
   HERO / CABEÇALHO PRINCIPAL
   ========================= */
.vp27-shell .vp27-hero-card,
.vp27-shell .vp27-head-card,
.vp27-shell .vp27-page-head,
.vp27-shell .vp27-top-card{
  background: #ffffff !important;
  color: var(--vp27n-dark) !important;
}

.vp27-shell .vp27-hero-card h1,
.vp27-shell .vp27-hero-card h2,
.vp27-shell .vp27-hero-card h3,
.vp27-shell .vp27-head-card h1,
.vp27-shell .vp27-head-card h2,
.vp27-shell .vp27-head-card h3,
.vp27-shell .vp27-page-head h1,
.vp27-shell .vp27-page-head h2,
.vp27-shell .vp27-page-head h3,
.vp27-shell .vp27-top-card h1,
.vp27-shell .vp27-top-card h2,
.vp27-shell .vp27-top-card h3{
  color: var(--vp27n-dark) !important;
}

.vp27-shell .vp27-hero-card p,
.vp27-shell .vp27-head-card p,
.vp27-shell .vp27-page-head p,
.vp27-shell .vp27-top-card p{
  color: var(--vp27n-muted) !important;
}

/* badge "DADOS REAIS DO KOMMO" */
.vp27-shell .vp27-hero-card .badge,
.vp27-shell .vp27-head-card .badge,
.vp27-shell .vp27-page-head .badge,
.vp27-shell .vp27-top-card .badge{
  color: #55627f !important;
  background: #f3eefb !important;
  border: 1px solid #dacdf0 !important;
}

/* =========================
   FILTRO SUPERIOR EM ROXO
   ========================= */
.vp27-shell .vp27-filter-top{
  background: linear-gradient(135deg, var(--vp27n-purple-1) 0%, var(--vp27n-purple-2) 58%, var(--vp27n-purple-3) 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 24px !important;
  min-height: 96px !important;
  padding: 22px 24px 20px 58px !important;
  position: relative !important;
  overflow: hidden !important;
}

.vp27-shell .vp27-filter-top::before{
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #ffffff 100%) !important;
}

.vp27-shell .vp27-filter-top *{
  color: #ffffff !important;
}

.vp27-shell .vp27-filter-top h1,
.vp27-shell .vp27-filter-top h2,
.vp27-shell .vp27-filter-top h3{
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  margin: 0 0 6px 0 !important;
}

.vp27-shell .vp27-filter-top p{
  color: rgba(255,255,255,.92) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

/* =========================
   KPI CARDS / CARDS BRANCOS
   ========================= */
.vp27-shell .vp27-kpi,
.vp27-shell .vp27-insight,
.vp27-shell .vp27-summary-card,
.vp27-shell .vp27-info-card,
.vp27-shell .vp27-stat-card{
  background: #ffffff !important;
  color: var(--vp27n-dark) !important;
}

.vp27-shell .vp27-kpi *,
.vp27-shell .vp27-insight *,
.vp27-shell .vp27-summary-card *,
.vp27-shell .vp27-info-card *,
.vp27-shell .vp27-stat-card *{
  color: var(--vp27n-dark) !important;
}

.vp27-shell .vp27-kpi small,
.vp27-shell .vp27-kpi p,
.vp27-shell .vp27-insight small,
.vp27-shell .vp27-insight p,
.vp27-shell .vp27-summary-card small,
.vp27-shell .vp27-summary-card p,
.vp27-shell .vp27-info-card small,
.vp27-shell .vp27-info-card p,
.vp27-shell .vp27-stat-card small,
.vp27-shell .vp27-stat-card p{
  color: var(--vp27n-muted) !important;
}

.vp27-shell .vp27-kpi strong,
.vp27-shell .vp27-insight strong,
.vp27-shell .vp27-summary-card strong,
.vp27-shell .vp27-info-card strong,
.vp27-shell .vp27-stat-card strong{
  color: var(--vp27n-dark) !important;
}

/* =========================
   TOPOS DE TABELA E GRÁFICOS
   ========================= */
.vp27-shell .vp27-section > .vp27-table-head,
.vp27-shell .vp27-chart-card > .vp27-chart-title{
  background: linear-gradient(135deg, var(--vp27n-purple-1) 0%, var(--vp27n-purple-2) 58%, var(--vp27n-purple-3) 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  min-height: 88px !important;
  padding: 20px 24px 18px 58px !important;
  position: relative !important;
  overflow: hidden !important;
}

.vp27-shell .vp27-section > .vp27-table-head::before,
.vp27-shell .vp27-chart-card > .vp27-chart-title::before{
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #ffffff 100%) !important;
}

.vp27-shell .vp27-section > .vp27-table-head *,
.vp27-shell .vp27-chart-card > .vp27-chart-title *{
  color: #ffffff !important;
  background: transparent !important;
}

.vp27-shell .vp27-table-head h1,
.vp27-shell .vp27-table-head h2,
.vp27-shell .vp27-table-head h3{
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  margin: 0 0 6px 0 !important;
}

.vp27-shell .vp27-table-head p{
  color: rgba(255,255,255,.92) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.vp27-shell .vp27-chart-card > .vp27-chart-title{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
}

/* paginação dentro do topo roxo */
.vp27-shell .vp27-table-head .vp27-tools,
.vp27-shell .vp27-section > .vp27-table-head .vp27-tools{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.vp27-shell .vp27-table-head .vp27-tools select,
.vp27-shell .vp27-table-head .vp27-tools button,
.vp27-shell .vp27-section > .vp27-table-head .vp27-tools select,
.vp27-shell .vp27-section > .vp27-table-head .vp27-tools button{
  background: #ffffff !important;
  color: #5a2390 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  font-weight: 950 !important;
}

.vp27-shell .vp27-table-head .vp27-tools span,
.vp27-shell .vp27-section > .vp27-table-head .vp27-tools span{
  color: #ffffff !important;
  font-weight: 950 !important;
}

/* =========================
   CORPO DAS TABELAS
   ========================= */
.vp27-shell .vp27-table,
.vp27-shell .vp27-scroll,
.vp27-shell .vp27-chart-body{
  background: #ffffff !important;
}

.vp27-shell .vp27-table thead th{
  background: #efe6f8 !important;
  color: #5a2390 !important;
  font-weight: 950 !important;
}

.vp27-shell .vp27-table tbody td,
.vp27-shell .vp27-table tbody td *{
  color: #1b2a48 !important;
}

/* chips */
.vp27-shell .vp27-table .chip,
.vp27-shell .vp27-table .tag{
  color: #135e43 !important;
}

/* =========================
   FALLBACK PARA TEXTO INVISÍVEL
   ========================= */
.vp27-shell .vp27-force-dark,
.vp27-shell .vp27-force-dark *{
  color: var(--vp27n-dark) !important;
}

.vp27-shell .vp27-force-muted,
.vp27-shell .vp27-force-muted *{
  color: var(--vp27n-muted) !important;
}

@media (max-width: 900px){
  .vp27-shell .vp27-filter-top,
  .vp27-shell .vp27-section > .vp27-table-head,
  .vp27-shell .vp27-chart-card > .vp27-chart-title{
    padding-left: 48px !important;
  }

  .vp27-shell .vp27-filter-top h1,
  .vp27-shell .vp27-filter-top h2,
  .vp27-shell .vp27-filter-top h3,
  .vp27-shell .vp27-table-head h1,
  .vp27-shell .vp27-table-head h2,
  .vp27-shell .vp27-table-head h3,
  .vp27-shell .vp27-chart-card > .vp27-chart-title{
    font-size: 20px !important;
  }
}