Fix chart legend order and tooltip stacking on wage graphs

Legend was sorted to mirror bar stack order, making it hard to tell
segments apart at a glance; reverse it. Tooltip also rendered behind
the legend div when they overlapped — raise its z-index above it.

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) => (