/* === Sidebar Admin – tema branco / OrangeRed === */
:root{
  --sidebar-bg: #ffffff;
  --sidebar-accent: #FF4500;     /* OrangeRed */
  --sidebar-accent-600: #E03E00; /* hover */
  --sidebar-accent-050: rgba(255,69,0,.06);
  --sidebar-border: #ECEFF3;
}

#sidebarAdmin{
  background: var(--sidebar-bg);
  color: var(--sidebar-accent);
  border-right: 1px solid var(--sidebar-border);
  transition: width .2s ease;
}

/* estado recolhido */
#sidebarAdmin.collapsed{ width: 5rem; } /* fechada ~ w-20 */

/* visibilidade de elementos quando colapsa */
#sidebarAdmin .js-label{ display: inline; }
#sidebarAdmin.collapsed .js-label{ display: none; }
#sidebarAdmin .js-logo-open{ display: block; }
#sidebarAdmin.collapsed .js-logo-open{ display: none; }
#sidebarAdmin .js-logo-closed{ display: none; }
#sidebarAdmin.collapsed .js-logo-closed{ display: block; }

/* topo / logo */
#sidebarAdmin .sidebar-logo{
  display:flex; align-items:center; gap:.75rem;
}
#sidebarAdmin .sidebar-logo .logo-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
}
#sidebarAdmin .sidebar-logo img{ max-height: 42px; object-fit: contain; }
#sidebarAdmin .sidebar-title{
  font-size: .9rem; font-weight: 600; letter-spacing:.02em;
  color: var(--sidebar-accent);
}

/* botão hambúrguer */
#sidebarAdmin .toggle-btn{
  margin-left:auto; width:2rem; height:2rem; display:inline-flex;
  align-items:center; justify-content:center;
  border:1px solid var(--sidebar-accent); border-radius:.5rem;
  color: var(--sidebar-accent); background: transparent;
}
#sidebarAdmin .toggle-btn:hover{
  background: var(--sidebar-accent-050);
}

/* navegação */
#sidebarAdmin .nav{
  display:flex; flex-direction:column; gap:.25rem;
}
#sidebarAdmin .js-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .75rem; border-radius:.5rem;
  color: var(--sidebar-accent); text-decoration:none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
#sidebarAdmin .js-link:hover{
  background: var(--sidebar-accent-050);
  color: var(--sidebar-accent-600);
}
#sidebarAdmin .js-icon{
  width: 1.25rem; height:1.25rem; flex:none;
  color: currentColor;
}

/* quando colapsa, centraliza apenas os ícones */
#sidebarAdmin.collapsed .js-link{ justify-content:center; }

/* acessibilidade de foco */
#sidebarAdmin .js-link:focus-visible,
#sidebarAdmin .toggle-btn:focus-visible,
#sidebarAdmin .logo-btn:focus-visible{
  outline: 2px solid var(--sidebar-accent);
  outline-offset: 2px;
}