fix(centralui): include AntiforgeryToken in LoginCard (match OtOpcUa + kit contract)

Replace hand-rolled Bootstrap card with the shared <LoginCard> from ZB.MOM.WW.Theme.
Update ComponentRenderingTests assertions to match LoginCard's rendered structure
(h1.login-title, div.panel.notice.login-error, "Sign in" button text).

Directory.Packages.props

@@ -85,6 +85,7 @@
     <PackageVersion Include="ZB.MOM.WW.Auth.ApiKeys" Version="0.1.3" />
     <PackageVersion Include="ZB.MOM.WW.Auth.AspNetCore" Version="0.1.3" />
     <PackageVersion Include="ZB.MOM.WW.Audit" Version="0.1.0" />
+    <PackageVersion Include="ZB.MOM.WW.Theme" Version="0.2.0" />
   </ItemGroup>
 
 </Project>

nuget.config

@@ -24,6 +24,7 @@
       <package pattern="ZB.MOM.WW.Auth" />
       <package pattern="ZB.MOM.WW.Auth.*" />
       <package pattern="ZB.MOM.WW.Audit" />
+      <package pattern="ZB.MOM.WW.Theme" />
     </packageSource>
   </packageSourceMapping>
   <!--

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/MainLayout.razor

@@ -1,26 +1,28 @@
 @inherits LayoutComponentBase
 
-<div class="d-flex flex-column flex-lg-row" style="min-height: 100vh;">
-    @* Hamburger toggle: visible only on viewports <lg.
-       Bootstrap collapse JS lives in bootstrap.bundle.min.js (loaded in App.razor). *@
-    <button class="btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#sidebar-collapse"
-            aria-controls="sidebar-collapse"
-            aria-expanded="false"
-            aria-label="Toggle navigation">
-        &#9776;
-    </button>
-
-    <div class="collapse d-lg-block" id="sidebar-collapse">
+@* The side-rail chassis (brand bar + responsive hamburger) is the shared
+   ZB.MOM.WW.Theme ThemeShell. NavMenu fills the rail's <Nav> slot with the
+   policy-gated nav groups; the session/sign-out block fills <RailFooter>. *@
+<ThemeShell Product="ScadaBridge" Accent="#2f5fd0">
+    <Nav>
         <NavMenu />
-    </div>
-
-    <main class="flex-grow-1 p-3">
-        @Body
-    </main>
-</div>
+    </Nav>
+    <RailFooter>
+        <AuthorizeView>
+            <Authorized>
+                @* CentralUI-024: claim type resolved via JwtTokenService. *@
+                <span class="rail-user">@context.User.GetDisplayName()</span>
+                <form method="post" action="/auth/logout" data-enhance="false">
+                    @* CentralUI-017: logout is a state-changing POST and is
+                       CSRF-protected — the antiforgery token is required. *@
+                    <AntiforgeryToken />
+                    <button type="submit" class="rail-btn">Sign Out</button>
+                </form>
+            </Authorized>
+        </AuthorizeView>
+    </RailFooter>
+    <ChildContent>@Body</ChildContent>
+</ThemeShell>
 
 @* Global host for IDialogService. One instance per layout renders all confirm/prompt
    dialogs raised via IDialogService.ConfirmAsync / PromptAsync. *@

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavMenu.razor

@@ -1,324 +1,117 @@
-@using System.Linq
 @using ZB.MOM.WW.ScadaBridge.Security
 @using Microsoft.AspNetCore.Components.Routing
-@using Microsoft.JSInterop
-@implements IDisposable
-@inject NavigationManager Navigation
-@inject IJSRuntime JS
 
-<nav class="sidebar d-flex flex-column">
-    <div class="brand"><span class="mark">&#9646;</span> ScadaBridge</div>
+@* Rail navigation — rendered inside ThemeShell's <Nav> slot. The chassis
+   (brand bar + responsive hamburger) belongs to ThemeShell; this component
+   contributes only the nav items. Collapsible sections use the kit's
+   NavRailSection (<details>); their open/closed state is persisted client-side
+   by the kit's nav-state.js (localStorage, keyed by Key) — no JS interop here. *@
 
-    <div style="overflow-y:auto; flex:1 1 auto; min-height:0;">
-        <ul class="nav flex-column">
-            <li class="nav-item">
-                <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
-            </li>
+<NavRailItem Href="/" Text="Dashboard" Match="NavLinkMatch.All" />
 
