ui: align dashboard styling with ScadaLink master conventions

- Rename DashboardLayout.razor -> MainLayout.razor; dashboard.css -> site.css
- Sidebar 218 -> 220px; add hamburger + Bootstrap collapse for <lg viewports
- Rename .metric-* KPI classes to .agg-* (matches shared theme tokens)
- Rebuild ApiKeysPage create form as card + h6 subsections + bottom Save/Cancel

src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor

@@ -1,10 +1,10 @@
-<div class="card metric-card h-100@(Wide ? " metric-card-wide" : string.Empty)">
+<div class="card agg-card h-100@(Wide ? " agg-card-wide" : string.Empty)">
     <div class="card-body">
-        <div class="metric-label">@Label</div>
-        <div class="metric-value">@Value</div>
+        <div class="agg-label">@Label</div>
+        <div class="agg-value">@Value</div>
         @if (!string.IsNullOrWhiteSpace(Detail))
         {
-            <div class="metric-detail">@Detail</div>
+            <div class="agg-sub">@Detail</div>
         }
     </div>
 </div>