@import '_content/NAVR.SharedUI/NAVR.SharedUI.kvz9qoxkhf.bundle.scp.css';

/* /Components/Cms/BlockEditorShell.razor.rz.scp.css */
/* Block editor frame — scoped via Blazor CSS isolation. Palette variables only, so it follows the Admin theme
   (light / dark) and matches the Card, Header and Footer settings workspaces. Layout follows the width the block
   actually has (a size container), never the viewport alone, and never scrolls horizontally. */

.navr-block-editor[b-7b5eioi0ue] {
    --navr-be-accent: var(--mud-palette-primary);
    container: navr-block-editor / inline-size;
    min-width: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 4px solid var(--navr-be-accent);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navr-block-editor--richtext[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-info); }
.navr-block-editor--mediagallery[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-secondary); }
.navr-block-editor--cta[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-warning); }
.navr-block-editor--faq[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-tertiary); }
.navr-block-editor--testimonial[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-success); }
.navr-block-editor--whynarail[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-dark); }
.navr-block-editor--custom[b-7b5eioi0ue] { --navr-be-accent: var(--mud-palette-info); }

/* ── Header ── */
.navr-block-editor__head[b-7b5eioi0ue] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
}

.navr-block-editor--open > .navr-block-editor__head[b-7b5eioi0ue] {
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

/* ── Main header context colour (Page = blue, Article = green; tokens in wwwroot/app.css) ──
   The whole header band is highlighted so each block starts with a clearly visible heading, above the softer
   semantic sub-header colours of its groups. The radii follow the frame's inner edge (12px corner minus the 4px
   accent border at the start, 1px elsewhere) so the band never pokes past the rounded corners. */
.navr-block-editor--context > .navr-block-editor__head[b-7b5eioi0ue] {
    border-start-start-radius: 8px;
    border-start-end-radius: 11px;
    background: var(--navr-tone-head-bg);
}

.navr-block-editor--context:not(.navr-block-editor--open) > .navr-block-editor__head[b-7b5eioi0ue] {
    border-end-start-radius: 8px;
    border-end-end-radius: 11px;
}

.navr-block-editor--context.navr-block-editor--open > .navr-block-editor__head[b-7b5eioi0ue] {
    border-bottom-color: var(--navr-tone-line);
}

.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__icon[b-7b5eioi0ue] {
    background: color-mix(in srgb, var(--navr-be-accent) 14%, var(--mud-palette-surface));
}

/* The Page / Article badge carries the context colour, so the owner reads at a glance. */
.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__meta[b-7b5eioi0ue] {
    border-color: var(--navr-tone-line);
    font-weight: 600;
    color: var(--navr-tone-ink);
    background: var(--mud-palette-surface);
}

/* Neutral chips and the outlined Working Details button sit on the surface colour, crisp against the band. */
.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip:not(.navr-block-chip--ok):not(.navr-block-chip--warn) {
    background: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line);
}

.navr-block-editor--context > .navr-block-editor__head .navr-block-editor__head-actions[b-7b5eioi0ue]  .navr-block-editor__guide {
    background: var(--mud-palette-surface);
}

/* Block Number — the primary visual identity of the block (01, 02, …). A solid disc in the block's own accent,
   deepened so the white digits stay readable on every accent (warning orange included). min-width + padding let
   three-digit numbers (100+) widen into a pill instead of being clipped. */
