/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR PREMIUM V4 — UI/UX overlay on top of sidebar_ios_v3.css
   Pure visual layer. Zero impact em logica/rotas/backend.
   Estrutura: hierarquia de 3 tiers via [data-tier="..."]:
     primary-signals  ⚡ neon roxo + LIVE pulsante (Sinais IA)
     primary-copilot  🧠 dourado + glow elegante (Copilot IA)
     primary-mesa     📡 verde/teal + AO VIVO blink (Mesa Ao Vivo)
     primary-radar    🎯 azul elétrico + radar scan (Radar IA)
     secondary        visual limpo, hover sutil (Dashboard, Analysis, etc)
     labs             opacidade reduzida, separador (AlphaFX, Crypto, etc)
   Reversao: remover este link <link> + data-tier do HTML.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens premium ────────────────────────────────────────────────── */
:root {
  --sbv4-gold:        #fbbf24;
  --sbv4-gold-bright: #fcd34d;
  --sbv4-gold-deep:   #d4af37;
  --sbv4-live:        #10b981;
  --sbv4-live-bright: #34d399;
  --sbv4-live-deep:   #059669;
  --sbv4-radar:       #3b82f6;
  --sbv4-radar-bright:#60a5fa;
  --sbv4-signal:      #a78bfa;
  --sbv4-signal-bright:#c4b5fd;
  --sbv4-bg-grad:     linear-gradient(180deg, #070816 0%, #0f0c28 100%);
  --sbv4-glass-blur:  saturate(140%) blur(14px);
  --sbv4-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --sbv4-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Sidebar shell — gradient + glass ──────────────────────────────── */
.sidebar {
  background: var(--sbv4-bg-grad) !important;
  -webkit-backdrop-filter: var(--sbv4-glass-blur);
  backdrop-filter: var(--sbv4-glass-blur);
  border-right: 1px solid rgba(167, 139, 250, 0.08);
}

.sidebar-nav .nav-item {
  position: relative;
  border-radius: 10px;
  margin: 2px 6px;
  transition:
    background 0.22s var(--sbv4-ease),
    transform  0.22s var(--sbv4-spring),
    box-shadow 0.28s var(--sbv4-ease),
    opacity    0.22s var(--sbv4-ease);
  isolation: isolate;
}

.sidebar-nav .nav-item:hover {
  transform: scale(1.02) translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER 1 — PRIMARY (destaques)
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar-nav .nav-item[data-tier^="primary-"] {
  margin: 6px 6px;
  font-weight: 600;
}

.sidebar-nav .nav-item[data-tier^="primary-"] .nav-icon {
  transition: filter 0.25s var(--sbv4-ease), transform 0.25s var(--sbv4-spring);
}

.sidebar-nav .nav-item[data-tier^="primary-"]:hover .nav-icon {
  transform: scale(1.1);
}

/* ─── ⚡ SINAIS IA — neon roxo + energia IA ──────────────────────────── */
.sidebar-nav .nav-item[data-tier="primary-signals"] {
  background: linear-gradient(135deg,
    rgba(124, 58, 237, 0.20) 0%,
    rgba(34, 211, 238, 0.10) 60%,
    rgba(124, 58, 237, 0.14) 100%);
  border: 1px solid rgba(167, 139, 250, 0.38);
  box-shadow:
    0 0 18px rgba(167, 139, 250, 0.22),
    inset 0 0 12px rgba(124, 58, 237, 0.10);
  animation: sbV4-pulseSignal 2.6s ease-in-out infinite;
}

.sidebar-nav .nav-item[data-tier="primary-signals"] .nav-icon {
  color: var(--sbv4-signal-bright);
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.55));
}

/* Barra lateral neon animada */
.sidebar-nav .nav-item[data-tier="primary-signals"]::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #22d3ee 0%, #a78bfa 100%);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.6);
  animation: sbV4-energyBar 2s ease-in-out infinite;
}

@keyframes sbV4-pulseSignal {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(167, 139, 250, 0.22),
      inset 0 0 12px rgba(124, 58, 237, 0.10);
  }
  50% {
    box-shadow:
      0 0 28px rgba(167, 139, 250, 0.45),
      inset 0 0 16px rgba(124, 58, 237, 0.18);
  }
}

@keyframes sbV4-energyBar {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Badge dinamico no Sinais IA (numero) ganha um halo */
.sidebar-nav .nav-item[data-tier="primary-signals"] .nav-badge {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(34, 211, 238, 0.18));
  color: var(--sbv4-signal-bright);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.35);
}

