/* ══════════════════════════════════════════════════════════
   SIDEBAR — Navigation sidebar
   ══════════════════════════════════════════════════════════ */
.sidebar-header{padding:var(--space-5) var(--space-5);border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:var(--space-3)}
.sidebar-logo{width:40px;height:40px;border-radius:var(--radius-lg);background:var(--gradient-blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-logo svg{width:22px;height:22px;color:#fff}
.sidebar-brand{display:flex;flex-direction:column;overflow:hidden}
.sidebar-brand-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--text-primary);white-space:nowrap}
.sidebar-brand-sub{font-size:var(--font-size-2xs);color:var(--text-muted);white-space:nowrap}

.sidebar-nav{flex:1;padding:var(--space-3);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-1)}
.sidebar-section{margin-top:var(--space-4);margin-bottom:var(--space-2);padding:0 var(--space-3)}
.sidebar-section-title{font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em}

.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:0.55rem 0.75rem;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;white-space:nowrap;text-decoration:none}
.nav-item:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-default);transform:translateX(4px)}
.nav-item.active{background:rgba(59,130,246,0.10);color:var(--accent-blue);border-color:rgba(59,130,246,0.15)}
.nav-item.active .nav-icon{color:var(--accent-blue)}
.nav-icon{width:20px;height:20px;flex-shrink:0;color:var(--text-muted);transition:color var(--transition-fast)}
.nav-item:hover .nav-icon{color:var(--text-secondary)}
.nav-badge{margin-left:auto;padding:0.1rem 0.45rem;font-size:10px;font-weight:var(--font-weight-bold);background:var(--accent-blue);color:#fff;border-radius:var(--radius-full);min-width:20px;text-align:center}

.sidebar-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-default)}
.sidebar-user{display:flex;align-items:center;gap:var(--space-3);padding:0.5rem;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}
.sidebar-user:hover{background:var(--bg-surface)}
.sidebar-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--gradient-purple);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:#fff;flex-shrink:0}
.sidebar-user-info{overflow:hidden;flex:1}
.sidebar-user-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:var(--font-size-2xs);color:var(--text-muted);text-transform:capitalize}
.sidebar-logout{width:32px;height:32px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}
.sidebar-logout:hover{background:rgba(239,68,68,0.1);color:var(--accent-red)}

.toggle-section { transition: all var(--transition-base); }
.toggle-section:hover { transform: translateX(4px); }

/* ── Dark Mode: Navy + Gold Sidebar ─────────────────────── */
:root.dark .nav-item.active {
  background: rgba(255, 215, 0, 0.08);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.15);
}
:root.dark .nav-item.active .nav-icon { color: #ffd700; }
:root.dark .sidebar-logo { background: linear-gradient(135deg, #b8860b, #ffd700); }
:root.dark .sidebar-logo svg { color: #020c1b; }
:root.dark .sidebar-avatar { background: linear-gradient(135deg, #b8860b, #ffd700); color: #020c1b; }

/* Section toggle buttons (collapsible modules) */
:root.dark .toggle-section {
  background: rgba(255, 215, 0, 0.06) !important;
  border-color: rgba(255, 215, 0, 0.12) !important;
  color: #ccd6f6 !important;
}
:root.dark .toggle-section:hover {
  background: rgba(255, 215, 0, 0.12) !important;
  border-color: rgba(255, 215, 0, 0.25) !important;
  color: #ffd700 !important;
}
:root.dark .toggle-section .material-symbols-outlined {
  color: #ffd700 !important;
}

/* Logout button */
:root.dark #btn-logout {
  background: linear-gradient(135deg, #b8860b, #ffd700) !important;
  color: #020c1b !important;
}
:root.dark #btn-logout:hover {
  background: linear-gradient(135deg, #ffd700, #ffeb82) !important;
}

/* ── Light Mode: Navy + Gold Sidebar ────────────────────── */
:root:not(.dark) .nav-item.active {
  background: rgba(194, 148, 42, 0.08);
  color: #c2942a;
  border-color: rgba(194, 148, 42, 0.18);
}
:root:not(.dark) .nav-item.active .nav-icon { color: #c2942a; }
:root:not(.dark) .nav-item:hover { border-color: rgba(194, 148, 42, 0.15); }
:root:not(.dark) .nav-item:hover .nav-icon { color: #0f3b73; }

/* Sidebar logo: gold gradient */
:root:not(.dark) .sidebar-logo { background: linear-gradient(135deg, #0f3b73, #1e4c8c); }
:root:not(.dark) .sidebar-avatar { background: linear-gradient(135deg, #c2942a, #d4a83a); color: #fff; }

/* Section toggle buttons (collapsible modules) */
:root:not(.dark) .toggle-section {
  background: rgba(15, 59, 115, 0.04) !important;
  border-color: rgba(15, 59, 115, 0.08) !important;
  color: #43474e !important;
}
:root:not(.dark) .toggle-section:hover {
  background: rgba(194, 148, 42, 0.08) !important;
  border-color: rgba(194, 148, 42, 0.2) !important;
  color: #c2942a !important;
}
:root:not(.dark) .toggle-section .material-symbols-outlined {
  color: #c2942a !important;
}

/* Logout button: gold gradient */
:root:not(.dark) #btn-logout {
  background: linear-gradient(135deg, #c2942a, #d4a83a) !important;
  color: #fff !important;
}
:root:not(.dark) #btn-logout:hover {
  background: linear-gradient(135deg, #d4a83a, #e0b84a) !important;
  box-shadow: 0 4px 15px rgba(194, 148, 42, 0.35) !important;
}