/* ============================================================================
   ONDA 10 — DASHBOARD LIGHT SAAS MODERNO
   ----------------------------------------------------------------------------
   Escopo: SOMENTE dentro de .dash-v10 (wrapper da aba Dashboard).
   NAO afeta CRM, modal lead, sidebar, login, formularios — esses ficam com
   Onda 8 editorial-luxo (cream/petroleo/dourado/Fraunces).

   Decisao Gustavo (2026-05-27): branco puro + cards definidos + Inter sans +
   cores funcionais (verde/vermelho/ambar/azul). Stack vanilla
   (HTML + Alpine + Chart.js). Sem Recharts/Tailwind/shadcn.
   ============================================================================ */

.dash-v10 {
  /* Paleta */
  --dash-bg:           #FFFFFF;
  --dash-surface:      #FFFFFF;
  --dash-surface-2:    #F8FAFC;
  --dash-border:       #CBD5E1;   /* era #E5E7EB — slate-300 visivel (>=3:1) */
  --dash-border-hover: #94A3B8;   /* era #D1D5DB — slate-400 */
  --dash-text:         #0F172A;
  --dash-text-soft:    #475569;   /* era #64748B — slate-600 (~7.5:1 AAA) */
  --dash-text-faint:   #64748B;   /* era #94A3B8 — slate-500 (~4.8:1) */

  --dash-pos:          #10B981;
  --dash-pos-soft:     #D1FAE5;
  --dash-neg:          #EF4444;
  --dash-neg-soft:     #FEE2E2;
  --dash-warn:         #F59E0B;
  --dash-warn-soft:    #FEF3C7;
  --dash-info:         #3B82F6;
  --dash-info-soft:    #DBEAFE;

  --dash-frio:         #3B82F6;
  --dash-morno:        #F59E0B;
  --dash-quente:       #EF4444;

  --dash-shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04);
  --dash-shadow-md:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --dash-shadow-lg:    0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04);
  --dash-radius:       10px;
  --dash-radius-sm:    6px;

  /* Reset/base */
  background: var(--dash-bg);
  color: var(--dash-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 24px 32px 48px;
  min-height: 100%;
}

/* ===== Page header ===== */
.dash-v10__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dash-border);
}
.dash-v10__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--dash-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.dash-v10__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Range custom ("Personalizar") — dois date inputs + separador "ate".
   Para um unico dia, inicio e fim iguais.
   Ocupa uma LINHA propria abaixo do segmented control (flex-basis:100% +
   order:3): evita que os dois inputs + "ate" estourem a largura e quebrem
   o segmented/refresh em diagonal. O refresh (order:2) fica colado no
   periodo na 1a linha; o range desce alinhado a direita logo abaixo. */
.dash-v10__custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-basis: 100%;
  order: 3;
  justify-content: flex-end;
  margin-top: 2px;
}
/* Mantem o botao de refresh na 1a linha junto do segmented control,
   antes do range custom (que tem order:3). */
.dash-v10__refresh { order: 2; }
.dash-v10__custom-input {
  /* flex-basis fixa vence o width:100% do .input-7d base (que, num container
     de linha cheia, esticava cada input pra largura toda e empilhava). Sem
     grow/shrink: os dois inputs ficam compactos lado a lado, alinhados a
     direita pelo justify-content:flex-end do container. */
  flex: 0 0 160px;
  width: 160px;
  min-width: 0;
  height: 34px;
  padding: 4px 10px;
  font-size: 13px;
}
.dash-v10__custom-sep {
  font-size: 12px;
  color: var(--dash-text-soft);
}

/* ===== Filtro periodo (segmented control) ===== */
.dash-v10__periodo {
  display: inline-flex;
  align-items: center;
  background: var(--dash-surface-2);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius-sm);
  padding: 3px;
  gap: 0;
}
.dash-v10__periodo-btn {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--dash-text-soft);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}
.dash-v10__periodo-btn:hover {
  color: var(--dash-text);
}
.dash-v10__periodo-btn--active {
  background: var(--dash-surface);
  color: var(--dash-text);
  font-weight: 600;
  box-shadow: var(--dash-shadow-sm);
}

.dash-v10__refresh {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius-sm);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dash-text-soft);
  transition: all 120ms ease;
}
.dash-v10__refresh:hover {
  border-color: var(--dash-border-hover);
  color: var(--dash-text);
  background: var(--dash-surface-2);
}
.dash-v10__refresh svg { width: 14px; height: 14px; }

/* ===== Section wrapper ===== */
.dash-v10__section {
  margin-bottom: 28px;
}
.dash-v10__section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

/* ===== Grid de KPIs ===== */
.dash-v10__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.dash-v10__kpis-row2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* ===== KPI card ===== */
.dash-v10__kpi {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: 18px 20px;
  box-shadow: var(--dash-shadow-sm);
  transition: box-shadow 150ms ease, transform 150ms ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
}
.dash-v10__kpi:hover {
  box-shadow: var(--dash-shadow-md);
  transform: translateY(-1px);
}
.dash-v10__kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--dash-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.2;
}
.dash-v10__kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.15;
  margin: 0;
}
.dash-v10__kpi-value--empty {
  color: var(--dash-text-soft);   /* empty legivel AAA (era faint) */
  font-weight: 600;
}
.dash-v10__kpi-meta {
  font-size: 12px;
  color: var(--dash-text-soft);   /* era faint */
  margin: 0;
  line-height: 1.3;
}
.dash-v10__kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}
.dash-v10__kpi-delta--pos { color: var(--dash-pos); }
.dash-v10__kpi-delta--neg { color: var(--dash-neg); }
.dash-v10__kpi-delta--neutral { color: var(--dash-text-faint); }

