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/wwwroot/css/site.css

@@ -16,7 +16,8 @@ body.dashboard-body { min-height: 100vh; }
 .app-bar .brand:hover { text-decoration: none; }
 
 /* ── App shell ───────────────────────────────────────────────────────────────
-   Two-column layout: fixed-width side rail (218px) + flexible main column. */
+   Two-column layout: fixed-width side rail (220px) + flexible main column.
+   Becomes single-column under <lg viewports — see media queries below. */
 .app-shell {
   display: flex;
   align-items: stretch;
@@ -28,8 +29,8 @@ body.dashboard-body { min-height: 100vh; }
    Left-rail navigation with eyebrow section headings, a footer session
    block, and active-route accent. */
 .side-rail {
-  width: 218px;
-  flex: 0 0 218px;
+  width: 220px;
+  flex: 0 0 220px;
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
@@ -38,6 +39,32 @@ body.dashboard-body { min-height: 100vh; }
   border-right: 1px solid var(--rule-strong);
 }
 
+/* Sidebar collapse wrapper: on lg+ it stays sticky to the viewport so the rail
+   remains visible when main content scrolls past 100vh (matches master). On
+   <lg viewports the Bootstrap .collapse class drives show/hide and the rail
+   spans full width — see the max-width media query below. */
+@media (min-width: 992px) {
+  #sidebar-collapse {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    align-self: flex-start;
+    z-index: 1020;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .app-shell { flex-direction: column; }
+  #sidebar-collapse { width: 100%; }
+  .side-rail {
+    width: 100%;
+    flex: 0 0 auto;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--rule-strong);
+  }
+}
+
 .rail-eyebrow {
   font-size: 0.68rem;
   font-weight: 600;
@@ -127,9 +154,10 @@ body.dashboard-body { min-height: 100vh; }
   color: var(--ink-faint);
 }
 
-/* ── KPI / metric cards ──────────────────────────────────────────────────────
-   The MetricCard component renders .metric-card with label/value/detail; this
-   is the technical-light aggregate card — uppercase eyebrow, big mono number. */
+/* ── KPI / aggregate cards ───────────────────────────────────────────────────
+   The MetricCard component renders .agg-card with label/value/sub; this is
+   the technical-light aggregate card — uppercase eyebrow, big mono number.
+   Class names align with master (ScadaLink CentralUI) for consistency. */
 .metric-grid {
   display: grid;
   gap: 0.75rem;
@@ -140,23 +168,23 @@ body.dashboard-body { min-height: 100vh; }
 }
 .metric-grid.compact { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
 
-.metric-card {
+.agg-card {
   background: var(--card);
   border: 1px solid var(--rule);
   border-radius: 8px;
   box-shadow: none;
 }
-.metric-card .card-body { padding: 0.7rem 0.9rem; }
-.metric-label {
+.agg-card .card-body { padding: 0.7rem 0.9rem; }
+.agg-label {
   font-size: 0.68rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   color: var(--ink-faint);
 }
-.metric-card-wide { grid-column: span 2; }
+.agg-card-wide { grid-column: span 2; }
 
-.metric-value {
+.agg-value {
   margin-top: 0.25rem;
   font-family: var(--mono);
   font-variant-numeric: tabular-nums;
@@ -167,7 +195,7 @@ body.dashboard-body { min-height: 100vh; }
   /* break-word, not anywhere: keep date/number tokens whole, wrap at spaces. */
   overflow-wrap: break-word;
 }
-.metric-detail {
+.agg-sub {
   margin-top: 0.15rem;
   font-size: 0.78rem;
   color: var(--ink-faint);