feat: UI redesign (CSS system, DNS widget, Traefik dashboard widget)

- Replace base.html style block with full CSS design system using custom properties (dark theme, cards, tables, badges, dots, widgets)
- Add DNS blueprint (fablednetmon/dns/) with /dns/ and /dns/rows routes + templates
- Add Traefik /widget route and widget.html fragment for dashboard
- Update dashboard: DNS + Traefik widgets, traefik_enabled config detection
- Update all templates to use new CSS classes (page-title, section-title, card-flush, table, badge-*, dot-*, btn-*)
- Register dns_bp in app.py

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fablednetmon/templates/dashboard/index.html

@@ -1,56 +1,83 @@
 {% extends "base.html" %}
 {% block title %}Dashboard — FabledNetMon{% endblock %}
 {% block content %}
-<h1 style="margin-bottom:1.5rem;color:#c0c0ff;">Dashboard</h1>
+<h1 class="page-title">Dashboard</h1>
 
-{# ── Summary row ──────────────────────────────────────────────────────────── #}
-<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;">
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Hosts</h3>
-    <span style="font-size:1.8rem;font-weight:bold;color:#c0c0e0;">{{ total_hosts }}</span>
-    <span style="color:#505070;font-size:0.8rem;margin-left:0.3rem;">configured</span>
-    <p style="margin-top:0.4rem;"><a href="/hosts/" style="color:#6060a0;font-size:0.8rem;">Manage →</a></p>
+{# ── Summary strip ───────────────────────────────────────────────────────── #}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Hosts</div>
+    <span class="stat-val">{{ total_hosts }}</span>
+    <span class="stat-label">total</span>
+    <div style="margin-top:0.5rem;"><a href="/hosts/" style="font-size:0.8rem;">Manage →</a></div>
   </div>
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Ping</h3>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Ping</div>
     {% if ping_up + ping_down == 0 %}
-    <p style="color:#505070;font-size:0.85rem;"><a href="/hosts/" style="color:#a0a0ff;">Enable ping</a> on a host.</p>
+      <span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
     {% else %}
-    <div style="display:flex;gap:1rem;align-items:baseline;">
-      <div><span style="font-size:1.8rem;font-weight:bold;color:#40c040;">{{ ping_up }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">up</span></div>
-      {% if ping_down %}<div><span style="font-size:1.8rem;font-weight:bold;color:#c04040;">{{ ping_down }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">down</span></div>{% endif %}
-    </div>
+      <span class="stat-val" style="color:var(--green);">{{ ping_up }}</span><span class="stat-label">up</span>
+      {% if ping_down %}&nbsp;<span class="stat-val" style="color:var(--red);">{{ ping_down }}</span><span class="stat-label">down</span>{% endif %}
     {% endif %}
   </div>
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">DNS</h3>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">DNS</div>
     {% if dns_ok + dns_fail == 0 %}
-    <p style="color:#505070;font-size:0.85rem;"><a href="/hosts/" style="color:#a0a0ff;">Enable DNS</a> on a host.</p>
+      <span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
     {% else %}
-    <div style="display:flex;gap:1rem;align-items:baseline;">
-      <div><span style="font-size:1.8rem;font-weight:bold;color:#40c040;">{{ dns_ok }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">ok</span></div>
-      {% if dns_fail %}<div><span style="font-size:1.8rem;font-weight:bold;color:#c04040;">{{ dns_fail }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">failed</span></div>{% endif %}
-    </div>
+      <span class="stat-val" style="color:var(--green);">{{ dns_ok }}</span><span class="stat-label">ok</span>
+      {% if dns_fail %}&nbsp;<span class="stat-val" style="color:var(--red);">{{ dns_fail }}</span><span class="stat-label">failed</span>{% endif %}
     {% endif %}
   </div>
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Alerts</h3>
-    <p style="color:#505070;font-size:0.85rem;"><a href="/alerts/" style="color:#a0a0ff;">Configure rules →</a></p>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Alerts</div>
+    <a href="/alerts/" style="font-size:0.85rem;">View rules →</a>
   </div>
 </div>
 
-{# ── Live ping widget ─────────────────────────────────────────────────────── #}
-<div class="card ping-card">
-  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
-    <h2 style="color:#8080ff;font-size:0.9rem;text-transform:uppercase;letter-spacing:.05em;">
-      Ping — last 30 probes
-    </h2>
-    <a href="/ping/" style="color:#6060a0;font-size:0.8rem;">Details &amp; settings →</a>
+{# ── Widget grid ─────────────────────────────────────────────────────────── #}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1rem;">
+
+  {# Ping widget #}
+  <div class="card ping-card" style="margin-bottom:0;">
+    <div class="widget-header">
+      <span class="widget-title">Ping — last 30 probes</span>
+      <a href="/ping/" class="widget-link">Details &amp; settings →</a>
+    </div>
+    <div id="ping-widget"
+         hx-get="/ping/rows"
+         hx-trigger="load, every {{ poll_interval }}s"
+         hx-swap="innerHTML">
+    </div>
   </div>
-  <div id="ping-widget"
-       hx-get="/ping/rows"
-       hx-trigger="load, every {{ poll_interval }}s"
-       hx-swap="innerHTML">
+
+  {# DNS widget #}
+  <div class="card ping-card" style="margin-bottom:0;">
+    <div class="widget-header">
+      <span class="widget-title">DNS</span>
+      <a href="/dns/" class="widget-link">Details →</a>
+    </div>
+    <div id="dns-widget"
+         hx-get="/dns/rows"
+         hx-trigger="load, every {{ poll_interval }}s"
+         hx-swap="innerHTML">
+    </div>
   </div>
+
+  {# Traefik widget — only if plugin enabled #}
+  {% if traefik_enabled %}
+  <div class="card ping-card" style="margin-bottom:0;">
+    <div class="widget-header">
+      <span class="widget-title">Traefik</span>
+      <a href="/plugins/traefik/" class="widget-link">Details →</a>
+    </div>
+    <div id="traefik-widget"
+         hx-get="/plugins/traefik/widget"
+         hx-trigger="load, every {{ poll_interval }}s"
+         hx-swap="innerHTML">
+    </div>
+  </div>
+  {% endif %}
+
 </div>
 {% endblock %}