/* =========================================================
   sidebar.css — Menu lateral global
   Todos os valores visuais vêm das variáveis CSS geradas
   em /tema/preview.css. Sem cores ou valores hardcoded.
   ========================================================= */

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--menu-width-expanded);
  background: var(--menu-bg);
  border-right: var(--menu-border-right);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  font-family: var(--menu-font);
  z-index: 100;
  overflow: hidden;
  transition:
    width var(--menu-anim-speed) var(--menu-anim-easing),
    box-shadow var(--menu-anim-speed) var(--menu-anim-easing);
  will-change: width;
}

/* Estado colapsado */
.sidebar.colapsada {
  width: var(--menu-width-collapsed);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

/* ── Suprimir sidebars legadas (db-sidebar) ──────────────── */
.db-sidebar {
  display: none !important;
}

.db-main {
  margin-left: 0 !important;
}

/* ── Margem do conteúdo ───────────────────────────────────── */
.sidebar ~ .db-wrapper,
.sidebar ~ .lg-wrap,
.sidebar ~ #mainContent {
  margin-left: var(--menu-width-expanded);
  transition: margin-left var(--menu-anim-speed) var(--menu-anim-easing);
}

.sidebar.colapsada ~ .db-wrapper,
.sidebar.colapsada ~ .lg-wrap,
.sidebar.colapsada ~ #mainContent {
  margin-left: var(--menu-width-collapsed);
}

/* ── Suprimir transição na carga (evita flash) ────────────── */
.sidebar-sem-transicao .sidebar,
.sidebar-sem-transicao .sidebar ~ .db-wrapper,
.sidebar-sem-transicao .sidebar ~ .lg-wrap,
.sidebar-sem-transicao .sidebar ~ #mainContent {
  transition: none !important;
}

/* ── Logo ─────────────────────────────────────────────────── */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 10px;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-logo-icone {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--menu-active-border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-logo-texto {
  font-size: 13px;
  font-weight: 600;
  color: var(--menu-item-color-active);
  letter-spacing: 0.02em;
}

/* ── Navegação principal ──────────────────────────────────── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--menu-item-margin);
  padding: 48px var(--menu-padding) 4px;
  flex-shrink: 0;
}

/* ── Item da sidebar ──────────────────────────────────────── */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px var(--menu-padding);
  margin: 0 calc(var(--menu-padding) / 2);
  border-radius: var(--menu-item-radius);
  /* Borda de destaque — todos os lados transparentes por padrão */
  border-left:   var(--menu-active-border-width) solid transparent;
  border-right:  var(--menu-active-border-width) solid transparent;
  border-bottom: var(--menu-active-border-width) solid transparent;
  background:    var(--menu-item-bg);
  color:         var(--menu-item-color);
  font-size:     var(--menu-font-size);
  font-weight:   var(--menu-font-weight);
  font-style:    var(--menu-font-style);
  text-transform:   var(--menu-text-transform);
  letter-spacing:   var(--menu-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  transition:
    background   var(--menu-hover-speed) ease,
    color        var(--menu-hover-speed) ease,
    transform    var(--menu-hover-speed) ease,
    opacity      var(--menu-hover-speed) ease,
    box-shadow   var(--menu-hover-speed) ease;
}

.sidebar-item:hover {
  background: var(--menu-item-bg-hover);
  color: var(--menu-item-color-hover);
  text-decoration: none;
}

/* ── Item ativo ───────────────────────────────────────────── */
.sidebar-item.ativo {
  background: var(--menu-item-bg-active);
  color: var(--menu-item-color-active);
}

.sidebar-item.ativo:hover {
  background: var(--menu-item-bg-active);
  color: var(--menu-item-color-active);
}

/* Borda do item ativo por posição (classe aplicada pelo JS) */
.sidebar-item.ativo.borda-esquerda {
  border-left-color: var(--menu-active-border-color);
}

.sidebar-item.ativo.borda-direita {
  border-right-color: var(--menu-active-border-color);
}

.sidebar-item.ativo.borda-baixo {
  border-bottom-color: var(--menu-active-border-color);
}

/* Fallback: sem classe borda-* = esquerda (comportamento padrão) */
.sidebar-item.ativo:not(.borda-direita):not(.borda-baixo):not(.borda-nenhuma) {
  border-left-color: var(--menu-active-border-color);
}

/* ── Ícone dentro do item ─────────────────────────────────── */
.sidebar-item > .ti,
.sidebar-icon-wrap > .ti {
  font-size: var(--menu-icon-size);
  width: var(--menu-icon-size);
  text-align: center;
  color: var(--menu-icon-color);
  flex-shrink: 0;
  line-height: 1;
  transition:
    color      var(--menu-hover-speed) ease,
    transform  var(--menu-hover-speed) ease;
}

.sidebar-item:hover > .ti,
.sidebar-item:hover .sidebar-icon-wrap > .ti {
  color: var(--menu-icon-color-hover);
}

.sidebar-item.ativo > .ti,
.sidebar-item.ativo .sidebar-icon-wrap > .ti {
  color: var(--menu-icon-color-active);
}

/* ── Label (texto) ────────────────────────────────────────── */
.sidebar-label {
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
  opacity: 1;
  overflow: hidden;
  max-width: 200px;
  transform: translateX(0);
  transition:
    opacity    var(--menu-anim-speed) var(--menu-anim-easing),
    max-width  var(--menu-anim-speed) var(--menu-anim-easing),
    transform  var(--menu-anim-speed) var(--menu-anim-easing);
}

/* Ocultar labels quando colapsado */
.sidebar.colapsada .sidebar-label {
  opacity: 0;
  max-width: 0;
  transform: translateX(-6px);
  pointer-events: none;
}

/* Centralizar ícone quando colapsado */
.sidebar.colapsada .sidebar-nav,
.sidebar.colapsada .sidebar-footer {
  padding-left: 0;
  padding-right: 0;
}

.sidebar.colapsada .sidebar-item {
  justify-content: center;
  padding: 9px 0;
  margin: 0;
  border-left-color:   transparent;
  border-right-color:  transparent;
  border-bottom-color: transparent;
}

/* Item ativo colapsado — mantém fundo, sem borda */
.sidebar.colapsada .sidebar-item.ativo {
  background: var(--menu-item-bg-active);
  border-left-color:   transparent;
  border-right-color:  transparent;
  border-bottom-color: transparent;
}

/* ── Wrap do ícone (âncora do badge) ──────────────────────── */
.sidebar-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: var(--menu-icon-size);
}

