/* Showcase-only doc-page chrome — not part of the Blazor/ style library itself,
   just the scaffolding every component page uses to show its variants labeled by
   the actual CSS class each one renders, plus a copyable code block. */

.fa-demo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0.75rem 0;
}

.fa-class-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.5rem 0 1.25rem;
    font-size: 0.85rem;
}

.fa-class-legend-row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.fa-class-legend-row .fa-class-legend-label {
    min-width: 9rem;
    color: var(--fa-text-muted);
}

.fa-class-legend-row code {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
}

/* LayoutShellsPage's boxed Position preview: .fa-sidebar-sticky/-floating's real
   height (calc(100vh - header-height), Blazor/wwwroot/css/scss/_layout.scss) is sized
   for an actual full page, where 100vh and the row wrapper's real height line up. Here
   the row wrapper sits inside a fixed-height (360px) scrollable box instead of the real
   viewport, so that 100vh-based height way overshoots it — the sidebar juts out past the
   footer instead of visibly sticking alongside the header/footer. Stretching it to the
   row wrapper's own height (like a non-positioned sidebar) fixes the demo without
   touching the library's real, correct-for-full-page rule.
*/
.fa-position-demo .fa-sidebar-sticky,
.fa-position-demo .fa-sidebar-floating {
    height: auto;
    align-self: stretch;
}

.fa-code-block {
    background: var(--fa-surface);
    border: var(--fa-border-width) solid var(--fa-border);
    border-radius: var(--fa-radius-md);
    padding: 0.9rem 1.1rem;
    overflow-x: auto;
    margin: 0.5rem 0 1.75rem;
}

    .fa-code-block code {
        font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
        font-size: 0.85rem;
        line-height: 1.55;
        color: var(--fa-text);
        white-space: pre;
    }

/* Page-template demo pages (FaDashboardTemplatePage, etc.) render outside the
   Showcase's own FaSidebarShell chrome (@layout EmptyLayout — a template supplies
   its own shell, or none at all for FaAuthTemplate), so they need their own way
   back and their own inline explanation that the shell's <main> padding would
   otherwise have provided for free. */
.fa-template-demo-back {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 50;
    background: var(--fa-surface);
    border: var(--fa-border-width) solid var(--fa-border);
    border-radius: var(--fa-radius-pill);
    padding: 0.4rem 0.9rem;
    font-family: var(--fa-font);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fa-primary-dark);
    text-decoration: none;
    box-shadow: var(--fa-border-glow);
}

.fa-template-demo-note {
    background: var(--fa-footer);
    border-radius: var(--fa-radius-md);
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    color: var(--fa-text-muted);
}

/* Every "<Component>: API" page's parameter reference table. Wide reference
   tables shouldn't force the whole page to scroll horizontally — each one
   scrolls in its own container instead, same reasoning FaGrid's own
   .fa-grid-table-wrap follows for its (differently-named, FaGrid-specific)
   overflow wrapper. Global here (not per-page scoped CSS) since every one of
   the ~46 component API pages reuses the exact same table look. */
.table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.table-wrap .fa-table {
    min-width: 640px;
}