/* ─── 🧠 COPILOT IA — dourado premium ───────────────────────────────── */
.sidebar-nav .nav-item[data-tier="primary-copilot"] {
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.14) 0%,
    rgba(212, 175, 55, 0.06) 70%,
    rgba(251, 191, 36, 0.10) 100%);
  border: 1px solid rgba(251, 191, 36, 0.42);
  box-shadow:
    0 0 18px rgba(251, 191, 36, 0.18),
    inset 0 0 10px rgba(212, 175, 55, 0.08);
  animation: sbV4-glowGold 4s ease-in-out infinite;
}

.sidebar-nav .nav-item[data-tier="primary-copilot"] .nav-icon {
  color: var(--sbv4-gold);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}

.sidebar-nav .nav-item[data-tier="primary-copilot"] span:not(.nav-badge) {
  background: linear-gradient(90deg, var(--sbv4-gold-bright), var(--sbv4-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.sidebar-nav .nav-item[data-tier="primary-copilot"] .nav-badge {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(212, 175, 55, 0.15));
  color: var(--sbv4-gold-bright);
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

@keyframes sbV4-glowGold {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(251, 191, 36, 0.18),
      inset 0 0 10px rgba(212, 175, 55, 0.08);
  }
  50% {
    box-shadow:
      0 0 26px rgba(251, 191, 36, 0.35),
      inset 0 0 14px rgba(212, 175, 55, 0.14);
  }
}

/* ─── 📡 MESA AO VIVO — verde/teal LIVE pulsante ─────────────────────── */
.sidebar-nav .nav-item[data-tier="primary-mesa"] {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.18) 0%,
    rgba(20, 184, 166, 0.10) 70%,
    rgba(16, 185, 129, 0.14) 100%);
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow:
    0 0 20px rgba(16, 185, 129, 0.28),
    inset 0 0 12px rgba(16, 185, 129, 0.10);
  animation: sbV4-pulseLive 1.8s ease-in-out infinite;
}

.sidebar-nav .nav-item[data-tier="primary-mesa"] .nav-icon {
  color: var(--sbv4-live-bright);
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
}

/* Barra lateral verde (transmissao ativa) */
.sidebar-nav .nav-item[data-tier="primary-mesa"]::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
}

/* AO VIVO badge — vermelho piscante (broadcast feel) */
.sidebar-nav .nav-item[data-tier="primary-mesa"] .nav-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.85), rgba(220, 38, 38, 0.7)) !important;
  color: #fff !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  animation: sbV4-blinkLive 1.4s ease-in-out infinite;
  padding: 2px 7px;
}

/* Dot pulsante antes do texto AO VIVO */
.sidebar-nav .nav-item[data-tier="primary-mesa"] .nav-badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  animation: sbV4-blinkLive 0.9s ease-in-out infinite;
}

@keyframes sbV4-pulseLive {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(16, 185, 129, 0.28),
      inset 0 0 12px rgba(16, 185, 129, 0.10);
  }
  50% {
    box-shadow:
      0 0 30px rgba(16, 185, 129, 0.50),
      inset 0 0 16px rgba(16, 185, 129, 0.18);
  }
}

@keyframes sbV4-blinkLive {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}

/* ─── 🎯 RADAR IA — azul elétrico + scan animado ─────────────────────── */
.sidebar-nav .nav-item[data-tier="primary-radar"] {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.18) 0%,
    rgba(124, 58, 237, 0.10) 70%,
    rgba(59, 130, 246, 0.14) 100%);
  border: 1px solid rgba(59, 130, 246, 0.42);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.22);
  position: relative;
  overflow: hidden;
}

.sidebar-nav .nav-item[data-tier="primary-radar"] .nav-icon {
  color: var(--sbv4-radar-bright);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.55));
  position: relative;
  z-index: 2;
}

/* Scan circular expandindo no canto do icone */
.sidebar-nav .nav-item[data-tier="primary-radar"]::after {
  content: '';
  position: absolute;
  left: 22px; top: 50%;
  width: 6px; height: 6px;
  margin-left: -3px; margin-top: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(96, 165, 250, 0.7);
  pointer-events: none;
  animation: sbV4-radarScan 2.4s ease-out infinite;
  z-index: 1;
}

@keyframes sbV4-radarScan {
  0%   { width: 4px;  height: 4px;  margin-left: -2px;  margin-top: -2px;  opacity: 1;   border-color: rgba(96, 165, 250, 0.9); }
  100% { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; opacity: 0;   border-color: rgba(96, 165, 250, 0.0); }
}

.sidebar-nav .nav-item[data-tier="primary-radar"] .nav-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(124, 58, 237, 0.16));
  color: var(--sbv4-radar-bright);
  border: 1px solid rgba(59, 130, 246, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER 2 — SECONDARY (Dashboard, Analysis, Graficos, Vision)
   Visual limpo. Hover suave. Sem animacao constante.
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar-nav .nav-item[data-tier="secondary"] {
  opacity: 0.94;
  transition: all 0.22s var(--sbv4-ease);
}

.sidebar-nav .nav-item[data-tier="secondary"]:hover {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.10), rgba(34, 211, 238, 0.05));
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.15);
  opacity: 1;
}

