/* ===== Sidebar & Navigation ===== */
#sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--purple-dark); display: flex; flex-direction: column; height: 100vh; z-index: 200; box-shadow: 4px 0 20px rgba(0,0,0,.15); transition: transform .25s ease }
.sidebar-brand { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.1) }
.brand-text { font-family: "Syne", sans-serif; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1 }
.brand-text span { color: var(--orange) }
.brand-tag { font-size: 9px; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,.3); text-transform: uppercase; margin-top: 4px }
nav { flex: 1; padding: 6px 0; overflow-y: auto }
.nav-section { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: rgba(255,255,255,.3); text-transform: uppercase; padding: 10px 18px 4px }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: rgba(255,255,255,.6); cursor: pointer; transition: all .15s; font-size: 13px; border-left: 3px solid transparent; white-space: nowrap }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff }
.nav-item.active { background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--orange); font-weight: 500 }
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .7 }
.nav-item.active svg { opacity: 1 }
.sidebar-user { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 9px }
.user-av { width: 28px; height: 28px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0 }
.user-name { font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.user-role { font-size: 10px; color: rgba(255,255,255,.4) }
.btn-logout { background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px; transition: color .15s; margin-left: auto; flex-shrink: 0 }
.btn-logout:hover { color: #fff }

/* Mobile */
#hamburger { display: none; position: fixed; top: 11px; left: 11px; z-index: 300; background: var(--purple-dark); border: none; border-radius: 8px; padding: 8px; cursor: pointer; flex-direction: column; gap: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.3) }
#hamburger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 1px }
#mobileOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150 }
#mobileOverlay.open { display: block }