diff --git a/frontend/src/index.css b/frontend/src/index.css
index 93ad029..1ead99b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -101,6 +101,12 @@ html, body, #root {
   font-weight: 500;
 }
 
+.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 8px; }
+.sidebar-user-name { color: #ffffff; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sidebar-user { color: rgba(255,255,255,0.5); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sidebar-logout { color: rgba(255,255,255,0.5); display: flex; align-items: center; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; }
+.sidebar-logout:hover { color: var(--gold); }
+
 /* ── Content area ───────────────────────────────────────────────── */
 .content {
   flex: 1;
@@ -314,6 +320,17 @@ input[type="text"]:focus {
   font-style: italic;
 }
 
+/* ── Recharts tooltip/legend stacking ──────────────────────────────
+   Tooltip and legend wrappers are both absolutely positioned by
+   Recharts; without this the legend (later in DOM order) sits above
+   the tooltip when they overlap. */
+.recharts-tooltip-wrapper {
+  z-index: 10;
+}
+.recharts-legend-wrapper {
+  z-index: 1;
+}
+
 /* ── Dept detail modal ──────────────────────────────────────────── */
 .modal-backdrop {
   position: fixed;
diff --git a/frontend/src/pages/Monthly.tsx b/frontend/src/pages/Monthly.tsx
index 3365996..ca9ee92 100644
--- a/frontend/src/pages/Monthly.tsx
+++ b/frontend/src/pages/Monthly.tsx
@@ -377,7 +377,7 @@ export default function Monthly() {
                 <XAxis dataKey="label" tick={{ fontSize: 12 }} />
                 <YAxis tickFormatter={v => `£${Math.round(Number(v) / 1000)}k`} tick={{ fontSize: 11 }} width={55} />
                 <Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} />
-                <Legend />
+                <Legend itemSorter={item => -deptSummary.findIndex(dep => dep.department_name === item.dataKey)} />
                 {deptSummary.map(dep => (
                   <Bar key={dep.department_id} dataKey={dep.department_name} stackId="a" fill={dep.color}>
                     {weeks.map((w, i) => (
diff --git a/frontend/src/pages/Rolling12Months.tsx b/frontend/src/pages/Rolling12Months.tsx
index db04f68..9603483 100644
--- a/frontend/src/pages/Rolling12Months.tsx
+++ b/frontend/src/pages/Rolling12Months.tsx
@@ -151,7 +151,7 @@ export default function Rolling12Months() {
                 <XAxis dataKey="label" tick={{ fontSize: 10 }} />
                 <YAxis tickFormatter={v => `£${Math.round(v / 1000)}k`} tick={{ fontSize: 11 }} width={55} />
                 <Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} />
-                <Legend />
+                <Legend itemSorter={item => -deptCols.findIndex(dep => dep.name === item.dataKey)} />
                 {deptCols.map(dep => (
                   <Bar key={dep.id} dataKey={dep.name} stackId="a" fill={dep.color} />
                 ))}
diff --git a/frontend/src/pages/Rolling12Weeks.tsx b/frontend/src/pages/Rolling12Weeks.tsx
index 351b6bb..2dc51e3 100644
--- a/frontend/src/pages/Rolling12Weeks.tsx
+++ b/frontend/src/pages/Rolling12Weeks.tsx
@@ -194,7 +194,7 @@ export default function Rolling12Weeks() {
                 <XAxis dataKey="label" tick={{ fontSize: 10 }} />
                 <YAxis tickFormatter={v => `£${Math.round(v / 1000)}k`} tick={{ fontSize: 11 }} width={55} />
                 <Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} />
-                <Legend />
+                <Legend itemSorter={item => -deptCols.findIndex(dep => dep.name === item.dataKey)} />
                 {deptCols.map(dep => (
                   <Bar key={dep.id} dataKey={dep.name} stackId="a" fill={dep.color} />
                 ))}