From a1609c8ea77a8c9c3cb23270757d45f6435109e8 Mon Sep 17 00:00:00 2001
From: kodi <kodi@lab.local>
Date: Wed, 4 Mar 2026 08:13:45 +0100
Subject: [PATCH] Opschonen app.css: Stap 1 & 2 voltooid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stap 1: Verwijderen ongebruikte tokens en selectors
- Ongebruikte tokens: --badge-green-*, --badge-yellow-*
- Ongebruikte selectors: .pill, .data-table, .badge-green/yellow
- Resultaat: -38 regels, lagere onderhoudslast.

Stap 2: Consolidatie en opschonen cascade
- .mapLegend volledig geconsolideerd naar één definitieve set.
- Overlappende file-row fallback verwijderd.
- Resultaat: -68 regels, cascade opgeschoond.
---
 webui/html/assets/css/app.css | 150 +++++-----------------------------
 1 file changed, 22 insertions(+), 128 deletions(-)

diff --git a/webui/html/assets/css/app.css b/webui/html/assets/css/app.css
index 5daae73..718d0f8 100644
--- a/webui/html/assets/css/app.css
+++ b/webui/html/assets/css/app.css
@@ -50,10 +50,6 @@
     --legend-row-bg: rgba(255,255,255,0.03);
     --legend-row-border-hover: rgba(255,255,255,0.25);
     --legend-row-bg-hover: rgba(255,255,255,0.06);
-    --badge-green-bg: #2ecc71;
-    --badge-green-text: #ffffff;
-    --badge-yellow-bg: #f1c40f;
-    --badge-yellow-text: #111111;
     --table-zebra: rgba(96,165,250,.03);
     --sticky-head-bg: rgba(17,26,46,.96);
     --state-info-bg: rgba(96,165,250,.08);
@@ -121,10 +117,6 @@
     --legend-row-bg: rgba(226,236,252,.9);
     --legend-row-border-hover: rgba(100,116,139,.46);
     --legend-row-bg-hover: rgba(210,224,248,.9);
-    --badge-green-bg: #166534;
-    --badge-green-text: #f8fafc;
-    --badge-yellow-bg: #b45309;
-    --badge-yellow-text: #fffbeb;
     --table-zebra: rgba(15,23,42,.03);
     --sticky-head-bg: rgba(255,255,255,.97);
     --state-info-bg: rgba(37,99,235,.08);
@@ -275,15 +267,6 @@ header{
 .btn.icon span {
     pointer-events: none;
 }
-.pill{
-    display:inline-flex; align-items:center; gap:8px;
-    padding:6px 10px;
-    border-radius:999px;
-    border:1px solid var(--card-border);
-    color: var(--muted);
-    font-size:12px;
-}
-.pill .b{color: var(--text); font-weight:600}
 table{
     width:100%;
     border-collapse: collapse;
@@ -670,14 +653,6 @@ pre{
     border-left: 1px dashed var(--soft-line);
 }
 
-/* File rows inside folders (werkt ook met inline styles die je nu al hebt) */
-.file-folder-files > div{
-    border-radius: 10px;
-}
-
-.file-folder-files > div:hover{
-    background: var(--hover-bg);
-}
 .file-entry{
     display:flex;
     align-items:center;
@@ -741,27 +716,6 @@ pre{
     from{opacity:.0; transform: translateY(3px)}
     to{opacity:1; transform: translateY(0)}
 }
-.data-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-    padding: 8px;
-    border-bottom: 1px solid var(--soft-line);
-    text-align: left;
-}
-
-.badge-green {
-    background: var(--badge-green-bg);
-    color: var(--badge-green-text);
-}
-
-.badge-yellow {
-    background: var(--badge-yellow-bg);
-    color: var(--badge-yellow-text);
-}
 .sortable {
   cursor: pointer;
   user-select: none;
@@ -834,19 +788,31 @@ pre{
   border: 1px solid var(--map-border);
   background: var(--map-bg);
   border-radius: 14px;
-  max-width: 360px;
+  max-width: none;
+  display:flex;
+  align-items:center;
+  gap:12px;
+  flex-wrap:wrap;
 }
 
 .mapLegend .legendTitle{
-  font-weight: 700;
-  margin-bottom: 8px;
+  margin: 0;
+  margin-right: 6px;
+  font-weight: 800;
 }
 
 .mapLegend .legendRow{
-  display:flex;
+  display:inline-flex;
   align-items:center;
-  gap: 10px;
-  margin: 6px 0;
+  gap:8px;
+  margin: 0;
+  padding:6px 10px;
+  border:1px solid var(--legend-row-border);
+  border-radius:20px;
+  background:var(--legend-row-bg);
+  font-size:13px;
+  white-space:nowrap;
+  transition:all .15s ease;
 }
 
 .mapLegend .legendSwatch{
@@ -876,6 +842,10 @@ pre{
 
 .mapLegend .legendSwatch.net{ background: var(--map-node-net); }
 .mapLegend .legendSwatch.ctr{ background: var(--map-node-ctr); }
+.mapLegend .legendRow:hover{
+  border-color:var(--legend-row-border-hover);
+  background:var(--legend-row-bg-hover);
+}
 
 /* ===== Netwerken kaart (D3) ===== */
 .mapHost svg { width: 100%; height: 100%; display:block; }
@@ -957,82 +927,6 @@ pre{
   .mapSplit{ grid-template-columns: 1fr; }
 }
 
-/* ===== Legenda horizontaal ===== */
-.mapLegend{
-  display:flex;
-  align-items:center;
-  gap:18px;
-  flex-wrap:wrap;
-}
-
-.mapLegend .legendTitle{
-  font-weight:600;
-  margin-right:10px;
-}
-
-.mapLegend .legendRow{
-  display:flex;
-  align-items:center;
-  gap:6px;
-}
-
-/* ===== Legenda horizontaal + compact (override) ===== */
-.mapLegend{
-  display:flex !important;
-  flex-direction: row;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-  max-width: none;         /* was 360px */
-  padding: 10px 12px;
-}
-
-.mapLegend .legendTitle{
-  margin: 0;
-  font-weight: 800;
-}
-
-.mapLegend .legendRow{
-  margin: 0;               /* haalt verticale spacing weg */
-  display:flex;
-  align-items:center;
-  gap: 8px;
-  white-space: nowrap;     /* voorkomt rare afbreking */
-}
-
-/* ===== Legenda badge stijl ===== */
-
-.mapLegend{
-  display:flex;
-  align-items:center;
-  gap:12px;
-  flex-wrap:wrap;
-}
-
-.mapLegend .legendTitle{
-  font-weight:800;
-  margin-right:6px;
-}
-
-.mapLegend .legendRow{
-  display:inline-flex;
-  align-items:center;
-  gap:8px;
-  padding:6px 10px;
-  border:1px solid var(--legend-row-border);
-  border-radius:20px;
-  background:var(--legend-row-bg);
-  font-size:13px;
-  white-space:nowrap;
-  transition:all .15s ease;
-}
-
-.mapLegend .legendRow:hover{
-  border-color:var(--legend-row-border-hover);
-  background:var(--legend-row-bg-hover);
-}
-
-
 /* Files tree: actions only on hover */
 .file-folder-row .file-folder-actions{
     opacity: 0;