/* ── Sidebar ────────────────────────────────────────────────────────────── */
#mainSidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  z-index: 500; overflow-y: auto;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
#mainSidebar::-webkit-scrollbar { width: 3px; }
#mainSidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

/* Brand */
.sb-brand { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 11px; text-decoration: none; }
.sb-brand-icon { width: 40px; height: 40px; background: var(--sidebar-active); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; flex-shrink: 0; }
.sb-brand-name { font-weight: 900; font-size: 1rem; color: #fff; line-height: 1.15; }
.sb-brand-tagline { font-size: 0.66rem; color: rgba(255,255,255,0.4); margin-top: 1px; }

/* Section labels */
.sb-section { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.3); padding: 16px 18px 5px; }

/* Nav links */
.sb-nav { list-style: none; padding: 6px 10px; }
.sb-nav li { margin-bottom: 1px; }
.sb-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 9px;
  color: var(--sidebar-txt); text-decoration: none;
  font-size: 0.87rem; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.sb-nav a i { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; opacity: 0.78; transition: opacity 0.15s; }
.sb-nav a:hover { background: var(--sidebar-hover); color: #fff; }
.sb-nav a:hover i { opacity: 1; }
.sb-nav a.active { background: var(--sidebar-active); color: #fff; }
.sb-nav a.active i { opacity: 1; }
.sb-badge { margin-left: auto; background: rgba(255,255,255,0.15); color: #fff; font-size: 0.67rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; }

/* Footer */
.sb-footer { margin-top: auto; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.76rem; color: rgba(255,255,255,0.32); }
.sb-footer strong { display: block; color: rgba(255,255,255,0.55); font-size: 0.8rem; margin-bottom: 2px; }

/* Overlay (mobile) */
#sbOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 490; }
#sbOverlay.show { display: block; }

@media (max-width: 768px) {
  #mainSidebar { transform: translateX(-100%); }
  #mainSidebar.show { transform: translateX(0); }
}