/*
 * Sidebar do dashboard: logo + "Dashboard version 2.0", topo contínuo (sem divisão dura) e menu no padrão do
 * dashboard novo (fundo dark, pílulas discretas, item ativo em vermelho, títulos de seção com divisões suaves).
 * Seletores com .main-wrapper para vencer o <style> embutido no head (cores antigas do menu).
 */

/* ---------- topo contínuo ---------- */
/* topo com respiro: logo (58px) -> ~22px -> versão -> ~30px -> PAINEL DE CONTROLE -> ~16px -> primeiro item */
.main-wrapper .sidebar .sidebar-header {
  align-items: flex-start;
  height: 124px;
  padding: 22px 18px 0 22px;
  background: #0b0b0b;
  border-bottom: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.main-wrapper .sidebar .sidebar-body {
  max-height: calc(100% - 124px);
  background: #0b0b0b;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* ---------- logo ---------- */
.main-wrapper .sidebar .sidebar-header .dashboard-brand {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  line-height: 0;
}

/* logo em branco/cinza com um halo vermelho bem sutil */
.main-wrapper .sidebar .sidebar-header .dashboard-brand__logo {
  display: block;
  width: auto;
  height: 58px;
  filter: grayscale(1) brightness(1.35) contrast(1.05) drop-shadow(0 0 7px rgba(230, 0, 0, 0.28));
}

.main-wrapper .sidebar .sidebar-header .sidebar-brand .dashboard-brand__version {
  display: block;
  padding-top: 10px;
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6b6b74;
  /* fio vermelho discreto separando logo e versão */
  background: linear-gradient(90deg, transparent, rgba(230, 0, 0, 0.45), transparent) top center / 70% 1px no-repeat;
}

.main-wrapper .sidebar .sidebar-header .sidebar-brand .dashboard-brand__version b {
  font-weight: 700;
  color: rgba(230, 0, 0, 0.8);
}

.main-wrapper .sidebar .sidebar-header .sidebar-toggler span {
  background: #6b6b74;
}

/* hambúrguer alinhado ao centro da logo (o cabeçalho agora alinha pelo topo) */
.main-wrapper .sidebar .sidebar-header .sidebar-toggler {
  margin-top: 24px;
}

/* ---------- menu ---------- */
.main-wrapper .sidebar .sidebar-body .nav {
  padding: 14px 14px 40px;
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item .nav-link {
  height: 38px;
  margin: 1px 0;
  padding: 0 12px;
  border-radius: 8px;
  color: #8b8b94;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item .nav-link .link-icon {
  width: 17px;
  height: 17px;
  color: #6b6b74;
  fill: none;
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item .nav-link .link-title {
  margin-left: 30px;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

/* hover sutil (sem o deslocamento do título do tema) */
.main-wrapper .sidebar .sidebar-body .nav .nav-item:hover .nav-link {
  color: #e9e9ec;
  background-color: rgba(255, 255, 255, 0.04);
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-title {
  margin-left: 30px;
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-icon {
  color: #c9c9cf;
  fill: none;
}

/* item ativo: pílula com degradê vermelho e barra à esquerda */
.main-wrapper .sidebar .sidebar-body .nav .nav-item.active .nav-link {
  color: #fff;
  background: linear-gradient(90deg, rgba(230, 0, 0, 0.18), rgba(230, 0, 0, 0.05) 70%, transparent);
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item.active .nav-link::before {
  top: 50%;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #e60000;
  box-shadow: 0 0 8px rgba(230, 0, 0, 0.6);
  transform: translateY(-50%);
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item.active .nav-link .link-icon {
  color: #e60000;
  fill: none;
}

/* títulos de seção com divisão suave */
.main-wrapper .sidebar .sidebar-body .nav .nav-item.nav-category {
  height: auto;
  margin: 18px 12px 8px;
  padding-top: 16px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #5f5f68;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* primeiro título (PAINEL DE CONTROLE): um pouco mais destacado, com fio vermelho discreto ao lado */
.main-wrapper .sidebar .sidebar-body .nav .nav-item.nav-category:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  margin-bottom: 15px;
  padding-top: 0;
  border-top: 0;
  color: #85858f;
}

.main-wrapper .sidebar .sidebar-body .nav .nav-item.nav-category:first-child::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(230, 0, 0, 0.45), rgba(230, 0, 0, 0.08) 60%, transparent);
}

/* divisão sem título (antes de Suporte/Sair): o mesmo fio e o mesmo recuo das divisões de seção */
.main-wrapper .sidebar .sidebar-body .nav .nav-item.nav-separator {
  height: 0;
  margin: 16px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* sidebar recolhida (desktop): mantém só os ícones centralizados */
.sidebar-folded:not(.open-sidebar-folded) .main-wrapper .sidebar .sidebar-body .nav .nav-item.nav-category,
.main-wrapper.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .nav .nav-item.nav-category,
.sidebar-folded:not(.open-sidebar-folded) .main-wrapper .sidebar .sidebar-body .nav .nav-item.nav-separator,
.main-wrapper.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .nav .nav-item.nav-separator {
  border-top-color: transparent;
}