feat(ui): theme-aware logo, dashboard bar graph, server-side client sorting (v0.14.1-beta)

UI/UX refinements on top of v0.14.0-beta, all validated on the test server:

- Logo: new theme-aware compass iconmark (light/dark SVGs swapped via the
  dark class), sized to 45px; favicon updated to match. Wordmark casing
  corrected to "MikroTik Manager" (font size unchanged).
- Navigation icons enlarged 15 -> 17px.
- Dashboard: "Connected clients" line chart converted to a bar chart with a
  category axis + light downsampling so bars stay readably thick across ranges.
- Clients: sorting is now server-side across the whole dataset (was sorting
  only the current page, so Type/others appeared to do nothing on a uniform
  page); table uses a fixed column layout + keepPreviousData so columns no
  longer jump or blank out when sorting/paging. Backend clients route gains
  whitelisted sort/dir params (safe numeric IP sort, deterministic tiebreaker).
- Connections tab: surfaces the live /ip/firewall/connection/tracking state
  (on/auto/off pill) and clearer empty-state copy explaining auto-mode.

Lint/typecheck/build/jest green in both workspaces; npm audit --audit-level=high
clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/public/favicon.svg

@@ -1,7 +1,159 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
-  <rect width="32" height="32" rx="8" fill="#2563eb"/>
-  <path d="M6 16h4M22 16h4M10 16a6 6 0 0 1 12 0" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
-  <circle cx="16" cy="16" r="3" fill="white"/>
-  <circle cx="8" cy="16" r="2" fill="#93c5fd"/>
-  <circle cx="24" cy="16" r="2" fill="#93c5fd"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   viewBox="0 0 64 64"
+   fill="none"
+   role="img"
+   aria-labelledby="title desc"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="mikrotik-manager-config-compass-favicon.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="10.429825"
+     inkscape:cx="19.415474"
+     inkscape:cy="41.419679"
+     inkscape:window-width="1240"
+     inkscape:window-height="809"
+     inkscape:window-x="546"
+     inkscape:window-y="1729"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg10" />
+  <title
+     id="title">MikroTik Manager Favicon</title>
+  <desc
+     id="desc">A simplified compass favicon with central M mark and four connected network nodes.</desc>
+  <defs
+     id="defs3">
+    <linearGradient
+       id="favRing"
+       x1="12"
+       y1="12"
+       x2="52"
+       y2="52"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#7C6DFF"
+         id="stop1" />
+      <stop
+         offset="0.48"
+         stop-color="#2EA8FF"
+         id="stop2" />
+      <stop
+         offset="1"
+         stop-color="#23E0C1"
+         id="stop3" />
+    </linearGradient>
+  </defs>
+  <rect
+     x="2"
+     y="2"
+     width="60"
+     height="60"
+     rx="14"
+     fill="#07111F"
+     id="rect3" />
+  <circle
+     cx="32"
+     cy="32"
+     r="19"
+     stroke="url(#favRing)"
+     stroke-width="4.5"
+     stroke-linecap="round"
+     id="circle3" />
+  <circle
+     cx="32"
+     cy="32"
+     r="9"
+     stroke="#F4F7FB"
+     stroke-width="3.5"
+     id="circle4" />
+  <line
+     x1="32"
+     y1="11"
+     x2="32"
+     y2="22"
+     stroke="#F4F7FB"
+     stroke-width="3.5"
+     stroke-linecap="round"
+     id="line4" />
+  <line
+     x1="42"
+     y1="32"
+     x2="53"
+     y2="32"
+     stroke="#F4F7FB"
+     stroke-width="3.5"
+     stroke-linecap="round"
+     id="line5" />
+  <line
+     x1="32"
+     y1="42"
+     x2="32"
+     y2="53"
+     stroke="#F4F7FB"
+     stroke-width="3.5"
+     stroke-linecap="round"
+     id="line6" />
+  <line
+     x1="11"
+     y1="32"
+     x2="22"
+     y2="32"
+     stroke="#F4F7FB"
+     stroke-width="3.5"
+     stroke-linecap="round"
+     id="line7" />
+  <circle
+     cx="32"
+     cy="10"
+     r="4.2"
+     fill="#07111F"
+     stroke="#23E0C1"
+     stroke-width="3"
+     id="circle7" />
+  <circle
+     cx="54"
+     cy="32"
+     r="4.2"
+     fill="#07111F"
+     stroke="#2EA8FF"
+     stroke-width="3"
+     id="circle8" />
+  <circle
+     cx="32"
+     cy="54"
+     r="4.2"
+     fill="#07111F"
+     stroke="#79E044"
+     stroke-width="3"
+     id="circle9" />
+  <circle
+     cx="10"
+     cy="32"
+     r="4.2"
+     fill="#07111F"
+     stroke="#7C6DFF"
+     stroke-width="3"
+     id="circle10" />
+  <path
+     d="M 28.513435,36.116485 V 27.924724 L 32,33.044574 l 3.486564,-5.11985 v 8.191761"
+     stroke="#f4f7fb"
+     stroke-width="2.98101"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path10" />
 </svg>