/* ==========================================================================
   CRIATIVORIA ANALYTICS — Whitelabel Theme Override
   Baseado na paleta oficial da Criativoria
   ========================================================================== */

:root {
  /* Paleta Criativoria */
  --criativoria-white:       #ffffff;
  --criativoria-gray:        #525252;
  --criativoria-black:       #000000;
  --criativoria-purple:      #795a9c;   /* Roxo principal */
  --criativoria-purple-dark: #5e3d7c;   /* Roxo escuro */
  --criativoria-gold:        #d38132;   /* Dourado / laranja */
  --criativoria-gold-dark:   #ad923c;   /* Dourado escuro */
  --criativoria-gray-light:  #b4b4b4;
  --criativoria-gray-mid:    #9c9c9c;
  --criativoria-gray-pale:   #c9c9c9;

  /* Sobrescreve tokens do ByteForce */
  --color-primary:          #795a9c;
  --color-primary-rgb:      121, 90, 156;
  --color-warning:          #d38132;
  --color-warning-rgb:      211, 129, 50;
  --color-purple:           #795a9c;
  --color-purple-rgb:       121, 90, 156;
  --color-cyan:             #d38132;
  --color-cyan-rgb:         211, 129, 50;

  /* Fundo e superfícies */
  --bg-primary:    #f9f7fc;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-sidebar:    #ffffff;
  --bg-tertiary:   #f3f0f7;

  /* Bordas */
  --border-color:       #ede8f4;
  --border-color-hover: rgba(121, 90, 156, 0.3);

  /* Textos */
  --text-primary:   #1a0f2e;
  --text-secondary: #525252;
  --text-muted:     #9c9c9c;

  /* Sombras com tint roxo */
  --shadow-glow: 0 0 20px rgba(121, 90, 156, 0.10);

  /* Fontes */
  --font-family:  'Plus Jakarta Sans', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

/* Logo Criativoria */
.brand-logo {
  max-height: 34px;
}

.brand-name {
  color: var(--criativoria-purple-dark);
  letter-spacing: 0.5px;
}

.brand-sub {
  color: var(--criativoria-gold);
  letter-spacing: 3px;
}

.sidebar-nav li.active a,
.sidebar-nav a:hover {
  background-color: rgba(121, 90, 156, 0.08);
  box-shadow: inset 3px 0 0 var(--criativoria-purple);
  color: var(--criativoria-purple-dark);
}

.sidebar-nav a:hover i {
  color: var(--criativoria-purple);
}

/* ── Header / Scrollbar ──────────────────────────────────────────────────── */

::-webkit-scrollbar-thumb:hover {
  background: rgba(121, 90, 156, 0.35);
}

/* ── KPI Cards ───────────────────────────────────────────────────────────── */

.kpi-card:hover {
  border-color: rgba(121, 90, 156, 0.25);
  box-shadow: var(--shadow-md), 0 0 20px rgba(121, 90, 156, 0.08);
}

/* Ícones coloridos */
.bg-blue   { background-color: rgba(121, 90, 156, 0.12); color: var(--criativoria-purple); }
.bg-purple  { background-color: rgba(211, 129, 50, 0.12); color: var(--criativoria-gold); }
.bg-emerald { background-color: rgba(16, 185, 129, 0.12); color: #10b981; }
.bg-cyan    { background-color: rgba(211, 129, 50, 0.12); color: var(--criativoria-gold); }
.bg-purple-light { background-color: rgba(121, 90, 156, 0.08); color: var(--criativoria-purple); }
.bg-orange-light { background-color: rgba(211, 129, 50, 0.08); color: var(--criativoria-gold); }
.bg-blue-light   { background-color: rgba(121, 90, 156, 0.08); color: var(--criativoria-purple); }

/* ── Botões ──────────────────────────────────────────────────────────────── */

.btn-secondary:hover {
  background-color: rgba(121, 90, 156, 0.08);
  border-color: var(--criativoria-purple);
}

.btn-primary {
  background: linear-gradient(135deg, var(--criativoria-purple-dark) 0%, var(--criativoria-purple) 60%, var(--criativoria-gold) 100%);
  box-shadow: 0 4px 14px rgba(121, 90, 156, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(121, 90, 156, 0.45);
}

.bg-orange {
  background: linear-gradient(135deg, var(--criativoria-gold) 0%, #f0a04a 100%) !important;
  box-shadow: 0 4px 12px rgba(211, 129, 50, 0.35) !important;
}

.bg-orange:hover {
  box-shadow: 0 6px 18px rgba(211, 129, 50, 0.45) !important;
}

/* ── Inputs com foco ─────────────────────────────────────────────────────── */

.search-input-wrap input:focus,
.form-group-premium input:focus {
  border-color: var(--criativoria-purple);
  box-shadow: 0 0 0 3px rgba(121, 90, 156, 0.15);
}

/* ── Badge e Tooltip ─────────────────────────────────────────────────────── */

.badge {
  color: var(--criativoria-purple);
  background-color: rgba(121, 90, 156, 0.10);
}

.bf-tip {
  background: rgba(121, 90, 156, 0.10);
  color: var(--criativoria-purple);
}

.bf-tip:hover {
  background: var(--criativoria-purple);
  color: #fff;
}

.bf-tip::after {
  background: var(--criativoria-purple-dark);
}

.bf-tip::before {
  border-top-color: var(--criativoria-purple-dark);
}

.bf-tip.tip-down::before {
  border-top-color: transparent;
  border-bottom-color: var(--criativoria-purple-dark);
}

/* ── Integração / código ─────────────────────────────────────────────────── */

.integration-step {
  border-left-color: var(--criativoria-purple);
}

.btn-copy:hover {
  background-color: var(--criativoria-purple);
  border-color: var(--criativoria-purple);
}

/* ── Tabelas ─────────────────────────────────────────────────────────────── */

thead {
  background-color: #f3f0f7;
}

tbody tr:hover {
  background-color: rgba(121, 90, 156, 0.04);
}

.btn-action-premium {
  color: var(--criativoria-purple);
}

.btn-action-premium:hover {
  background-color: var(--criativoria-purple);
  border-color: var(--criativoria-purple);
  box-shadow: 0 0 10px rgba(121, 90, 156, 0.25);
}

/* ── Modal tabs ──────────────────────────────────────────────────────────── */

.modal-tab:hover,
.modal-tab.active {
  color: var(--criativoria-purple);
}

.modal-tab.active::after {
  background-color: var(--criativoria-purple);
}

/* ── Settings group title ───────────────────────────────────────────────── */

.settings-group-title {
  color: var(--criativoria-purple);
}

/* ── Scroll depth bars ───────────────────────────────────────────────────── */

.scroll-label  { color: var(--criativoria-purple); }
.scroll-fill   { background: linear-gradient(90deg, var(--criativoria-purple-dark), var(--criativoria-purple)); }
.scroll-fill-100 { background: linear-gradient(90deg, #10b981, #34d399); }

/* ── Ads KPIs ────────────────────────────────────────────────────────────── */

#ad-kpi-spend {
  background: linear-gradient(135deg, var(--criativoria-purple-dark) 0%, var(--criativoria-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#ad-kpi-cpl {
  color: var(--criativoria-gold);
}

/* ── Chart insight ───────────────────────────────────────────────────────── */

.chart-insight {
  background-color: rgba(211, 129, 50, 0.07);
  border-color: rgba(211, 129, 50, 0.18);
  color: #8a5219;
}

/* ── Lead treatment badges ───────────────────────────────────────────────── */

.treatment-implante { background-color: rgba(121, 90, 156, 0.08); color: var(--criativoria-purple-dark); border: 1px solid rgba(121, 90, 156, 0.18); }
.treatment-carga    { background-color: rgba(211, 129, 50, 0.08); color: #8a5219; border: 1px solid rgba(211, 129, 50, 0.18); }
.treatment-outro    { background-color: rgba(82, 82, 82, 0.08);   color: #525252; border: 1px solid rgba(82, 82, 82, 0.18); }

/* ── Partner / Rodapé da sidebar ─────────────────────────────────────────── */

.partner-logo {
  background-color: #f9f7fc;
  border-color: #ede8f4;
}

/* ── Sidebar footer — "Tecnologia ByteForce" ─────────────────────────────── */

.criativoria-powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(121,90,156,0.06) 0%, rgba(211,129,50,0.06) 100%);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-decoration: none;
}

.criativoria-powered span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.criativoria-powered img {
  max-height: 22px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.criativoria-powered:hover img {
  opacity: 1;
}