/* ============================================================
   tema-visual.css — Repaginação visual do dashboard (v1)
   Sobrepõe styles.css. Não toca em IDs/JS. Reversível: basta
   remover o <link> no index.html.

   Filosofia white-label: a sidebar é ESCURA NEUTRA derivada da
   cor do partido (color-mix), e a cor pura do partido (--party)
   vira ACENTO (item ativo, ícones, banner). Isso funciona pra
   qualquer cor — vermelho (PT), azul (PL), amarelo (PSD),
   verde (Futuro) — sem ficar ilegível.
   ============================================================ */

:root{
  /* tons derivados da cor do partido — robusto pra white-label */
  --side-bg-1: color-mix(in srgb, var(--party) 22%, #0b1220);
  --side-bg-2: color-mix(in srgb, var(--party) 14%, #070b14);
  --side-active: color-mix(in srgb, var(--party) 30%, transparent);
  --side-hover: color-mix(in srgb, #ffffff 8%, transparent);
  --side-text: rgba(255,255,255,.78);
  --side-text-dim: rgba(255,255,255,.50);
  --navy: #0f1b34;
  --navy-2: #1e2d4d;
}

/* ============== SIDEBAR DARK ============== */
.sidebar{
  background: linear-gradient(180deg, var(--side-bg-1) 0%, var(--side-bg-2) 100%) !important;
  border-right: none !important;
  padding: 22px 14px !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}

.sidebar__brand{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  padding-bottom: 18px !important;
  /* logo já é branco nativo (eleitorando-logo-branco.png) — sem filtro */
}
.sidebar__logo{ height: 58px !important; width: auto; max-width: 92%; }

/* Badge do partido — vira cartão translúcido elegante */
.sidebar__party{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px !important;
  padding: 12px !important;
}
.sidebar__party-badge{
  border-radius: 12px !important;
  background: #fff !important;       /* logo do partido sobre branco = sempre legível */
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.sidebar__party-name{ color: #fff !important; font-size: 13px !important; }
.sidebar__party-meta{ color: var(--side-text-dim) !important; }

/* Nav items */
.sidebar__nav .nav-item{
  color: var(--side-text) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-weight: 600;
  transition: all .15s ease;
}
.sidebar__nav .nav-item svg,
.sidebar__nav .nav-item img{ opacity: .85; }
.sidebar__nav .nav-item:hover{
  background: var(--side-hover) !important;
  color: #fff !important;
}
.sidebar__nav .nav-item.active{
  background: var(--side-active) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--party);
}
.sidebar__nav .nav-item.active svg,
.sidebar__nav .nav-item.active img{ opacity: 1; }

/* User no rodapé */
.sidebar__user{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px !important;
}
.sidebar__user-name{ color: #fff !important; }
.sidebar__user-email{ color: var(--side-text-dim) !important; }
.sidebar__user-avatar{
  background: var(--party) !important;
  color: #fff !important;
}

/* ============== BANNER PROMOCIONAL (base da sidebar) ============== */
.sidebar__promo{
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%),
    linear-gradient(135deg, var(--party) 0%, color-mix(in srgb, var(--party) 60%, #000) 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}
/* textura sutil de "energia/movimento" */
.sidebar__promo::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.10) 0 2px, transparent 3px);
  opacity:.6;
}
.sidebar__promo-mark{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:9px;
  background: rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:#fff;
  backdrop-filter: blur(4px);
}
.sidebar__promo-title{
  position:relative;
  color:#fff; font-weight:900; font-size:15px; line-height:1.2;
  text-transform:uppercase; letter-spacing:.3px;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.sidebar__promo-sub{
  position:relative;
  color:rgba(255,255,255,.85); font-size:11px; margin-top:4px;
}

/* ============== HEADER / TOPBAR ============== */
.page-header__breadcrumb{
  color: var(--party) !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px !important;
}
.page-header__title{ font-size: 30px !important; letter-spacing: -0.6px; }

.period-selector{
  background: #eef1f6;
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.period-btn{
  border-radius: 9px !important;
  font-weight: 600;
  padding: 7px 16px !important;
}
.period-btn.active{
  background: var(--navy) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(15,27,52,.25);
}
.btn-export{
  border-radius: 11px !important;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ============== KPI CARDS com ÍCONE ============== */
.metrics-grid{ gap: 16px !important; }

.metric-card{
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(15,23,42,.04) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.metric-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,.10) !important;
}

/* ícone circular à esquerda (injetado no HTML) */
.metric-card__icon{
  width: 54px; height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--party) 16%, #fff);
  color: var(--party);
}
.metric-card__icon svg{ width: 26px; height: 26px; }

.metric-card__body{ flex: 1; min-width: 0; }
.metric-card__label{ font-size: 12.5px !important; color: var(--muted) !important; font-weight: 600; }
.metric-card__value{ font-size: 30px !important; font-weight: 800 !important; letter-spacing: -1px; margin-top: 2px; }
.metric-card__variacao{ font-size: 12px !important; margin-top: 4px; }

/* card destacado (Leads) — navy igual mockup */
.metric-card--highlight{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%) !important;
  border: none !important;
  color: #fff !important;
}
.metric-card--highlight .metric-card__label{ color: rgba(255,255,255,.72) !important; }
.metric-card--highlight .metric-card__value{ color: #fff !important; }
.metric-card--highlight .metric-card__icon{
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* ============== CHART CARDS ============== */
.chart-card{
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.04) !important;
  padding: 22px !important;
}
.chart-card__title{ font-weight: 700 !important; }

/* ============== DONUT + TIMELINE (novos componentes) ============== */
.dash-extra-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1200px){ .dash-extra-grid{ grid-template-columns: 1fr; } }

.donut-wrap{ display:flex; align-items:center; gap:20px; }
.donut-legend{ flex:1; display:flex; flex-direction:column; gap:10px; }
.donut-legend__item{ display:flex; align-items:center; gap:8px; font-size:13px; }
.donut-legend__dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.donut-legend__name{ flex:1; color:var(--ink-2); }
.donut-legend__pct{ font-weight:700; color:var(--ink); }

.activity-feed{ display:flex; flex-direction:column; gap:2px; }
.activity-item{
  display:flex; gap:12px; padding:12px 4px;
  border-bottom:1px solid var(--border);
}
.activity-item:last-child{ border-bottom:none; }
.activity-item__icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--party) 12%, #fff);
  color: var(--party);
}
.activity-item__body{ flex:1; min-width:0; }
.activity-item__title{ font-size:13px; font-weight:700; color:var(--ink); }
.activity-item__desc{ font-size:12px; color:var(--muted); margin-top:1px; }
.activity-item__time{ font-size:11px; color:var(--muted-2); margin-top:2px; }