/* ── Badge de notificação ─────────────────────────────────── */
.sidebar-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Espaçador ────────────────────────────────────────────── */
.sidebar-spacer {
  flex: 1;
}

/* ── Rodapé da sidebar ────────────────────────────────────── */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--menu-item-margin);
  padding: 4px var(--menu-padding) 16px;
  flex-shrink: 0;
}

/* ── Botão toggle colapsar/expandir (desktop) ─────────────── */
.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 20px;
  margin-right: 20px;
  width: 24px;
  height: 24px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  color: var(--menu-item-color);
  font-size: 14px;
  padding: 0;
  transition:
    color      var(--menu-hover-speed) ease,
    background var(--menu-hover-speed) ease;
}

.sidebar-toggle:hover {
  color: var(--menu-item-color-active);
  background: var(--menu-item-bg-active);
}

/* ── Hambúrguer (mobile) ──────────────────────────────────── */
.sidebar-hamburguer {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 98;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--menu-item-color-active);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
}

.sidebar-hamburguer:hover {
  background: var(--menu-item-bg-hover);
}

/* Overlay escuro ao abrir no mobile */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--menu-anim-speed) var(--menu-anim-easing);
}

.sidebar-overlay.ativo {
  opacity: 1;
  pointer-events: auto;
}

/* ── Separadores entre itens ──────────────────────────────── */
/* Classe .com-separadores aplicada pelo JS quando menu_separador_vis = true */
.sidebar.com-separadores .sidebar-item + .sidebar-item {
  border-top: 1px solid var(--menu-separator-color);
}

/* ── Efeitos de hover ─────────────────────────────────────── */

.sidebar.hover-slide .sidebar-item:hover {
  transform: translateX(4px);
}

.sidebar.hover-scale .sidebar-item:hover {
  transform: scale(1.03);
}

.sidebar.hover-glow .sidebar-item:hover {
  box-shadow: 0 0 12px var(--menu-item-color-hover);
}

.sidebar.hover-underline .sidebar-item:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* fade: itens inativos ficam em 70%, hover/ativo = 100% */
.sidebar.hover-fade .sidebar-item {
  opacity: 0.7;
}
.sidebar.hover-fade .sidebar-item:hover,
.sidebar.hover-fade .sidebar-item.ativo {
  opacity: 1;
}

/* ── Animações de abertura/fechamento ─────────────────────── */

/* anim-slide: usa ease-in-out (já definido via variável --menu-anim-easing) */
/* anim-elastic: override do easing para bounce */
.sidebar.anim-elastic {
  transition:
    width      var(--menu-anim-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow var(--menu-anim-speed) ease;
}
.sidebar.anim-elastic ~ .db-wrapper,
.sidebar.anim-elastic ~ .lg-wrap,
.sidebar.anim-elastic ~ #mainContent {
  transition: margin-left var(--menu-anim-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* anim-fade: labels somem com opacity em vez de slide */
.sidebar.anim-fade .sidebar-label {
  max-width: 200px !important;
  transform: none !important;
  transition: opacity var(--menu-anim-speed) var(--menu-anim-easing) !important;
}
.sidebar.anim-fade.colapsada .sidebar-label {
  opacity: 0 !important;
  max-width: 200px !important;
  transform: none !important;
}

/* anim-none: sem transição */
.sidebar.anim-none,
.sidebar.anim-none ~ .db-wrapper,
.sidebar.anim-none ~ .lg-wrap,
.sidebar.anim-none ~ #mainContent {
  transition: none !important;
}

/* ── Páginas com topbar próprio: oculta hambúrguer flutuante ─ */
@media (max-width: 768px) {
  body.db-has-topbar .sidebar-hamburguer {
    display: none !important;
  }

  /* Nav começa abaixo da topbar (64px) + folga */
  .sidebar-nav {
    padding-top: 76px;
  }
}

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar sai da tela por padrão */
  .sidebar {
    transform: translateX(-100%);
    width: var(--menu-width-expanded) !important;
    box-shadow: none;
    transition:
      transform   var(--menu-anim-speed) var(--menu-anim-easing),
      box-shadow  var(--menu-anim-speed) var(--menu-anim-easing);
  }

  /* Sidebar aberta como overlay */
  .sidebar.aberta {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
  }

  /* Sem margem no mobile — sidebar é overlay */
  .sidebar ~ .db-wrapper,
  .sidebar ~ .lg-wrap,
  .sidebar ~ #mainContent {
    margin-left: 0 !important;
  }

  /* Hambúrguer visível */
  .sidebar-hamburguer {
    display: flex;
  }

  /* Labels visíveis quando aberta no mobile */
  .sidebar.aberta .sidebar-label {
    opacity: 1 !important;
    max-width: 200px !important;
    pointer-events: auto !important;
  }

  .sidebar.aberta .sidebar-item {
    justify-content: flex-start;
    padding: 10px var(--menu-padding);
  }

  /* Botão toggle oculto no mobile */
  .sidebar-toggle {
    display: none;
  }
}