-            <AuthorizeView>
-                <Authorized>
-                    @* Admin section — Administrator role only *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
-                        <Authorized Context="adminContext">
-                            <NavSection Title="Admin"
-                                        Expanded="@_expanded.Contains("admin")"
-                                        OnToggle="@(() => ToggleAsync("admin"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/admin/ldap-mappings">LDAP Mappings</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>
-                                </li>
-                                @* Import Bundle requires Administrator only — Designer role is not sufficient.
-                                   Export Bundle lives in the Design section (RequireDesign). *@
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/transport/import">Import Bundle</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+<AuthorizeView>
+    <Authorized>
+        @* Admin section — Administrator role only *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
+            <Authorized Context="adminContext">
+                <NavRailSection Title="Admin" Key="admin">
+                    <NavRailItem Href="/admin/ldap-mappings" Text="LDAP Mappings" />
+                    <NavRailItem Href="/admin/sites" Text="Sites" />
+                    <NavRailItem Href="/admin/api-keys" Text="API Keys" />
+                    @* Import Bundle requires Administrator only — Designer role is not sufficient.
+                       Export Bundle lives in the Design section (RequireDesign). *@
+                    <NavRailItem Href="/design/transport/import" Text="Import Bundle" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-                    @* Design section — Designer role *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
-                        <Authorized Context="designContext">
-                            <NavSection Title="Design"
-                                        Expanded="@_expanded.Contains("design")"
-                                        OnToggle="@(() => ToggleAsync("design"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/templates">Templates</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/shared-scripts">Shared Scripts</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/connections">Connections</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/external-systems">External Systems</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/transport/export">Export Bundle</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+        @* Design section — Designer role *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
+            <Authorized Context="designContext">
+                <NavRailSection Title="Design" Key="design">
+                    <NavRailItem Href="/design/templates" Text="Templates" />
+                    <NavRailItem Href="/design/shared-scripts" Text="Shared Scripts" />
+                    <NavRailItem Href="/design/connections" Text="Connections" />
+                    <NavRailItem Href="/design/external-systems" Text="External Systems" />
+                    <NavRailItem Href="/design/transport/export" Text="Export Bundle" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-                    @* Deployment section — Deployer role *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                        <Authorized Context="deploymentContext">
-                            <NavSection Title="Deployment"
-                                        Expanded="@_expanded.Contains("deployment")"
-                                        OnToggle="@(() => ToggleAsync("deployment"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/deployment/topology">Topology</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/deployment/deployments">Deployments</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/deployment/debug-view">Debug View</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+        @* Deployment section — Deployer role *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+            <Authorized Context="deploymentContext">
+                <NavRailSection Title="Deployment" Key="deployment">
+                    <NavRailItem Href="/deployment/topology" Text="Topology" />
+                    <NavRailItem Href="/deployment/deployments" Text="Deployments" />
+                    <NavRailItem Href="/deployment/debug-view" Text="Debug View" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-                    @* Notifications — mixed-role section; each item gated by its own policy.
-                       The section is ungated: every authenticated user holds at least one of
-                       Admin/Design/Deployment, so it always has a visible child. *@
-                    <NavSection Title="Notifications"
-                                Expanded="@_expanded.Contains("notifications")"
-                                OnToggle="@(() => ToggleAsync("notifications"))">
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
-                            <Authorized Context="notifAdminContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/smtp">SMTP Configuration</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
-                            <Authorized Context="notifDesignContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/lists">Notification Lists</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                            <Authorized Context="notifDeploymentContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/report">Notification Report</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/kpis">Notification KPIs</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                    </NavSection>
-
-                    @* Site Calls — Site Call Audit (#22). Deployer-role only,
-                       matching the Notification Report page's gate; the whole
-                       section sits inside the policy block so a non-Deployer
-                       user does not see the heading. *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                        <Authorized Context="siteCallsContext">
-                            <NavSection Title="Site Calls"
-                                        Expanded="@_expanded.Contains("sitecalls")"
-                                        OnToggle="@(() => ToggleAsync("sitecalls"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/site-calls/report">Site Calls</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
-
-                    @* Monitoring — Health Dashboard is all-roles; Event Logs and
-                       Parked Messages are Deployer-role only (Component-CentralUI).
-                       The section is ungated because Health Dashboard is always
-                       a visible child. *@
-                    <NavSection Title="Monitoring"
-                                Expanded="@_expanded.Contains("monitoring")"
-                                OnToggle="@(() => ToggleAsync("monitoring"))">
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/monitoring/health">Health Dashboard</NavLink>
-                        </li>
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                            <Authorized Context="monitoringContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/monitoring/event-logs">Event Logs</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/monitoring/parked-messages">Parked Messages</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                    </NavSection>
-
-                    @* Audit — gated on the OperationalAudit policy (#23 M7-T15
-                       / Bundle G). Hosts the Audit Log page (#23 M7) and the
-                       Configuration Audit Log (IAuditService config-change
-                       viewer). The whole section sits inside the policy block:
-                       a non-audit user does not even see the heading.
-                       OperationalAudit is satisfied by the Administrator and
-                       Viewer roles (post-Task-1.7 canonical collapse: former
-                       Audit→Administrator, AuditReadOnly→Viewer). *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.OperationalAudit">
-                        <Authorized Context="auditContext">
-                            <NavSection Title="Audit"
-                                        Expanded="@_expanded.Contains("audit")"
-                                        OnToggle="@(() => ToggleAsync("audit"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/audit/log">Audit Log</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/audit/configuration">Configuration Audit Log</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+        @* Notifications — mixed-role section; each item gated by its own policy.
+           The section is ungated: every authenticated user holds at least one of
+           Admin/Design/Deployment, so it always has a visible child. *@
+        <NavRailSection Title="Notifications" Key="notifications">
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
+                <Authorized Context="notifAdminContext">
+                    <NavRailItem Href="/notifications/smtp" Text="SMTP Configuration" />
                 </Authorized>
             </AuthorizeView>
-        </ul>
-    </div>
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
+                <Authorized Context="notifDesignContext">
+                    <NavRailItem Href="/notifications/lists" Text="Notification Lists" />
+                </Authorized>
+            </AuthorizeView>
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+                <Authorized Context="notifDeploymentContext">
+                    <NavRailItem Href="/notifications/report" Text="Notification Report" />
+                    <NavRailItem Href="/notifications/kpis" Text="Notification KPIs" />
+                </Authorized>
+            </AuthorizeView>
+        </NavRailSection>
 
-    <AuthorizeView>
-        <Authorized>
-            <div class="border-top px-3 py-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    @* CentralUI-024: claim type resolved via JwtTokenService. *@
-                    <span class="text-body-secondary small">@context.User.GetDisplayName()</span>
-                    <form method="post" action="/auth/logout" data-enhance="false">
-                        @* CentralUI-017: logout is a state-changing POST and is
-                           CSRF-protected — the antiforgery token is required. *@
-                        <AntiforgeryToken />
-                        <button type="submit" class="btn btn-outline-secondary btn-sm py-0 px-2">Sign Out</button>
-                    </form>
-                </div>
-            </div>
-        </Authorized>
-    </AuthorizeView>
-</nav>
+        @* Site Calls — Site Call Audit (#22). Deployer-role only,
+           matching the Notification Report page's gate; the whole
+           section sits inside the policy block so a non-Deployer
+           user does not see the heading. *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+            <Authorized Context="siteCallsContext">
+                <NavRailSection Title="Site Calls" Key="sitecalls">
+                    <NavRailItem Href="/site-calls/report" Text="Site Calls" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-@code {
-    // Expanded-section state persists in the "scadabridge_nav" cookie, written
-    // by navState.set / read by navState.get (wwwroot/js/nav-state.js) — a
-    // comma-separated list of section ids.
+        @* Monitoring — Health Dashboard is all-roles; Event Logs and
+           Parked Messages are Deployer-role only (Component-CentralUI).
+           The section is ungated because Health Dashboard is always
+           a visible child. *@
+        <NavRailSection Title="Monitoring" Key="monitoring">
+            <NavRailItem Href="/monitoring/health" Text="Health Dashboard" />
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+                <Authorized Context="monitoringContext">
+                    <NavRailItem Href="/monitoring/event-logs" Text="Event Logs" />
+                    <NavRailItem Href="/monitoring/parked-messages" Text="Parked Messages" />
+                </Authorized>
+            </AuthorizeView>
+        </NavRailSection>
 
-    // Every collapsible section id. Also the allow-list for parsing the cookie.
-    private static readonly string[] SectionIds =
-        { "admin", "design", "deployment", "notifications", "sitecalls", "monitoring", "audit" };
-
-    // The currently-expanded sections. Populated from the cookie on first
-    // render; mutated by ToggleAsync and by navigating into a section.
-    private readonly HashSet<string> _expanded = new(StringComparer.Ordinal);
-
-    protected override void OnInitialized()
-    {
-        Navigation.LocationChanged += OnLocationChanged;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (!firstRender)
-        {
-            return;
-        }
-
-        // Hydrate from the cookie. Until this completes the sidebar paints
-        // collapsed (the "collapsed by default" state) — matching how TreeView
-        // hydrates its expand state in OnAfterRenderAsync(firstRender).
-        string saved;
-        try
-        {
-            saved = await JS.InvokeAsync<string>("navState.get") ?? string.Empty;
-        }
-        catch (JSDisconnectedException)
-        {
-            return;
-        }
-
-        foreach (var id in saved.Split(
-            ',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
-        {
-            if (Array.IndexOf(SectionIds, id) >= 0)
-            {
-                _expanded.Add(id);
-            }
-        }
-
-        // The section of the page we loaded on is always expanded.
-        if (EnsureCurrentSectionExpanded())
-        {
-            await PersistAsync();
-        }
-
-        StateHasChanged();
-    }
-
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        // Navigating into a collapsed section expands it (and remembers it).
-        if (EnsureCurrentSectionExpanded())
-        {
-            _ = PersistAsync();
-            _ = InvokeAsync(StateHasChanged);
-        }
-    }
-
-    private async Task ToggleAsync(string id)
-    {
-        if (!_expanded.Remove(id))
-        {
-            _expanded.Add(id);
-        }
-
-        await PersistAsync();
-    }
-
-    // Adds the current page's section to _expanded; returns true if it changed.
-    private bool EnsureCurrentSectionExpanded()
-    {
-        var section = CurrentSection();
-        return section is not null && _expanded.Add(section);
-    }
-
-    // Maps the current URL's first path segment to a section id, or null for
-    // sectionless pages (Dashboard, Login).
-    private string? CurrentSection()
-    {
-        var relative = Navigation.ToBaseRelativePath(Navigation.Uri);
-        var firstSegment = relative.Split('?', '#')[0]
-            .Split('/', StringSplitOptions.RemoveEmptyEntries)
-            .FirstOrDefault();
-
-        return firstSegment switch
-        {
-            "admin" => "admin",
-            "design" => "design",
-            "deployment" => "deployment",
-            "notifications" => "notifications",
-            "site-calls" => "sitecalls",
-            "monitoring" => "monitoring",
-            "audit" => "audit",
-            _ => null,
-        };
-    }
-
-    private async Task PersistAsync()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("navState.set", string.Join(',', _expanded));
-        }
-        catch (JSDisconnectedException)
-        {
-            // The circuit is gone — nothing to persist to.
-        }
-    }
-
-    public void Dispose()
-    {
-        Navigation.LocationChanged -= OnLocationChanged;
-    }
-}
+        @* Audit — gated on the OperationalAudit policy (#23 M7-T15
+           / Bundle G). Hosts the Audit Log page (#23 M7) and the
+           Configuration Audit Log (IAuditService config-change
+           viewer). The whole section sits inside the policy block:
+           a non-audit user does not even see the heading.
+           OperationalAudit is satisfied by the Administrator and
+           Viewer roles (post-Task-1.7 canonical collapse: former
+           Audit→Administrator, AuditReadOnly→Viewer). *@
+        <AuthorizeView Policy="@AuthorizationPolicies.OperationalAudit">
+            <Authorized Context="auditContext">
+                <NavRailSection Title="Audit" Key="audit">
+                    <NavRailItem Href="/audit/log" Text="Audit Log" />
+                    <NavRailItem Href="/audit/configuration" Text="Configuration Audit Log" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
+    </Authorized>
+</AuthorizeView>

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavSection.razor

@@ -1,35 +0,0 @@
-@* A collapsible sidebar nav section: an uppercase-eyebrow header button that
-   toggles the visibility of its child nav items. The header <li> and the item
-   <li>s (ChildContent) render as siblings inside NavMenu's <ul>. *@
-
-<li class="nav-item">
-    <button type="button"
-            class="nav-section-toggle"
-            @onclick="OnToggle"
-            aria-expanded="@(Expanded ? "true" : "false")">
-        <i class="bi @(Expanded ? "bi-chevron-down" : "bi-chevron-right")" aria-hidden="true"></i>
-        <span>@Title</span>
-    </button>
-</li>
-@if (Expanded)
-{
-    @ChildContent
-}
-
-@code {
-    /// <summary>Section label shown in the header (e.g. "Deployment").</summary>
-    [Parameter, EditorRequired]
-    public string Title { get; set; } = string.Empty;
-
-    /// <summary>Whether the section is expanded — its items rendered.</summary>
-    [Parameter]
-    public bool Expanded { get; set; }
-
-    /// <summary>Raised when the header button is clicked.</summary>
-    [Parameter]
-    public EventCallback OnToggle { get; set; }
-
-    /// <summary>The section's nav items, rendered only while expanded.</summary>
-    [Parameter]
-    public RenderFragment? ChildContent { get; set; }
-}

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Login.razor

@@ -3,34 +3,10 @@
 @using Microsoft.AspNetCore.Authorization
 @attribute [AllowAnonymous]
 
-<div class="d-flex align-items-center justify-content-center min-vh-100">
-    <div class="card shadow-sm" style="max-width: 400px; width: 100%;">
-        <div class="card-body p-4">
-            <h4 class="card-title mb-4 text-center">ScadaBridge</h4>
-
-            @if (!string.IsNullOrEmpty(ErrorMessage))
-            {
-                <div class="alert alert-danger py-2" role="alert">@ErrorMessage</div>
-            }
-
-            <form method="post" action="/auth/login" data-enhance="false">
-                <div class="mb-3">
-                    <label for="username" class="form-label">Username</label>
-                    <input type="text" class="form-control" id="username" name="username"
-                           required autocomplete="username" autofocus />
-                </div>
-                <div class="mb-3">
-                    <label for="password" class="form-label">Password</label>
-                    <input type="password" class="form-control" id="password" name="password"
-                           required autocomplete="current-password" />
-                </div>
-                <button type="submit" class="btn btn-primary w-100">Sign In</button>
-            </form>
-        </div>
-    </div>
-</div>
+<LoginCard Product="ScadaBridge" Action="/auth/login" Error="@ErrorMessage">
+    <AntiforgeryToken />
+</LoginCard>
 
 @code {
-    [SupplyParameterFromQuery(Name = "error")]
-    public string? ErrorMessage { get; set; }
+    [SupplyParameterFromQuery(Name = "error")] public string? ErrorMessage { get; set; }
 }

src/ZB.MOM.WW.ScadaBridge.CentralUI/ZB.MOM.WW.ScadaBridge.CentralUI.csproj

@@ -18,6 +18,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Scripting" />
     <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Workspaces" />
+    <PackageReference Include="ZB.MOM.WW.Theme" />
   </ItemGroup>
 
   <ItemGroup>

src/ZB.MOM.WW.ScadaBridge.CentralUI/_Imports.razor

@@ -11,3 +11,4 @@
 @using ZB.MOM.WW.ScadaBridge.CentralUI.Auth
 @using ZB.MOM.WW.ScadaBridge.CentralUI.Components.Layout
 @using ZB.MOM.WW.ScadaBridge.CentralUI.Components.Shared
+@using ZB.MOM.WW.Theme

src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/css/theme.css

@@ -1,379 +0,0 @@
-/* ============================================================================
-   Technical-Light design system — portable theme layer
-   ----------------------------------------------------------------------------
-   A refined technical-light aesthetic: warm-neutral paper, hairline rules,
-   IBM Plex type, monospace tabular numerics, status carried by colour. Built
-   to layer over Bootstrap 5 via --bs-* overrides, but every rule below works
-   standalone — Bootstrap is optional.
-
-   HOW TO ADOPT
-   1. Serve the three IBM Plex woff2 files (shipped in fonts/) and fix the
-      @font-face url() paths below to wherever you serve them.
-   2. Include this file once, globally. Add view-specific rules in a separate
-      stylesheet — never edit the token block per-view.
-   3. Status is colour, not iconography. Use the .s-* / .chip-* / .kv .v.*
-      helpers; do not hand-pick hex values in feature CSS.
-   ========================================================================= */
-
-/* ── Vendored fonts (embedded woff2, no network/CDN fetch) ───────────────────
-   Adjust these url()s to your asset route. If you cannot vendor the fonts the
-   --sans / --mono fallback stacks below degrade gracefully to system fonts. */
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal; font-weight: 400; font-display: swap;
-  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
-}
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal; font-weight: 600; font-display: swap;
-  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
-}
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal; font-weight: 500; font-display: swap;
-  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
-}
-
-/* ── Design tokens ───────────────────────────────────────────────────────────
-   The single source of truth. Re-theme by editing only this block. */
-:root {
-  /* Surfaces & ink */
-  --paper:        #f4f4f1;   /* page background — warm off-white, never pure */
-  --card:         #ffffff;   /* raised surfaces: cards, bars, table heads     */
-  --ink:          #1b1d21;   /* primary text                                  */
-  --ink-soft:     #5a6066;   /* secondary text, labels                        */
-  --ink-faint:    #8b9097;   /* tertiary text, captions, units                */
-  --rule:         #e4e4df;   /* hairline borders / row dividers               */
-  --rule-strong:  #d2d2cb;   /* emphasised hairlines: bar underline, pills    */
-
-  /* Accent */
-  --accent:       #2f5fd0;   /* links, sort arrows, primary actions           */
-  --accent-deep:  #1e3f99;   /* hover / pressed accent, raw-value emphasis     */
-
-  /* Status — foreground */
-  --ok:           #2f9e44;
-  --warn:         #e8920c;
-  --bad:          #e03131;
-  --idle:         #868e96;
-
-  /* Status — tinted backgrounds (pair with the matching foreground) */
-  --ok-bg:        #e9f6ec;
-  --warn-bg:      #fdf1dd;
-  --bad-bg:       #fceaea;
-  --idle-bg:      #eef0f2;
-
-  /* Type stacks — Plex first, graceful system fallback */
-  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
-  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
-
-  /* Bootstrap 5 overrides — harmless if Bootstrap is absent */
-  --bs-body-bg:          var(--paper);
-  --bs-body-color:       var(--ink);
-  --bs-body-font-family: var(--sans);
-  --bs-body-font-size:   0.9rem;
-  --bs-primary:          var(--accent);
-  --bs-border-color:     var(--rule);
-  --bs-emphasis-color:   var(--ink);
-}
-
-/* ── Base ────────────────────────────────────────────────────────────────────
-   The faint top-right radial is the one deliberate flourish — a soft sheen,
-   not a gradient wash. Keep it subtle. */
-body {
-  background:
-    radial-gradient(1200px 480px at 88% -8%, #ffffff 0%, rgba(255,255,255,0) 70%),
-    var(--paper);
-  color: var(--ink);
-  font-family: var(--sans);
-  font-size: 0.9rem;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Any numeric / fixed-width text. Tabular figures so columns of digits align. */
-.numeric,
-.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
-
-a { color: var(--accent); text-decoration: none; }
-a:hover { color: var(--accent-deep); text-decoration: underline; }
-
-/* ── App chrome: top bar ─────────────────────────────────────────────────────
-   One bar across the top: brand, breadcrumb crumbs, a flex spacer, then meta
-   text and any status pill pushed hard right. */
-.app-bar {
-  display: flex;
-  align-items: baseline;
-  gap: 1rem;
-  padding: 0.85rem 1.25rem;
-  background: var(--card);
-  border-bottom: 1px solid var(--rule-strong);
-}
-.app-bar .brand {
-  font-weight: 600;
-  font-size: 1.05rem;
-  letter-spacing: 0.02em;
-}
-.app-bar .brand .mark { color: var(--accent); }   /* the one accent glyph     */
-.app-bar .crumb { color: var(--ink-faint); font-size: 0.85rem; }
-.app-bar .spacer { flex: 1; }                       /* pushes meta/pill right  */
-.app-bar .meta {
-  font-family: var(--mono);
-  font-size: 0.78rem;
-  color: var(--ink-soft);
-}
-
-/* ── Connection / liveness pill ──────────────────────────────────────────────
-   A rounded pill with a dot, driven entirely by data-state. Use for any
-   live-link health indicator (websocket, SSE, polling). */
-.conn-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.74rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 0.2rem 0.6rem;
-  border-radius: 999px;
-  border: 1px solid var(--rule-strong);
-  color: var(--ink-soft);
-  background: var(--card);
-}
-.conn-pill .dot {
-  width: 7px; height: 7px; border-radius: 50%;
-  background: var(--idle);
-}
-.conn-pill[data-state="connected"]      { color: var(--ok);   border-color: #bfe3c6; background: var(--ok-bg); }
-.conn-pill[data-state="connected"] .dot { background: var(--ok); }
-.conn-pill[data-state="connecting"]      { color: var(--warn); border-color: #f0d9ab; background: var(--warn-bg); }
-.conn-pill[data-state="connecting"] .dot { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
-.conn-pill[data-state="disconnected"]      { color: var(--bad); border-color: #f0c0c0; background: var(--bad-bg); }
-.conn-pill[data-state="disconnected"] .dot { background: var(--bad); }
-
-@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
-
-/* ── Status text helpers ─────────────────────────────────────────────────────
-   Recolour a value in place — counts, ratios, error totals. */
-.s-ok   { color: var(--ok); }
-.s-warn { color: var(--warn); }
-.s-bad  { color: var(--bad); }
-.s-idle { color: var(--idle); }
-
-/* ── State chip ──────────────────────────────────────────────────────────────
-   Compact rectangular badge for an enumerated state (bound/recovering/…).
-   Squarer than the pill; use the pill for liveness, the chip for state. */
-.chip {
-  display: inline-block;
-  font-size: 0.72rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 0.15rem 0.5rem;
-  border-radius: 4px;
-  border: 1px solid transparent;
-}
-.chip-ok   { color: var(--ok);       background: var(--ok-bg);   border-color: #c6e6cd; }
-.chip-warn { color: #b56a00;         background: var(--warn-bg); border-color: #efd6a6; }
-.chip-bad  { color: var(--bad);      background: var(--bad-bg);  border-color: #eec3c3; }
-.chip-idle { color: var(--ink-soft); background: var(--idle-bg); border-color: var(--rule-strong); }
-
-/* ── Panel — the base raised surface ─────────────────────────────────────────
-   A white card with a hairline border and 8px radius. .panel-head is the
-   uppercase eyebrow label that sits on top. */
-.panel {
-  background: var(--card);
-  border: 1px solid var(--rule);
-  border-radius: 8px;
-}
-.panel-head {
-  font-size: 0.74rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  color: var(--ink-faint);
-  padding: 0.6rem 0.9rem;
-  border-bottom: 1px solid var(--rule);
-}
-
-/* ── Page wrapper ────────────────────────────────────────────────────────────
-   Centred, capped width, even gutter. */
-.page { padding: 1.25rem; max-width: 1680px; margin: 0 auto; }
-
-/* ── Reveal-on-paint ─────────────────────────────────────────────────────────
-   Add .rise to top-level sections; stagger with inline animation-delay
-   (.02s, .08s, .14s …) so panels settle in sequence, not all at once. */
-@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
-.rise { animation: rise 0.4s ease both; }
-
-/* ════════════════════════════════════════════════════════════════════════════
-   COMPONENT LIBRARY
-   Generic, reusable pieces. View-specific layout belongs in a separate sheet.
-   ════════════════════════════════════════════════════════════════════════════ */
-
-/* ── KPI / aggregate cards ───────────────────────────────────────────────────
-   A responsive strip of headline numbers. .agg-card.alert / .caution tint the
-   whole card when a watched metric goes non-zero. */
-.agg-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-@media (max-width: 1100px) { .agg-grid { grid-template-columns: repeat(3, 1fr); } }
-@media (max-width: 620px)  { .agg-grid { grid-template-columns: repeat(2, 1fr); } }
-
-.agg-card {
-  background: var(--card);
-  border: 1px solid var(--rule);
-  border-radius: 8px;
-  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);
-}
-.agg-value {
-  margin-top: 0.25rem;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.1;
-  display: flex;
-  align-items: baseline;
-  gap: 0.35rem;
-}
-.agg-sub {                       /* trailing "/ 54", "ms" etc. — quieter */
-  font-size: 0.85rem;
-  font-weight: 400;
-  color: var(--ink-faint);
-}
-.agg-card.alert   { border-color: #eec3c3; background: var(--bad-bg); }
-.agg-card.alert   .agg-value { color: var(--bad); }
-.agg-card.caution { border-color: #efd6a6; background: var(--warn-bg); }
-.agg-card.caution .agg-value { color: #b56a00; }
-
-/* ── Metric card + key/value rows ────────────────────────────────────────────
-   A .panel-head over a stack of .kv rows: label left, monospace value right.
-   Zebra striping on even rows. .v.warn / .v.bad / .v.ok recolour a value. */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
-  gap: 0.85rem;
-  margin-bottom: 1rem;
-}
-.metric-card {
-  background: var(--card);
-  border: 1px solid var(--rule);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.metric-card .panel-head { margin: 0; }
-
-.kv {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 1rem;
-  padding: 0.32rem 0.9rem;
-  font-size: 0.85rem;
-}
-.kv:nth-child(even) { background: #fbfbf9; }
-.kv .k { color: var(--ink-soft); }
-.kv .v {
-  font-family: var(--mono);
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-.kv .v.warn { color: var(--warn); }
-.kv .v.bad  { color: var(--bad); }
-.kv .v.ok   { color: var(--ok); }
-
-/* ── Toolbar ─────────────────────────────────────────────────────────────────
-   Filter/search row that sits inside a .panel above a table. */
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.6rem 0.9rem;
-  border-bottom: 1px solid var(--rule);
-}
-.toolbar .spacer { flex: 1; }
-.tb-search { max-width: 280px; }
-.tb-state  { max-width: 150px; }
-.tb-check {
-  display: flex; align-items: center; gap: 0.35rem;
-  font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap;
-  user-select: none;
-}
-.tb-count { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
-
-/* ── Data table ──────────────────────────────────────────────────────────────
-   Dense, hairline-ruled table. Uppercase sticky head on a faint fill; numeric
-   columns get .num (right-aligned, monospace). Rows are clickable by default —
-   drop the cursor/hover rules if yours are not. */
-.table-wrap { overflow-x: auto; }
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-}
-.data-table th,
-.data-table td {
-  padding: 0.45rem 0.8rem;
-  text-align: left;
-  white-space: nowrap;
-  border-bottom: 1px solid var(--rule);
-}
-.data-table th {
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--ink-faint);
-  background: #fbfbf9;
-  position: sticky;
-  top: 0;
-}
-.data-table th.num,
-.data-table td.num { text-align: right; font-family: var(--mono); }
-
-.data-table th.sortable { cursor: pointer; user-select: none; }
-.data-table th.sortable:hover { color: var(--ink); }
-.data-table th.sorted-asc::after  { content: ' \2191'; color: var(--accent); }
-.data-table th.sorted-desc::after { content: ' \2193'; color: var(--accent); }
-
-.data-table tbody tr { cursor: pointer; transition: background 0.08s; }
-.data-table tbody tr:hover { background: #f3f6fd; }
-.data-table tbody tr:last-child td { border-bottom: none; }
-
-.empty-row {
-  text-align: center !important;
-  color: var(--ink-faint);
-  padding: 1.6rem !important;
-  font-style: italic;
-}
-
-/* ── Direction / category tag ────────────────────────────────────────────────
-   Tiny inline tag for a per-row category (e.g. read vs write). */
-.dir-tag {
-  font-size: 0.68rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 0.1rem 0.4rem;
-  border-radius: 3px;
-}
-.dir-read  { color: var(--accent-deep); background: #e7ecfb; }
-.dir-write { color: #8a5a00;            background: var(--warn-bg); }
-
-/* ── Inline notice ───────────────────────────────────────────────────────────
-   A .panel with a warning tint — for "this thing is gone / degraded" banners. */
-.notice {
-  padding: 0.85rem 1.1rem;
-  margin-bottom: 1rem;
-  color: #b56a00;
-  background: var(--warn-bg);
-  border-color: #efd6a6;
-}

src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/js/nav-state.js

@@ -1,18 +0,0 @@
-// Sidebar nav collapse state — persisted in the `scadabridge_nav` cookie so it
-// survives full page reloads and reconnects. Invoked from NavMenu.razor via
-// JS interop (window.navState.get / .set), mirroring window.treeviewStorage.
-window.navState = {
-    // Returns the raw cookie value (comma-separated expanded section ids), or
-    // an empty string when the cookie is absent.
-    get: function () {
-        const match = document.cookie.match(/(?:^|;\s*)scadabridge_nav=([^;]*)/);
-        return match ? decodeURIComponent(match[1]) : "";
-    },
-    // Writes the cookie with a one-year lifetime. SameSite=Lax; not HttpOnly
-    // (JS must write it) and not sensitive.
-    set: function (value) {
-        const oneYearSeconds = 60 * 60 * 24 * 365;
-        document.cookie = "scadabridge_nav=" + encodeURIComponent(value) +
-            ";path=/;max-age=" + oneYearSeconds + ";samesite=lax";
-    }
-};

src/ZB.MOM.WW.ScadaBridge.Host/Components/App.razor

@@ -7,7 +7,7 @@
     <title>ScadaBridge</title>
     <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
     <link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
-    <link href="_content/ZB.MOM.WW.ScadaBridge.CentralUI/css/theme.css" rel="stylesheet" />
+    <ThemeHead />
     <link href="/ZB.MOM.WW.ScadaBridge.Host.styles.css" rel="stylesheet" />
     <link href="_content/ZB.MOM.WW.ScadaBridge.CentralUI/css/site.css" rel="stylesheet" />
     <HeadOutlet @rendermode="InteractiveServer" />
@@ -77,7 +77,7 @@
         });
     </script>
     <script src="/js/treeview-storage.js"></script>
-    <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/nav-state.js"></script>
+    <ThemeScripts />
     <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/monaco-init.js"></script>
     <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/audit-grid.js"></script>
     <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/transport.js"></script>

src/ZB.MOM.WW.ScadaBridge.Host/_Imports.razor

@@ -6,3 +6,4 @@
 @using Microsoft.AspNetCore.Components.Web
 @using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using ZB.MOM.WW.ScadaBridge.CentralUI.Components.Shared
+@using ZB.MOM.WW.Theme

tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/ComponentRenderingTests.cs

@@ -34,7 +34,7 @@ public class ComponentRenderingTests : BunitContext
 
         // Verify submit button
         var submitButton = cut.Find("button[type='submit']");
-        Assert.Contains("Sign In", submitButton.TextContent);
+        Assert.Contains("Sign in", submitButton.TextContent);
     }
 
     [Fact]
@@ -42,7 +42,7 @@ public class ComponentRenderingTests : BunitContext
     {
         var cut = Render<Login>();
 
-        Assert.Throws<Bunit.ElementNotFoundException>(() => cut.Find("div.alert.alert-danger"));
+        Assert.Throws<Bunit.ElementNotFoundException>(() => cut.Find("div.panel.notice.login-error"));
     }
 
     [Fact]
@@ -69,7 +69,7 @@ public class ComponentRenderingTests : BunitContext
     {
         var cut = Render<Login>();
 
-        var title = cut.Find("h4.card-title");
-        Assert.Equal("ScadaBridge", title.TextContent);
+        var title = cut.Find("h1.login-title");
+        Assert.Contains("ScadaBridge", title.TextContent);
     }
 }

tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Layout/NavMenuTests.cs

@@ -11,26 +11,21 @@ using NavMenu = ZB.MOM.WW.ScadaBridge.CentralUI.Components.Layout.NavMenu;
 namespace ZB.MOM.WW.ScadaBridge.CentralUI.Tests.Layout;
 
 /// <summary>
-/// bUnit rendering tests for the sidebar <see cref="NavMenu"/>. They verify the
-/// collapsible section behaviour (sections collapsed by default, a toggle
-/// reveals a section's items and persists state to a cookie) and that the
-/// Notifications section's items are gated per-policy. The
-/// <c>AuthorizeView Policy=...</c> blocks evaluate the real policies, which
-/// require a claim of type <see cref="JwtTokenService.RoleClaimType"/> (the
-/// canonical <c>ZbClaimTypes.Role</c> framework URI), so the test principal
-/// carries claims of that exact type.
+/// bUnit rendering tests for the rail <see cref="NavMenu"/>. After the
+/// ZB.MOM.WW.Theme adoption (Task 2.4) the nav is composed of the kit's
+/// <c>NavRailSection</c> (a native <c>&lt;details&gt;</c> disclosure, expanded
+/// by default — no JS interop, works in static SSR) and <c>NavRailItem</c>
+/// links. These tests verify the structure (sections render as
+/// <c>details.rail-section</c>, not the old <c>button.nav-section-toggle</c>)
+/// and — the load-bearing security behaviour — that each section's items are
+/// gated by the correct authorization policy. The <c>AuthorizeView Policy=...</c>
+/// blocks evaluate the real policies, which require a claim of type
+/// <see cref="JwtTokenService.RoleClaimType"/> (the canonical
+/// <c>ZbClaimTypes.Role</c> framework URI), so the test principal carries
+/// claims of that exact type.
 /// </summary>
 public class NavMenuTests : BunitContext
 {
-    public NavMenuTests()
-    {
-        // NavMenu reads the nav-collapse cookie via the navState.get JS interop
-        // call in OnAfterRenderAsync and writes it via navState.set on toggle.
-        // Loose mode lets navState.get no-op (returns null) so the sidebar
-        // renders collapsed, and still records navState.set invocations.
-        JSInterop.Mode = JSRuntimeMode.Loose;
-    }
-
     /// <summary>
     /// Renders <see cref="NavMenu"/> under a principal holding the given roles.
     /// <see cref="NavMenu"/>'s top-level <c>AuthorizeView</c> requires the
@@ -44,7 +39,22 @@ public class NavMenuTests : BunitContext
         var claims = new List<Claim> { new(JwtTokenService.UsernameClaimType, "tester") };
         claims.AddRange(roles.Select(r => new Claim(JwtTokenService.RoleClaimType, r)));
 
+        // "TestAuth" authentication type → IsAuthenticated == true.
         var user = new ClaimsPrincipal(new ClaimsIdentity(claims, "TestAuth"));
+        return RenderWithPrincipal(user);
+    }
+
+    /// <summary>
+    /// Renders <see cref="NavMenu"/> with an anonymous (unauthenticated)
+    /// principal — a bare <see cref="ClaimsIdentity"/> with no authentication
+    /// type, so <c>IsAuthenticated == false</c> and every <c>AuthorizeView</c>
+    /// renders its (empty) <c>NotAuthorized</c>/fallthrough branch.
+    /// </summary>
+    private IRenderedComponent<NavMenu> RenderAnonymous()
+        => RenderWithPrincipal(new ClaimsPrincipal(new ClaimsIdentity()));
+
+    private IRenderedComponent<NavMenu> RenderWithPrincipal(ClaimsPrincipal user)
+    {
         Services.AddSingleton<AuthenticationStateProvider>(new TestAuthStateProvider(user));
         Services.AddAuthorizationCore();
         AuthorizationPolicies.AddScadaBridgeAuthorization(Services);
@@ -63,62 +73,46 @@ public class NavMenuTests : BunitContext
         return host.FindComponent<NavMenu>();
     }
 
-    /// <summary>
-    /// Clicks the collapsible section header whose title matches, expanding it.
-    /// </summary>
-    private static void ExpandSection(IRenderedComponent<NavMenu> cut, string title)
-    {
-        var toggle = cut.FindAll("button.nav-section-toggle")
-            .Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
-        toggle.Click();
-    }
-
     [Fact]
-    public void Sections_AreCollapsedByDefault()
+    public void Sections_RenderAsKitDetailsDisclosures_ExpandedByDefault()
     {
         var cut = RenderWithRoles("Administrator", "Designer", "Deployer");
 
         cut.WaitForAssertion(() =>
         {
-            // Section headers render unconditionally...
+            // Kit nav: sections are <details class="rail-section"> disclosures,
+            // NOT the old interactive button.nav-section-toggle.
+            Assert.Empty(cut.FindAll("button.nav-section-toggle"));
+            Assert.NotEmpty(cut.FindAll("details.rail-section"));
+
+            // Section eyebrows still render their titles.
             Assert.Contains(">Notifications<", cut.Markup);
             Assert.Contains(">Deployment<", cut.Markup);
-            // ...but their items stay out of the DOM until the section opens.
-            Assert.DoesNotContain("/notifications/smtp", cut.Markup);
-            Assert.DoesNotContain("/deployment/topology", cut.Markup);
+
+            // The kit's NavRailSection defaults to open, so items are in the DOM
+            // without any toggle/JS — this is the static-SSR-friendly behaviour.
+            Assert.Contains("/notifications/smtp", cut.Markup);
+            Assert.Contains("/deployment/topology", cut.Markup);
         });
     }
 
     [Fact]
-    public void TogglingSection_RevealsItsItems()
-    {
-        var cut = RenderWithRoles("Deployer");
-        Assert.DoesNotContain("/deployment/topology", cut.Markup);
-
-        ExpandSection(cut, "Deployment");
-
-        Assert.Contains("/deployment/topology", cut.Markup);
-        Assert.Contains("/deployment/deployments", cut.Markup);
-        Assert.Contains("/deployment/debug-view", cut.Markup);
-    }
-
-    [Fact]
-    public void TogglingSection_PersistsStateToCookie()
+    public void DeploymentSection_RendersAllItems_ForDeployer()
     {
         var cut = RenderWithRoles("Deployer");
 
-        ExpandSection(cut, "Deployment");
-
-        // Expanding wrote the cookie through the navState.set JS interop call.
-        var invocation = JSInterop.Invocations.Last(i => i.Identifier == "navState.set");
-        Assert.Equal("deployment", invocation.Arguments[0]);
+        cut.WaitForAssertion(() =>
+        {
+            Assert.Contains("/deployment/topology", cut.Markup);
+            Assert.Contains("/deployment/deployments", cut.Markup);
+            Assert.Contains("/deployment/debug-view", cut.Markup);
+        });
     }
 
     [Fact]
     public void NotificationsSection_ShowsAllItems_ForMultiRoleUser()
     {
         var cut = RenderWithRoles("Administrator", "Designer", "Deployer");
-        ExpandSection(cut, "Notifications");
 
         cut.WaitForAssertion(() =>
         {
@@ -134,7 +128,6 @@ public class NavMenuTests : BunitContext
     public void NotificationsSection_AdminOnlyUser_SeesOnlySmtp()
     {
         var cut = RenderWithRoles("Administrator");
-        ExpandSection(cut, "Notifications");
 
         cut.WaitForAssertion(() =>
         {
@@ -156,4 +149,60 @@ public class NavMenuTests : BunitContext
             Assert.DoesNotContain("/monitoring/notification-outbox", cut.Markup);
         });
     }
+
+    // ── AuthorizeView-gated SECTION visibility (the GAPS open question) ──────
+    // A whole NavRailSection wrapped in <AuthorizeView Policy="..."> must SHOW
+    // (heading + items) for an authorized principal and be entirely ABSENT for
+    // an unauthorized/anonymous one. The Audit section (OperationalAudit policy)
+    // is the witness — its heading lives inside the policy block, so a denied
+    // user must not even see the eyebrow.
+
+    [Fact]
+    public void PolicyGatedSection_IsVisible_ForAuthorizedPrincipal()
+    {
+        // OperationalAudit is satisfied by the Administrator role.
+        var cut = RenderWithRoles("Administrator");
+
+        cut.WaitForAssertion(() =>
+        {
+            Assert.Contains(">Audit<", cut.Markup);          // section heading present
+            Assert.Contains("/audit/log", cut.Markup);        // gated items present
+            Assert.Contains("/audit/configuration", cut.Markup);
+        });
+    }
+
+    [Fact]
+    public void PolicyGatedSection_IsAbsent_ForUnauthorizedPrincipal()
+    {
+        // Designer satisfies RequireDesign but NOT OperationalAudit.
+        var cut = RenderWithRoles("Designer");
+
+        cut.WaitForAssertion(() =>
+        {
+            Assert.DoesNotContain(">Audit<", cut.Markup);     // heading hidden, not just items
+            Assert.DoesNotContain("/audit/log", cut.Markup);
+            Assert.DoesNotContain("/audit/configuration", cut.Markup);
+        });
+    }
+
+    [Fact]
+    public void PolicyGatedSections_AllAbsent_ForAnonymousPrincipal()
+    {
+        var cut = RenderAnonymous();
+
+        cut.WaitForAssertion(() =>
+        {
+            // The Dashboard link is always-visible (outside every AuthorizeView)...
+            Assert.Contains("Dashboard", cut.Markup);
+            // ...but no policy-gated section or its items leak to an anonymous user.
+            Assert.DoesNotContain(">Admin<", cut.Markup);
+            Assert.DoesNotContain(">Design<", cut.Markup);
+            Assert.DoesNotContain(">Deployment<", cut.Markup);
+            Assert.DoesNotContain(">Notifications<", cut.Markup);
+            Assert.DoesNotContain(">Audit<", cut.Markup);
+            Assert.DoesNotContain("/admin/sites", cut.Markup);
+            Assert.DoesNotContain("/design/templates", cut.Markup);
+            Assert.DoesNotContain("/audit/log", cut.Markup);
+        });
+    }
 }

tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Pages/AuditLogPageScaffoldTests.cs

@@ -103,15 +103,18 @@ public class AuditLogPageScaffoldTests : BunitContext
     }
 
     /// <summary>
-    /// Clicks the collapsible section header whose title matches, expanding it.
-    /// Nav sections are collapsed by default, so a section's items are only in
-    /// the DOM once expanded.
+    /// Asserts the named rail section is present. After the ZB.MOM.WW.Theme
+    /// adoption (Task 2.4) nav sections are the kit's <c>NavRailSection</c> —
+    /// native <c>&lt;details class="rail-section"&gt;</c> disclosures that are
+    /// open by default, so a section's items are already in the DOM (no click
+    /// needed, no JS). This helper just confirms the section's
+    /// <c>summary.rail-eyebrow-toggle</c> eyebrow exists for the given title.
     /// </summary>
     private static void ExpandNavSection(IRenderedComponent<NavMenu> cut, string title)
     {
-        var toggle = cut.FindAll("button.nav-section-toggle")
-            .Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
-        toggle.Click();
+        Assert.Contains(
+            cut.FindAll("details.rail-section > summary.rail-eyebrow-toggle"),
+            s => s.TextContent.Contains(title, StringComparison.Ordinal));
     }
 
     [Fact]