/* SIDEBAR.CSS - ScorePulse V9.1 Dark Glass */

.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  position: relative;
}

/* Linha de brilho no lado direito da sidebar */
.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(139,92,246,0.4) 40%, rgba(139,92,246,0.4) 60%, transparent);
  pointer-events: none;
}

/* BRANDING */
.sidebar-brand {
  padding: 22px 18px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.sidebar-brand::before {
  content: '';
  position: absolute;
  top: 50%; left: 40%;
  transform: translate(-50%, -50%);
  width: 200px; height: 90px;
  background: radial-gradient(circle, rgba(139,92,246,0.4) 0%, transparent 70%);
  filter: blur(28px);
  z-index: 0;
  animation: brand-aura 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes brand-aura {
  0%, 100% { opacity: 0.15; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 0.8;  transform: translate(-50%,-50%) scale(1.4); }
}

.brand-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.brand-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  animation: logo-ring 2.5s ease-in-out infinite;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes logo-ring {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139,92,246,0.2), 0 0 8px rgba(139,92,246,0.25);
    filter: brightness(1);
  }
  15% {
    box-shadow: 0 0 0 7px rgba(188,19,254,0.1), 0 0 32px rgba(188,19,254,0.7), 0 0 56px rgba(188,19,254,0.25);
    filter: brightness(1.25) drop-shadow(0 0 10px #bc13fe);
  }
  45% {
    box-shadow: 0 0 0 5px rgba(188,19,254,0.08), 0 0 26px rgba(188,19,254,0.6), 0 0 44px rgba(188,19,254,0.18);
    filter: brightness(1.2) drop-shadow(0 0 8px #bc13fe);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(139,92,246,0.05), 0 0 20px rgba(139,92,246,0.5);
    filter: brightness(1.1);
  }
}

.brand-text-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  z-index: 1;
}

.brand-name {
  font-family: var(--font-tactical);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #ffffff 0%, var(--purple-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.brand-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--purple);
  letter-spacing: 2px;
  opacity: 0.8;
}

/* STATUS */
.sidebar-status {
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 6px var(--green);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.status-text {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* NAV */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  padding: 14px 18px 5px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  color: var(--text-secondary);
  font-size: 12.5px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  border-left: 2px solid transparent;
  margin: 1px 0;
}

.nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}

.nav-item.active {
  color: var(--text-primary);
  background: rgba(139,92,246,0.08);
  border-left-color: var(--purple);
}

.nav-item.active .nav-icon { color: var(--purple-bright); }

.nav-icon { width: 16px; text-align: center; font-size: 13px; flex-shrink: 0; }
.nav-label { flex: 1; }

.nav-badge {
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.nav-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 5px var(--green);
  animation: pulse-dot 1.5s infinite;
}

/* FOOTER */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 12px 18px;
}

.sidebar-system-tag {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--green);
  text-transform: uppercase;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
}

.sidebar-system-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 4px var(--green);
}