/* ===== Cards visuais (genericos pra graficos) ===== */
.dash-v10__card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: 20px;
  box-shadow: var(--dash-shadow-sm);
}
.dash-v10__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-v10__card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
  margin: 0;
}

/* ===== FUNIL barras horizontais (Onda 10i — voltou ao formato v10b) =====
   Grid: nome (180px) · count (50px) · barra proporcional (1fr) · pct (56px).
   Cumulativo (count = quem ta + quem ja passou). Cores progressivas + ganho verde.
============================================================================ */
.dash-v10__funnel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-v10__funnel-group {
  display: flex;
  flex-direction: column;
}
.dash-v10__funnel-row {
  display: grid;
  grid-template-columns: 200px 60px 1fr 60px;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.dash-v10__funnel-stage {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-v10__funnel-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.dash-v10__funnel-track {
  height: 32px;
  background: var(--dash-surface-2);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.dash-v10__funnel-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 400ms cubic-bezier(.2,.7,.2,1);
  min-width: 8px;
}
.dash-v10__funnel-fill--s1 { background: #3B82F6; }
.dash-v10__funnel-fill--s2 { background: #4F6EE3; }
.dash-v10__funnel-fill--s3 { background: #6366F1; }
.dash-v10__funnel-fill--s4 { background: #7C5FE8; }
.dash-v10__funnel-fill--win { background: linear-gradient(90deg, #10B981, #34D399); }
.dash-v10__funnel-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-text-soft);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.dash-v10__funnel-drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dash-text-soft);   /* era faint */
  padding: 3px 0 3px 214px;
  letter-spacing: 0.02em;
}
.dash-v10__funnel-drop svg {
  width: 11px;
  height: 11px;
  color: var(--dash-text-soft);   /* era faint */
}
.dash-v10__funil-empty {
  text-align: center;
  color: var(--dash-text-soft);   /* empty legivel AAA (era faint) */
  font-size: 13px;
  padding: 32px 0;
}

/* ===== Grid 2 cols (donut + linha) ===== */
.dash-v10__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

/* (v10b: removidos .dash-v10__grid-3 + .dash-v10__top* — tops Source/Google/Meta
   tirados do HTML porque banco pequeno nao gera ranking estatistico util) */

.dash-v10__empty {
  text-align: center;
  color: var(--dash-text-soft);   /* empty legivel AAA (era faint) */
  font-size: 12px;
  padding: 24px 0;
}

/* ===== Donut wrapper (Onda 10 fix final: declaracao unica) ===== */
.dash-v10__donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 8px 0;
  max-width: 600px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.dash-v10__donut-canvas {
  /* sem width/height aqui — atributos HTML width="200" height="200" prevalece */
  flex: 0 0 auto;
  max-width: 200px;
  max-height: 200px;
}
.dash-v10__donut-legend {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
}
.dash-v10__donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dash-text);
}
.dash-v10__donut-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-v10__donut-legend-count {
  color: var(--dash-text-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 12px;
}

/* ===== Linha 30 dias wrapper (Onda 10l: altura maior pra leitura) ===== */
.dash-v10__line-canvas-wrap {
  position: relative;
  height: 320px;
  width: 100%;
}
.dash-v10__line-empty {
  text-align: center;
  color: var(--dash-text-soft);   /* empty legivel AAA (era faint) */
  font-size: 13px;
  padding: 60px 0;
}

/* ===== Top Servicos (barras horizontais, altura maior) ===== */
.dash-v10__servicos-canvas-wrap {
  position: relative;
  height: 300px;
  width: 100%;
}

/* ===== Loading state ===== */
.dash-v10__loading {
  text-align: center;
  color: var(--dash-text-soft);
  font-size: 13px;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dash-v10__loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--dash-border);
  border-top-color: var(--dash-info);
  border-radius: 50%;
  animation: dash-v10-spin 800ms linear infinite;
}
@keyframes dash-v10-spin {
  to { transform: rotate(360deg); }
}

/* ===== Error banner (B3 / Onda 10m) ===== */
.dash-v10__error-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 16px 0 24px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #991B1B;
  font-size: 13px;
}
.dash-v10__error-banner svg { flex-shrink: 0; color: #DC2626; }
.dash-v10__error-banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-v10__error-banner-body strong { font-weight: 600; }
.dash-v10__error-banner-body span { color: #7F1D1D; opacity: 0.85; }
.dash-v10__error-banner-retry {
  flex-shrink: 0;
  background: #DC2626;
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.dash-v10__error-banner-retry:hover { background: #B91C1C; }
.dash-v10__error-banner-retry:focus-visible {
  outline: 2px solid #FCA5A5;
  outline-offset: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 1280px) {
  .dash-v10__kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-v10__kpis-row2 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .dash-v10 { padding: 20px 20px 40px; }
  .dash-v10__kpis,
  .dash-v10__kpis-row2 { grid-template-columns: repeat(2, 1fr); }
  .dash-v10__grid-2 { grid-template-columns: 1fr; }
  /* .dash-v10__grid-3 removido em v10b */
  .dash-v10__donut-wrap { flex-direction: column; }
}
@media (max-width: 640px) {
  .dash-v10__kpis,
  .dash-v10__kpis-row2 { grid-template-columns: 1fr; }
  .dash-v10__header { flex-direction: column; align-items: flex-start; }
  .dash-v10__periodo { flex-wrap: wrap; }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .dash-v10__kpi,
  .dash-v10__funnel-v2__shape { transition: none; }
  .dash-v10__loading-spinner { animation: none; }
}