/* ============================================================
   Fan Selector - Sidebar Styles
   Correções aplicadas:
     - Breakpoint unificado em 991.98px (alinhado com navbar d-lg-none)
     - Classe de abertura mobile: .sidebar.sidebar-open (não .sidebar-wrapper.open)
     - Overlay escuro funcional com transição suave
     - Sidebar visível por padrão em ≥992px sem precisar de JS
   ============================================================ */

/* ── Sidebar base ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  height: calc(100vh - var(--navbar-height));
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  background-color: var(--bg-sidebar);
  border-right: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  z-index: 1045;
  box-shadow: 2px 0 12px rgba(0, 0, 0, .15);
}

/* Scrollbar customizada */
.sidebar::-webkit-scrollbar        { width: 3px; }
.sidebar::-webkit-scrollbar-track  { background: transparent; }
.sidebar::-webkit-scrollbar-thumb  {
  background: rgba(255, 255, 255, .15);
  border-radius: 3px;
}

/* ── Brand (logo + nome) ─────────────────────────────────────── */
.sidebar-brand { padding: 18px 16px 14px; flex-shrink: 0; }

.sidebar-brand-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-decoration: none;
}

.sidebar-brand-logo {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.sidebar-brand-icon {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.sidebar-brand-text {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: 0.01em;
  white-space: normal;
  line-height: 1.35;
  max-width: 180px;
}

/* ── Divisores ───────────────────────────────────────────────── */
.sidebar-divider {
  border-color: rgba(255, 255, 255, .08) !important;
  margin: 6px 16px !important;
}

/* ── Label de seção ──────────────────────────────────────────── */
.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 8px 20px 4px;
  text-transform: uppercase;
}

/* ── Navegação ───────────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  padding: 4px 10px;
}

.sidebar-nav-item {
  border-radius: 8px !important;
  margin-bottom: 3px !important;
  padding: 0 !important;
  color: var(--text-sidebar) !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}

.sidebar-nav-item:hover {
  background-color: rgba(255, 255, 255, .07) !important;
  color: #ffffff !important;
}

.sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #94c11f;
}

.sidebar-nav-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.sidebar-icon {
  font-size: 17px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  transition: var(--transition);
}

.sidebar-nav-item.active .sidebar-icon {
  color: #94c11f;
}

.sidebar-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Rodapé ──────────────────────────────────────────────────── */
.sidebar-footer {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.sidebar-version {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Toggle (botão hambúrguer na navbar — fundo escuro) ──────── */
.sidebar-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.50);
}

/* ── Overlay escuro (mobile) ─────────────────────────────────── */
/*
  Cobre o conteúdo atrás da sidebar quando aberta no mobile.
  Começa invisível e com pointer-events desativados.
  A classe "show" (adicionada pelo callback) o torna visível.
*/
.sidebar-overlay {
  display: none;          /* removido do fluxo por padrão */
  position: fixed;
  inset: 0;               /* top/right/bottom/left: 0 */
  background: rgba(0, 0, 0, .45);
  z-index: 1044;          /* abaixo da sidebar (1045) */
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* ── RESPONSIVIDADE ──────────────────────────────────────────── */

/*
  MOBILE / TABLET  (< 992px)
  ----------------------------
  A sidebar fica fora da tela por padrão (translateX(-100%)).
  A classe "sidebar-open" a desliza para dentro.

  CORRIGIDO: o breakpoint era 768px, desalinhado com d-md-none da navbar.
  Agora é 991.98px, alinhado com d-lg-none — o botão toggle aparece
  exatamente quando a sidebar some, sem gap.
*/
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  /* CORRIGIDO: classe correta é .sidebar.sidebar-open
     O callback em navbar.py alterna esta classe diretamente no #sidebar.
     Antes estava .sidebar-wrapper.open, que nunca seria aplicado. */
  .sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .30);
  }

  /* Sidebar-wrapper não precisa de largura no mobile */
  .sidebar-wrapper {
    width: 0 !important;
    min-width: 0 !important;
  }

  /* Page content ocupa toda a largura */
  .page-content {
    margin-left: 0 !important;
    padding: 16px 12px !important;
  }
}

/*
  DESKTOP (≥ 992px)
  ------------------
  Sidebar sempre visível, fixa à esquerda.
  Overlay sempre oculto.
  O botão toggle está escondido via d-lg-none na navbar.
*/
@media (min-width: 992px) {
  .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-overlay {
    display: none !important;
  }

  /* Garante que o sidebar-wrapper mantenha a largura correta */
  .sidebar-wrapper {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    flex-shrink: 0;
  }
}

/* ── Extra-small (< 480px) — ajustes adicionais ──────────────── */
@media (max-width: 479.98px) {
  .sidebar {
    width: min(var(--sidebar-width), 85vw);
  }

  .sidebar-brand-text {
    font-size: 13px;
  }

  .sidebar-label {
    font-size: 12px;
  }
}