/* ==========================================================================
   DARKFLOW - CYBER PURPLE & ELECTRIC BLUE THEME (ROXO COM AZUL)
   Ultra-Specific Overrides to Guarantee Zero Red Elements
   ========================================================================== */

:root {
  --hf-primary: #7c3aed !important;
  --hf-primary-hover: #8b5cf6 !important;
  --hf-purple-glow: #a855f7 !important;
  --hf-purple-neon: #c084fc !important;
  --hf-blue-neon: #3b82f6 !important;
  --hf-blue-electric: #2563eb !important;
  --hf-cyan-accent: #38bdf8 !important;
  --hf-glow-purple: 0 0 20px rgba(139, 92, 246, 0.45) !important;
  --hf-glow-blue: 0 0 20px rgba(59, 130, 246, 0.45) !important;
}

/* Base Body Ambient Theme */
body {
  background-color: #07070c !important;
  color: #f1f5f9 !important;
}

/* Custom Cyber Purple & Blue Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #07070c;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6d28d9 0%, #1d4ed8 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8b5cf6 0%, #3b82f6 100%);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

/* ==========================================================================
   1. BOTÃO + NOVA CAMPANHA & BOTÕES PRIMÁRIOS (ROXO COM AZUL)
   ========================================================================== */
html body .side-nav .side-primary-action,
html body .side-primary-action,
html body a.side-primary-action,
html body .btn-primary,
html body button.btn-primary,
html body .hf-submit,
html body .bulk-apply-button,
html body button[type="submit"].btn-primary,
html body .hf-v2-head nav .btn,
html body .hf-v2-head nav .btn-primary,
html body .mobile-status.ok {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45), 0 0 10px rgba(37, 99, 235, 0.3) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease-in-out !important;
}

