/* ==========================================================================
   Sidebar moderna — redesenho do menu principal do dashboard.
   Carregada DEPOIS de style.css; usa o prefixo #sidebar-menu para ganhar
   especificidade sem !important. Mantém intacta a estrutura/JS do tema
   (.submenu / .subdrop / .menu-arrow / span.menu-side).
   Paleta coerente com o resto do produto (primário #2e37a4).
   ========================================================================== */

/* ── Contentor ─────────────────────────────────────────────── */
.sidebar {
  width: 258px;
  background: #ffffff;
  border-right: 1px solid #eef0f6;
  border-top-right-radius: 26px;
  box-shadow: 8px 0 32px rgba(46, 55, 164, 0.05);
}
.sidebar-inner.slimscroll { padding: 6px 0 12px; }
#sidebar-menu > ul { padding: 4px 0; }

/* ── Títulos de secção ─────────────────────────────────────── */
.sidebar-menu .menu-title {
  color: #a6abbd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 18px 26px 8px;
  margin: 0;
}

/* ── Itens de topo (linha-pílula) ──────────────────────────── */
#sidebar-menu a { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }

#sidebar-menu > ul > li { margin: 2px 14px; position: relative; }
#sidebar-menu > ul > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 12px;
  border-radius: 13px;
  color: #5a6076;
  font-size: 14px;
  font-weight: 500;
}

/* Chip do ícone */
#sidebar-menu .menu-side {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 10px;
  background: #f3f4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .18s ease, color .18s ease;
}
#sidebar-menu .menu-side i {
  /* Reset do chip 40x40 que o tema aplica a "a i" — aqui o ícone é só ícone */
  width: auto;
  height: auto;
  min-height: 0;
  background: none;
  border-radius: 0;
  font-size: 18px;
  line-height: 1;
  color: #8b90a6;
  transition: color .18s ease;
}

/* Hover */
#sidebar-menu > ul > li > a:hover {
  background: #f3f4fb;
  color: #2e37a4;
}
#sidebar-menu > ul > li > a:hover .menu-side { background: #e6e8fb; }
#sidebar-menu > ul > li > a:hover .menu-side i { color: #2e37a4; }

/* Parente de submenu aberto (subdrop) */
#sidebar-menu > ul > li > a.subdrop {
  background: #f3f4fb;
  color: #2e37a4;
}
#sidebar-menu > ul > li > a.subdrop .menu-side { background: #e6e8fb; }
#sidebar-menu > ul > li > a.subdrop .menu-side i { color: #2e37a4; }

/* Ativo — pílula com gradiente primário */
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li.active > a {
  background: linear-gradient(135deg, #2e37a4 0%, #4a54d6 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(46, 55, 164, .28);
}
#sidebar-menu > ul > li > a.active .menu-side,
#sidebar-menu > ul > li.active > a .menu-side {
  background: rgba(255, 255, 255, .22);
}
#sidebar-menu > ul > li > a.active .menu-side i,
#sidebar-menu > ul > li.active > a .menu-side i {
  color: #ffffff;
}

/* ── Seta dos submenus ─────────────────────────────────────── */
.sidebar-menu .menu-arrow {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  color: inherit;
  opacity: .65;
}
.sidebar-menu li a.subdrop .menu-arrow {
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}

/* ── Submenus ──────────────────────────────────────────────── */
.sidebar-menu ul ul { padding: 2px 0 6px; }
#sidebar-menu ul ul li a {
  display: flex;
  align-items: center;
  padding: 9px 14px 9px 56px;
  margin: 1px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #767c91;
  position: relative;
}
#sidebar-menu ul ul li a:hover { background: #f3f4fb; color: #2e37a4; }
#sidebar-menu ul ul li a.active {
  background: #eef0fb;
  color: #2e37a4;
  font-weight: 600;
}
/* Indicador (ponto) no início de cada subitem — substitui a imagem do tema */
#sidebar-menu ul .submenu ul .active:before,
#sidebar-menu ul ul li a:before {
  content: "";
  background-image: none;
  position: absolute;
  left: 34px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #cfd2e6;
  transform: translateY(-50%);
  transition: background-color .18s ease;
}
#sidebar-menu ul ul li a:hover:before,
#sidebar-menu ul ul li a.active:before { background-color: #2e37a4; }

/* ── Botão de logout ───────────────────────────────────────── */
#sidebar-menu .logout-btn { margin: 18px 14px 8px; }
#sidebar-menu .logout-btn a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 12px;
  border-radius: 13px;
  color: #e0496b;
  font-size: 14px;
  font-weight: 600;
  transition: background .18s ease;
}
#sidebar-menu .logout-btn a:hover { background: #fdecf1; }
#sidebar-menu .logout-btn a span.menu-side {
  width: 36px; height: 36px; min-height: 36px;
  border-radius: 10px;
  background: #fdecf1;
  display: flex; align-items: center; justify-content: center;
}
#sidebar-menu .logout-btn a .menu-side i {
  width: auto; height: auto; min-height: 0; background: none; border-radius: 0;
  font-size: 18px; color: #e0496b;
}

/* ── Scrollbar fina e discreta ─────────────────────────────── */
.sidebar-inner.slimscroll { scrollbar-width: thin; scrollbar-color: #d7dae8 transparent; }
.sidebar-inner.slimscroll::-webkit-scrollbar { width: 6px; }
.sidebar-inner.slimscroll::-webkit-scrollbar-thumb { background: #d7dae8; border-radius: 6px; }
.sidebar-inner.slimscroll::-webkit-scrollbar-thumb:hover { background: #b9bdd4; }
.sidebar-inner.slimscroll::-webkit-scrollbar-track { background: transparent; }