@* Components/ThemeShell.razor — the one canonical side-rail chassis.
   Not a LayoutComponentBase: the app's thin MainLayout delegates to this.
   The narrow-viewport hamburger uses a CSS-only <details> disclosure (no
   Bootstrap JS): the rail is force-shown on lg+ and toggles via the native
   <details> open state below lg, so it works in pure static SSR. *@
@namespace ZB.MOM.WW.Theme
<details class="app-shell d-flex flex-column flex-lg-row" style="@AccentStyle">
    <summary class="rail-toggle btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
             aria-label="Toggle navigation">
        &#9776;
    </summary>
    <div class="theme-rail" id="theme-rail">
        <nav class="side-rail">
            <BrandBar Product="@Product" Logo="@Logo" />
            @Nav
            @if (RailFooter is not null)
            {
                <div class="rail-foot">@RailFooter</div>
            }
        </nav>
    </div>
    <main class="page">@ChildContent</main>
</details>

@code {
    /// <summary>
    /// Product name shown in the rail's <see cref="BrandBar"/> header. Required.
    /// </summary>
    [Parameter, EditorRequired] public string Product { get; set; } = string.Empty;

    /// <summary>
    /// Optional per-app accent colour. When set, emitted as <c>style="--accent: &lt;value&gt;"</c>
    /// on the shell root, overriding the <c>--accent</c> design token for this subtree only.
    /// This is the single per-app token override the kit allows (e.g. <c>"#2f855a"</c>).
    /// </summary>
    [Parameter] public string? Accent { get; set; }

    /// <summary>
    /// Optional custom logo rendered in the rail header. When omitted, the default
    /// brand glyph is shown.
    /// </summary>
    [Parameter] public RenderFragment? Logo { get; set; }

    /// <summary>
    /// Rail navigation content — typically <see cref="NavRailSection"/> /
    /// <see cref="NavRailItem"/> elements.
    /// </summary>
    [Parameter] public RenderFragment? Nav { get; set; }

    /// <summary>
    /// Optional content pinned to the bottom of the rail (e.g. session info / sign-out).
    /// </summary>
    [Parameter] public RenderFragment? RailFooter { get; set; }

    /// <summary>
    /// The page body — normally <c>@Body</c> forwarded from the app's <c>MainLayout</c>.
    /// </summary>
    [Parameter] public RenderFragment? ChildContent { get; set; }

    private string? AccentStyle => Accent is null ? null : $"--accent: {Accent}";
}