html body .side-nav .side-primary-action:hover,
html body .side-primary-action:hover,
html body a.side-primary-action:hover,
html body .btn-primary:hover,
html body button.btn-primary:hover,
html body .hf-submit:hover,
html body .bulk-apply-button:hover,
html body button[type="submit"].btn-primary:hover,
html body .hf-v2-head nav .btn:hover {
  background: linear-gradient(135deg, #9333ea 0%, #3b82f6 100%) !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
  box-shadow: 0 6px 26px rgba(147, 51, 234, 0.6), 0 0 16px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   2. CABEÇALHO & DESTAQUES DE TEXTO ("em um só lugar.")
   ========================================================================== */
html body .hf-v2-head h2 em,
html body .rv-page.rv-dashboard .hf-v2-head h2 em,
html body .hf-v2-action h3 em,
html body h2 em,
html body h1 em,
html body em {
  background: linear-gradient(135deg, #c084fc 0%, #60a5fa 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-style: italic !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.35)) !important;
}

/* Kickers (Visão geral, etc.) */
html body .hf-v2-head > div > span,
html body .hf-v2-label,
html body .page-kicker,
html body .page-kicker strong,
html body .eyebrow,
html body .top-bar .page-kicker,
html body .web-dashboard .top-bar .page-kicker,
html body .tools-hero-copy .page-kicker {
  color: #c084fc !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.3) !important;
}

html body .web-dashboard .top-bar .page-kicker:before {
  background: #c084fc !important;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.5) !important;
}

/* ==========================================================================
   3. CARDS DE MÉTRICAS (PUBLICAÇÕES HOJE, VIEWS 30D, FILAS, CONTAS)
   ========================================================================== */
html body .hf-v2-metrics span,
html body.web-dashboard .hf-v2-metrics span,
html body .hf-v2-metrics > a > span {
  color: #c084fc !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

html body .hf-v2-metrics > a > i,
html body .hf-v2-metrics > a.is-published > i,
html body .hf-v2-metrics > a.is-reach > i,
html body .hf-v2-metrics > a.is-queue > i,
html body .hf-v2-metrics > a.is-active > i,
html body .hf-v2-metrics > a.is-accounts > i {
  background: rgba(124, 58, 237, 0.18) !important;
  color: #c084fc !important;
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.28) !important;
}

html body .hf-v2-metrics strong,
html body.web-dashboard .hf-v2-metrics strong {
  color: #f8fafc !important;
}

html body .hf-v2-metrics > a:after,
html body .hf-v2-metrics > a.is-published:after,
html body .hf-v2-metrics > a.is-queue:after,
html body .hf-v2-metrics > a.is-reach:after,
html body .hf-v2-metrics > a.is-active:after {
  border-color: rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 0 0 20px rgba(59, 130, 246, 0.04) !important;
}

html body .hf-v2-metrics > a:hover,
html body.web-dashboard .hf-v2-metrics > a:hover {
  background: linear-gradient(145deg, #131124, #0c0b16 72%) !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.25), 0 0 15px rgba(59, 130, 246, 0.18) !important;
  transform: translateY(-2px) !important;
}

html body .hf-v2-metrics > a:hover strong {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.4) !important;
}

html body .hf-v2-metrics > a.is-queue small em { background: #8b5cf6 !important; }
html body .hf-v2-metrics > a.is-reach small em { background: #38bdf8 !important; }
html body .hf-v2-metrics > a.is-published small em { background: #10b981 !important; }
html body .hf-v2-metrics > a.is-active small em { background: #10b981 !important; }

/* ==========================================================================
   4. TOAST BANNER CENTRAL & NOTIFICAÇÕES (DARKFLOW TOAST)
   ========================================================================== */
html body #functionToastCard,
html body .function-toast-card,
html body .app-notification-toast,
html body .story-progress-toast {
  background: rgba(14, 11, 26, 0.96) !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
  box-shadow: 0 10px 40px rgba(124, 58, 237, 0.28), 0 0 20px rgba(37, 99, 235, 0.18) !important;
  backdrop-filter: blur(12px) !important;
}

html body #functionToastCard span,
html body .function-toast-card span,
html body #appNotificationTitle,
html body .function-toast-card .page-kicker {
  color: #c084fc !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.35) !important;
}

html body #functionToastText,
html body .function-toast-card strong,
html body #appNotificationText {
  color: #f1f5f9 !important;
}

/* ==========================================================================
   5. MENU LATERAL (SIDEBAR) & ITEM ATIVO (DASHBOARD)
   ========================================================================== */
html body .side-links a.active,
html body .side-nav .side-links a.active,
html body .side-links a[href="/"].active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.22) 0%, rgba(37, 99, 235, 0.10) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  border-left: 3px solid #8b5cf6 !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 15px rgba(124, 58, 237, 0.22), 0 0 10px rgba(59, 130, 246, 0.12) !important;
}

html body .side-links a.active i,
html body .side-links a.active svg,
html body .side-nav .side-links a.active i {
  color: #c084fc !important;
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.5)) !important;
}

html body .side-links a:hover {
  background: rgba(124, 58, 237, 0.12) !important;
  color: #f8fafc !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

html body .side-links a:hover i {
  color: #60a5fa !important;
}

/* ==========================================================================
   6. CARD DE VENDAS & TABS RAVENBOT / SHARKBOT
   ========================================================================== */
html body .rv-btn-primary,
html body button.active[data-sales-tab="ravenbot"],
html body .rv-dashboard button.active,
html body .hf-sales-selector>[aria-current=page],
html body .hf-sales-selector>[aria-pressed=true] {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

html body .hf-sales-kicker,
html body .hf-sales-stats span,
html body .hf-sales-stats .hf-sales-today > span,
html body .hf-sales-stats .hf-sales-count > span {
  color: #c084fc !important;
}

html body .hf-sales-stats svg,
html body .hf-sales-stats i,
html body .rv-card i,
html body .rv-card svg,
html body .dashboard-sales svg,
html body .vendas-stat svg {
  color: #a855f7 !important;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.4)) !important;
}

/* ==========================================================================
   7. CARD RANKING & TROFÉU
   ========================================================================== */
html body .hf-v2-rank i,
html body .hf-v2-rank svg,
html body .hf-v2-rank [data-lucide="trophy"],
html body [data-lucide="trophy"] {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4)) !important;
}

/* ==========================================================================
   8. TOP BAR, REFRESH & ALERTAS
   ========================================================================== */
html body .hf-v2-refresh {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
}

html body .hf-v2-refresh:hover {
  background: linear-gradient(135deg, #9333ea 0%, #3b82f6 100%) !important;
  border-color: #c084fc !important;
}

html body .notification-pill strong#notificationCount {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5) !important;
}

html body .connection-badge {
  border-color: rgba(139, 92, 246, 0.4) !important;
  color: #c084fc !important;
}

html body .connection-badge.connected,
html body .connection-badge.active,
html body .status-dot.ok {
  background-color: #10b981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

/* ==========================================================================
   9. ELIMINAÇÃO TOTAL DE BORDAS OU CORES VERMELHAS
   ========================================================================== */
.border-danger,
.text-danger:not(.actual-error),
.badge-danger:not(.actual-error) {
  border-color: rgba(139, 92, 246, 0.5) !important;
  color: #c084fc !important;
}

.bg-danger:not(.actual-error) {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
}