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/map/MapBansTable.tsx

@@ -10,6 +10,7 @@ import {
   TableRow,
   Text,
   Tooltip,
+  makeStyles,
   tokens,
 } from "@fluentui/react-components";
 import { ChevronLeftRegular, ChevronRightRegular } from "@fluentui/react-icons";
@@ -27,6 +28,33 @@ interface MapBansTableProps {
   onPageSizeChange: (pageSize: number) => void;
 }
 
+const useStyles = makeStyles({
+  paginationRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: tokens.spacingHorizontalS,
+    marginTop: tokens.spacingVerticalS,
+  },
+  paginationLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalS,
+  },
+  pageSize: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalS,
+  },
+  paginationButtons: {
+    display: "flex",
+    gap: tokens.spacingHorizontalXS,
+  },
+  dimmedText: {
+    color: tokens.colorNeutralForeground3,
+  },
+});
+
 export function MapBansTable({
   pageBans,
   visibleCount,
@@ -38,6 +66,7 @@ export function MapBansTable({
   onPageChange,
   onPageSizeChange,
 }: MapBansTableProps): React.JSX.Element {
+  const styles = useStyles();
   return (
     <>
       <Table size="small" aria-label="Bans list">
@@ -56,7 +85,7 @@ export function MapBansTable({
             <TableRow>
               <TableCell colSpan={6}>
                 <TableCellLayout>
-                  <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+                  <Text size={200} className={styles.dimmedText}>
                     No bans found.
                   </Text>
                 </TableCellLayout>
@@ -83,7 +112,7 @@ export function MapBansTable({
                         content="Country could not be resolved — will retry automatically."
                         relationship="description"
                       >
-                        <Text style={{ color: tokens.colorNeutralForeground3 }}>—</Text>
+                        <Text className={styles.dimmedText}>—</Text>
                       </Tooltip>
                     )}
                   </TableCellLayout>
@@ -108,14 +137,14 @@ export function MapBansTable({
       </Table>
 
       {visibleCount > 0 && (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacingHorizontalS, marginTop: tokens.spacingVerticalS }}>
-          <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
-            <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+        <div className={styles.paginationRow}>
+          <div className={styles.paginationLeft}>
+            <Text size={200} className={styles.dimmedText}>
               Showing {pageBans.length} of {visibleCount} filtered ban{visibleCount !== 1 ? "s" : ""}
               {" · "}Page {page} of {totalPages}
             </Text>
-            <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
-              <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+            <div className={styles.pageSize}>
+              <Text size={200} className={styles.dimmedText}>
                 Page size
               </Text>
               <select
@@ -134,7 +163,7 @@ export function MapBansTable({
             </div>
           </div>
 
-          <div style={{ display: "flex", gap: tokens.spacingHorizontalXS }}>
+          <div className={styles.paginationButtons}>
             <Button
               icon={<ChevronLeftRegular />}
               appearance="subtle"