.navr-block-editor__number[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #fff;
    background: color-mix(in srgb, var(--navr-be-accent) 72%, #000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--navr-be-accent) 18%, transparent);
    user-select: none;
}

.navr-block-editor__sr[b-7b5eioi0ue] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.navr-block-editor__icon[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: var(--navr-be-accent);
    background: color-mix(in srgb, var(--navr-be-accent) 12%, transparent);
}

.navr-block-editor__identity[b-7b5eioi0ue] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-block-editor__eyebrow[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.navr-block-editor__type[b-7b5eioi0ue] {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--navr-be-accent);
}

.navr-block-editor__meta[b-7b5eioi0ue] {
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.navr-block-editor__title[b-7b5eioi0ue] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-block-editor__description[b-7b5eioi0ue] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.navr-block-editor__chips[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

.navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip--ok {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.navr-block-editor__chips[b-7b5eioi0ue]  .navr-block-chip--warn {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.navr-block-editor__head-actions[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.navr-block-editor__actions[b-7b5eioi0ue] {
    display: inline-flex;
    align-items: center;
}

/* ── Body ── */
.navr-block-editor__body[b-7b5eioi0ue] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
    min-width: 0;
}

.navr-block-editor__toolbar[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.navr-block-editor__toolbar-label[b-7b5eioi0ue] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.navr-block-editor__toolbar-actions[b-7b5eioi0ue] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.navr-block-editor__groups[b-7b5eioi0ue] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* ── Save bar ── */
.navr-block-editor__savebar[b-7b5eioi0ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.navr-block-editor__savehint[b-7b5eioi0ue] {
    flex: 1 1 16rem;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.navr-block-editor__save[b-7b5eioi0ue] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Narrow blocks (tablet portrait / phone) ── */
@container navr-block-editor (max-width: 640px) {
    .navr-block-editor__head[b-7b5eioi0ue] {
        flex-wrap: wrap;
        gap: 0.625rem;
        padding: 0.75rem;
    }

    .navr-block-editor__number[b-7b5eioi0ue] {
        min-width: 2.375rem;
        height: 2.375rem;
        font-size: 1.0625rem;
    }

    .navr-block-editor__icon[b-7b5eioi0ue] {
        width: 2.125rem;
        height: 2.125rem;
    }

    /* Number + icon + two gaps sit beside the identity column. */
    .navr-block-editor__identity[b-7b5eioi0ue] {
        flex-basis: calc(100% - 5.875rem);
    }

    .navr-block-editor__head-actions[b-7b5eioi0ue] {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .navr-block-editor__body[b-7b5eioi0ue] {
        padding: 0.625rem 0.625rem 0.75rem;
    }

    .navr-block-editor__save[b-7b5eioi0ue] {
        flex: 1 1 100%;
    }

    .navr-block-editor__save[b-7b5eioi0ue]  .mud-button-root {
        flex: 1 1 auto;
    }
}

/* ── Phone-width blocks: the number stays; the decorative type icon steps aside (the type pill still names it). ── */
@container navr-block-editor (max-width: 400px) {
    .navr-block-editor__icon[b-7b5eioi0ue] {
        display: none;
    }

    .navr-block-editor__identity[b-7b5eioi0ue] {
        flex-basis: calc(100% - 3.125rem);
    }
}
/* /Components/Cms/BlockTemplateEditorForm.razor.rz.scp.css */
/* Block Template Fields — the Field Number badge (01, 02, …) beside each field's controls. Scoped via Blazor CSS
   isolation and drawn in the same visual language as the Page / Article Block Number (BlockEditorShell.razor.css):
   a solid disc in the Admin primary, deepened so the white digits stay readable, tabular digits, and a min-width
   that widens into a pill for 100+ instead of clipping. Palette variables only, so it follows light / dark. */

.navr-tf-row[b-62vqxsr1g8] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.navr-tf-number[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.375rem;
    /* MudGrid's spacing margin reaches past its box; keep the badge clear of the first control. */
    margin-inline-end: 0.5rem;
    border-radius: 999px;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #fff;
    background: color-mix(in srgb, var(--mud-palette-primary) 72%, #000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    user-select: none;
}

.navr-tf-sr[b-62vqxsr1g8] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The controls take the rest of the row and may shrink; nothing forces horizontal scrolling. */
.navr-tf-row[b-62vqxsr1g8]  .navr-tf-controls {
    flex: 1 1 auto;
    min-width: 0;
}

/* Below MudGrid's md breakpoint the controls stack; the badge stays at the top of the stack, beside the Label. */
@media (max-width: 959.98px) {
    .navr-tf-row[b-62vqxsr1g8] {
        align-items: flex-start;
    }

    .navr-tf-number[b-62vqxsr1g8] {
        margin-top: 0.5rem;
    }
}

/* Phone width: the badge leads the field on its own line, so the stacked controls keep their full width — beside
   them it would squeeze the Type / Required pair past the screen edge. */
@media (max-width: 599.98px) {
    .navr-tf-row[b-62vqxsr1g8] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .navr-tf-number[b-62vqxsr1g8] {
        align-self: flex-start;
        min-width: 2.375rem;
        height: 2.375rem;
        margin: 0.25rem 0 0 0.25rem;
        font-size: 1.0625rem;
    }

    /* Type and Required stack here (xs="12"), so the Required switch starts at the row's leading edge. MudSwitch pulls
       itself 11px outward so its thumb lines up with text; limit that to the field card's own padding (pa-2) so the
       switch's hover / focus circle stays inside the card instead of crossing its border. */
    .navr-tf-row[b-62vqxsr1g8]  .mud-switch {
        margin-inline-start: -0.5rem;
    }
}

/* ── Main header — the Block Template's highlighted heading band ──
   Same visual language as the Page / Article block header (BlockEditorShell.razor.css), in the template's own purple
   context colour. Tokens (navr-tone--template, --navr-tone-*) live in wwwroot/app.css, so light / dark follow the
   Admin theme. It wraps instead of scrolling: identity and actions stack on narrow screens. */
.navr-bt-head[b-62vqxsr1g8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 0.875rem;
    min-width: 0;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    border: 1px solid var(--navr-tone-line);
    border-inline-start: 4px solid var(--navr-tone);
    border-radius: 12px;
    background: var(--navr-tone-head-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navr-bt-head__icon[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: #fff;
    background: var(--navr-tone-solid);
}

.navr-bt-head__identity[b-62vqxsr1g8] {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-bt-head__eyebrow[b-62vqxsr1g8],
.navr-bt-head__chips[b-62vqxsr1g8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.navr-bt-head__type[b-62vqxsr1g8] {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--navr-tone-solid);
}

.navr-bt-head__meta[b-62vqxsr1g8] {
    min-width: 0;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--navr-tone-line);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--navr-tone-ink);
    background: var(--mud-palette-surface);
    overflow-wrap: anywhere;
}

.navr-bt-head__title[b-62vqxsr1g8] {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-bt-head__chip[b-62vqxsr1g8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line);
}

.navr-bt-head__actions[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.navr-bt-head__actions[b-62vqxsr1g8]  .mud-button-root {
    background: var(--mud-palette-surface);
}

/* ── Sub headers — Basic information / Fields (the settings groups of the template) ──
   Full-bleed across the top of their panel in the group's semantic tone (the same tone the block editor gives the
   same kind of group); the accent bar comes from the shared .navr-tone-bar. */
.navr-bt-subhead[b-62vqxsr1g8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
    min-height: 3.5rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--navr-tone-line);
    border-start-start-radius: var(--mud-default-borderradius, 4px);
    border-start-end-radius: var(--mud-default-borderradius, 4px);
    background: var(--navr-tone-bg-open);
}

.navr-bt-subhead__icon[b-62vqxsr1g8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-bt-subhead__title[b-62vqxsr1g8],
.navr-bt-subhead[b-62vqxsr1g8]  .navr-bt-subhead__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-bt-subhead[b-62vqxsr1g8]  .navr-bt-subhead__action {
    flex: 0 0 auto;
}

/* Narrow screens: the header band stacks — icon + identity, then the Working Details action on its own line. */
@media (max-width: 599.98px) {
    .navr-bt-head[b-62vqxsr1g8] {
        padding: 0.75rem;
    }

    .navr-bt-head__icon[b-62vqxsr1g8] {
        width: 2.125rem;
        height: 2.125rem;
    }

    .navr-bt-head__actions[b-62vqxsr1g8] {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .navr-bt-subhead[b-62vqxsr1g8] {
        padding-inline: 0.75rem;
    }
}
/* /Components/Cms/CardContentItem.razor.rz.scp.css */
/* One Card Content row — scoped via Blazor CSS isolation. Same visual language as the Card Settings workspace
   (CollapsibleSettingsSection): MudBlazor palette variables, 10px bordered containers, a primary-tinted open state.
   The row is its own size container, so the summary and the actions re-flow by the width the editor actually has
   (beside the Media panel, in a narrow drawer, on a phone) instead of the viewport. */

.navr-card-item[b-3au4y15vnd] {
    container-type: inline-size;
    list-style: none;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-card-item:hover[b-3au4y15vnd] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-card-item--expanded[b-3au4y15vnd] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Summary row ── */
.navr-card-item__row[b-3au4y15vnd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    border-radius: 9px;
}

.navr-card-item--expanded > .navr-card-item__row[b-3au4y15vnd] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

/* The whole summary is one real button: order, thumbnail and text are a single click / keyboard target. */
.navr-card-item__summary[b-3au4y15vnd] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.navr-card-item__summary:hover[b-3au4y15vnd] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-card-item__summary:focus[b-3au4y15vnd] {
    outline: none;
}

.navr-card-item__summary:focus-visible[b-3au4y15vnd] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.navr-card-item__order[b-3au4y15vnd] {
    flex: 0 0 auto;
    min-width: 2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.navr-card-item--expanded .navr-card-item__order[b-3au4y15vnd] {
    color: var(--mud-palette-primary);
}

.navr-card-item__thumb[b-3au4y15vnd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2.625rem;
    overflow: hidden;
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
}

.navr-card-item__thumb img[b-3au4y15vnd] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navr-card-item__text[b-3au4y15vnd] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-card-item__meta[b-3au4y15vnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
    min-width: 0;
}

/* Card type — a chip with a label, never colour alone. */
.navr-card-item__kind[b-3au4y15vnd],
.navr-card-item__chip[b-3au4y15vnd],
.navr-card-item__editing[b-3au4y15vnd] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navr-card-item__kind--image[b-3au4y15vnd] {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.navr-card-item__kind--text[b-3au4y15vnd] {
    color: var(--mud-palette-info, #2196f3);
    background: color-mix(in srgb, var(--mud-palette-info, #2196f3) 12%, transparent);
}

.navr-card-item__kind--missing[b-3au4y15vnd] {
    color: var(--mud-palette-warning-darken, #b26a00);
    background: color-mix(in srgb, var(--mud-palette-warning, #ff9800) 16%, transparent);
}

.navr-card-item__chip[b-3au4y15vnd] {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    padding-block: 0;
}

.navr-card-item__editing[b-3au4y15vnd] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.navr-card-item__title[b-3au4y15vnd] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navr-card-item__title--empty[b-3au4y15vnd] {
    font-weight: 500;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.navr-card-item__desc[b-3au4y15vnd] {
    font-size: 0.78125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navr-card-item__media[b-3au4y15vnd] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 16rem;
    font-size: 0.71875rem;
    line-height: 1.4;
    color: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.5));
}

.navr-card-item__media-name[b-3au4y15vnd] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Actions ── */
.navr-card-item__actions[b-3au4y15vnd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.navr-card-item__actions[b-3au4y15vnd]  .navr-card-item__edit {
    margin-inline: 0.25rem;
    min-width: 5.5rem;
}

/* ── Editor (only the card being edited) ── */
.navr-card-item__editor[b-3au4y15vnd] {
    min-width: 0;
    padding: 0.75rem 0.875rem 0.875rem;
}

/* Narrow rows (a phone, or a narrow editor column): actions move under the summary, full width, so the title and
   description keep their room and every action stays a comfortable touch target. */
@container (max-width: 520px) {
    .navr-card-item__row[b-3au4y15vnd] {
        flex-wrap: wrap;
        padding: 0.5rem;
    }

    .navr-card-item__summary[b-3au4y15vnd] {
        flex-basis: 100%;
        gap: 0.5rem;
    }

    .navr-card-item__order[b-3au4y15vnd] {
        min-width: 1.5rem;
    }

    .navr-card-item__thumb[b-3au4y15vnd] {
        width: 3rem;
        height: 2.25rem;
    }

    .navr-card-item__actions[b-3au4y15vnd] {
        flex-basis: 100%;
        justify-content: flex-end;
        padding-top: 0.25rem;
        border-top: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    }

    .navr-card-item__actions[b-3au4y15vnd]  .navr-card-item__edit {
        margin-inline-start: auto;
    }

    /* Inline padding stays >= the editor MudGrid's 12px negative gutter, so its fields never poke past the card. */
    .navr-card-item__editor[b-3au4y15vnd] {
        padding: 0.625rem 0.75rem 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-card-item[b-3au4y15vnd] {
        transition: none;
    }
}
/* /Components/Cms/CardContentList.razor.rz.scp.css */
/* Card Content workspace shell — scoped via Blazor CSS isolation, in the Card Settings workspace's visual language. */

.navr-card-list[b-zqes6oc3bl] {
    margin-top: 0.5rem;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.navr-card-list--open[b-zqes6oc3bl] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-card-list__header[b-zqes6oc3bl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
}

.navr-card-list--open > .navr-card-list__header[b-zqes6oc3bl] {
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
    border-start-start-radius: 9px;
    border-start-end-radius: 9px;
}

.navr-card-list__toggle[b-zqes6oc3bl] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.375rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.navr-card-list__toggle:hover[b-zqes6oc3bl] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-card-list__toggle:focus[b-zqes6oc3bl] {
    outline: none;
}

.navr-card-list__toggle:focus-visible[b-zqes6oc3bl] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.navr-card-list__icon[b-zqes6oc3bl] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.navr-card-list__heading[b-zqes6oc3bl] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-card-list__chevron[b-zqes6oc3bl] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s ease;
}

.navr-card-list--open .navr-card-list__chevron[b-zqes6oc3bl] {
    transform: rotate(180deg);
}

.navr-card-list__body[b-zqes6oc3bl] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.75rem;
}

.navr-card-list__hint[b-zqes6oc3bl] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.navr-card-list__items[b-zqes6oc3bl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.navr-card-list__empty[b-zqes6oc3bl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    border-radius: 10px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.navr-card-list__empty-title[b-zqes6oc3bl] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-card-list__empty-text[b-zqes6oc3bl] {
    margin: 0 0 0.5rem;
    font-size: 0.78125rem;
    line-height: 1.45;
    max-width: 32rem;
}

@media (max-width: 599.98px) {
    .navr-card-list__body[b-zqes6oc3bl] {
        padding: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-card-list__chevron[b-zqes6oc3bl] {
        transition: none;
    }
}
/* /Components/Cms/CardPresentationPanel.razor.rz.scp.css */
/* Card & Gallery settings workspace — scoped via Blazor CSS isolation.
   The workspace is a size container, so its two-column layout follows the width the editor actually has (the
   Admin sidebar open or closed, a laptop or a wide monitor) instead of the viewport. */

.navr-card-workspace[b-zsg7czn07j] {
    container-type: inline-size;
    min-width: 0;
}

/* Narrow: one column, live preview first so the result is visible without scrolling past thirteen groups. */
.navr-card-workspace__layout[b-zsg7czn07j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.navr-card-workspace__settings[b-zsg7czn07j] {
    min-width: 0;
    order: 2;
}

.navr-card-workspace__preview[b-zsg7czn07j] {
    min-width: 0;
    order: 1;
}

.navr-card-workspace__toolbar[b-zsg7czn07j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.navr-card-workspace__sections[b-zsg7czn07j] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* ── Live preview ── */
.navr-card-workspace__preview-inner[b-zsg7czn07j] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.navr-card-workspace__preview-head[b-zsg7czn07j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-primary);
}

.navr-card-workspace__preview-title[b-zsg7czn07j] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

/* A neutral stage so the card's own surface, border and shadow read clearly against it. */
.navr-card-workspace__preview-stage[b-zsg7czn07j] {
    padding: 1rem;
    border-radius: 8px;
    background: var(--mud-palette-background-grey, #f5f5f5);
    overflow: hidden;
}

/* The card container is laid out the way the public gallery lays out ONE cell (CustomBlockSection.razor.css
   .cblock__gallery): a grid whose card is a grid item, so the card's own justify-self / width / media-only sizing
   rules behave exactly as on the site. Roughly one gallery column wide, so the sample card has realistic
   proportions even when the preview spans the full width on a tablet, and does not push the settings far down. */
.navr-card-preview[b-zsg7czn07j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 24rem;
    margin-inline: auto;
    min-width: 0;
}

/* Card presentation "Card width": the public track becomes min(card width, 100%) wide, placed by the horizontal
   alignment — the same expression here, so a configured width is visible in the preview instead of ignored. */
.navr-card-preview.cblock__gallery--fixed-w[b-zsg7czn07j] {
    grid-template-columns: min(var(--nc-card-w, 320px), 100%);
    justify-content: var(--nc-grid-justify, center);
    max-width: 100%;
}

.navr-card-workspace__preview-hint[b-zsg7czn07j] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Wide: settings left, preview right and sticky, so every change is visible next to the control that made it. */
@container (min-width: 860px) {
    .navr-card-workspace__layout[b-zsg7czn07j] {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 34%);
        align-items: start;
    }

    .navr-card-workspace__settings[b-zsg7czn07j] {
        order: 1;
    }

    .navr-card-workspace__preview[b-zsg7czn07j] {
        order: 2;
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + 1rem);
    }

    .navr-card-workspace__preview-inner[b-zsg7czn07j] {
        max-height: calc(100vh - var(--mud-appbar-height, 64px) - 2rem);
        overflow-y: auto;
    }
}
/* /Components/Cms/CmsBackgroundSection.razor.rz.scp.css */
/* Background section — swatch grid, image preview and picker. Scoped via Blazor CSS isolation. */

.cms-bg-swatches[b-1qfcz6zyub] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cms-bg-swatch[b-1qfcz6zyub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 5.25rem;
    padding: 0.35rem;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 0.6rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.cms-bg-swatch:hover[b-1qfcz6zyub] {
    border-color: rgba(0, 0, 0, 0.18);
}

.cms-bg-swatch--on[b-1qfcz6zyub] {
    border-color: #1f5130;
    background: rgba(31, 81, 48, 0.07);
}

.cms-bg-swatch__chip[b-1qfcz6zyub] {
    display: block;
    width: 100%;
    height: 2.1rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.cms-bg-swatch__label[b-1qfcz6zyub] {
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.cms-bg-preview[b-1qfcz6zyub] {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 0.6rem;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #eee 0 8px, #f8f8f8 8px 16px);
}

.cms-bg-preview img[b-1qfcz6zyub] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-bg-preview__empty[b-1qfcz6zyub] {
    font-size: 0.78rem;
    opacity: 0.7;
}

.cms-bg-picker[b-1qfcz6zyub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.4rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.6rem;
}

.cms-bg-picker__item[b-1qfcz6zyub] {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.45rem;
    overflow: hidden;
    cursor: pointer;
    background: none;
    aspect-ratio: 4 / 3;
}

.cms-bg-picker__item--on[b-1qfcz6zyub] {
    border-color: #1f5130;
}

.cms-bg-picker__item img[b-1qfcz6zyub] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cms-bg-sources[b-1qfcz6zyub] {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
}

.cms-bg-sources li[b-1qfcz6zyub] {
    margin-bottom: 0.2rem;
}

.cms-bg-sources span[b-1qfcz6zyub] {
    opacity: 0.75;
}
/* /Components/Cms/CmsPublishBar.razor.rz.scp.css */
/* Publishing strip — scoped via Blazor CSS isolation. The same palette and radius as the Block Editor frame and the
   shared dialogs; a coloured start border says pending (amber), live (green) or informational (blue). Wraps to a
   stacked layout on narrow screens and never scrolls horizontally. */

.navr-publish-bar[b-zj7150p9lv] {
    --navr-pb-accent: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.875rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 4px solid var(--navr-pb-accent);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navr-publish-bar--pending[b-zj7150p9lv] { --navr-pb-accent: var(--mud-palette-warning); }
.navr-publish-bar--live[b-zj7150p9lv] { --navr-pb-accent: var(--mud-palette-success); }
.navr-publish-bar--info[b-zj7150p9lv] { --navr-pb-accent: var(--mud-palette-info); }

.navr-publish-bar__icon[b-zj7150p9lv] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: var(--navr-pb-accent);
    background: color-mix(in srgb, var(--navr-pb-accent) 13%, transparent);
}

.navr-publish-bar__status[b-zj7150p9lv] {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-publish-bar__badges[b-zj7150p9lv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.navr-publish-bar__message[b-zj7150p9lv] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-publish-bar__status[b-zj7150p9lv]  .navr-publish-bar__progress {
    max-width: 16rem;
}

.navr-publish-bar__actions[b-zj7150p9lv] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 599.98px) {
    .navr-publish-bar[b-zj7150p9lv] {
        padding: 0.625rem 0.75rem;
    }

    .navr-publish-bar__icon[b-zj7150p9lv] {
        width: 2.125rem;
        height: 2.125rem;
    }

    .navr-publish-bar__status[b-zj7150p9lv] {
        flex-basis: calc(100% - 3rem);
    }

    .navr-publish-bar__actions[b-zj7150p9lv] {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .navr-publish-bar__actions[b-zj7150p9lv]  .mud-button-root:not(.mud-icon-button) {
        flex: 1 1 auto;
    }
}
/* /Components/Cms/ContentBlockEditor.razor.rz.scp.css */
/* Content block editor — scoped styles for the pieces inside the Block Editor groups: the media workspace, the Why
   Narail card list, the template card-settings summary and small tags / empty states. Palette variables only, sized
   by the width each area actually has, never wider than its group. MudBlazor components are reached with ::deep. */

/* ── Small shared pieces ── */
.cbe-tag[b-efudo8bzth] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.cbe-tag--muted[b-efudo8bzth] {
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    color: var(--mud-palette-text-secondary);
    background: transparent;
}

.cbe-tag--ok[b-efudo8bzth] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
}

.cbe-tag--warn[b-efudo8bzth] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

.cbe-note[b-efudo8bzth] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.cbe-empty[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 10px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-empty__title[b-efudo8bzth] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-empty__text[b-efudo8bzth] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ── Text colour field with a live swatch ── */
.cbe-color[b-efudo8bzth] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.cbe-color__swatch[b-efudo8bzth] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
    background-size: 10px 10px;
}

.cbe-color[b-efudo8bzth]  .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── List heading (count + add) ── */
.cbe-list-head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cbe-list-head__count[b-efudo8bzth] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ── Why Narail feature cards ── */
.cbe-why-cards[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cbe-why-card[b-efudo8bzth] {
    container: cbe-why-card / inline-size;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.cbe-why-card--hidden[b-efudo8bzth] {
    border-style: dashed;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-why-card__head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.cbe-why-card__icon[b-efudo8bzth] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    font-size: 1.125rem;
    background: var(--mud-palette-surface);
}

.cbe-why-card__name[b-efudo8bzth] {
    flex: 1 1 8rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cbe-why-card__number[b-efudo8bzth] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.cbe-why-card__label[b-efudo8bzth] {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.cbe-why-card__tools[b-efudo8bzth] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
}

.cbe-why-card__fields[b-efudo8bzth] {
    display: grid;
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.75rem 0.75rem;
}

.cbe-why-card__desc[b-efudo8bzth] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

@container cbe-why-card (max-width: 30rem) {
    .cbe-why-card__fields[b-efudo8bzth],
    .cbe-why-card__desc[b-efudo8bzth] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cbe-why-card__tools[b-efudo8bzth] {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

/* ── Custom: media field notes, gallery field sections, template settings summary ── */
.cbe-field-note[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
}

.cbe-field-note__label[b-efudo8bzth] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-field-note__hint[b-efudo8bzth] {
    flex: 1 1 12rem;
    font-size: 0.75rem;
}

.cbe-gallery-field[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.cbe-gallery-field + .cbe-gallery-field[b-efudo8bzth] {
    padding-top: 0.875rem;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.cbe-gallery-field__head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-primary);
}

.cbe-gallery-field__title[b-efudo8bzth] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-template-settings[b-efudo8bzth] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-template-settings__head[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
}

.cbe-template-settings__title[b-efudo8bzth] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.cbe-template-settings__list[b-efudo8bzth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}

.cbe-template-settings__list dt[b-efudo8bzth] {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.cbe-template-settings__list dd[b-efudo8bzth] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.cbe-template-settings__note[b-efudo8bzth] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ── Media workspace ── */
.cbe-media[b-efudo8bzth] {
    container: cbe-media / inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.cbe-media__toolbar[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.cbe-media__summary[b-efudo8bzth] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cbe-media__toolbar[b-efudo8bzth]  .cbe-media__target {
    flex: 1 1 12rem;
    max-width: 18rem;
}

.cbe-media__actions[b-efudo8bzth] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-inline-start: auto;
}

.cbe-media__fields[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cbe-media__grid[b-efudo8bzth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cbe-media__grid--single[b-efudo8bzth] {
    grid-template-columns: minmax(0, 22rem);
}

.cbe-media-item[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.cbe-media-item__thumb[b-efudo8bzth] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.cbe-media-item__thumb img[b-efudo8bzth],
.cbe-media-item__thumb video[b-efudo8bzth] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbe-media-item__badge[b-efudo8bzth] {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-start: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
}

.cbe-media-item__order[b-efudo8bzth] {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.cbe-media-item__body[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem 0.25rem;
    min-width: 0;
}

.cbe-media-item__name[b-efudo8bzth] {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.cbe-media-item__actions[b-efudo8bzth] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-top: auto;
    padding: 0.25rem 0.375rem;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.cbe-media-item__spacer[b-efudo8bzth] {
    flex: 1 1 auto;
}

/* ── Media library picker ── */
.cbe-library[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.cbe-library__head[b-efudo8bzth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cbe-library__title[b-efudo8bzth] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cbe-library__hint[b-efudo8bzth] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cbe-library__selection[b-efudo8bzth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cbe-library__grid[b-efudo8bzth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
    gap: 0.625rem;
}

.cbe-library__tile[b-efudo8bzth] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.25rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.cbe-library__tile--selected[b-efudo8bzth] {
    border: 2px solid var(--mud-palette-primary);
    padding: calc(0.25rem - 1px);
}

.cbe-library__pick[b-efudo8bzth] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.cbe-library__pick:focus-visible[b-efudo8bzth] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cbe-library__pick img[b-efudo8bzth],
.cbe-library__pick video[b-efudo8bzth] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbe-library__check[b-efudo8bzth] {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    display: inline-flex;
    border-radius: 50%;
    background: var(--mud-palette-surface);
}

.cbe-library__name[b-efudo8bzth] {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-secondary);
}

.cbe-library__tile-actions[b-efudo8bzth] {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

@container cbe-media (max-width: 34rem) {
    .cbe-media__actions[b-efudo8bzth] {
        margin-inline-start: 0;
        width: 100%;
    }

    .cbe-media__actions[b-efudo8bzth]  .mud-button-root {
        flex: 1 1 auto;
    }

    .cbe-media__toolbar[b-efudo8bzth]  .cbe-media__target {
        max-width: none;
        flex-basis: 100%;
    }

    .cbe-media__grid--single[b-efudo8bzth] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Cms/PublishDialog.razor.rz.scp.css */
/* Publish / Versions dialog content — scoped via Blazor CSS isolation. The frame and section cards come from
   AdminDialogFrame / AdminDialogSection; this file styles what is specific to publishing: the warning, the two version
   cards, the history list (its own scroll area) and the publish button. Palette variables only; nothing scrolls
   horizontally at any width. */

.pd-loading[b-fcy36cdaqn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0.25rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* ── 1. Warning ── */
.pd-warning[b-fcy36cdaqn] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
}

.pd-warning[b-fcy36cdaqn]  .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

.pd-warning > div[b-fcy36cdaqn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.55;
}

.pd-warning strong[b-fcy36cdaqn] {
    font-weight: 600;
}

/* ── 2. Version cards ── */
.pd-versions[b-fcy36cdaqn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.625rem;
}

.pd-card[b-fcy36cdaqn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-top: 3px solid var(--pd-card-accent, var(--mud-palette-lines-default));
    border-radius: 10px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.pd-card--draft[b-fcy36cdaqn] { --pd-card-accent: var(--mud-palette-warning); }
.pd-card--live[b-fcy36cdaqn] { --pd-card-accent: var(--mud-palette-success); }

.pd-card__head[b-fcy36cdaqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
}

.pd-card__label[b-fcy36cdaqn] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pd-card__version[b-fcy36cdaqn] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.pd-card__version--none[b-fcy36cdaqn] {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.pd-card__empty[b-fcy36cdaqn] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.pd-card__facts[b-fcy36cdaqn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.pd-card__facts > div[b-fcy36cdaqn] {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.pd-card__facts dt[b-fcy36cdaqn] {
    color: var(--mud-palette-text-secondary);
}

.pd-card__facts dd[b-fcy36cdaqn] {
    margin: 0;
    min-width: 0;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* ── 6. History: its own scroll area ── */
.pd-count[b-fcy36cdaqn] {
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.05));
}

.pd-history[b-fcy36cdaqn] {
    position: relative;
    max-height: min(18rem, 40dvh);
    margin: 0;
    padding: 0.25rem 0.25rem 0.25rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.pd-history:focus-visible[b-fcy36cdaqn] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.pd-history__item[b-fcy36cdaqn] {
    --pd-dot: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.3));
    position: relative;
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem 0.5rem 0.25rem;
}

.pd-history__item + .pd-history__item[b-fcy36cdaqn] {
    border-top: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.pd-history__item--draft[b-fcy36cdaqn] { --pd-dot: var(--mud-palette-warning); }
.pd-history__item--live[b-fcy36cdaqn] { --pd-dot: var(--mud-palette-success); }

.pd-history__item--live[b-fcy36cdaqn] {
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

.pd-history__dot[b-fcy36cdaqn] {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.4375rem;
    border-radius: 50%;
    background: var(--pd-dot);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-dot) 22%, transparent);
}

.pd-history__main[b-fcy36cdaqn] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pd-history__row[b-fcy36cdaqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.pd-history__version[b-fcy36cdaqn] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.pd-history__meta[b-fcy36cdaqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.875rem;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

.pd-history__note[b-fcy36cdaqn] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    .pd-card__facts > div[b-fcy36cdaqn] {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
/* /Components/Cms/TemplateBackgroundSection.razor.rz.scp.css */
/* Template Background section — scoped via Blazor CSS isolation. Same visual language as the settings sections
   (CollapsibleSettingsSection) and the card workspace preview: MudBlazor palette variables only, so it follows the
   Admin theme (light / dark). Mobile first: one column, the preview stacks under the controls. */

.navr-tbg[b-ztts29x8c9] {
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    min-width: 0;
}

/* ── Header ── */
.navr-tbg__header[b-ztts29x8c9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-start-start-radius: 9px;
    border-start-end-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.navr-tbg__icon[b-ztts29x8c9] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.navr-tbg__heading[b-ztts29x8c9] {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-tbg__title[b-ztts29x8c9] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-tbg__purpose[b-ztts29x8c9] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-tbg__scope[b-ztts29x8c9] {
    flex: 0 0 auto;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* ── Toned header (Block Template editor) — the "design & layout" group takes the shared mint content tone
   (tokens in wwwroot/app.css), matching the Section header group of the Page / Article block editor. ── */
.navr-tbg--toned[b-ztts29x8c9] {
    border-color: color-mix(in srgb, var(--navr-tone) 48%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-tbg--toned > .navr-tbg__header[b-ztts29x8c9] {
    position: relative;
    border-bottom-color: var(--navr-tone-line);
    background: var(--navr-tone-bg-open);
}

.navr-tbg--toned > .navr-tbg__header .navr-tbg__icon[b-ztts29x8c9] {
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-tbg--toned > .navr-tbg__header .navr-tbg__scope[b-ztts29x8c9] {
    border-color: var(--navr-tone-line);
    background: var(--mud-palette-surface);
}

/* ── Body ── */
.navr-tbg__body[b-ztts29x8c9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

/* The settings column sizes to its own content — it is never stretched to match the preview. */
.navr-tbg__controls[b-ztts29x8c9] {
    min-width: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.navr-tbg__field[b-ztts29x8c9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.navr-tbg__label[b-ztts29x8c9] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Source buttons: a segmented control that wraps on narrow screens. */
.navr-tbg__sources[b-ztts29x8c9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.navr-tbg__source[b-ztts29x8c9] {
    flex: 1 1 9rem;
    min-width: 0;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.navr-tbg__source:hover[b-ztts29x8c9] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-tbg__source:focus-visible[b-ztts29x8c9],
.navr-tbg__swatch:focus-visible[b-ztts29x8c9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-tbg__source--on[b-ztts29x8c9] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.navr-tbg__count[b-ztts29x8c9] {
    min-width: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.25rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

/* Current colour row */
.navr-tbg__current[b-ztts29x8c9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.75rem;
    min-width: 0;
}

.navr-tbg__swatch[b-ztts29x8c9] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px var(--mud-palette-surface);
    cursor: pointer;
}

.navr-tbg__value[b-ztts29x8c9] {
    flex: 1 1 10rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.navr-tbg__name[b-ztts29x8c9] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-tbg__code[b-ztts29x8c9] {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
}

.navr-tbg__detail[b-ztts29x8c9] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* Choose Color above Reset to Automatic, right of the selected colour. */
.navr-tbg__actions[b-ztts29x8c9] {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

/* About / help area */
.navr-tbg__about[b-ztts29x8c9] {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 7%, transparent);
    min-width: 0;
}

.navr-tbg__about[b-ztts29x8c9]  .navr-tbg__about-icon {
    flex: 0 0 auto;
    margin-top: 0.0625rem;
    color: var(--mud-palette-info);
}

.navr-tbg__about-text[b-ztts29x8c9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-tbg__about-head[b-ztts29x8c9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
}

.navr-tbg__about-lang[b-ztts29x8c9] {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    overflow: hidden;
}

.navr-tbg__about-lang-btn[b-ztts29x8c9] {
    padding: 0.0625rem 0.625rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.6875rem;
    line-height: 1.5;
    cursor: pointer;
}

.navr-tbg__about-lang-btn--on[b-ztts29x8c9] {
    background: color-mix(in srgb, var(--mud-palette-info) 16%, transparent);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.navr-tbg__about-lang-btn:focus-visible[b-ztts29x8c9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.navr-tbg__about-title[b-ztts29x8c9] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-tbg__about-text p[b-ztts29x8c9] {
    margin: 0;
    font-size: 0.78125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* ── Preview ── */
.navr-tbg__preview[b-ztts29x8c9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.navr-tbg__preview-head[b-ztts29x8c9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-primary);
}

.navr-tbg__preview-title[b-ztts29x8c9] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

/* The stage IS the section: its background is the Template Background (inline style), the card inside keeps its
   own Card Background. A dashed outline marks the section's edge so a white section is still visible. */
.navr-tbg__stage[b-ztts29x8c9] {
    display: flex;
    border-radius: 8px;
    outline: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    outline-offset: -1px;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.navr-tbg__sample[b-ztts29x8c9] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;               /* centred in the stage, yet never clipped when the stage scrolls */
    padding: 1rem;
    min-width: 0;
    width: 100%;
}

/* The card container, laid out like one public gallery cell (see CardPresentationPanel.razor.css). */
.navr-tbg__sample .navr-card-preview[b-ztts29x8c9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 23rem;               /* one public gallery cell (~3 columns of the 72rem section); the inline zoom scales it */
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
    text-align: start;
}

.navr-tbg__sample .navr-card-preview.cblock__gallery--fixed-w[b-ztts29x8c9] {
    grid-template-columns: min(var(--nc-card-w, 320px), 100%);
    justify-content: var(--nc-grid-justify, center);
    max-width: 100%;
}

.navr-tbg__preview-hint[b-ztts29x8c9] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Wide: controls beside the preview. The SETTINGS decide the section height: the preview is size-contained, so its
   (possibly tall) card never stretches the panel — it fills the row the settings create (with a sensible
   minimum) and scrolls inside its own stage when the card is taller. */
@media (min-width: 960px) {
    .navr-tbg__body[b-ztts29x8c9] {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .navr-tbg__preview[b-ztts29x8c9] {
        contain: size;
        min-height: 30rem;
    }

    .navr-tbg__stage[b-ztts29x8c9] {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .navr-tbg__preview-hint[b-ztts29x8c9] {
        flex: 0 0 auto;
    }
}

/* Tablet / mobile: settings and preview stack; the preview keeps a sensible cap and scrolls inside itself. */
@media (max-width: 959.98px) {
    .navr-tbg__stage[b-ztts29x8c9] {
        max-height: 24rem;
        overflow: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 599.98px) {
    .navr-tbg__header[b-ztts29x8c9],
    .navr-tbg__body[b-ztts29x8c9] {
        padding-inline: 0.75rem;
    }

    .navr-tbg__preview[b-ztts29x8c9] {
        padding: 0.75rem;
    }

    .navr-tbg__actions[b-ztts29x8c9] {
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-tbg__source[b-ztts29x8c9],
    .navr-tbg__stage[b-ztts29x8c9] {
        transition: none;
    }
}
/* /Components/Pages/Appearance/CursorSettings.razor.rz.scp.css */
/* Component-scoped styles for Admin → Appearance → Cursor Settings.
   Page chrome uses MudBlazor palette variables so it re-themes with the Admin theme. The preview box sets its
   own --navr-theme-primary/--navr-gold so the engine's "theme" colour resolves inside it exactly as it would
   on the public site. The custom cursor itself is drawn by the shared navr-cursor.css — nothing here styles it. */

.cur-head[b-26p0q5jsi8] { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cur-head__title[b-26p0q5jsi8] { flex: 1 1 320px; min-width: 0; }
.cur-head__intro[b-26p0q5jsi8] { opacity: .7; max-width: 78ch; margin-top: 4px; }
.cur-hint[b-26p0q5jsi8] { display: block; opacity: .62; }

.cur-layout[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 960px) {
    .cur-layout[b-26p0q5jsi8] { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
    .cur-preview-col[b-26p0q5jsi8] { position: sticky; top: 76px; }
}

.cur-settings[b-26p0q5jsi8] { min-width: 0; }

.cur-panel[b-26p0q5jsi8] {
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.cur-panel__head[b-26p0q5jsi8] { margin-bottom: 8px; }
.cur-panel__toggle[b-26p0q5jsi8] { margin-left: -8px; }
.cur-inline[b-26p0q5jsi8] { padding: 4px 16px 10px; }

.cur-slider[b-26p0q5jsi8] { padding: 2px 4px; }
.cur-slider__label[b-26p0q5jsi8] { display: flex; justify-content: space-between; font-size: .85rem; opacity: .85; }

/* ── gallery filters (100 presets / 50 icons) ── */
.cur-filters[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}
.cur-count[b-26p0q5jsi8] { text-align: right; margin-bottom: 6px; }

/* ── preset gallery ── */
.cur-presets[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.cur-preset[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    padding: 10px;
    text-align: left;
    color: inherit;
    font: inherit;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cur-preset:hover[b-26p0q5jsi8] { transform: translateY(-1px); border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider)); }
.cur-preset.is-selected[b-26p0q5jsi8] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.cur-preset__body[b-26p0q5jsi8] { grid-row: 1; grid-column: 2; min-width: 0; }
.cur-preset__name[b-26p0q5jsi8] { display: block; font-weight: 600; font-size: .9rem; }
.cur-preset__desc[b-26p0q5jsi8] { display: block; font-size: .74rem; opacity: .65; line-height: 1.3; }
.cur-preset__family[b-26p0q5jsi8] {
    grid-row: 2; grid-column: 2;
    justify-self: start;
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

/* Tiny CSS-only thumbnail per family: the same three parts (dot / ring / ring2) styled by data-family. */
.cur-preset__thumb[b-26p0q5jsi8] {
    grid-row: 1 / span 2; grid-column: 1;
    position: relative;
    width: 56px; height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)), var(--mud-palette-surface));
    --p: var(--mud-palette-primary);
    --a: var(--mud-palette-secondary, #c9a227);
}
.cur-preset__thumb > i[b-26p0q5jsi8] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
.cur-preset__dot[b-26p0q5jsi8]  { width: 7px; height: 7px; border-radius: 50%; background: var(--p); }
.cur-preset__ring[b-26p0q5jsi8] { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--p); }
.cur-preset__ring2[b-26p0q5jsi8] { display: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--a); opacity: .6; }

.cur-preset__thumb[data-family="dot"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="dot"] .cur-preset__dot[b-26p0q5jsi8] { width: 14px; height: 14px; }
.cur-preset__thumb[data-family="ring"] .cur-preset__dot[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="dual"] .cur-preset__ring2[b-26p0q5jsi8],
.cur-preset__thumb[data-family="signature"] .cur-preset__ring2[b-26p0q5jsi8] { display: block; }
.cur-preset__thumb[data-family="signature"] .cur-preset__dot[b-26p0q5jsi8] { background: var(--a); box-shadow: 0 0 6px var(--a); }
.cur-preset__thumb[data-family="spotlight"] .cur-preset__ring[b-26p0q5jsi8] { border: 0; width: 40px; height: 40px; background: radial-gradient(circle, color-mix(in srgb, var(--p) 45%, transparent), transparent 70%); }
.cur-preset__thumb[data-family="lens"] .cur-preset__ring[b-26p0q5jsi8] { width: 32px; height: 32px; background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.05)); border-color: var(--a); }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 0; border: 0; }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::before,
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--p); transform: translate(-50%, -50%); }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::before { width: 100%; height: 1.5px; }
.cur-preset__thumb[data-family="crosshair"] .cur-preset__ring[b-26p0q5jsi8]::after { width: 1.5px; height: 100%; }
.cur-preset__thumb[data-family="arrow"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="arrow"] .cur-preset__dot[b-26p0q5jsi8] { width: 0; height: 0; border-radius: 0; background: none; border-left: 8px solid var(--p); border-top: 4px solid transparent; border-bottom: 12px solid transparent; transform: translate(-40%, -60%) rotate(-25deg); }
.cur-preset__thumb[data-family="hand"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="hand"] .cur-preset__dot[b-26p0q5jsi8] { width: 14px; height: 18px; border-radius: 6px 6px 8px 8px; background: var(--p); }
.cur-preset__thumb[data-family="trail"] .cur-preset__ring[b-26p0q5jsi8] { display: none; }
.cur-preset__thumb[data-family="trail"] .cur-preset__dot[b-26p0q5jsi8] { width: 10px; height: 10px; box-shadow: -9px 4px 0 -1px color-mix(in srgb, var(--p) 70%, transparent), -17px 9px 0 -2px color-mix(in srgb, var(--p) 45%, transparent), -24px 15px 0 -3px color-mix(in srgb, var(--p) 25%, transparent); }
.cur-preset__thumb[data-family="orbit"] .cur-preset__ring2[b-26p0q5jsi8] { display: block; border-color: transparent; }
.cur-preset__thumb[data-family="orbit"] .cur-preset__ring2[b-26p0q5jsi8]::before { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--a); }
.cur-preset__thumb[data-family="morph"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
.cur-preset__thumb[data-family="square"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 4px; rotate: 45deg; }
.cur-preset__thumb[data-family="square"] .cur-preset__dot[b-26p0q5jsi8] { border-radius: 2px; }
.cur-preset__thumb[data-family="icon"] .cur-preset__ring[b-26p0q5jsi8] { border-radius: 6px; border-style: dashed; }

/* ── icon picker (Mode = icon) ── */
.cur-icons[b-26p0q5jsi8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.cur-icon[b-26p0q5jsi8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    color: inherit;
    font: inherit;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cur-icon:hover[b-26p0q5jsi8] { transform: translateY(-1px); border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider)); }
.cur-icon.is-selected[b-26p0q5jsi8] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.cur-icon__art[b-26p0q5jsi8] { display: block; width: 32px; height: 32px; color: var(--mud-palette-primary); }
.cur-icon__art svg[b-26p0q5jsi8] { display: block; width: 100%; height: 100%; }
.cur-icon__name[b-26p0q5jsi8] {
    font-size: .68rem;
    line-height: 1.15;
    text-align: center;
    opacity: .78;
    overflow-wrap: anywhere;
}

/* ── live preview ── */
.cur-preview-head[b-26p0q5jsi8] { margin-bottom: 8px; }

.cur-preview[b-26p0q5jsi8] {
    --navr-theme-primary: var(--mud-palette-primary);
    --navr-gold: #c9a227;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider));
    background: var(--mud-palette-background);
    min-height: 320px;
    overflow: hidden;
}

.cur-preview__text[b-26p0q5jsi8] { margin: 0; font-size: .9rem; line-height: 1.5; }
.cur-preview__text a[b-26p0q5jsi8] { color: var(--mud-palette-primary); text-decoration: underline; }
.cur-preview__row[b-26p0q5jsi8] { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }

.cur-preview__btn[b-26p0q5jsi8],
.cur-preview__cta[b-26p0q5jsi8] {
    font: inherit;
    font-size: .82rem;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-primary);
    background: transparent;
    color: var(--mud-palette-primary);
    text-decoration: none;
}
.cur-preview__btn[disabled][b-26p0q5jsi8] { opacity: .45; }
.cur-preview__cta[b-26p0q5jsi8] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); }

.cur-preview__card[b-26p0q5jsi8] {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}
.cur-preview__card-body[b-26p0q5jsi8] { padding: 8px 10px; font-size: .8rem; display: flex; flex-direction: column; gap: 2px; }
.cur-preview__img[b-26p0q5jsi8] { display: block; width: 100%; height: 72px; object-fit: cover; }

.cur-preview__hit[b-26p0q5jsi8] {
    flex: 1 1 130px;
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: none;
    font: inherit;
}
.cur-preview__hit .cur-preview__img[b-26p0q5jsi8] { height: 100%; min-height: 110px; }
.cur-preview__hit-label[b-26p0q5jsi8] {
    position: absolute; left: 8px; bottom: 8px;
    font-size: .7rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(0,0,0,.55); color: #fff;
}

.cur-preview__car[b-26p0q5jsi8] {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    overflow: hidden;
    user-select: none;
}
.cur-preview__car span[b-26p0q5jsi8] { flex: 0 0 56px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.cur-preview__car em[b-26p0q5jsi8] { position: absolute; right: 10px; bottom: 6px; font-size: .68rem; font-style: normal; opacity: .6; }

.cur-preview__input[b-26p0q5jsi8] {
    font: inherit;
    font-size: .85rem;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: inherit;
}

.cur-foot[b-26p0q5jsi8] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 24px 0 8px;
    margin-top: 20px;
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Components/Pages/Appearance/FooterManagement.razor.rz.scp.css */
/* Footer Management — page-specific pieces of the settings workspace (master switch, template gallery, the link /
   social / policy lists). Scoped via Blazor CSS isolation; MudBlazor palette variables only. */

/* ── Master switch ── */
.ftr-master[b-46b6a27icn] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 40%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-success);
}

.ftr-master--off[b-46b6a27icn] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    color: var(--mud-palette-warning);
}

.ftr-master[b-46b6a27icn]  .ftr-master__icon {
    margin-top: 0.625rem;
}

.ftr-master__text[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--mud-palette-text-primary);
}

.ftr-master__hint[b-46b6a27icn] {
    margin-top: -0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ── Templates ── */
.ftr-template-bar[b-46b6a27icn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ftr-template-bar__actions[b-46b6a27icn] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ftr-templates[b-46b6a27icn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
    gap: 0.625rem;
    min-width: 0;
}

.ftr-custom-template[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.ftr-custom-template__name[b-46b6a27icn] {
    font-size: 0.8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ftr-custom-template__description[b-46b6a27icn] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.ftr-custom-template__actions[b-46b6a27icn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* ── Lists: link columns, social links, policy links ── */
.ftr-list[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.ftr-list__head[b-46b6a27icn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.ftr-list__hint[b-46b6a27icn] {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.ftr-list__empty[b-46b6a27icn] {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.ftr-card[b-46b6a27icn] {
    min-width: 0;
    padding: 0.5rem 0.625rem 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 3px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.ftr-card__row[b-46b6a27icn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.ftr-card__title[b-46b6a27icn] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ftr-card__tools[b-46b6a27icn],
.ftr-link__tools[b-46b6a27icn] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.ftr-card__fields[b-46b6a27icn] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 0.5rem 0.75rem;
    align-items: start;
    min-width: 0;
}

.ftr-card__switch[b-46b6a27icn] {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.ftr-card__links[b-46b6a27icn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
    list-style: none;
}

.ftr-link[b-46b6a27icn] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.375rem 0 0.375rem 0.75rem;
    border-inline-start: 2px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
}

.ftr-link--boxed[b-46b6a27icn] {
    padding: 0.5rem 0.5rem 0.25rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}

.ftr-link__tools[b-46b6a27icn] {
    padding-top: 0.25rem;
}

/* Narrow: the row tools move under the fields instead of squeezing them. */
@container (max-width: 30rem) {
    .ftr-link[b-46b6a27icn] {
        flex-direction: column;
    }
}

.ftr-preview-off[b-46b6a27icn] {
    font-weight: 600;
    color: var(--mud-palette-warning);
}
/* /Components/Pages/Appearance/HeaderManagement.razor.rz.scp.css */
/* Header Management — page-specific pieces of the settings workspace (preset gallery, Navigation Menu editor).
   Scoped via Blazor CSS isolation; MudBlazor palette variables only, so it follows the Admin theme. */

.hdr-presets[b-w52rrncsrw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
    gap: 0.625rem;
    min-width: 0;
}

/* ── Navigation Menu editor ── */
.hdr-menu[b-w52rrncsrw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.hdr-menu__head[b-w52rrncsrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.hdr-menu__hint[b-w52rrncsrw] {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__empty[b-w52rrncsrw] {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__list[b-w52rrncsrw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* Nesting is shown by a left indent (capped so a deep tree never pushes fields off a phone) and a lighter rail. */
.hdr-menu__item[b-w52rrncsrw] {
    min-width: 0;
    margin-inline-start: min(calc(var(--hdr-depth, 0) * 1.25rem), 3.75rem);
    padding: 0.5rem 0.625rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-inline-start: 3px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.hdr-menu__item--top[b-w52rrncsrw] {
    border-inline-start-color: var(--mud-palette-primary);
}

.hdr-menu__row[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.hdr-menu__spacer[b-w52rrncsrw] {
    flex: 0 0 30px;
    width: 30px;
}

.hdr-menu__title[b-w52rrncsrw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.hdr-menu__tag[b-w52rrncsrw] {
    flex: 0 0 auto;
    padding: 0 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__tools[b-w52rrncsrw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.hdr-menu__fields[b-w52rrncsrw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 0.5rem 0.75rem;
    align-items: start;
    margin-top: 0.25rem;
    min-width: 0;
}

.hdr-menu__switch[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.hdr-menu__media[b-w52rrncsrw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
    min-width: 0;
}

.hdr-menu__thumb[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.hdr-menu__thumb img[b-w52rrncsrw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hdr-menu__media-actions[b-w52rrncsrw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.hdr-menu__media[b-w52rrncsrw]  .hdr-menu__desc {
    grid-column: 1 / -1;
    min-width: 0;
}

@container (min-width: 36rem) {
    .hdr-menu__media[b-w52rrncsrw] {
        grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr);
    }

    .hdr-menu__media[b-w52rrncsrw]  .hdr-menu__desc {
        grid-column: auto;
    }
}

.hdr-menu__picker[b-w52rrncsrw] {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}

.hdr-menu__picker-head[b-w52rrncsrw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.hdr-menu__library[b-w52rrncsrw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    max-height: 16rem;
    overflow: auto;
}

.hdr-menu__asset[b-w52rrncsrw] {
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
    cursor: pointer;
}

.hdr-menu__asset:focus-visible[b-w52rrncsrw] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.hdr-menu__asset--selected[b-w52rrncsrw] {
    border: 2px solid var(--mud-palette-primary);
}

.hdr-menu__asset img[b-w52rrncsrw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* /Components/Pages/Appearance/ThemeSettings.razor.rz.scp.css */
/* Component-scoped styles for Admin → Appearance → Theme Settings.
   Two colour systems live here and never mix:
   - the PAGE chrome uses MudBlazor palette variables, so the screen re-themes with the active Admin theme;
   - the CARD MINIATURES use only the --t-* variables set inline per card from that theme's own tokens, so a
     card always shows its own theme and never the one the Admin panel happens to be wearing.
   No global selector is touched. */

/* ── page chrome ───────────────────────────────────────────────────────────── */

.thm-head[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.thm-head__title[b-jkeyrh94tp] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; }
.thm-head__count[b-jkeyrh94tp] { opacity: .58; }

.thm-panel[b-jkeyrh94tp] {
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
}

.thm-panel__intro[b-jkeyrh94tp] { opacity: .7; margin-bottom: 18px; max-width: 78ch; }
.thm-panel__switch[b-jkeyrh94tp] { margin-top: 6px; }

/* Toolbar rows collapse from three columns to one without a width-specific rule. */
.thm-row[b-jkeyrh94tp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.thm-avail[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

.thm-avail__text[b-jkeyrh94tp] { flex: 1 1 260px; min-width: 0; }
.thm-avail__hint[b-jkeyrh94tp] { display: block; opacity: .6; }
.thm-avail__actions[b-jkeyrh94tp] { display: flex; gap: 8px; flex: 0 0 auto; }

.thm-foot[b-jkeyrh94tp] {
    display: flex;
    justify-content: flex-end;
    padding: 24px 0 8px;
    margin-top: 24px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ── the catalogue grid ────────────────────────────────────────────────────── */
/* auto-fill with a fixed minimum keeps the card's internal proportions constant and lets the column count
   fall 5 → 4 → 3 → 2 → 1 on its own. Nothing here is tied to a specific viewport width. */
.thm-grid[b-jkeyrh94tp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 16px;
}

.thm-card[b-jkeyrh94tp] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.thm-card:hover[b-jkeyrh94tp] { border-color: var(--mud-palette-primary); box-shadow: 0 10px 26px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.thm-card.is-admin[b-jkeyrh94tp] { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
/* Released state is marked POSITIVELY, on the card's own chrome — a tinted footer strip and a firmer border.
   Dimming or desaturating the miniature instead would have been easier to scan but would misrepresent the one
   thing the card exists to show: the theme's real colours. The checkbox and its label carry the same state in
   words, so it is never communicated by colour alone. */
.thm-card:not(.is-muted)[b-jkeyrh94tp] { border-color: var(--mud-palette-primary); }
.thm-card:not(.is-muted) .thm-card__release[b-jkeyrh94tp] { background: var(--mud-palette-primary-hover); }
.thm-card:not(.is-muted) .thm-card__release span[b-jkeyrh94tp] { opacity: 1; font-weight: 600; }

.thm-card__apply[b-jkeyrh94tp] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    font: inherit;
    text-align: left;
    background: transparent;
}

.thm-card__apply:focus-visible[b-jkeyrh94tp] { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }

/* ── the miniature (painted only from --t-* tokens) ────────────────────────── */

.thm-mock[b-jkeyrh94tp] {
    display: block;
    background: var(--t-bg);
    color: var(--t-text);
    font-size: 7.5px;
    line-height: 1.35;
    user-select: none;
}

.thm-mock__bar[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    background: var(--t-appbar);
    color: var(--t-on-appbar);
    font-size: 6.5px;
}

.thm-mock__mark[b-jkeyrh94tp] { width: 7px; height: 7px; border-radius: 2px; background: var(--t-tertiary); flex: 0 0 auto; }
.thm-mock__barlabel[b-jkeyrh94tp] { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.thm-mock__win[b-jkeyrh94tp] { letter-spacing: 2px; opacity: .75; flex: 0 0 auto; }

/* The card's headline. Coloured with the theme's primary, which is the single strongest signal of identity. */
.thm-mock__heading[b-jkeyrh94tp] {
    display: block;
    padding: 7px 10px 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--t-primary);
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thm-mock__heading b[b-jkeyrh94tp] { font-weight: 700; opacity: .85; }

.thm-mock__body[b-jkeyrh94tp] { display: grid; grid-template-columns: 34% 1fr; min-height: 88px; }

.thm-mock__side[b-jkeyrh94tp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 0;
    background: var(--t-drawer);
    border-right: 1px solid var(--t-line);
}

.thm-mock__nav[b-jkeyrh94tp] { padding: 3px 8px; color: var(--t-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thm-mock__nav.is-active[b-jkeyrh94tp] { background: var(--t-active); color: var(--t-text); font-weight: 600; }

.thm-mock__main[b-jkeyrh94tp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 9px 8px;
    background: var(--t-surface);
}

.thm-mock__label[b-jkeyrh94tp] { color: var(--t-text2); font-size: 6.5px; }

/* The nine-shade ramp: the theme's primary → secondary → tertiary, ordered darkest first. */
.thm-mock__ramp[b-jkeyrh94tp] { display: flex; gap: 2px; }
.thm-mock__chip[b-jkeyrh94tp] { flex: 1 1 0; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--t-line); }

.thm-mock__btns[b-jkeyrh94tp] { display: flex; gap: 4px; }
.thm-mock__foot[b-jkeyrh94tp] { display: flex; gap: 4px; justify-content: flex-end; margin-top: auto; padding-top: 4px; }

.thm-mock__btn[b-jkeyrh94tp] {
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 6.5px;
    font-weight: 600;
    white-space: nowrap;
}

.thm-mock__btn--primary[b-jkeyrh94tp] { background: var(--t-primary); color: var(--t-on-primary); }
.thm-mock__btn--ghost[b-jkeyrh94tp] { background: transparent; color: var(--t-primary); box-shadow: inset 0 0 0 1px var(--t-primary); }
.thm-mock__btn--plain[b-jkeyrh94tp] { background: transparent; color: var(--t-text2); box-shadow: inset 0 0 0 1px var(--t-line); }

/* ── card footer: identity, tags, state, release toggle ────────────────────── */

.thm-card__meta[b-jkeyrh94tp] { display: flex; align-items: center; gap: 8px; padding: 9px 11px 0; }

.thm-card__name[b-jkeyrh94tp] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thm-card__num[b-jkeyrh94tp] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.thm-card__tags[b-jkeyrh94tp] { display: inline-flex; gap: 4px; flex: 0 0 auto; }

.thm-tag[b-jkeyrh94tp] {
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .72;
    white-space: nowrap;
}

.thm-card__badges[b-jkeyrh94tp] { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 11px 0; }

.thm-badge[b-jkeyrh94tp] {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.thm-badge--admin[b-jkeyrh94tp] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.thm-badge--default[b-jkeyrh94tp] { background: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); }

.thm-card__release[b-jkeyrh94tp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px 11px 10px;
    font-size: .78rem;
    cursor: pointer;
    min-height: 36px;
}

.thm-card__release input[b-jkeyrh94tp] { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; accent-color: var(--mud-palette-primary); }
.thm-card__release input:disabled[b-jkeyrh94tp] { cursor: default; }
.thm-card__release input:focus-visible[b-jkeyrh94tp] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.thm-card__release span[b-jkeyrh94tp] { opacity: .78; }
.thm-card__release input:disabled + span[b-jkeyrh94tp] { opacity: .5; }

/* ── responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .thm-grid[b-jkeyrh94tp] { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
    .thm-panel[b-jkeyrh94tp] { padding: 16px; }
}

@media (max-width: 560px) {
    /* One column below ~560px: two cards plus the gutter no longer fit, and shrinking them further would make
       the miniature illegible rather than merely small. The single card is then wide enough to carry a larger
       type scale, which is what the rules below do. */
    .thm-grid[b-jkeyrh94tp] { grid-template-columns: 1fr; }
    .thm-mock[b-jkeyrh94tp] { font-size: 9px; }
    .thm-mock__heading[b-jkeyrh94tp] { font-size: 15px; }
    .thm-mock__label[b-jkeyrh94tp], .thm-mock__btn[b-jkeyrh94tp], .thm-mock__bar[b-jkeyrh94tp] { font-size: 8px; }
    .thm-mock__body[b-jkeyrh94tp] { min-height: 112px; }
    .thm-card__release[b-jkeyrh94tp] { min-height: 44px; }
    .thm-card__release input[b-jkeyrh94tp] { width: 18px; height: 18px; }
    .thm-avail__actions[b-jkeyrh94tp] { width: 100%; }
    .thm-avail__actions .mud-button-root[b-jkeyrh94tp] { flex: 1 1 0; }
    .thm-foot .mud-button-root[b-jkeyrh94tp] { width: 100%; }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Client Storage Overview — scoped. Clean white cards, rounded corners, subtle shadows; MudBlazor palette variables only,
   so the Dashboard follows the Admin theme (light / dark). Mobile first: everything stacks, then widens. */

.navr-dash[b-7trigi19rc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Header ── */
.navr-dash__header[b-7trigi19rc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.navr-dash__heading[b-7trigi19rc] {
    min-width: 0;
    flex: 1 1 18rem;
}

.navr-dash__title[b-7trigi19rc] {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-dash__subtitle[b-7trigi19rc] {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-dash__live[b-7trigi19rc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.navr-dash__status[b-7trigi19rc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.navr-dash__dot[b-7trigi19rc] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
}

.navr-dash__status--live[b-7trigi19rc] {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
}

.navr-dash__status--live .navr-dash__dot[b-7trigi19rc] {
    animation: navr-dash-pulse-b-7trigi19rc 2s ease-in-out infinite;
}

.navr-dash__status--stale[b-7trigi19rc],
.navr-dash__status--loading[b-7trigi19rc] {
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.navr-dash__status--unavailable[b-7trigi19rc] {
    color: var(--mud-palette-error-darken, var(--mud-palette-error));
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}

@keyframes navr-dash-pulse-b-7trigi19rc {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.navr-dash__live[b-7trigi19rc]  .navr-dash__refresh--spin .mud-icon-root {
    animation: navr-dash-spin-b-7trigi19rc 0.9s linear infinite;
}

@keyframes navr-dash-spin-b-7trigi19rc {
    to { transform: rotate(360deg); }
}

.navr-dash__updated[b-7trigi19rc] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.navr-dash__updated-label[b-7trigi19rc] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__updated-value[b-7trigi19rc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* ── Summary cards ──
   ONE grid for all eight cards (storage row, then content row): every card sits on the same column tracks with the same
   horizontal and vertical gap, and grid-auto-rows: 1fr gives every row the same height. */
.navr-dash__cards[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;
}

/* Pastel card language (tone tokens in wwwroot/app.css): soft semantic fill, matching border, a coloured accent at the
   inline start and a soft shadow. The fill is mixed into the theme surface, so light and dark mode both stay readable. */
.navr-dash__card[b-7trigi19rc],
.navr-dash__panel[b-7trigi19rc] {
    border: 1px solid var(--navr-tone-line, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)));
    border-inline-start: 4px solid var(--navr-tone, var(--mud-palette-primary));
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
    min-width: 0;
}

.navr-dash__card[b-7trigi19rc] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    background: var(--navr-tone-bg, var(--mud-palette-surface));
}

.navr-dash__card-icon[b-7trigi19rc] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line);
}

.navr-dash__card-body[b-7trigi19rc] {
    min-width: 0;
}

.navr-dash__card-title[b-7trigi19rc] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__card-value[b-7trigi19rc] {
    margin: 0.15rem 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-dash__card-hint[b-7trigi19rc] {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Analytics panels ── */
.navr-dash__grid[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Panels: a lighter wash of the same tone than the cards, so tables, charts and lists keep a calm background. Each panel
   is a size container, so its inner layout follows the width it actually has (main column or right column). */
.navr-dash__panel[b-7trigi19rc] {
    container-type: inline-size;
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--navr-tone-panel, var(--mud-palette-surface));
}

.navr-dash__panel--wide[b-7trigi19rc] {
    grid-column: 1 / -1;
}

.navr-dash__panel-title[b-7trigi19rc] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dash__panel-title[b-7trigi19rc]  .mud-icon-root {
    box-sizing: content-box;
    padding: 0.375rem;
    border-radius: 8px;
    color: var(--navr-tone-ink, var(--mud-palette-primary));
    background: var(--navr-tone-chip, transparent);
    box-shadow: inset 0 0 0 1px var(--navr-tone-line, transparent);
}

/* ── Main column + right column ── */
.navr-dash__layout[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    min-width: 0;
}

.navr-dash__aside[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 1rem;
    min-width: 0;
}

/* Donut + legend */
.navr-dash__usage[b-7trigi19rc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
}

.navr-dash__legend[b-7trigi19rc] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.navr-dash__legend-row[b-7trigi19rc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.navr-dash__legend-row dt[b-7trigi19rc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__legend-row dd[b-7trigi19rc] {
    margin: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.navr-dash__legend-row--total[b-7trigi19rc] {
    border-bottom: 0;
    padding-bottom: 0;
}

.navr-dash__legend-row--total dt[b-7trigi19rc] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dash__swatch[b-7trigi19rc] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
}

.navr-dash__swatch--used[b-7trigi19rc] { background: var(--mud-palette-primary); }
.navr-dash__swatch--reserved[b-7trigi19rc] { background: var(--mud-palette-warning); }
.navr-dash__swatch--available[b-7trigi19rc] { background: color-mix(in srgb, var(--mud-palette-success) 55%, transparent); }

/* Purposes */
.navr-dash__purposes[b-7trigi19rc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.navr-dash__purpose[b-7trigi19rc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.navr-dash__purpose-icon[b-7trigi19rc] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.navr-dash__purpose-icon--audio[b-7trigi19rc] { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent); }
.navr-dash__purpose-icon--video[b-7trigi19rc] { color: var(--mud-palette-secondary); background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent); }
.navr-dash__purpose-icon--document[b-7trigi19rc] { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }
.navr-dash__purpose-icon--other[b-7trigi19rc] { color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent); }

.navr-dash__purpose-body[b-7trigi19rc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navr-dash__purpose-head[b-7trigi19rc] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.navr-dash__purpose-name[b-7trigi19rc] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dash__purpose-pct[b-7trigi19rc] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.navr-dash__purpose-meta[b-7trigi19rc] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__empty[b-7trigi19rc],
.navr-dash__note[b-7trigi19rc] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Table — real <table> semantics; on phones the (only four) columns stay inside the card. */
.navr-dash__table-wrap[b-7trigi19rc] {
    width: 100%;
    overflow-x: auto;
}

.navr-dash__table[b-7trigi19rc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.navr-dash__table caption[b-7trigi19rc] {
    caption-side: bottom;
    padding-top: 0.5rem;
    text-align: start;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__table th[b-7trigi19rc],
.navr-dash__table td[b-7trigi19rc] {
    padding: 0.6rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
    color: var(--mud-palette-text-primary);
}

.navr-dash__table thead th[b-7trigi19rc] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}

.navr-dash__table tbody th[b-7trigi19rc] {
    font-weight: 500;
}

.navr-dash__table .num[b-7trigi19rc] {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.navr-dash__table tfoot th[b-7trigi19rc],
.navr-dash__table tfoot td[b-7trigi19rc] {
    font-weight: 700;
    border-top: 2px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.16));
    border-bottom: 0;
}

/* Progress */
.navr-dash__progress-head[b-7trigi19rc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    color: var(--mud-palette-text-primary);
}

.navr-dash__progress-head span:last-child[b-7trigi19rc] {
    color: var(--mud-palette-text-secondary);
}

.navr-dash__health[b-7trigi19rc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    color: var(--navr-dash-health);
    background: color-mix(in srgb, var(--navr-dash-health) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--navr-dash-health) 28%, transparent);
}

.navr-dash__health--plenty[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-success); }
.navr-dash__health--moderate[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-info); }
.navr-dash__health--low[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-warning); }
.navr-dash__health--nearlyfull[b-7trigi19rc],
.navr-dash__health--full[b-7trigi19rc] { --navr-dash-health: var(--mud-palette-error); }

.navr-dash__health-title[b-7trigi19rc] {
    margin: 0;
    font-weight: 700;
}

.navr-dash__health-text[b-7trigi19rc] {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.navr-dash__limits[b-7trigi19rc] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.navr-dash__limits-title[b-7trigi19rc] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.navr-dash__limit-list[b-7trigi19rc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.navr-dash__limit-list li[b-7trigi19rc] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.navr-dash__limit-list strong[b-7trigi19rc] {
    color: var(--mud-palette-text-primary);
}

.navr-dash__readonly[b-7trigi19rc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Breakpoints ── */
@media (min-width: 600px) {
    .navr-dash__cards[b-7trigi19rc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Donut beside its legend when the panel itself has room (it may sit in the narrower main column next to the aside). */
@container (min-width: 26rem) {
    .navr-dash__usage[b-7trigi19rc] {
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    }
}

/* Tablet / small desktop: the right-column panels sit side by side under the main panels. */
@media (min-width: 760px) {
    .navr-dash__aside[b-7trigi19rc] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    }
}

@media (min-width: 1100px) {
    .navr-dash__cards[b-7trigi19rc] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .navr-dash__grid[b-7trigi19rc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop: the lower dashboard uses the SAME four equal tracks and gap as the summary-card grid above (both grids span
   the full .navr-dash width), so the grid lines run straight down: the storage and content panels span columns 1–3 and
   Quick Actions / Recent Pages / Recent Articles sit exactly in column 4, under the Total Files and Users cards. */
@media (min-width: 1280px) {
    .navr-dash__layout[b-7trigi19rc] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .navr-dash__grid[b-7trigi19rc] {
        grid-column: 1 / span 3;
    }

    .navr-dash__aside[b-7trigi19rc] {
        grid-column: 4;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-dash__status--live .navr-dash__dot[b-7trigi19rc],
    .navr-dash__live[b-7trigi19rc]  .navr-dash__refresh--spin .mud-icon-root {
        animation: none;
    }
}
/* /Components/Pages/Identity/Roles/RoleEditor.razor.rz.scp.css */
/* Permission tree — indentation, alignment and collapse affordance for the Role editor's permission matrix.
   Depth is a CSS custom property written by the recursive fragment, so the same three rules style every level
   and adding a level to PermissionCatalog.Tree needs no CSS change.

   The tree never scrolls the page sideways: the indent is capped and each row wraps its label instead, which
   is what keeps the panel usable on a narrow screen. */

.navr-perm-tree[b-lyrki9yeqn] {
    /* Own scroll container: a deep tree on a phone scrolls inside the panel, never the page. */
    overflow-x: auto;
    max-width: 100%;
}

.navr-perm-node[b-lyrki9yeqn] {
    /* 22px per level, but never more than half the panel — deep levels stay readable on a small screen. */
    padding-left: min(calc(var(--perm-depth, 0) * 22px), 44vw);
    box-sizing: border-box;
}

/* A hairline that makes the parent → child relationship visible at a glance without any extra markup.
   Level 0 (the module root) has no rail; every nested level does. */
.navr-perm-node:not([style*="--perm-depth:0"])[b-lyrki9yeqn] {
    border-left: 1px solid var(--mud-palette-divider);
    margin-left: 10px;
}

.navr-perm-row[b-lyrki9yeqn] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    flex-wrap: wrap;
}

.navr-perm-toggle[b-lyrki9yeqn] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
}

/* Keeps a leaf's checkbox aligned with the checkboxes of its siblings that do have a chevron. */
.navr-perm-toggle--empty[b-lyrki9yeqn] {
    display: inline-block;
}

.navr-perm-check[b-lyrki9yeqn] {
    flex: 0 0 auto;
    margin: 0;
}

.navr-perm-label[b-lyrki9yeqn] {
    font-size: .9rem;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

.navr-perm-label--group[b-lyrki9yeqn] {
    font-weight: 600;
}

/* The two roots (CMS, Appearance) read as section headings rather than list rows. */
.navr-perm-label--root[b-lyrki9yeqn] {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .82rem;
}

/* "2/5" — how much of a branch is granted, so a collapsed branch still tells the truth. */
.navr-perm-count[b-lyrki9yeqn] {
    margin-left: 6px;
    font-size: .72rem;
    opacity: .6;
    white-space: nowrap;
}

/* Narrow screens: a 6-level tree plus a 22px indent leaves too little room for the label, so the row wrapped
   and put the checkbox on its own line. Tightening the step and the control sizes keeps every row on one line
   down to 360px; the panel still scrolls inside itself rather than pushing the page sideways. */
@media (max-width: 599.98px) {
    .navr-perm-node[b-lyrki9yeqn] {
        padding-left: min(calc(var(--perm-depth, 0) * 12px), 40vw);
    }

    .navr-perm-node:not([style*="--perm-depth:0"])[b-lyrki9yeqn] {
        margin-left: 6px;
    }

    .navr-perm-row[b-lyrki9yeqn] {
        flex-wrap: nowrap;
        gap: 0;
    }

    .navr-perm-toggle[b-lyrki9yeqn] {
        width: 20px;
        height: 24px;
    }

    .navr-perm-label[b-lyrki9yeqn] {
        font-size: .82rem;
    }
}
/* /Components/Pages/Training/TutorialEditor.razor.rz.scp.css */
/* One language version panel of the tutorial editor. */

.navr-tutorial-lang[b-zkyqgul6cl] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.navr-tutorial-lang__head[b-zkyqgul6cl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.navr-tutorial-lang__name[b-zkyqgul6cl] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-tutorial-lang__facts[b-zkyqgul6cl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.375rem 1rem;
    margin: 0;
}

.navr-tutorial-lang__facts dt[b-zkyqgul6cl] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-lang__facts dd[b-zkyqgul6cl] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-tutorial-lang__empty[b-zkyqgul6cl] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-lang__actions[b-zkyqgul6cl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;
}
/* /Components/Shared/AdminDialogFrame.razor.rz.scp.css */
/* Shared Admin dialog frame — scoped via Blazor CSS isolation. Palette variables only, so it follows the Admin theme
   (light / dark) and matches the Block Editor and settings workspaces. A column flex box whose body is the only
   scrolling part: the header, the toolbar and the footer stay in place at every width. */

.navr-dialog[b-493xhp3llk] {
    --navr-dialog-accent: var(--mud-palette-primary);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.navr-dialog--publish[b-493xhp3llk] {
    --navr-dialog-accent: var(--mud-palette-success);
}

/* ── Header ── */
.navr-dialog__head[b-493xhp3llk] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 0.75rem 0.875rem 1.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: linear-gradient(180deg, color-mix(in srgb, var(--navr-dialog-accent) 7%, transparent), transparent);
}

.navr-dialog__icon[b-493xhp3llk] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    color: var(--navr-dialog-accent);
    background: color-mix(in srgb, var(--navr-dialog-accent) 14%, transparent);
}

.navr-dialog__heading[b-493xhp3llk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-dialog__eyebrow[b-493xhp3llk] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navr-dialog-accent);
}

.navr-dialog__title[b-493xhp3llk] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-dialog__subtitle[b-493xhp3llk] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-dialog__head[b-493xhp3llk]  .navr-dialog__close {
    flex: 0 0 auto;
    margin-top: -0.25rem;
}

/* ── Toolbar (language tabs) ── */
.navr-dialog__toolbar[b-493xhp3llk] {
    flex: 0 0 auto;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

/* ── Body: the only scrolling part ── */
.navr-dialog__body[b-493xhp3llk] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.125rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.navr-dialog__body:focus-visible[b-493xhp3llk] {
    outline: 2px solid var(--navr-dialog-accent);
    outline-offset: -2px;
}

/* ── Footer ── */
.navr-dialog__foot[b-493xhp3llk] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: var(--mud-palette-surface);
}

/* ── Phones ── */
@media (max-width: 599.98px) {
    .navr-dialog[b-493xhp3llk] {
        max-height: calc(100dvh - 1rem);
    }

    .navr-dialog__head[b-493xhp3llk] {
        gap: 0.625rem;
        padding: 0.875rem 0.5rem 0.75rem 0.875rem;
    }

    .navr-dialog__icon[b-493xhp3llk] {
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 10px;
    }

    .navr-dialog__title[b-493xhp3llk] {
        font-size: 1rem;
    }

    .navr-dialog__toolbar[b-493xhp3llk] {
        padding: 0.5rem 0.875rem;
    }

    .navr-dialog__body[b-493xhp3llk] {
        padding: 0.75rem 0.875rem 0.875rem;
    }

    .navr-dialog__foot[b-493xhp3llk] {
        padding: 0.625rem 0.875rem;
    }

    .navr-dialog__foot[b-493xhp3llk]  .mud-button-root {
        flex: 1 1 auto;
    }
}
/* /Components/Shared/AdminDialogSection.razor.rz.scp.css */
/* Dialog section card — scoped via Blazor CSS isolation. One card style and one body typography for every section
   of the Help and Publish dialogs; ::deep reaches the host's content so paragraphs and lists read the same in both. */

.navr-dsec[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-primary);
    min-width: 0;
    padding: 0.75rem 0.875rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.navr-dsec--accent[b-brg4qm3qje] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.navr-dsec--success[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-success);
    border-color: color-mix(in srgb, var(--mud-palette-success) 35%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

.navr-dsec--warning[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-warning);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.navr-dsec--info[b-brg4qm3qje] {
    --navr-dsec-accent: var(--mud-palette-info);
    border-color: color-mix(in srgb, var(--mud-palette-info) 35%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    background: color-mix(in srgb, var(--mud-palette-info) 6%, var(--mud-palette-surface));
}

.navr-dsec__head[b-brg4qm3qje] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.navr-dsec__icon[b-brg4qm3qje] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    color: var(--navr-dsec-accent);
    background: color-mix(in srgb, var(--navr-dsec-accent) 13%, transparent);
}

.navr-dsec__title[b-brg4qm3qje] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.navr-dsec__aside[b-brg4qm3qje] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.navr-dsec__body[b-brg4qm3qje] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.navr-dsec__body[b-brg4qm3qje]  p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--mud-palette-text-primary);
}

.navr-dsec__body[b-brg4qm3qje]  p + p {
    margin-top: 0.375rem;
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-points {
    margin: 0;
    padding-inline-start: 1.125rem;
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-points li {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-points li + li {
    margin-top: 0.25rem;
}

.navr-dsec__body[b-brg4qm3qje]  .navr-dsec-muted {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/AdminStatusBadge.razor.rz.scp.css */
/* Status pill — scoped via Blazor CSS isolation. Darkened palette colours on a light tint keep the text readable. */

.navr-badge[b-qvu3wvosm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.0625rem 0.5rem 0.0625rem 0.375rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.navr-badge[b-qvu3wvosm3]  .mud-icon-root {
    font-size: 0.9375rem;
}

.navr-badge--draft[b-qvu3wvosm3] {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.navr-badge--live[b-qvu3wvosm3] {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
}

.navr-badge--scheduled[b-qvu3wvosm3],
.navr-badge--unsaved[b-qvu3wvosm3] {
    color: var(--mud-palette-info-darken, var(--mud-palette-info));
    border-color: color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
}

.navr-badge--previous[b-qvu3wvosm3] {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.navr-badge--none[b-qvu3wvosm3] {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: transparent;
}
/* /Components/Shared/CollapsibleSettingsSection.razor.rz.scp.css */
/* Settings section shell — scoped via Blazor CSS isolation. Colours come from the MudBlazor palette variables so
   the section follows the Admin theme (light / dark) and never introduces a separate visual style. */

.navr-settings-section[b-u8dv0ybem2] {
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-settings-section--open[b-u8dv0ybem2] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Header ── */
.navr-settings-section__header[b-u8dv0ybem2] {
    position: relative;                     /* anchors the stretched toggle */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding-block: 0.5rem;
    padding-inline: 1rem 0.625rem;
    border-radius: 9px;
    transition: background-color 0.15s ease;
}

.navr-settings-section__header:hover[b-u8dv0ybem2] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-settings-section--open > .navr-settings-section__header[b-u8dv0ybem2] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.navr-settings-section__toggle[b-u8dv0ybem2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

/* The toggle covers the whole header, so the title, the empty space and the chevron are all one click target. */
.navr-settings-section__toggle[b-u8dv0ybem2]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.navr-settings-section__toggle:focus[b-u8dv0ybem2] {
    outline: none;
}

.navr-settings-section__toggle:focus-visible[b-u8dv0ybem2]::after {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 9px;
}

.navr-settings-section__icon[b-u8dv0ybem2] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.navr-settings-section__text[b-u8dv0ybem2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-settings-section__title[b-u8dv0ybem2] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-settings-section__purpose[b-u8dv0ybem2] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-settings-section__category[b-u8dv0ybem2] {
    flex: 0 0 auto;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* Layered above the stretched toggle so it stays independently clickable and focusable. */
.navr-settings-section__help[b-u8dv0ybem2] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
}

.navr-settings-section__chevron[b-u8dv0ybem2] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.navr-settings-section--open > .navr-settings-section__header .navr-settings-section__chevron[b-u8dv0ybem2] {
    transform: rotate(180deg);
}

/* ── Body ── */
.navr-settings-section__body[b-u8dv0ybem2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 1rem 1.125rem;
    min-width: 0;
}

/* ── Prominent (workspace-level) variant ── */
.navr-settings-section--prominent > .navr-settings-section__header[b-u8dv0ybem2] {
    min-height: 4rem;
}

.navr-settings-section--prominent > .navr-settings-section__header .navr-settings-section__icon[b-u8dv0ybem2] {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.navr-settings-section--prominent > .navr-settings-section__header .navr-settings-section__title[b-u8dv0ybem2] {
    font-size: 0.875rem;
}

.navr-settings-section--prominent > .navr-settings-section__body[b-u8dv0ybem2] {
    padding: 1rem;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
    border-end-start-radius: 9px;
    border-end-end-radius: 9px;
}

/* ── Toned (semantic) header — block editors only ──
   The header takes its group's own soft colour (tokens in wwwroot/app.css), open or collapsed, with a slim accent
   bar at the inline start so the group reads at a glance. Title and purpose keep the theme text colours; the icon
   ink is the tone mixed into the theme text colour, so both stay readable in light and dark mode. */
.navr-settings-section--toned[b-u8dv0ybem2] {
    border-color: var(--navr-tone-line);
}

.navr-settings-section--toned > .navr-settings-section__header[b-u8dv0ybem2] {
    background: var(--navr-tone-bg);
}

.navr-settings-section--toned.navr-settings-section--open[b-u8dv0ybem2] {
    border-color: color-mix(in srgb, var(--navr-tone) 48%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
}

.navr-settings-section--toned.navr-settings-section--open > .navr-settings-section__header[b-u8dv0ybem2] {
    border-bottom-color: var(--navr-tone-line);
    background: var(--navr-tone-bg-open);
}

.navr-settings-section--toned > .navr-settings-section__header:hover[b-u8dv0ybem2] {
    background: var(--navr-tone-bg-hover);
}

.navr-settings-section--toned > .navr-settings-section__header .navr-settings-section__icon[b-u8dv0ybem2] {
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-settings-section--toned > .navr-settings-section__header .navr-settings-section__category[b-u8dv0ybem2] {
    border-color: var(--navr-tone-line);
    background: var(--mud-palette-surface);
}

.navr-settings-section--toned.navr-settings-section--prominent > .navr-settings-section__header .navr-settings-section__icon[b-u8dv0ybem2] {
    color: #fff;
    background: var(--navr-tone-solid);
}

/* Narrow screens: the category tag is supplementary, the title and purpose are not. */
@media (max-width: 599.98px) {
    .navr-settings-section__category[b-u8dv0ybem2] {
        display: none;
    }

    .navr-settings-section__header[b-u8dv0ybem2] {
        padding-inline: 0.75rem 0.375rem;
    }

    .navr-settings-section__body[b-u8dv0ybem2] {
        padding: 0.875rem 0.75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-settings-section[b-u8dv0ybem2],
    .navr-settings-section__header[b-u8dv0ybem2],
    .navr-settings-section__chevron[b-u8dv0ybem2] {
        transition: none;
    }
}
/* /Components/Shared/ColorSourcePickerDialog.razor.rz.scp.css */
/* Colour source picker content — scoped via Blazor CSS isolation. The frame (header, scroll area, footer) comes from
   AdminDialogFrame; this file styles the source tabs, the current-selection strip, the swatch grid and the Custom
   editor. Palette variables only; the grid reflows to the dialog's width and nothing scrolls horizontally. */

/* ── Source tabs ── */
.csp-tabs[b-wwi9m2gro6] {
    display: flex;
    gap: 0.25rem;
    padding: 0.1875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.csp-tabs__tab[b-wwi9m2gro6] {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.625rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.csp-tabs__tab:hover[b-wwi9m2gro6] {
    color: var(--mud-palette-text-primary);
}

.csp-tabs__tab:focus-visible[b-wwi9m2gro6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.csp-tabs__tab--active[b-wwi9m2gro6],
.csp-tabs__tab--active:hover[b-wwi9m2gro6] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.csp-tabs__count[b-wwi9m2gro6] {
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.5;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

/* ── Current selection ── */
.csp-current[b-wwi9m2gro6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.csp-current__swatch[b-wwi9m2gro6] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.csp-current__text[b-wwi9m2gro6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.csp-current__label[b-wwi9m2gro6] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.csp-current__name[b-wwi9m2gro6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.csp-current__detail[b-wwi9m2gro6] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.csp-panel[b-wwi9m2gro6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.csp-note[b-wwi9m2gro6] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ── Swatch grid ── */
.csp-grid[b-wwi9m2gro6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.25rem), 1fr));
    gap: 0.5rem;
}

.csp-swatch[b-wwi9m2gro6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    font: inherit;
    text-align: start;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.csp-swatch:hover[b-wwi9m2gro6] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
}

.csp-swatch:focus-visible[b-wwi9m2gro6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.csp-swatch--selected[b-wwi9m2gro6] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.csp-swatch__color[b-wwi9m2gro6] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.csp-swatch__check[b-wwi9m2gro6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.csp-swatch__name[b-wwi9m2gro6] {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.csp-swatch__hex[b-wwi9m2gro6] {
    font-size: 0.6875rem;
    line-height: 1.3;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--mud-palette-text-secondary);
}

/* ── Custom ── */
.csp-custom[b-wwi9m2gro6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.csp-custom__preview[b-wwi9m2gro6] {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
}

.csp-custom__fields[b-wwi9m2gro6] {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.csp-custom__picker[b-wwi9m2gro6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.csp-custom__picker input[type="color"][b-wwi9m2gro6] {
    width: 2.75rem;
    height: 2.25rem;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.csp-custom__picker input[type="color"]:focus-visible[b-wwi9m2gro6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (max-width: 599.98px) {
    .csp-tabs__tab[b-wwi9m2gro6] {
        flex-direction: column;
        gap: 0.125rem;
        padding: 0.25rem 0.25rem;
        font-size: 0.75rem;
    }

    .csp-grid[b-wwi9m2gro6] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.25rem), 1fr));
    }
}
/* /Components/Shared/DesignPresetCard.razor.rz.scp.css */
.navr-preset-card[b-ltfx0os4l5] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.5rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-preset-card:hover[b-ltfx0os4l5] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.navr-preset-card:focus-visible[b-ltfx0os4l5] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-preset-card--selected[b-ltfx0os4l5] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.navr-preset-card__swatch[b-ltfx0os4l5] {
    display: block;
    height: 2.25rem;
    margin-bottom: 0.25rem;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.navr-preset-card__name[b-ltfx0os4l5] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-preset-card__description[b-ltfx0os4l5] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-preset-card__active[b-ltfx0os4l5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-preset-card[b-ltfx0os4l5] {
        transition: none;
    }
}
/* /Components/Shared/DevicePreviewFrame.razor.rz.scp.css */
/* Device preview stage. Horizontal overflow is CLIPPED (never scrolled), so the page cannot scroll sideways even
   before the fit script has run; vertical overflow stays visible so an opened dropdown / mega panel is not cut. */

.navr-device-frame[b-houde2y4ao] {
    position: relative;
    min-width: 0;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

.navr-device-frame__canvas[b-houde2y4ao] {
    max-width: none;
    margin-inline: auto;
    zoom: var(--navr-device-zoom, 1);
}
/* /Components/Shared/MediaUploadField.razor.rz.scp.css */
.navr-media-field[b-ovz27cxxzu] {
    grid-column: 1 / -1;
    min-width: 0;
}

.navr-media-field__label[b-ovz27cxxzu] {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.navr-media-field__row[b-ovz27cxxzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.navr-media-field__thumb[b-ovz27cxxzu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 3.75rem;
    overflow: hidden;
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.navr-media-field__thumb img[b-ovz27cxxzu] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.navr-media-field__thumb--cover img[b-ovz27cxxzu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navr-media-field__empty[b-ovz27cxxzu] {
    padding: 0 0.25rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.navr-media-field__actions[b-ovz27cxxzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.navr-media-field__hint[b-ovz27cxxzu] {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/PreviewDeviceSwitcher.razor.rz.scp.css */
/* Segmented Desktop | Tablet | Mobile control — MudBlazor palette variables only, so it follows the Admin theme. */

.navr-device-switch[b-cl7m38lpqo] {
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
    max-width: 100%;
}

.navr-device-switch__btn[b-cl7m38lpqo] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navr-device-switch__btn:hover[b-cl7m38lpqo] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.navr-device-switch__btn:focus-visible[b-cl7m38lpqo] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.navr-device-switch__btn--active[b-cl7m38lpqo] {
    font-weight: 600;
    color: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Very narrow: icons only; the title attribute and aria-pressed still name each device. */
@media (max-width: 420px) {
    .navr-device-switch__label[b-cl7m38lpqo] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-device-switch__btn[b-cl7m38lpqo] {
        transition: none;
    }
}
/* /Components/Shared/SettingsHelpDialog.razor.rz.scp.css */
/* Working Details / Help dialog content — scoped via Blazor CSS isolation. The frame (header, scroll area, footer)
   and the section cards come from AdminDialogFrame / AdminDialogSection; this file styles only what is specific to
   help: the language tabs, the "controls" tags, the settings list, the Working Details cards and the preview tip.
   Comfortable Bangla line height throughout; every long word wraps. */

/* ── Language tabs (বাংলা / English) ── */
.navr-help-tabs[b-sznuj9w80q] {
    display: inline-flex;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.1875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
}

.navr-help-tabs__tab[b-sznuj9w80q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    min-height: 2.125rem;
    padding: 0.25rem 1rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.navr-help-tabs__tab:hover[b-sznuj9w80q] {
    color: var(--mud-palette-text-primary);
}

.navr-help-tabs__tab:focus-visible[b-sznuj9w80q] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-help-tabs__tab--active[b-sznuj9w80q] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.navr-help-tabs__tab--active:hover[b-sznuj9w80q] {
    color: var(--mud-palette-primary-text, #fff);
}

.navr-help-tabs__single[b-sznuj9w80q] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ── Content ── */
.navr-help[b-sznuj9w80q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.navr-help__tags[b-sznuj9w80q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navr-help__tags li[b-sznuj9w80q] {
    max-width: 100%;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.navr-help__list[b-sznuj9w80q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.navr-help__item[b-sznuj9w80q] {
    padding: 0.5rem 0.75rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    border-radius: 6px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.navr-help__item dt[b-sznuj9w80q] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.navr-help__item dd[b-sznuj9w80q] {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

/* Working Details: one card per setting, its behaviour as a short bullet list. */
.navr-help__working[b-sznuj9w80q] {
    display: grid;
    gap: 0.5rem;
}

.navr-help__detail[b-sznuj9w80q] {
    min-width: 0;
    padding: 0.5rem 0.75rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
}

.navr-help__detail-name[b-sznuj9w80q] {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

/* ── Preview tip (last line of the content) ── */
.navr-help__tip[b-sznuj9w80q] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    .navr-help-tabs[b-sznuj9w80q] {
        display: flex;
    }

    .navr-help-tabs__tab[b-sznuj9w80q] {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* /Components/Shared/SettingsSubgroup.razor.rz.scp.css */
/* Settings sub-group — scoped via Blazor CSS isolation. The field classes below are applied by the component that
   renders the controls (its own markup), so they are reached with ::deep. */

.navr-settings-group[b-mis1lrv4nw] {
    min-width: 0;
}

.navr-settings-group__title[b-mis1lrv4nw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.navr-settings-group__title[b-mis1lrv4nw]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

/* Auto-fitting columns: as many ~200px columns as the available width allows, never narrower than the box. */
.navr-settings-fields[b-mis1lrv4nw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
    min-width: 0;
}

.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-field {
    min-width: 0;
}

/* A switch has no outlined box, so centre it on the height of a dense outlined input beside it. */
.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-field--switch {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-field--full {
    grid-column: 1 / -1;
}

/* A full-width row holding up to two wider controls side by side (they stack when space is short). auto-fill keeps a lone
   control at half width instead of stretching it across the whole group. */
.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0.75rem 1rem;
    min-width: 0;
}

.navr-settings-fields[b-mis1lrv4nw]  .navr-settings-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.navr-settings-group__hint[b-mis1lrv4nw] {
    margin: 0.625rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/SettingsWorkspace.razor.rz.scp.css */
/* Settings workspace shell (Header / Footer Management) — scoped via Blazor CSS isolation. Colours come from the
   MudBlazor palette variables so the workspace follows the Admin theme (light / dark), matching the Card Settings
   workspace and the CollapsibleSettingsSection groups it hosts. */

.navr-workspace[b-8ewcjjqbnd] {
    min-width: 0;
    --navr-ws-head-h: 4.5rem;
}

/* ── Page header: title, purpose, Preview + Save. Sticky under the app bar so Save is always one click away. ── */
.navr-workspace__head[b-8ewcjjqbnd] {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-height: var(--navr-ws-head-h);
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.navr-workspace__head-main[b-8ewcjjqbnd] {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.navr-workspace__head-icon[b-8ewcjjqbnd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
}

.navr-workspace__head-text[b-8ewcjjqbnd] {
    min-width: 0;
}

.navr-workspace__title[b-8ewcjjqbnd] {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.navr-workspace__description[b-8ewcjjqbnd] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-workspace__actions[b-8ewcjjqbnd] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ── Workspace body ── */
.navr-workspace__body[b-8ewcjjqbnd] {
    container-type: inline-size;
    min-width: 0;
}

/* Narrow: one column, live preview first so the result is visible without scrolling past every group. */
.navr-workspace__layout[b-8ewcjjqbnd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.navr-workspace__settings[b-8ewcjjqbnd] {
    order: 2;
    min-width: 0;
}

.navr-workspace__preview[b-8ewcjjqbnd] {
    order: 1;
    min-width: 0;
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + var(--navr-ws-head-h) + 1rem);
}

.navr-workspace__preview:focus[b-8ewcjjqbnd] {
    outline: none;
}

.navr-workspace__settings-head[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.625rem;
}

.navr-workspace__panel-title[b-8ewcjjqbnd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.navr-workspace__panel-title[b-8ewcjjqbnd]  .mud-icon-root {
    color: var(--mud-palette-primary);
}

.navr-workspace__toolbar[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.navr-workspace__intro[b-8ewcjjqbnd] {
    margin-bottom: 0.625rem;
    min-width: 0;
}

.navr-workspace__sections[b-8ewcjjqbnd] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* ── Live preview ── */
.navr-workspace__preview-inner[b-8ewcjjqbnd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    min-width: 0;
}

.navr-workspace__preview-head[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.navr-workspace__preview-badge[b-8ewcjjqbnd] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.navr-workspace__preview-toolbar[b-8ewcjjqbnd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.navr-workspace__preview-stage[b-8ewcjjqbnd] {
    min-width: 0;
}

.navr-workspace__preview-footer[b-8ewcjjqbnd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Wide: settings left, preview right and sticky, so every change is visible next to the control that made it.
   The preview column gets the larger share — a header or footer is a wide object. */
@container (min-width: 1000px) {
    .navr-workspace__layout[b-8ewcjjqbnd] {
        grid-template-columns: minmax(22rem, 5fr) minmax(0, 6fr);
        align-items: start;
    }

    .navr-workspace__settings[b-8ewcjjqbnd] {
        order: 1;
    }

    .navr-workspace__preview[b-8ewcjjqbnd] {
        order: 2;
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + var(--navr-ws-head-h) + 1rem);
    }

    .navr-workspace__preview-inner[b-8ewcjjqbnd] {
        max-height: calc(100vh - var(--mud-appbar-height, 64px) - var(--navr-ws-head-h) - 2rem);
        overflow-y: auto;
    }
}

/* Phones: a compact sticky header — the title and Save stay reachable, the description does not eat the screen. */
@media (max-width: 599.98px) {
    .navr-workspace[b-8ewcjjqbnd] {
        --navr-ws-head-h: 3.5rem;
    }

    .navr-workspace__head[b-8ewcjjqbnd] {
        padding: 0.5rem 0;
    }

    .navr-workspace__head-icon[b-8ewcjjqbnd],
    .navr-workspace__description[b-8ewcjjqbnd] {
        display: none;
    }

    .navr-workspace__title[b-8ewcjjqbnd] {
        font-size: 1.125rem;
    }

    .navr-workspace__preview-inner[b-8ewcjjqbnd] {
        padding: 0.625rem;
    }
}
/* /Components/Shared/UploadLockOverlay.razor.rz.scp.css */
/* Component-scoped styles for the upload overlay + page lock.

   Every colour comes from the MudBlazor palette variables the active NAVR theme publishes, so the overlay
   re-themes with the rest of the Admin panel and no palette is hard-coded. The only literals are the neutral
   black of the scrim and pure white on the filled ring, which read the same in every theme. */

.uplock[b-v15nc2uxpw] {
    position: fixed;
    inset: 0;
    z-index: 2100; /* above MudBlazor's drawers (1100-1300) and dialogs (1400) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* The element itself is the interaction barrier: nothing behind it can be clicked, hovered or dragged. */
    cursor: progress;
    outline: none;
}

.uplock__scrim[b-v15nc2uxpw] {
    position: absolute;
    inset: 0;
    background: rgba(9, 14, 11, .58);
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    animation: uplock-fade-b-v15nc2uxpw .22s ease-out both;
}

/* ── card ──────────────────────────────────────────────────────────────────── */

.uplock__card[b-v15nc2uxpw] {
    position: relative;
    width: min(420px, 100%);
    box-sizing: border-box;
    padding: 34px 32px 30px;
    border-radius: 22px;
    text-align: center;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 4px 12px rgba(0, 0, 0, .22);
    animation: uplock-rise-b-v15nc2uxpw .28s cubic-bezier(.22, .8, .3, 1) both;
}

/* A hairline of the theme's own primary along the top edge — the one piece of brand on the card. */
.uplock__card[b-v15nc2uxpw]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, transparent, var(--mud-palette-primary), transparent);
}

.uplock__card--error[b-v15nc2uxpw]::before { background: linear-gradient(90deg, transparent, var(--mud-palette-error), transparent); }
.uplock__card--success[b-v15nc2uxpw]::before { background: linear-gradient(90deg, transparent, var(--mud-palette-success), transparent); }

/* ── progress ring ─────────────────────────────────────────────────────────── */

.uplock__ring[b-v15nc2uxpw] {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 18px;
}

.uplock__ring svg[b-v15nc2uxpw] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* start the arc at 12 o'clock */
    overflow: visible;
}

.uplock__ringtrack[b-v15nc2uxpw] {
    fill: none;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 7;
    opacity: .55;
}

.uplock__ringarc[b-v15nc2uxpw] {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .12));
}

/* Determinate: the arc animates to each real percentage rather than snapping. */
.uplock__ring svg.is-determinate .uplock__ringarc[b-v15nc2uxpw] {
    transition: stroke-dashoffset .28s ease-out;
}

/* Indeterminate: a fixed quarter arc that orbits. Used ONLY when the transport gives no byte counts —
   it deliberately shows no number, so it can never be mistaken for real progress. */
.uplock__ring svg.is-indeterminate[b-v15nc2uxpw] {
    animation: uplock-spin-b-v15nc2uxpw 1.1s linear infinite;
}

.uplock__card--error .uplock__ringarc[b-v15nc2uxpw] { stroke: var(--mud-palette-error); }
.uplock__card--success .uplock__ringarc[b-v15nc2uxpw] { stroke: var(--mud-palette-success); }

.uplock__ringtext[b-v15nc2uxpw] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.uplock__pctsign[b-v15nc2uxpw] {
    font-size: .95rem;
    font-weight: 500;
    opacity: .6;
    margin-left: 2px;
    align-self: flex-start;
    margin-top: .45rem;
}

.uplock__glyph[b-v15nc2uxpw] { display: inline-flex; color: var(--mud-palette-primary); }
.uplock__card--error .uplock__glyph[b-v15nc2uxpw] { color: var(--mud-palette-error); }
.uplock__card--success .uplock__glyph[b-v15nc2uxpw] { color: var(--mud-palette-success); }

/* ── copy ──────────────────────────────────────────────────────────────────── */

.uplock__title[b-v15nc2uxpw] {
    margin: 0 0 6px;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.uplock__file[b-v15nc2uxpw] {
    margin: 0 0 4px;
    font-size: .9rem;
    opacity: .78;
    /* A long file name truncates instead of stretching the card. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uplock__count[b-v15nc2uxpw],
.uplock__bytes[b-v15nc2uxpw] {
    margin: 0 0 2px;
    font-size: .8rem;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.uplock__hint[b-v15nc2uxpw] {
    margin: 16px 0 0;
    font-size: .78rem;
    opacity: .55;
    line-height: 1.5;
}

.uplock__error[b-v15nc2uxpw] {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.45;
    text-align: start;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error-hover);
    border: 1px solid var(--mud-palette-error);
    word-break: break-word;
}

.uplock__dismiss[b-v15nc2uxpw] {
    margin-top: 18px;
    min-height: 44px; /* touch target */
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    transition: filter .18s ease, transform .18s ease;
}

.uplock__dismiss:hover[b-v15nc2uxpw] { filter: brightness(1.08); }
.uplock__dismiss:active[b-v15nc2uxpw] { transform: translateY(1px); }
.uplock__dismiss:focus-visible[b-v15nc2uxpw] { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; }

/* ── motion / responsive ───────────────────────────────────────────────────── */

@keyframes uplock-fade-b-v15nc2uxpw { from { opacity: 0; } to { opacity: 1; } }

@keyframes uplock-rise-b-v15nc2uxpw {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes uplock-spin-b-v15nc2uxpw { to { transform: rotate(270deg); } }

@media (max-width: 480px) {
    .uplock[b-v15nc2uxpw] { padding: 16px; }
    .uplock__card[b-v15nc2uxpw] { padding: 28px 20px 24px; border-radius: 18px; }
    .uplock__ring[b-v15nc2uxpw] { width: 96px; height: 96px; }
    .uplock__ringtext[b-v15nc2uxpw] { font-size: 1.6rem; }
}

/* A visitor who asked for less motion still gets the overlay and the real percentage — just no orbit, no
   rise and no arc easing. The indeterminate ring becomes a static three-quarter arc, which still reads as
   "working" beside the animated wording. */
@media (prefers-reduced-motion: reduce) {
    .uplock__scrim[b-v15nc2uxpw],
    .uplock__card[b-v15nc2uxpw] { animation: none; }

    .uplock__ring svg.is-indeterminate[b-v15nc2uxpw] { animation: none; }
    .uplock__ring svg.is-determinate .uplock__ringarc[b-v15nc2uxpw] { transition: none; }
    .uplock__dismiss[b-v15nc2uxpw] { transition: none; }
}
/* /Components/Training/TutorialVideoButton.razor.rz.scp.css */
/* The Watch Tutorial action inside the Working Details / Help dialog. Palette variables only (light / dark themes). */

.navr-tutorial-cta[b-dgql70onvb] {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.navr-tutorial-cta__icon[b-dgql70onvb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.navr-tutorial-cta__text[b-dgql70onvb] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.navr-tutorial-cta__eyebrow[b-dgql70onvb] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.navr-tutorial-cta__title[b-dgql70onvb] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navr-tutorial-cta__meta[b-dgql70onvb] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-cta__fallback[b-dgql70onvb] {
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.navr-tutorial-cta[b-dgql70onvb]  .navr-tutorial-cta__button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .navr-tutorial-cta[b-dgql70onvb] {
        flex-wrap: wrap;
    }

    .navr-tutorial-cta[b-dgql70onvb]  .navr-tutorial-cta__button {
        flex: 1 1 100%;
    }
}
/* /Components/Training/TutorialVideoDialog.razor.rz.scp.css */
/* Tutorial video dialog body. The frame (header / scrolling body / footer) is AdminDialogFrame's. */

.navr-tutorial-player[b-v14sbsz5ue] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

/* A true 16:9 stage: the video is letter-boxed (object-fit: contain), never stretched or cropped. */
.navr-tutorial-player__stage[b-v14sbsz5ue] {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 16rem);
    overflow: hidden;
    border-radius: 12px;
    background: #0b0f0c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.navr-tutorial-player__video[b-v14sbsz5ue] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0b0f0c;
}

.navr-tutorial-player__video:focus-visible[b-v14sbsz5ue] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.navr-tutorial-player__state[b-v14sbsz5ue] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.875rem;
}

.navr-tutorial-player__state--error[b-v14sbsz5ue] {
    color: rgba(255, 255, 255, 0.92);
}

.navr-tutorial-player__state--error[b-v14sbsz5ue]  .mud-button-root {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.navr-tutorial-player__error-title[b-v14sbsz5ue] {
    font-size: 1rem;
    font-weight: 600;
}

.navr-tutorial-player__error-text[b-v14sbsz5ue] {
    max-width: 32rem;
    color: rgba(255, 255, 255, 0.72);
}

.navr-tutorial-player__description[b-v14sbsz5ue] {
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

.navr-tutorial-player__facts[b-v14sbsz5ue] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.navr-tutorial-player__facts > div[b-v14sbsz5ue] {
    display: flex;
    gap: 0.375rem;
    align-items: baseline;
}

.navr-tutorial-player__facts dt[b-v14sbsz5ue] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.navr-tutorial-player__facts dt[b-v14sbsz5ue]::after {
    content: ":";
}

.navr-tutorial-player__facts dd[b-v14sbsz5ue] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-tutorial-player__note[b-v14sbsz5ue] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .navr-tutorial-player__stage[b-v14sbsz5ue] {
        border-radius: 8px;
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navr-tutorial-player__stage[b-v14sbsz5ue] {
        box-shadow: none;
    }
}
/* /Dashboard/DashboardContentOverview.razor.rz.scp.css */
/* Content Overview — one pastel row per content type (shared tone palette, wwwroot/app.css) with a stacked status bar.
   Rows sit side by side when the Dashboard panel around it (a size container) is wide enough, stacked otherwise. */

.navr-dco[b-65l3mzwl3y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@container (min-width: 36rem) {
    .navr-dco[b-65l3mzwl3y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.navr-dco__row[b-65l3mzwl3y] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--navr-tone-line);
    border-inline-start: 4px solid var(--navr-tone);
    border-radius: 10px;
    background: var(--navr-tone-bg);
}

.navr-dco__head[b-65l3mzwl3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
}

.navr-dco__icon[b-65l3mzwl3y] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-dco__name[b-65l3mzwl3y] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.navr-dco__total[b-65l3mzwl3y] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.navr-dco__bar[b-65l3mzwl3y] {
    display: flex;
    height: 0.625rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mud-palette-surface);
}

.navr-dco__seg[b-65l3mzwl3y] {
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 3px;
}

.navr-dco__seg--published[b-65l3mzwl3y] { background: var(--mud-palette-success); }
.navr-dco__seg--draft[b-65l3mzwl3y] { background: color-mix(in srgb, var(--mud-palette-text-secondary) 60%, transparent); }
.navr-dco__seg--scheduled[b-65l3mzwl3y] { background: var(--mud-palette-info); }
.navr-dco__seg--archived[b-65l3mzwl3y] { background: var(--mud-palette-warning); }

.navr-dco__legend[b-65l3mzwl3y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dco__legend li[b-65l3mzwl3y] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.navr-dco__legend strong[b-65l3mzwl3y] {
    color: var(--mud-palette-text-primary);
}

.navr-dco__swatch[b-65l3mzwl3y] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 3px;
}

.navr-dco__empty[b-65l3mzwl3y] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.navr-dco__sr[b-65l3mzwl3y] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Dashboard/DashboardQuickActions.razor.rz.scp.css */
/* Quick Actions — pastel link tiles in the shared tone palette (wwwroot/app.css). Two per row where there is room,
   one per row on narrow panels; the panel's own width decides, never the viewport. */

.navr-dq[b-6x2dxtuj8q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.625rem;
}

.navr-dq__action[b-6x2dxtuj8q] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    height: 100%;
    padding: 0.5rem 0.625rem 0.5rem 0.75rem;
    border: 1px solid var(--navr-tone-line);
    border-inline-start: 4px solid var(--navr-tone);
    border-radius: 10px;
    background: var(--navr-tone-bg);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-dq__action:hover[b-6x2dxtuj8q] {
    background: var(--navr-tone-bg-hover);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.navr-dq__action:focus-visible[b-6x2dxtuj8q] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-dq__icon[b-6x2dxtuj8q] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--navr-tone-ink);
    background: var(--navr-tone-chip);
}

.navr-dq__label[b-6x2dxtuj8q] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.navr-dq__action[b-6x2dxtuj8q]  .navr-dq__go {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.navr-dq__none[b-6x2dxtuj8q] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-dq__action[b-6x2dxtuj8q] {
        transition: none;
    }
}
/* /Dashboard/DashboardRecentContent.razor.rz.scp.css */
/* Recent Pages / Articles — compact rows on the panel's soft tone; titles wrap instead of widening the panel. */

.navr-dr[b-0jomi84m8f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.navr-dr__item[b-0jomi84m8f] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navr-dr__item:hover[b-0jomi84m8f] {
    border-color: var(--navr-tone-line);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}

.navr-dr__item:focus-visible[b-0jomi84m8f],
.navr-dr__all:focus-visible[b-0jomi84m8f] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.navr-dr__text[b-0jomi84m8f] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.navr-dr__title[b-0jomi84m8f] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.navr-dr__meta[b-0jomi84m8f] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.navr-dr__status[b-0jomi84m8f] {
    flex: 0 0 auto;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--navr-dr-status-ink);
    background: color-mix(in srgb, var(--navr-dr-status) 14%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--navr-dr-status) 35%, transparent);
    --navr-dr-status-ink: color-mix(in srgb, var(--navr-dr-status) 62%, var(--mud-palette-text-primary));
}

.navr-dr__status--published[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-success); }
.navr-dr__status--draft[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-text-secondary); }
.navr-dr__status--scheduled[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-info); }
.navr-dr__status--archived[b-0jomi84m8f] { --navr-dr-status: var(--mud-palette-warning); }

.navr-dr__all[b-0jomi84m8f] {
    align-self: flex-end;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navr-tone-ink);
    text-decoration: none;
}

.navr-dr__all:hover[b-0jomi84m8f] {
    text-decoration: underline;
}

.navr-dr__note[b-0jomi84m8f] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-dr__item[b-0jomi84m8f] {
        transition: none;
    }
}
/* /Dashboard/StorageDonut.razor.rz.scp.css */
/* Storage donut — scoped. MudBlazor palette variables only (follows light / dark Admin theme). */

.navr-donut[b-xb1c2bp5o5] {
    position: relative;
    width: 100%;
    max-width: 13rem;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.navr-donut__svg[b-xb1c2bp5o5] {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.navr-donut__track[b-xb1c2bp5o5],
.navr-donut__segment[b-xb1c2bp5o5] {
    fill: none;
    stroke-width: 5;
}

.navr-donut__track[b-xb1c2bp5o5] {
    stroke: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
}

.navr-donut__segment[b-xb1c2bp5o5] {
    transition: stroke-dasharray 0.4s ease, stroke-dashoffset 0.4s ease;
}

.navr-donut__center[b-xb1c2bp5o5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.navr-donut__value[b-xb1c2bp5o5] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.navr-donut__label[b-xb1c2bp5o5] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .navr-donut__segment[b-xb1c2bp5o5] {
        transition: none;
    }
}