.sidebar-nav .nav-item[data-tier="secondary"]:hover .nav-icon {
  color: var(--sbv4-signal-bright);
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.4));
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER 3 — LABS / DEFAULT (AlphaFX, Crypto Brain, Auto Binance, e
   qualquer item SEM data-tier explicito — fallback automatico)
   Discreto. Opacidade reduzida. Hover restaura visibilidade.
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar-nav .nav-item[data-tier="labs"],
.sidebar-nav .nav-item:not([data-tier]) {
  opacity: 0.68;
  transition: opacity 0.22s var(--sbv4-ease), background 0.22s var(--sbv4-ease);
}

.sidebar-nav .nav-item[data-tier="labs"]:hover,
.sidebar-nav .nav-item:not([data-tier]):hover {
  opacity: 1;
  background: rgba(124, 58, 237, 0.08);
}

.sidebar-nav .nav-item[data-tier="labs"] .nav-badge,
.sidebar-nav .nav-item:not([data-tier]) .nav-badge {
  opacity: 0.85;
}

/* Section labels das areas LABS ganham aspecto tecnico */
.sidebar-nav .nav-section-label {
  position: relative;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px 6px;
  color: rgba(148, 163, 184, 0.7);
}

.sidebar-nav .nav-section-label::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(167, 139, 250, 0.0),
    rgba(167, 139, 250, 0.25) 50%,
    rgba(167, 139, 250, 0.0));
}

/* ═══════════════════════════════════════════════════════════════════════
   ITEM ATIVO (rota corrente) — glow mais forte, barra animada
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item[aria-current="page"] {
  background: linear-gradient(90deg,
    rgba(124, 58, 237, 0.28) 0%,
    rgba(124, 58, 237, 0.12) 60%,
    transparent 100%);
  box-shadow:
    0 0 22px rgba(167, 139, 250, 0.35),
    inset 0 0 14px rgba(124, 58, 237, 0.16);
}

.sidebar-nav .nav-item.active .nav-active-bar,
.sidebar-nav .nav-item[aria-current="page"] .nav-active-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #22d3ee 0%, #a78bfa 60%, #22d3ee 100%);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.7);
  animation: sbV4-energyBar 1.6s ease-in-out infinite;
}

/* Item ativo e tier primary — boost extra de glow */
.sidebar-nav .nav-item.active[data-tier="primary-signals"]   { box-shadow: 0 0 32px rgba(167, 139, 250, 0.55); }
.sidebar-nav .nav-item.active[data-tier="primary-copilot"]   { box-shadow: 0 0 32px rgba(251, 191, 36, 0.55); }
.sidebar-nav .nav-item.active[data-tier="primary-mesa"]      { box-shadow: 0 0 32px rgba(16, 185, 129, 0.55); }
.sidebar-nav .nav-item.active[data-tier="primary-radar"]     { box-shadow: 0 0 32px rgba(59, 130, 246, 0.55); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVO — mobile collapse, icones centralizados quando fechado
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar-nav .nav-item {
    padding: 10px 12px;
  }
  /* Reduz animacoes pesadas em mobile pra economizar GPU */
  .sidebar-nav .nav-item[data-tier="primary-signals"],
  .sidebar-nav .nav-item[data-tier="primary-copilot"],
  .sidebar-nav .nav-item[data-tier="primary-mesa"] {
    animation-duration: 3.5s;
  }
  .sidebar-nav .nav-item[data-tier="primary-radar"]::after {
    animation-duration: 3.5s;
  }
}

/* Sidebar colapsada (collapsed/icon-only) — ja usa classe existente */
.sidebar.collapsed .nav-item {
  justify-content: center;
}

.sidebar.collapsed .nav-item span:not(.nav-badge),
.sidebar.collapsed .nav-section-label {
  display: none;
}

.sidebar.collapsed .nav-item[data-tier^="primary-"] {
  /* Em mobile/colapsado mantem o glow mas removemos ::before/::after pesados */
}

.sidebar.collapsed .nav-item[data-tier="primary-radar"]::after,
.sidebar.collapsed .nav-item[data-tier="primary-signals"]::before,
.sidebar.collapsed .nav-item[data-tier="primary-mesa"]::before {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   PERFORMANCE — prefers-reduced-motion (acessibilidade)
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-item,
  .sidebar-nav .nav-item *,
  .sidebar-nav .nav-item::before,
  .sidebar-nav .nav-item::after {
    animation: none !important;
    transition: none !important;
  }
}