docs+ui: backfill XML doc comments and finish dashboard layout pass

Adds missing <summary>/<param> XML docs across 99 server, worker, and test
files so CommentChecker reports zero issues (TreatWarningsAsErrors needs the
analyzer clean). Bundles in WIP dashboard work: NavSection extraction,
MainLayout/site.css/js styling alignment, and DashboardOptions/Auth tweaks.

src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/site.css

@@ -15,34 +15,23 @@ body.dashboard-body { min-height: 100vh; }
 .app-bar .brand { color: var(--ink); }
 .app-bar .brand:hover { text-decoration: none; }
 
-/* ── App shell ───────────────────────────────────────────────────────────────
-   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;
-  min-height: calc(100vh - 3.3rem);
-}
-.app-shell > .page { flex: 1; min-width: 0; }
-
-/* ── Side rail ───────────────────────────────────────────────────────────────
-   Left-rail navigation with eyebrow section headings, a footer session
-   block, and active-route accent. */
-.side-rail {
-  width: 220px;
-  flex: 0 0 220px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  padding: 1rem 0.7rem;
+/* ── Sidebar ─────────────────────────────────────────────────────────────────
+   Left-rail navigation. Pattern lifted from ScadaLink CentralUI: a fixed-width
+   sidebar that hosts the brand at the top, a scrollable nav region with
+   collapsible NavSections in the middle, and a sign-in/out footer at the
+   bottom. The sidebar is wrapped in a Bootstrap .collapse so a hamburger
+   button can show/hide it on <lg viewports. */
+.sidebar {
+  min-width: 220px;
+  max-width: 220px;
+  height: 100vh;
   background: var(--card);
   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. */
+/* Pin the sidebar to the viewport on lg+ so it stays visible when the main
+   content scrolls past 100vh. The wrapper is the flex child of MainLayout;
+   align-self prevents the flex row from stretching it. */
 @media (min-width: 992px) {
   #sidebar-collapse {
     position: sticky;
@@ -53,82 +42,73 @@ body.dashboard-body { min-height: 100vh; }
   }
 }
 
+/* When collapsed under <lg viewports the Bootstrap collapse container removes
+   the fixed width; restore full width on mobile. */
 @media (max-width: 991.98px) {
-  .app-shell { flex-direction: column; }
-  #sidebar-collapse { width: 100%; }
-  .side-rail {
-    width: 100%;
-    flex: 0 0 auto;
+  .sidebar {
+    min-width: 100%;
+    max-width: 100%;
     height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--rule-strong);
   }
 }
 
-.rail-eyebrow {
-  font-size: 0.68rem;
+.sidebar .brand {
+  display: block;
+  color: var(--ink);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 1rem;
+  border-bottom: 1px solid var(--rule);
+  text-decoration: none;
+}
+.sidebar .brand:hover { text-decoration: none; }
+.sidebar .brand .mark { color: var(--accent); }
+
+.sidebar .nav-link {
+  color: var(--ink-soft);
+  padding: 0.4rem 1rem;
+  font-size: 0.9rem;
+}
+.sidebar .nav-link:hover {
+  color: var(--ink);
+  background-color: var(--paper);
+  text-decoration: none;
+}
+.sidebar .nav-link.active {
+  color: var(--accent-deep);
+  background-color: var(--paper);
+  font-weight: 600;
+  /* Left accent so active state isn't carried by colour alone. */
+  border-left: 3px solid var(--accent);
+  padding-left: calc(1rem - 3px);
+}
+
+/* Collapsible section header — a full-width button styled as an uppercase
+   eyebrow with a leading expand/collapse chevron. */
+.sidebar .nav-section-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+  color: var(--ink-faint);
+  font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.07em;
-  color: var(--ink-faint);
-  padding: 0.4rem 0.6rem 0.2rem;
+  padding: 0.75rem 1rem 0.25rem;
+  margin-top: 0.5rem;
 }
-
-.rail-link {
-  display: block;
-  padding: 0.4rem 0.6rem;
-  border-radius: 4px;
-  border-left: 2px solid transparent;
-  font-size: 0.86rem;
-  color: var(--ink-soft);
-  text-decoration: none;
-}
-.rail-link:hover {
-  background: #f3f6fd;
-  color: var(--ink);
-  text-decoration: none;
-}
-.rail-link.active {
-  background: #eef2fc;
-  border-left-color: var(--accent);
-  color: var(--accent-deep);
-  font-weight: 600;
-}
-
-.rail-foot {
-  margin-top: auto;
-  padding-top: 0.6rem;
-  border-top: 1px solid var(--rule);
-}
-.rail-user {
-  padding: 0 0.6rem;
-  font-weight: 600;
-  font-size: 0.88rem;
-  color: var(--ink);
-}
-.rail-roles {
-  padding: 0.1rem 0.6rem 0.5rem;
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  color: var(--ink-faint);
-}
-.rail-btn {
+.sidebar .nav-section-toggle:hover { color: var(--ink); }
+.sidebar .nav-section-toggle .chevron {
   display: inline-block;
-  margin: 0 0.6rem;
-  padding: 0.3rem 0.7rem;
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--ink-soft);
-  background: var(--card);
-  border: 1px solid var(--rule-strong);
-  border-radius: 4px;
-  cursor: pointer;
-  text-decoration: none;
-}
-.rail-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  text-decoration: none;
+  width: 0.8rem;
+  font-size: 0.8rem;
+  line-height: 1;
 }
 
 /* ── Page header ─────────────────────────────────────────────────────────────