Netwerken UI refactor: shared netns badge verplaatst naar Flags kolom

- Containers kolom toont nu uitsluitend het numerieke aantal containers
- Shared network namespace wordt bepaald via expliciete isShared check
- 'shared' badge verplaatst van Containers kolom naar Flags kolom
- Eerdere uitlijnings-experimenten en CSS overrides opgeschoond
- Duidelijke scheiding aangebracht tussen metriek (aantal) en status (shared netns)

Resultaat: semantisch correctere tabel, stabielere layout en betere leesbaarheid.

webui/html/assets/css/app.css

@@ -144,14 +144,17 @@ th,td{
 }
 th{color: var(--muted); font-weight:600}
 tr:hover td{background: rgba(96,165,250,.06)}
-.badge{
-    display:inline-flex;
-    align-items:center;
-    border:1px solid rgba(36,52,95,.9);
-    padding:4px 8px;
-    border-radius:999px;
-    font-size:12px;
+.badge {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    line-height: 1;
+    padding: 4px 8px;
+    border: 1px solid rgba(36, 52, 95, .9);
+    border-radius: 999px;
+    font-size: 12px;
     color: var(--muted);
+    white-space: nowrap; /* Tip: dit voorkomt dat je badge tekst afbreekt */
 }
 pre.code{
   padding:10px;
@@ -189,6 +192,38 @@ pre.code{
     .split{grid-template-columns: 1fr 1fr}
 }
 
+/* Stats / summary cards */
+.statGrid{
+    display:grid;
+    grid-template-columns: 1fr;
+    gap:10px;
+}
+@media (min-width: 980px){
+    .statGrid{grid-template-columns: repeat(4, 1fr)}
+}
+.statCard{
+    background: rgba(8,12,25,.45);
+    border:1px solid rgba(36,52,95,.9);
+    border-radius: 14px;
+    padding:10px 12px;
+}
+.statValue{
+    font-weight:800;
+    font-size: 20px;
+    line-height: 1.1;
+    letter-spacing: .2px;
+}
+.statLabel{
+    color: var(--muted);
+    font-size: 12px;
+    margin-top: 4px;
+}
+.statHint{
+    color: var(--muted);
+    font-size: 12px;
+    margin-top: 6px;
+}
+
 /* Modal */
 .modalBack{
     position: fixed; inset:0;
@@ -278,6 +313,34 @@ pre{
 .menuItem.warn{ border-color: rgba(251,191,36,.35); }
 .menuItem.bad{ border-color: rgba(251,113,133,.35); }
 
+/* css voor herziene Netwerken pagina */
+/* Toolbar controls */
+.toolbar .input,
+.toolbar .select{
+    background: rgba(8,12,25,.45);
+    border:1px solid rgba(36,52,95,.9);
+    color: var(--fg);
+    border-radius: 12px;
+    padding:8px 10px;
+    outline: none;
+}
+.toolbar .input::placeholder{ color: rgba(200,210,255,.45); }
+
+.chip{
+    display:inline-flex;
+    align-items:center;
+    gap:8px;
+    padding:7px 10px;
+    border-radius: 999px;
+    border:1px solid rgba(36,52,95,.9);
+    background: rgba(8,12,25,.35);
+    color: var(--fg);
+    cursor:pointer;
+    user-select:none;
+    font-size: 13px;
+}
+.chip input{ accent-color: var(--accent); }
+
 /* =========================
     Layout: Sidebar + Main
     ========================= */
@@ -403,12 +466,6 @@ pre{
     text-align: left;
 }
 
-.badge {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-}
-
 .badge-green {
     background: #2ecc71;
     color: white;