/* /Components/Layout/NavMenu.razor.rz.scp.css */
/*
  Intentionally empty. These rules moved to wwwroot/css/app.css (global), because they
  target classes applied to <NavLink> — a child component, not a literal HTML element
  authored in this file. Blazor's CSS scoping (this file's mechanism) only attaches its
  scope attribute to elements literally written here; it doesn't reach a child component's
  own rendered root just because a class was set on the component tag. A bare selector like
  `.nav-item { ... }` scoped here would silently never match, breaking layout while nested
  literal markup (e.g. inline <svg> icons) still worked — global CSS has no such
  requirement, so anything targeting NavLink's class lives in app.css instead.
*/
/* /Components/Layout/TopBar.razor.rz.scp.css */
.top-bar[b-1r4emoh6jb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-0);
    position: sticky;
    top: 0;
    z-index: 10;
}
.top-bar__session[b-1r4emoh6jb] { display: flex; align-items: center; gap: var(--space-3); }
.top-bar__role[b-1r4emoh6jb] {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--accent-8); background: var(--accent-subtle-bg); border: 1px solid var(--accent-subtle-border);
    border-radius: var(--radius-sm); padding: 2px 7px;
}
.top-bar__email[b-1r4emoh6jb] { font-size: var(--text-sm); color: var(--text-secondary); }
.top-bar__avatar[b-1r4emoh6jb] {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface-3); border: 1px solid var(--border-default);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: 600; color: var(--text-primary);
}