Refactor: Replace inline style objects with makeStyles classes

Moved all static layout properties (display, gap, margin, padding, colour)
from inline style props to makeStyles classes in:

- MapBansTable.tsx: Pagination row flexbox layout
- JailDetailPage.tsx: Link styling for textDecoration
- HistoryPage.tsx: Summary text styling
- IpDetailView.tsx: Loading container and text formatting

Kept inline styles only for genuinely dynamic values:
- WorldMap.tsx: Tooltip position (follows mouse)
- TopCountriesPieChart.tsx: Legend color (from recharts data)
- TopCountriesBarChart.tsx: Chart height (derives from data length)

This change improves performance by leveraging Griffel's atomic CSS cache
and ensures consistency with the established Fluent UI pattern.

Updated Docs/Web-Development.md with explicit rule: inline styles only
for runtime-dynamic values, all static properties go in makeStyles.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/pages/HistoryPage.tsx

@@ -116,6 +116,9 @@ const useStyles = makeStyles({
     fontFamily: "Consolas, 'Courier New', monospace",
     fontSize: "0.85rem",
   },
+  summaryText: {
+    color: tokens.colorNeutralForeground3,
+  },
 });
 
 // ---------------------------------------------------------------------------
@@ -292,7 +295,7 @@ export function HistoryPage(): React.JSX.Element {
       {/* Summary                                                           */}
       {/* ---------------------------------------------------------------- */}
       {!loading && !error && (
-        <Text size={300} style={{ color: tokens.colorNeutralForeground3 }}>
+        <Text size={300} className={styles.summaryText}>
           {String(total)} record{total !== 1 ? "s" : ""} found ·
           Page {String(currentPage)} of {String(totalPages)} ·
           Rows highlighted in yellow have {String(HIGH_BAN_THRESHOLD)}+ repeat bans