/* ============================================================
   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: var(--z-sidebar);
  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): CSS REMOVIDO na faxina de herança PSM (ago/2026) ────
   `.sidebar-brand`, `-inner`, `-logo`, `-icon` e `-text` ficaram sem alvo quando o
   logo saiu do cabeçalho do sidebar na Sub-fase 1.4b. `components/sidebar.py` não
   aplica nenhuma delas. O par no media query < 480px saiu na mesma leva. ────── */

/* ── 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: var(--z-sidebar-backdrop);   /* abaixo da sidebar */
  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` removido aqui junto com o bloco Brand (faxina ago/2026). */

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

/* ── Sub-fase 7.1 ────────────────────────────────────────────── */
/* Botão de ação no sidebar (seção Configurações → Unidades).
   Reaproveita .sidebar-nav-item para o visual; reset do <button> nativo. */
.sidebar-nav-button {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Espaço no topo do sidebar após a remoção do bloco de marca (7.1). */
.sidebar-section-label--first {
  padding-top: 14px;
}

/* ── Sub-fase 7.7 ────────────────────────────────────────────── */
/* Ações de arquivo da simulação (Salvar/Abrir) no topo do sidebar.
   Migradas do navbar; alivia o navbar e resolve o estouro do logo.
   Dois botões lado a lado, estilo ghost-branco sobre o fundo escuro. */
.sidebar-sim-actions {
  display: flex;
  gap: 8px;
  padding: 14px 14px 6px;
}

.sidebar-sim-btn {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: var(--transition, 0.2s ease) !important;
}

.sidebar-sim-btn:hover,
.sidebar-sim-btn:focus {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  color: #ffffff !important;
}

.sidebar-sim-icon {
  font-size: 14px;
}

/* ── Sub-fase 7.8 ────────────────────────────────────────────── */
/* Sub-itens de scroll sob "Resultados" (scrollspy + âncoras).
   Recuados sob o rótulo do item-pai; realce discreto com ponto verde. */
.sidebar-subnav {
  display: flex;            /* o display é alternado por clientside (none fora de /resultados) */
  flex-direction: column;
  padding: 2px 10px 6px;
}

.sidebar-subnav-item {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  /* recuo alinha o rótulo sob o texto do item-pai (icone 20px + gap 12px + 14px) */
  padding: 6px 14px 6px 46px;
  margin-bottom: 2px;
  border-radius: 6px;
  color: var(--text-sidebar);
  transition: var(--transition);
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

.sidebar-subnav-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
}

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

/* Seção visível no scroll (classe togglada por assets/scrollspy_resultados.js) */
.sidebar-subnav-item--active {
  background: rgba(255, 255, 255, .10);
  color: #ffffff;
}

.sidebar-subnav-item--active::before {
  content: "";
  position: absolute;
  left: 31px;               /* dentro da coluna do ícone do item-pai */
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-green, #94c11f);
}

/* ── Sub-fase 7.12 — alvos de toque no mobile ────────────────── */
/* Quando a sidebar vira overlay (≤991.98px) o ponteiro é o dedo: os itens de
   navegação, o botão de Projeto/Unidades e os sub-itens de scroll passam a
   garantir ≥44px de altura de toque (Regra de Ouro 3). No desktop os tamanhos
   compactos originais permanecem. */
@media (max-width: 991.98px) {
  .sidebar-nav-item-inner {
    min-height: 44px;
  }
  .sidebar-subnav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}