/* /Components/Layout/MainLayout.razor.rz.scp.css */ .page[b-qkerchx8du] { display: flex; min-height: 100vh; } .sidebar[b-qkerchx8du] { width: 17.5rem; flex-shrink: 0; background: var(--bg-primary); border-right: 1px solid var(--border-secondary); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; transition: width 0.2s ease; } /* Collapsed icon rail — toggled via the sidebar button and persisted on (data-sidebar-collapsed). Blazor scopes only the trailing `.sidebar`, so the ancestor attribute selector matches the document root as written. */ html[data-sidebar-collapsed="true"] .sidebar[b-qkerchx8du] { width: 4.5rem; } main[b-qkerchx8du] { flex: 1; background: var(--bg-secondary); min-width: 0; /* Query container for the full-bleed sticky SectionFooter: lets the footer — nested inside the centred, max-width-capped .content — stretch to the full width of
via 100cqw. See layouts.css → .layout-page > .section-footer. inline-size containment only;
's width comes from the flex parent, so this has no effect on its own sizing, and fixed/locally-anchored overlays (dropdowns, modals) are unaffected. */ container-type: inline-size; } .content[b-qkerchx8du] { /* Tighter side gutters than before and a wider cap so the content doesn't float in a narrow centred column on large monitors. */ padding: var(--spacing-8) var(--spacing-8) var(--spacing-12); max-width: 100rem; /* 1600px */ margin-inline: auto; } .back-bar[b-qkerchx8du] { margin-bottom: var(--spacing-6); } .back-bar__link[b-qkerchx8du] { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); margin-left: calc(var(--spacing-3) * -1); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); text-decoration: none; border-radius: var(--radius-md); transition: color 0.15s ease, background-color 0.15s ease; } .back-bar__link:hover[b-qkerchx8du] { color: var(--text-primary); background: var(--bg-primary); } .back-bar__link:focus-visible[b-qkerchx8du] { outline: none; color: var(--text-primary); box-shadow: var(--shadow-focus-brand); } .back-bar__link svg[b-qkerchx8du] { width: 1rem; height: 1rem; transition: transform 0.2s ease; } .back-bar__link:hover svg[b-qkerchx8du] { transform: translateX(-3px); } /* iPad / tablet and below (≤1024px): the collapsed rail stays inline and narrow so content keeps full width; the EXPANDED sidebar overlays the content (fixed, shadowed) instead of squeezing it. The boot script defaults the stored state to collapsed under 1024px, so tablets open with the rail by default. */ @media (max-width: 64rem) { html:not([data-sidebar-collapsed="true"]) .sidebar[b-qkerchx8du] { position: fixed; z-index: 60; box-shadow: var(--shadow-lg); } .content[b-qkerchx8du] { padding: var(--spacing-6); } } @media (max-width: 40rem) { .content[b-qkerchx8du] { padding: var(--spacing-4) var(--spacing-4) var(--spacing-10); } } #blazor-error-ui[b-qkerchx8du] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-qkerchx8du] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/NavMenu.razor.rz.scp.css */ /* NavMenu — HMIS-specific tweaks on top of the shared .sidebar-nav-* component. Structural styles (items, section label, account card, footer) come from the global Styles/components/sidebar-navigation.css. */ /* ── Brand ── */ .nav-brand-mark[b-xxxsttds03] { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--radius-md, 0.5rem); color: var(--text-brand-primary, var(--fg-brand-primary)); background: var(--bg-brand-secondary, var(--bg-brand-primary)); } .nav-brand-mark svg[b-xxxsttds03] { width: 1.25rem; height: 1.25rem; } .nav-brand-text[b-xxxsttds03] { display: flex; flex-direction: column; min-width: 0; } .nav-brand-title[b-xxxsttds03] { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-text-sm); color: var(--text-primary); } .nav-brand-subtitle[b-xxxsttds03] { font-family: var(--font-family-body); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-text-xs); color: var(--text-tertiary); } /* ── Account card (read-only — no workspace switcher, so not interactive) ── */ .sidebar-nav-account.nav-account--static[b-xxxsttds03] { cursor: default; } .sidebar-nav-account.nav-account--static:hover[b-xxxsttds03] { background: var(--bg-primary-alt, var(--bg-primary)); } /* Initials avatar replaces the component's default avatar. */ .nav-account-avatar[b-xxxsttds03] { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full, 9999px); background: var(--bg-brand-secondary, var(--bg-secondary)); color: var(--text-brand-primary, var(--fg-brand-primary)); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); line-height: 1; text-transform: uppercase; } /* ── Logout — a POST