/* css/sidebar.css */

/* --- 1. ESTRUTURA GERAL --- */
.content-wrapper {
  transition: margin-left 0.3s ease-in-out;
  padding: 1.5rem;
  width: 100%;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1029;
}

/* --- 2. BARRA LATERAL (SIDEBAR) --- */
aside.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 250px;
  background-color: var(--cor-primaria);
  z-index: 1030;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%); /* MODIFICAÇÃO: Começa ESCONDIDA por padrão */
  transition: transform 0.3s ease-in-out;
}

.sidebar-header {
  padding: 1.2rem 1.5rem;
  font-size: 1.5rem;
  font-family: var(--fonte-titulos);
  color: var(--cor-texto-claro);
  border-bottom: 1px solid var(--cor-primaria-hover);
}

.sidebar-nav {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.sidebar-footer {
  padding-bottom: 1rem;
  flex-shrink: 0;
}

/* --- 3. ITENS DE NAVEGAÇÃO --- */
.sidebar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
  padding: 0.75rem 1.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 1rem;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  background-color: var(--cor-primaria-hover);
  color: var(--cor-texto-claro);
}

.nav-heading {
  padding: 0.75rem 1.5rem 0.25rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-divider-compact {
  margin: 0.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-user-info .nav-link {
  font-weight: bold;
  color: var(--cor-texto-claro);
  cursor: default;
}

/* --- 4. BOTÃO DE CONTROLO (TOGGLE) --- */
#sidebar-toggle {
  position: fixed;
  top: 15px;
  left: 15px; /* MODIFICAÇÃO: Começa na posição "fechada" */
  z-index: 1031;
  background-color: var(--cor-primaria);
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease-in-out;
}

#sidebar-toggle .arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(
    -45deg
  ); /* MODIFICAÇÃO: Começa apontando para a direita (>) */
  transition: transform 0.3s ease-in-out;
}

/* --- 5. LÓGICA DE ABRIR/FECHAR (classe 'sidebar-open' a ser adicionada pelo JavaScript) --- */
/* Quando a sidebar está ABERTA */
body.sidebar-open .sidebar {
  transform: translateX(0);
}
body.sidebar-open .content-wrapper {
  margin-left: 250px;
}
body.sidebar-open #sidebar-toggle {
  left: 265px;
}
body.sidebar-open #sidebar-toggle .arrow {
  transform: rotate(135deg); /* Gira para a esquerda (<) */
}

/* --- 6. REGRAS RESPONSIVAS --- */
@media (max-width: 991.98px) {
  /* Em telas pequenas, mostra a camada escura quando o menu está aberto */
  body.sidebar-open .sidebar-overlay {
    display: block;
  }
  /* Em telas pequenas, o conteúdo nunca é empurrado */
  .content-wrapper {
    margin-left: 0 !important;
  }
  body.sidebar-open #sidebar-toggle {
    left: 265px;
  }
}
/* Estilo para o novo botão de login flutuante */
#login-sidebar-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1031;
  
  /* Aparência de Pílula */
  background-color: var(--cor-primaria);
  color: white;
  border: none;
  border-radius: 50px; /* Borda bem arredondada */
  padding: 0.6rem 1.2rem; /* Espaçamento interno (vertical, horizontal) */
  font-family: var(--fonte-titulos);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

#login-sidebar-toggle:hover {
  background-color: var(--cor-primaria-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Quando a sidebar está aberta, o botão de login também se move */
body.sidebar-open #login-sidebar-toggle {
    left: 265px;
}
/* ==================================================================== */
/* SOLUÇÃO DEFINITIVA: Força o botão de voltar a ser redondo      */
/* Adicione este bloco ao FINAL do arquivo css/sidebar.css        */
/* ==================================================================== */
#back-button-floating.btn {
    width: 45px !important;       /* Largura fixa */
    height: 45px !important;      /* Altura fixa e igual à largura */
    padding: 0 !important;        /* REMOVE o padding que causa o formato oval */
    border-radius: 50% !important;/* Garante o formato de círculo */

    /* Centraliza o ícone perfeitamente */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}