feat: restyle Admin UI with the technical-light design system

Adopt the technical-light design system across the Admin web UI:

- Vendor theme.css + IBM Plex woff2 fonts into wwwroot; include
  theme.css globally after Bootstrap.
- Rebuild MainLayout: top app-bar (brand mark, breadcrumb, connection
  pill) + hairline-ruled side rail with accent-bordered active link.
- Convert all 33 pages to the component catalog — tables to
  panel + data-table (num/mono columns), KPI cards to agg-grid,
  detail blocks to metric-card/kv rows, badges to chips, alerts to
  panel notice, headings to page-title/panel-head, .rise reveals.
- Buttons/forms stay on Bootstrap; theme.css restyles them via
  --bs-* overrides. View-specific layout lives in app.css; all
  colour/type comes from theme.css tokens.

Also fix a pre-existing /fleet 500: the node-state query ordered on
a property of a constructed FleetNodeRow record, which EF Core
cannot translate. Order the join's columns before projecting.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DriversTab.razor

@@ -6,7 +6,7 @@
 @inject NamespaceService NsSvc
 
 <div class="d-flex justify-content-between mb-3">
-    <h4>DriverInstances</h4>
+    <h4 class="panel-head">DriverInstances</h4>
     <button class="btn btn-sm btn-primary" @onclick="() => _showForm = true">Add driver</button>
 </div>
 
@@ -14,43 +14,49 @@
 else if (_drivers.Count == 0) { <p class="text-muted">No drivers configured in this draft.</p> }
 else
 {
-    <table class="table table-sm">
-        <thead><tr><th>DriverInstanceId</th><th>Name</th><th>Type</th><th>Namespace</th></tr></thead>
-        <tbody>
-        @foreach (var d in _drivers)
-        {
-            <tr>
-                <td><code>@d.DriverInstanceId</code></td>
-                <td>@d.Name</td>
-                <td>
-                    @if (string.Equals(d.DriverType, "Focas", StringComparison.OrdinalIgnoreCase))
-                    {
-                        <a href="/drivers/focas/@d.DriverInstanceId">@d.DriverType</a>
-                    }
-                    else
-                    {
-                        @d.DriverType
-                    }
-                </td>
-                <td><code>@d.NamespaceId</code></td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Configured drivers</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>DriverInstanceId</th><th>Name</th><th>Type</th><th>Namespace</th></tr></thead>
+                <tbody>
+                @foreach (var d in _drivers)
+                {
+                    <tr>
+                        <td><span class="mono">@d.DriverInstanceId</span></td>
+                        <td>@d.Name</td>
+                        <td>
+                            @if (string.Equals(d.DriverType, "Focas", StringComparison.OrdinalIgnoreCase))
+                            {
+                                <a href="/drivers/focas/@d.DriverInstanceId">@d.DriverType</a>
+                            }
+                            else
+                            {
+                                @d.DriverType
+                            }
+                        </td>
+                        <td><span class="mono">@d.NamespaceId</span></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @if (_showForm && _namespaces is not null)
 {
-    <div class="card">
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">Add driver</div>
         <div class="card-body">
             <div class="row g-3">
                 <div class="col-md-3">
                     <label class="form-label">Name</label>
-                    <input class="form-control" @bind="_name"/>
+                    <input class="form-control form-control-sm" @bind="_name"/>
                 </div>
                 <div class="col-md-3">
                     <label class="form-label">DriverType</label>
-                    <select class="form-select" @bind="_type">
+                    <select class="form-select form-select-sm" @bind="_type">
                         <option>Galaxy</option>
                         <option>Modbus</option>
                         <option>AbCip</option>
@@ -63,7 +69,7 @@ else
                 </div>
                 <div class="col-md-6">
                     <label class="form-label">Namespace</label>
-                    <select class="form-select" @bind="_nsId">
+                    <select class="form-select form-select-sm" @bind="_nsId">
                         @foreach (var n in _namespaces) { <option value="@n.NamespaceId">@n.Kind — @n.NamespaceUri</option> }
                     </select>
                 </div>
@@ -78,18 +84,18 @@ else
                     else
                     {
                         <label class="form-label">DriverConfig JSON (schemaless per driver type)</label>
-                        <textarea class="form-control font-monospace" rows="6" @bind="_config"></textarea>
+                        <textarea class="form-control form-control-sm font-monospace" rows="6" @bind="_config"></textarea>
                         <div class="form-text">Phase 1: generic JSON editor — per-driver schema validation arrives in each driver's phase (decision #94).</div>
                     }
                 </div>
             </div>
-            @if (_error is not null) { <div class="alert alert-danger mt-3">@_error</div> }
+            @if (_error is not null) { <section class="panel notice mt-3">@_error</section> }
             <div class="mt-3">
                 <button class="btn btn-sm btn-primary" @onclick="SaveAsync">Save</button>
                 <button class="btn btn-sm btn-secondary ms-2" @onclick="() => _showForm = false">Cancel</button>
             </div>
         </div>
-    </div>
+    </section>
 }
 
 @code {