@import '_content/Kimo.UI/Kimo.UI.9uh991m5q3.bundle.scp.css';

/* /Components/AuditChangesDetail.razor.rz.scp.css */
[b-iub74utiwi] .audit-before {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

[b-iub74utiwi] .mud-simple-table td,
[b-iub74utiwi] .mud-simple-table th {
    word-break: break-word;
    white-space: normal;
}
/* /Components/AuditDetailDialog.razor.rz.scp.css */
.audit-detail-header[b-rp677xpkrn] {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
    padding: 16px;
    border-radius: 8px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* AppBar bottom border */
[b-mh6q93iws0] .kimo-admin-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Drawer: white text on dark background (colors from theme) */
[b-mh6q93iws0] .kimo-admin-drawer-nav,
[b-mh6q93iws0] .kimo-admin-drawer-nav .mud-nav-link,
[b-mh6q93iws0] .kimo-admin-drawer-nav .mud-navgroup-title {
    color: rgba(255, 255, 255, 0.85);
}

[b-mh6q93iws0] .kimo-admin-drawer-divider {
    border-color: rgba(255, 255, 255, 0.2);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-c0sy16jeov],
.components-reconnect-repeated-attempt-visible[b-c0sy16jeov],
.components-reconnect-failed-visible[b-c0sy16jeov],
.components-pause-visible[b-c0sy16jeov],
.components-resume-failed-visible[b-c0sy16jeov],
.components-rejoining-animation[b-c0sy16jeov] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-retrying[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-failed[b-c0sy16jeov],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-c0sy16jeov] {
    display: block;
}


#components-reconnect-modal[b-c0sy16jeov] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-c0sy16jeov 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-c0sy16jeov 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-c0sy16jeov 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-c0sy16jeov]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-c0sy16jeov 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-c0sy16jeov {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-c0sy16jeov {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-c0sy16jeov {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-c0sy16jeov] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-c0sy16jeov] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-c0sy16jeov] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-c0sy16jeov] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-c0sy16jeov] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-c0sy16jeov] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-c0sy16jeov] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-c0sy16jeov 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-c0sy16jeov] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-c0sy16jeov {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ColorRow.razor.rz.scp.css */
/* Color row card — design-tool feel.
   Rules live here (not in Themes.razor.css) so Blazor's CSS-isolation scope
   matches the rendered <div class="color-row"> element. When these rules
   were in the parent's isolated CSS, the [b-…] attribute selector never
   matched and the row fell back to block stacking. */

.color-row[b-8yw2ix07f7] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.875rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.color-row + .color-row[b-8yw2ix07f7] {
    margin-top: 0.5rem;
}

.color-row:hover[b-8yw2ix07f7] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* ── Big swatch on the left ── */
.color-row-swatch[b-8yw2ix07f7] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--mud-palette-divider), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    flex: 0 0 44px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.color-row-swatch input[type="color"][b-8yw2ix07f7] {
    position: absolute;
    inset: 0;
    opacity: 0;
    border: 0;
    cursor: pointer;
}

/* ── Two-line text: bold name + smaller hint ── */
.color-row-text[b-8yw2ix07f7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.color-row-name[b-8yw2ix07f7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.color-row-hint[b-8yw2ix07f7] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-row-dot[b-8yw2ix07f7] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    display: inline-block;
    flex: 0 0 auto;
}

/* ── Hex input ── */
.color-row-hex[b-8yw2ix07f7] {
    width: 8.5rem;
    padding: 0.5rem 0.625rem;
    font-family: 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
    font-size: 0.8125rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    outline: none;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    text-transform: lowercase;
    flex: 0 0 auto;
    transition: border-color .15s, background .15s;
}

.color-row-hex:focus[b-8yw2ix07f7] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.color-row-hex--error[b-8yw2ix07f7] {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}
/* /Components/Pages/GestioneMetadati.razor.rz.scp.css */
/* Single-column shell: the detail panel claims full width and height.
   Entity switching is handled via the in-toolbar selector popover. */
.metadata-page-grid[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns: 1fr;
    /* Lock to viewport so the inner table scrolls, not the whole page */
    height: calc(100vh - var(--mud-appbar-height) - 48px);
    min-height: 0;
    overflow: hidden;
}

/* ─────── Entity selector (replaces left sidebar) ─────── */
.metadata-entity-selector-trigger[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--mud-palette-text-primary);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.metadata-entity-selector-trigger:hover[b-vgsvgamfpj] {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

.metadata-entity-selector-label[b-vgsvgamfpj] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.metadata-entity-popover[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-height: 480px;
    background-color: var(--mud-palette-surface);
}

.metadata-entity-popover-search[b-vgsvgamfpj] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.metadata-entity-popover-list[b-vgsvgamfpj] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.metadata-entity-popover-row[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-left: 3px solid transparent;
    color: var(--mud-palette-text-primary);
    transition: background-color 120ms ease;
    font: inherit;
}

.metadata-entity-popover-row:hover[b-vgsvgamfpj] {
    background-color: var(--mud-palette-action-default-hover);
}

.metadata-entity-popover-row--selected[b-vgsvgamfpj] {
    background-color: var(--mud-palette-primary-hover);
    border-left-color: var(--mud-palette-primary);
}

.metadata-entity-popover-row--selected .metadata-entity-popover-row-name[b-vgsvgamfpj] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.metadata-entity-popover-row-text[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.metadata-entity-popover-row-name[b-vgsvgamfpj] {
    font-size: 14px;
}

.metadata-entity-popover-row-sublabel[b-vgsvgamfpj] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.metadata-entity-popover-footer[b-vgsvgamfpj] {
    padding: 10px 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.metadata-detail-configs-pill[b-vgsvgamfpj] {
    font-size: 11px;
    height: 22px;
}

/* Scope tabs — custom card-style strip */
.metadata-scope-tabs[b-vgsvgamfpj] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.metadata-scope-tab[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--mud-palette-text-secondary);
    position: relative;
    top: 1px; /* overlap the bottom divider */
    transition: background-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    min-width: 110px;
    max-width: 220px;
}

/* Two-line tab content: primary label on top, stats subtitle below. Gives a
   "colpo d'occhio" of what each scope contains without opening it. */
.metadata-scope-tab-text[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.metadata-scope-tab-title[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.metadata-scope-tab-subtitle[b-vgsvgamfpj] {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--mud-palette-text-disabled);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metadata-scope-tab--active .metadata-scope-tab-subtitle[b-vgsvgamfpj] {
    color: var(--mud-palette-primary);
    opacity: 0.85;
}

.metadata-scope-tab:hover[b-vgsvgamfpj] {
    background-color: var(--mud-palette-action-default-hover);
}

.metadata-scope-tab--active[b-vgsvgamfpj] {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    border: 1px solid var(--mud-palette-primary);
    border-bottom: none;
    border-top: 3px solid var(--mud-palette-primary);
    padding-top: 4px;
    font-weight: 700;
    z-index: 1;
    /* Subtle shadow + downward arrow seal the tab to the panel below. */
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
}

.metadata-scope-tab--active[b-vgsvgamfpj]::after {
    /* Cover the bottom divider of the tab strip so the active tab looks
       fused with the content beneath. */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--mud-palette-primary-hover);
}

/* Inline edit: same scope tab stays active but adds a pencil + warning accent
   so the user always sees "you're editing THIS one". */
.metadata-scope-tab--editing[b-vgsvgamfpj] {
    border-top-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
}

.metadata-scope-tab--editing[b-vgsvgamfpj]::after {
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
}

.metadata-scope-tab-edit-indicator[b-vgsvgamfpj] {
    color: var(--mud-palette-warning);
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

.metadata-scope-tab-label[b-vgsvgamfpj] {
    font-size: 14px;
}

.metadata-scope-tab-count[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
}

.metadata-scope-tab--active .metadata-scope-tab-count[b-vgsvgamfpj] {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.metadata-scope-tab-menu[b-vgsvgamfpj] {
    margin-left: 2px;
}

.metadata-scope-tab--new[b-vgsvgamfpj] {
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
}

.metadata-scope-tab--draft[b-vgsvgamfpj] {
    border-style: solid;
    background: var(--mud-palette-primary-hover);
}

.metadata-scope-tab-close[b-vgsvgamfpj] {
    margin-left: 4px;
}

.metadata-scope-tab-count--dirty[b-vgsvgamfpj] {
    background: var(--mud-palette-warning) !important;
    color: white !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 !important;
    min-width: 14px !important;
    height: 14px !important;
}

.metadata-context-chips[b-vgsvgamfpj] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}

/* Ambito di applicazione — compact summary row (readonly) and inline edit card */
.metadata-ambito-host[b-vgsvgamfpj] {
    margin-top: 8px;
}

/* Readonly: one-line summary + chevron toggle + optional edit action */
.metadata-ambito-summary-row[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    min-height: 36px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.metadata-ambito-summary-row:hover[b-vgsvgamfpj] {
    background: var(--mud-palette-action-default-hover);
}

.metadata-ambito-summary-row-text[b-vgsvgamfpj] {
    flex: 1 1 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Readonly: expanded grid of the 6 dimensions */
.metadata-ambito-readonly-grid[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 24px;
    padding: 12px 16px;
    margin-top: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
}

.metadata-ambito-readonly-field[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metadata-ambito-readonly-field--full[b-vgsvgamfpj] {
    grid-column: 1 / -1;
}

.metadata-ambito-readonly-label[b-vgsvgamfpj] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.metadata-ambito-readonly-value[b-vgsvgamfpj] {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}

@media (max-width: 1100px) {
    .metadata-ambito-readonly-grid[b-vgsvgamfpj] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Edit mode: form card (replaces the old MudExpansionPanel) */
.metadata-ambito-card[b-vgsvgamfpj] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    /* Cap height so the page keeps showing the rules table below, but leave
       enough room for the autocomplete popovers to render below their inputs
       without forcing the user to scroll. Internal overflow stays auto. */
    max-height: 55vh;
    overflow: auto;
}

.metadata-ambito-card-header[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
    background: var(--mud-palette-primary-hover);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.metadata-ambito-host[b-vgsvgamfpj]  .metadata-ambito-panel {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    overflow: hidden; /* clip rounded corners on hover bg */
}

/* Header bar: hint that it's clickable */
.metadata-ambito-host[b-vgsvgamfpj]  .mud-expand-panel-header {
    background-color: var(--mud-palette-background-grey);
    cursor: pointer;
    transition: background-color 120ms ease;
    border-left: 3px solid transparent;
}

.metadata-ambito-host[b-vgsvgamfpj]  .mud-expand-panel-header:hover {
    background-color: var(--mud-palette-action-default-hover);
    border-left-color: var(--mud-palette-primary);
}

/* Chevron icon — more visible */
.metadata-ambito-host[b-vgsvgamfpj]  .mud-expand-panel-icon {
    color: var(--mud-palette-primary) !important;
    font-size: 1.5rem !important;
}

.metadata-ambito-header[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    overflow: hidden;
}

.metadata-ambito-title[b-vgsvgamfpj] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.metadata-ambito-summary[b-vgsvgamfpj] {
    flex: 1 1 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metadata-ambito-id-pill[b-vgsvgamfpj] {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 11px;
    height: 22px;
    margin-left: auto;
}

.metadata-ambito-form[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px 14px;
    padding: 6px 10px 8px;
    /* Keep top edges aligned across sibling columns so chip rows on one side
       don't drag the paired column down. */
    align-items: start;
}

.metadata-ambito-field[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.metadata-ambito-field--full[b-vgsvgamfpj] {
    grid-column: 1 / -1;
}

.metadata-ambito-field--span-8[b-vgsvgamfpj] {
    grid-column: span 8;
}

.metadata-ambito-field--span-6[b-vgsvgamfpj] {
    grid-column: span 6;
}

.metadata-ambito-field--span-4[b-vgsvgamfpj] {
    grid-column: span 4;
}

/* Inline label + control on the same row (used by the Padre segmented control) */
.metadata-ambito-field--inline[b-vgsvgamfpj] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.metadata-ambito-field--inline > label[b-vgsvgamfpj] {
    flex: 0 0 auto;
}

.metadata-ambito-field label[b-vgsvgamfpj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

/* Help affordance: small ? icon next to the label, full hint on hover */
.metadata-ambito-help-icon[b-vgsvgamfpj] {
    color: var(--mud-palette-text-secondary);
    cursor: help;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

@media (max-width: 1100px) {
    .metadata-ambito-form[b-vgsvgamfpj] {
        grid-template-columns: repeat(6, 1fr);
    }
    .metadata-ambito-field--span-8[b-vgsvgamfpj],
    .metadata-ambito-field--span-6[b-vgsvgamfpj],
    .metadata-ambito-field--span-4[b-vgsvgamfpj] {
        grid-column: 1 / -1;
    }
}

/* ─────── Right column: detail ─────── */
.metadata-detail[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius, 8px);
    padding: 12px 20px;
    /* Lock to grid cell height — children claim flex, only the table body scrolls */
    min-height: 0;
    overflow: hidden;
}

.metadata-detail-toolbar[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.metadata-detail-toolbar-left[b-vgsvgamfpj] {
    flex: 1 1 auto;
}

.metadata-detail-toolbar-right[b-vgsvgamfpj] {
    flex: 0 0 auto;
}

.metadata-detail-title[b-vgsvgamfpj] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.metadata-detail-version-pill[b-vgsvgamfpj] {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 11px;
    height: 22px;
}

.metadata-detail-subtitle[b-vgsvgamfpj] {
    margin-top: -8px;
    color: var(--mud-palette-text-secondary);
}

/* Filter strip */
.metadata-filter-strip[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.metadata-filter-search[b-vgsvgamfpj],
.metadata-filter-select[b-vgsvgamfpj] {
    margin-top: 0 !important;
}

/* Table */
.metadata-table[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--mud-palette-background);
    /* Take remaining vertical space; only the body scrolls */
    flex: 1 1 0;
    min-height: 0;
}

.metadata-table-body[b-vgsvgamfpj] {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
}

.metadata-table-header[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.2fr)
        minmax(120px, 1fr)
        minmax(140px, 1.2fr)
        minmax(120px, 1fr)
        minmax(140px, 1.3fr)
        minmax(100px, 0.8fr)
        minmax(80px, 0.6fr);
    gap: 8px;
    padding: 6px 14px;
    background-color: var(--mud-palette-table-hover);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Step 1 grouped layout: 5 cols (chevron | field | attrs | status | actions).
   Status and actions widths match the children grid below so the SALVATO chip
   and the trash icon align vertically between parent and child rows. */
.metadata-table-header--grouped[b-vgsvgamfpj] {
    grid-template-columns:
        28px
        minmax(140px, 1.2fr)
        minmax(320px, 4.5fr)
        minmax(100px, 0.8fr)
        minmax(80px, 0.6fr);
}

.metadata-col-expander[b-vgsvgamfpj] {
    text-align: center;
}

.metadata-col-attrsummary[b-vgsvgamfpj] {
    overflow: hidden;
}

.metadata-table-cell[b-vgsvgamfpj] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.metadata-col-actions[b-vgsvgamfpj] {
    text-align: right;
    justify-content: flex-end !important;
}

/* Status chip pinned to the right edge of its cell. Combined with matching
   grid templates between parent and children, this keeps the SALVATO pill at
   the same X across group summary rows and rule rows. */
.metadata-col-status[b-vgsvgamfpj] {
    justify-content: flex-end !important;
    text-align: right;
}

/* Value cell: keep all editor variants (segmented bool / stepper / dropdown)
   on a single line with the same minimum height so the row baseline stays
   steady. The inner controls also share a target width range so the column
   doesn't oscillate between tiny and huge across rows. */
.metadata-col-value[b-vgsvgamfpj] {
    display: flex !important;
    align-items: center;
    min-height: 32px;
}

.metadata-col-value > *[b-vgsvgamfpj] {
    max-width: 100%;
}

/* Segmented Sì/No toggle (replaces MudSwitch for boolean attributes). Sized
   so the cell looks similar to the stepper / select rather than a tiny thumb. */
.metadata-bool-segmented[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    padding: 2px;
    background: var(--mud-palette-background-grey);
    gap: 2px;
}

.metadata-bool-pill[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    transition: background-color 120ms ease, color 120ms ease;
}

.metadata-bool-pill:hover[b-vgsvgamfpj] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

.metadata-bool-pill--selected[b-vgsvgamfpj] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.metadata-bool-pill--selected:hover[b-vgsvgamfpj] {
    background: var(--mud-palette-primary-darken);
    color: var(--mud-palette-primary-text);
}

/* Constrain the stepper and select so they don't sprawl wider than ~180px
   inside the value cell — keeps the visual weight comparable to the bool
   segmented control on rows above/below. */
.metadata-col-value .metadata-stepper[b-vgsvgamfpj] {
    width: 100%;
    max-width: 180px;
}

.metadata-col-value :deep(.mud-select)[b-vgsvgamfpj] {
    width: 100%;
    max-width: 180px;
}

/* ─── Value cell: chip-display (read mode) ─────────────────────────────────
   Pattern: Linear / Notion. Each row's Value renders as a compact pill of
   uniform height regardless of underlying type (bool, int, enum, regex…).
   Click → swap-in the actual MetadataValueEditor; blur (auto) returns here. */
.metadata-value-chip[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    max-width: 100%;
    overflow: hidden;
}

.metadata-value-chip:hover[b-vgsvgamfpj] {
    background: var(--mud-palette-primary-hover);
    border-color: var(--mud-palette-primary);
}

.metadata-value-chip:focus-visible[b-vgsvgamfpj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.metadata-value-chip-icon[b-vgsvgamfpj] {
    font-weight: 700;
    line-height: 1;
}

.metadata-value-chip-label[b-vgsvgamfpj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Type-specific variants — colors borrow from the shared palette so the
   chip family stays coherent with the rest of the page. */
.metadata-value-chip--bool-yes[b-vgsvgamfpj] {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
}

.metadata-value-chip--bool-yes .metadata-value-chip-icon[b-vgsvgamfpj] {
    color: var(--mud-palette-success);
}

.metadata-value-chip--bool-no[b-vgsvgamfpj] {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    color: var(--mud-palette-error-darken, var(--mud-palette-error));
}

.metadata-value-chip--bool-no .metadata-value-chip-icon[b-vgsvgamfpj] {
    color: var(--mud-palette-error);
}

.metadata-value-chip--integer[b-vgsvgamfpj] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 40px;
    justify-content: center;
}

.metadata-value-chip--enum[b-vgsvgamfpj] {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 11px;
}

.metadata-value-chip--regex[b-vgsvgamfpj] {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 11px;
    background: var(--mud-palette-background-grey);
}

/* Toggle hint: boolean chips ARE the editor (click flips), so the hover state
   is slightly stronger to advertise interactivity. */
.metadata-value-chip--toggle:hover[b-vgsvgamfpj] {
    transform: translateY(-0.5px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Dirty / error overlays on the chip — same accent treatment used elsewhere
   in the page (metadata-attr-chip --dirty/--error). */
.metadata-value-chip--dirty[b-vgsvgamfpj] {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

.metadata-value-chip--error[b-vgsvgamfpj] {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

/* Edit wrapper: receives the focusout event when the user tabs/clicks out of
   the in-cell MetadataValueEditor. tabindex=-1 lets it own focus events
   without being a tab stop itself. */
.metadata-value-edit-wrapper[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    width: 100%;
    outline: none;
}

.metadata-table-empty[b-vgsvgamfpj] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.metadata-table-row[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.2fr)
        minmax(120px, 1fr)
        minmax(140px, 1.2fr)
        minmax(120px, 1fr)
        minmax(140px, 1.3fr)
        minmax(100px, 0.8fr)
        minmax(80px, 0.6fr);
    gap: 8px;
    padding: 4px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    align-items: center;
    background-color: var(--mud-palette-surface);
    transition: background-color 120ms ease;
}

.metadata-table-row:hover[b-vgsvgamfpj] {
    background-color: var(--mud-palette-action-default-hover);
}

.metadata-table-row .metadata-table-cell[b-vgsvgamfpj] {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--mud-palette-text-primary);
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metadata-cell-muted[b-vgsvgamfpj] {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

/* Empty-state placeholder for optional Context/Message cells. Renders as a
   plain em-dash to keep the table visually quiet; click to swap in the actual
   input control for that cell only. */
.metadata-cell-empty[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-disabled);
    font: inherit;
    cursor: text;
    border-radius: 4px;
    transition: background-color 120ms ease, color 120ms ease;
}

.metadata-cell-empty:hover:not(:disabled)[b-vgsvgamfpj] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.metadata-cell-empty:disabled[b-vgsvgamfpj] {
    cursor: default;
    opacity: 0.5;
}

/* Dirty / error / deleted row states */
.metadata-table-row--dirty[b-vgsvgamfpj] {
    border-left: 3px solid var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 4%, transparent);
}

.metadata-table-row--error[b-vgsvgamfpj] {
    border-left: 3px solid var(--mud-palette-error);
    background-color: color-mix(in srgb, var(--mud-palette-error) 5%, transparent);
}

.metadata-table-row--deleted[b-vgsvgamfpj] {
    background-color: var(--mud-palette-action-default-hover);
    opacity: 0.7;
}

.metadata-table-row--deleted .metadata-col-field[b-vgsvgamfpj] {
    text-decoration: line-through;
    color: var(--mud-palette-text-disabled);
}

/* Draft row (+ Aggiungi regola) */
.metadata-table-row--draft[b-vgsvgamfpj] {
    background-color: var(--mud-palette-primary-hover);
    border-left: 3px solid var(--mud-palette-primary);
}

/* ─────── Step 1: grouped summary row + expanded children ─────── */
.metadata-group-summary[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns:
        28px
        minmax(140px, 1.2fr)
        minmax(320px, 4.5fr)
        minmax(100px, 0.8fr)
        minmax(80px, 0.6fr);
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    align-items: center;
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: background-color 120ms ease;
    border-left: 3px solid transparent;
}

.metadata-group-summary:hover[b-vgsvgamfpj] {
    background-color: var(--mud-palette-action-default-hover);
}

.metadata-group-summary--expanded[b-vgsvgamfpj] {
    background-color: var(--mud-palette-table-hover);
    border-bottom-color: transparent;
}

.metadata-group-summary--dirty[b-vgsvgamfpj] {
    border-left-color: var(--mud-palette-warning);
}

.metadata-group-summary--error[b-vgsvgamfpj] {
    border-left-color: var(--mud-palette-error);
}

.metadata-group-summary--deleted[b-vgsvgamfpj] {
    opacity: 0.6;
    font-style: italic;
}

.metadata-group-field[b-vgsvgamfpj] {
    font-weight: 600;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

.metadata-group-context[b-vgsvgamfpj] {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-action-default-hover);
    padding: 2px 6px;
    border-radius: 4px;
}

.metadata-attr-chip[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-right: 6px;
    margin-bottom: 2px;
    border-radius: 999px;
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.metadata-attr-chip-label[b-vgsvgamfpj] {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.metadata-attr-chip-value[b-vgsvgamfpj] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.metadata-attr-chip--dirty[b-vgsvgamfpj] {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    border-color: var(--mud-palette-warning);
}

.metadata-attr-chip--error[b-vgsvgamfpj] {
    background-color: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
    border-color: var(--mud-palette-error);
}

/* Expanded children: indented sub-area with the existing 7-col rows.
   The 28px left-pad mirrors the parent's chevron column so child cells start
   under the parent's Field column. Right edge is flush with the parent row
   so STATUS/ACTIONS cells align between the two grids. */
.metadata-group-children[b-vgsvgamfpj] {
    background-color: var(--mud-palette-table-hover);
    padding: 4px 0 8px 28px;
    border-bottom: 1px solid var(--mud-palette-divider);
    border-left: 3px solid var(--mud-palette-primary);
}

/* Mini-header inside the expanded children to label the 7 sub-columns.
   Status/actions widths (0.8fr/0.6fr) match the parent's grouped header so
   the SALVATO chip and trash button line up vertically across rows. */
.metadata-children-header[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.2fr)
        minmax(120px, 1fr)
        minmax(140px, 1.2fr)
        minmax(120px, 1fr)
        minmax(140px, 1.3fr)
        minmax(100px, 0.8fr)
        minmax(80px, 0.6fr);
    gap: 8px;
    padding: 4px 14px;
    margin: 0 0 2px;
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.metadata-children-header .metadata-table-cell[b-vgsvgamfpj] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.metadata-col-help-icon[b-vgsvgamfpj] {
    color: var(--mud-palette-text-secondary);
    cursor: help;
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
}

/* Existing row: field is read-only, render as plain text aligned with the
   editable cells (other columns still use input controls). */
.metadata-row-field-readonly[b-vgsvgamfpj] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.metadata-group-children .metadata-table-row[b-vgsvgamfpj] {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    margin: 4px 0;
    padding: 4px 14px;
}

.metadata-group-children .metadata-table-row:last-child[b-vgsvgamfpj] {
    margin-bottom: 0;
}


/* MetadataValueEditor: stepper + regex */
.metadata-stepper[b-vgsvgamfpj] {
    flex-wrap: nowrap;
}

.metadata-stepper-input[b-vgsvgamfpj] {
    max-width: 80px;
}

.metadata-stepper-input :deep(input)[b-vgsvgamfpj] {
    text-align: center;
}

.metadata-regex[b-vgsvgamfpj] {
    width: 100%;
    flex-wrap: nowrap;
}

.metadata-regex-tester[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.metadata-empty-state[b-vgsvgamfpj] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

/* Table footer: add-row CTA left, pager right */
.metadata-table-footer[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    flex-wrap: wrap;
}

.metadata-table-footer-left[b-vgsvgamfpj] {
    flex: 1 1 auto;
}

.metadata-table-pager[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.metadata-table-pager-label[b-vgsvgamfpj] {
    min-width: 90px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
    .metadata-filter-strip[b-vgsvgamfpj] {
        grid-template-columns: 1fr;
    }
}

/* ─────── Scope ambito: dropdown options + multi-select pickers ─────── */

/* Origin / Parent dropdown items: icon + label */
.metadata-origin-option[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Token-field wrapper: chips + autocomplete share one bordered box.
   Visual pattern: Gmail "To" / Material Outlined Autocomplete multi. The chips
   sit at the top of the box, the search input flows underneath inside the same
   border, so adding a chip doesn't make the input look like it "jumped" away. */
.metadata-picker-merged[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px 0;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.metadata-picker-merged:hover[b-vgsvgamfpj] {
    border-color: var(--mud-palette-text-primary);
}

.metadata-picker-merged:focus-within[b-vgsvgamfpj] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* Strip the inner autocomplete's own underline / borders so only the wrapper
   draws a frame. The autocomplete is set to Variant.Text in markup. */
.metadata-picker-merged[b-vgsvgamfpj]  .mud-input.mud-input-underline:before,
.metadata-picker-merged[b-vgsvgamfpj]  .mud-input.mud-input-underline:after {
    display: none !important;
}

.metadata-picker-merged[b-vgsvgamfpj]  .mud-input-control {
    margin-top: 0 !important;
}

/* Chip strip showing currently-selected users / agents / roles */
.metadata-picker-chips[b-vgsvgamfpj] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0;
}

.metadata-picker-merged .metadata-picker-chips[b-vgsvgamfpj] {
    margin-bottom: 0;
}

.metadata-picker-chip[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    padding: 2px 4px 2px 2px;
    font-size: 0.85rem;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.metadata-picker-chip:hover[b-vgsvgamfpj] {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-text-disabled);
}

.metadata-picker-chip-avatar[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: hsl(var(--avatar-hue, 210), 65%, 88%);
    color: hsl(var(--avatar-hue, 210), 70%, 28%);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.metadata-picker-chip-avatar--icon[b-vgsvgamfpj] {
    background: hsl(var(--avatar-hue, 210), 65%, 92%);
}

.metadata-picker-chip-label[b-vgsvgamfpj] {
    padding: 0 4px 0 2px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.metadata-picker-chip-close[b-vgsvgamfpj] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 2px;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: color 120ms ease, background-color 120ms ease;
}

.metadata-picker-chip-close:hover[b-vgsvgamfpj] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

/* Variants: agent / role get a different accent on the chip border */
.metadata-picker-chip--agent[b-vgsvgamfpj] {
    border-color: hsl(var(--avatar-hue, 210), 55%, 70%);
}

.metadata-picker-chip--role[b-vgsvgamfpj] {
    border-color: var(--mud-palette-info);
}

/* Dropdown item template (autocomplete suggestions) */
.metadata-picker-option[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    min-width: 0;
}

.metadata-picker-option-avatar[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: hsl(var(--avatar-hue, 210), 65%, 88%);
    color: hsl(var(--avatar-hue, 210), 70%, 28%);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.metadata-picker-option-avatar--icon[b-vgsvgamfpj] {
    background: hsl(var(--avatar-hue, 210), 65%, 92%);
}

.metadata-picker-option-text[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.metadata-picker-option-name[b-vgsvgamfpj] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metadata-picker-option-secondary[b-vgsvgamfpj] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* Parent: compact segmented pill toggle (Base vs. autonomous).
   Replaces the older two-card layout (.metadata-parent-options) — those
   styles remain only for any legacy markup that still references them. */
.metadata-parent-segmented[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    padding: 2px;
    background: var(--mud-palette-background-grey);
    gap: 2px;
}

.metadata-parent-pill[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    transition: background-color 120ms ease, color 120ms ease;
}

.metadata-parent-pill:hover[b-vgsvgamfpj] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

.metadata-parent-pill:focus-visible[b-vgsvgamfpj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.metadata-parent-pill--selected[b-vgsvgamfpj] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.metadata-parent-pill--selected:hover[b-vgsvgamfpj] {
    background: var(--mud-palette-primary-darken);
    color: var(--mud-palette-primary-text);
}

/* Parent: card-style radio buttons (inherit-from-Base vs. autonomous) */
.metadata-parent-options[b-vgsvgamfpj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .metadata-parent-options[b-vgsvgamfpj] {
        grid-template-columns: 1fr;
    }
}

.metadata-parent-option[b-vgsvgamfpj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius, 8px);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--mud-palette-text-primary);
    transition: background-color 120ms ease, border-color 120ms ease;
    position: relative;
}

.metadata-parent-option:hover[b-vgsvgamfpj] {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-text-disabled);
}

.metadata-parent-option:focus-visible[b-vgsvgamfpj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.metadata-parent-option--selected[b-vgsvgamfpj] {
    background-color: var(--mud-palette-primary-hover);
    border-color: var(--mud-palette-primary);
}

.metadata-parent-option--selected .metadata-parent-option-name[b-vgsvgamfpj] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.metadata-parent-option-icon[b-vgsvgamfpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.metadata-parent-option--selected .metadata-parent-option-icon[b-vgsvgamfpj] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.metadata-parent-option-text[b-vgsvgamfpj] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    flex: 1 1 auto;
}

.metadata-parent-option-name[b-vgsvgamfpj] {
    font-size: 0.88rem;
    font-weight: 500;
}

.metadata-parent-option-hint[b-vgsvgamfpj] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.metadata-parent-option-check[b-vgsvgamfpj] {
    flex-shrink: 0;
    margin-left: auto;
}
/* /Components/Pages/PriceDiagnostics.razor.rz.scp.css */
/* The calculation log is fixed-width text with meaningful indentation: the legacy's own log indents a
   step under the section it belongs to, and collapsing that whitespace would lose the structure.
   Colours come from the theme's palette variables, never hardcoded. */
.kimo-price-log[b-tkxpbtaavs] {
    margin: 0;
    padding: 1rem;
    max-height: 32rem;
    overflow: auto;
    white-space: pre;
    font-family: var(--mud-typography-body1-family, monospace);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
}
/* /Components/Pages/RoleForm.razor.rz.scp.css */
.roleform-header[b-i7w4j6jgw9] {
    background-color: var(--mud-palette-surface);
    padding: 16px;
    margin: -16px -16px 16px -16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 24px;
    position: sticky;
    top: var(--mud-appbar-height);
    z-index: 9;
}


/* /Components/Pages/SettingsPage.razor.rz.scp.css */
/* "Tutto a destra" layout — sticky header + paginated scrollable middle +
   sticky pager footer. The shell takes the full available vertical space so
   only the middle region scrolls; main page chrome (nav, app bar, footer)
   stays put. Reference: claude.ai/design Console Kimo (Tutto a destra). */

.settings-page-shell[b-36ylo9uqwh] {
    display: flex;
    flex-direction: column;
    /* The Admin layout reserves the topbar height via var(--mud-appbar-height) +
       24px of MudMainContent padding-top (see MainLayout.razor). Subtract both
       so the shell fits the remaining viewport without forcing the outer page
       to scroll. */
    height: calc(100vh - var(--mud-appbar-height, 64px) - 48px);
    min-height: 0;
}

.settings-page-header[b-36ylo9uqwh] {
    border-color: var(--mud-palette-divider);
    flex: 0 0 auto;
}

.settings-rows-scroll[b-36ylo9uqwh] {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Subtle inset so the scrolled cards have breathing room from the pager. */
    padding: 0 0.25rem 0.5rem;
    min-height: 0;
}

.settings-pager[b-36ylo9uqwh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    flex: 0 0 auto;
}

.settings-pager-info[b-36ylo9uqwh] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.settings-pager-size[b-36ylo9uqwh] {
    max-width: 96px;
}

.settings-step-label[b-36ylo9uqwh] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

/* Pill-shaped segmented control for Type tabs. */
.settings-type-tabs[b-36ylo9uqwh] {
    display: inline-flex;
    background: var(--mud-palette-action-disabled-background);
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
}

.settings-type-tab[b-36ylo9uqwh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    border-radius: 9999px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    transition: background 120ms ease, color 120ms ease;
}

.settings-type-tab:hover[b-36ylo9uqwh] {
    color: var(--mud-palette-text-primary);
}

.settings-type-tab.active[b-36ylo9uqwh] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.settings-type-tab-count[b-36ylo9uqwh] {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.6;
}

/* Pill-shaped trigger for the Section multi-select. */
.settings-section-trigger[b-36ylo9uqwh] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 240px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    border-radius: 9999px;
    padding: 8px 14px 8px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.settings-section-trigger:hover[b-36ylo9uqwh] {
    border-color: var(--mud-palette-primary);
}

.settings-section-trigger-label[b-36ylo9uqwh] {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-section-trigger-count[b-36ylo9uqwh] {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--mud-palette-primary-contrastText);
    background: var(--mud-palette-primary);
    border-radius: 9999px;
    padding: 1px 8px;
}

/* The dropdown options panel — feeds MudMenu's popover. */
.settings-section-dropdown[b-36ylo9uqwh] {
    max-width: 360px;
}

.settings-section-option[b-36ylo9uqwh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 100ms ease;
}

.settings-section-option:hover[b-36ylo9uqwh] {
    background: var(--mud-palette-action-disabled-background);
}

.settings-section-option.selected[b-36ylo9uqwh] {
    background: var(--mud-palette-primary-hover);
}

.settings-section-option.danger[b-36ylo9uqwh] {
    color: var(--mud-palette-warning);
}

.settings-section-option.danger:hover[b-36ylo9uqwh] {
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.08));
}

.settings-section-option-text[b-36ylo9uqwh] {
    flex: 1;
    min-width: 0;
}

.settings-section-option-title[b-36ylo9uqwh] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.settings-section-option-desc[b-36ylo9uqwh] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-section-option.danger .settings-section-option-title[b-36ylo9uqwh] {
    color: var(--mud-palette-warning-darken);
}

.settings-section-option.danger .settings-section-option-desc[b-36ylo9uqwh] {
    color: var(--mud-palette-warning);
}

.settings-section-check[b-36ylo9uqwh] {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    border: 2px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--mud-palette-primary-contrastText);
}

.settings-section-check.round[b-36ylo9uqwh] {
    border-radius: 9999px;
}

.settings-section-check.checked[b-36ylo9uqwh] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
}

.settings-section-icon.danger[b-36ylo9uqwh] {
    width: 19px;
    height: 19px;
    border-radius: 9999px;
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.16));
    color: var(--mud-palette-warning);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.settings-section-option-count[b-36ylo9uqwh] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-disabled);
    min-width: 22px;
    text-align: right;
    flex: 0 0 auto;
}

.settings-section-custom-badge[b-36ylo9uqwh] {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--mud-palette-warning-darken, #C2560C);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.16));
    border: 1px solid var(--mud-palette-warning);
    border-radius: 9999px;
    padding: 1px 8px;
    flex: 0 0 auto;
}

.settings-section-danger-count[b-36ylo9uqwh] {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--mud-palette-warning-contrastText, #fff);
    background: var(--mud-palette-warning);
    border-radius: 9999px;
    padding: 1px 8px;
    flex: 0 0 auto;
}

/* Section title row + group headers reuse this count chip. */
.settings-count-chip[b-36ylo9uqwh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-disabled-background);
    border-radius: 9999px;
    padding: 2px 10px;
    margin-left: 0.5rem;
}

.settings-group-header[b-36ylo9uqwh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 10px 16px;
    margin: 1rem 0 0.5rem;
    background: var(--mud-palette-action-disabled-background);
    border-radius: var(--mud-default-borderradius);
    border-top: 1px solid var(--mud-palette-divider);
}

/* Rich section header (single-section view): icon + title + count + mini-stats
   on one row, description below. Replaces the bare h6 + chip combo. */
.settings-section-card[b-36ylo9uqwh] {
    border-color: var(--mud-palette-divider);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mud-palette-primary) 4%, transparent),
        transparent 70%);
}

.settings-section-card__head[b-36ylo9uqwh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.settings-section-card__icon[b-36ylo9uqwh] {
    font-size: 1.4rem !important;
}

.settings-section-card__title[b-36ylo9uqwh] {
    margin: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.settings-section-card__stat[b-36ylo9uqwh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--mud-palette-action-disabled-background);
}

.settings-section-card__stat--custom[b-36ylo9uqwh] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.settings-section-card__stat :deep(.mud-icon-root)[b-36ylo9uqwh] {
    font-size: 1rem !important;
}

.settings-section-card__description[b-36ylo9uqwh] {
    color: var(--mud-palette-text-secondary);
    margin-top: 0.4rem;
    line-height: 1.4;
}

/* Sub-group header inside a section (e.g. "Permessi", "Sincronizzazione"). Small
   uppercase label + a thin divider — visually quieter than the section card so
   the hierarchy reads as Section → Group → Row. */
.settings-subgroup-header[b-36ylo9uqwh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.8rem 0.25rem 0.4rem;
}

.settings-subgroup-title[b-36ylo9uqwh] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.settings-subgroup-line[b-36ylo9uqwh] {
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-divider);
}

.settings-subgroup-header:first-child[b-36ylo9uqwh] {
    margin-top: 0.25rem;
}

.settings-danger-banner[b-36ylo9uqwh] {
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, 0.08));
    border: 1px solid var(--mud-palette-warning);
}

.settings-danger-title[b-36ylo9uqwh] {
    color: var(--mud-palette-warning-darken, #A8530A);
}

.settings-danger-body[b-36ylo9uqwh] {
    color: var(--mud-palette-warning-text, #8A5A2A);
}
/* /Components/Pages/Themes.razor.rz.scp.css */
/* ─── Page layout: 3-column grid (rail · controls · preview) ─── */
.theme-page-grid[b-b7shtfocki] {
    display: grid;
    grid-template-columns: 220px minmax(440px, 520px) 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem;
    min-height: calc(100vh - var(--mud-appbar-height));
}

@media (max-width: 1240px) {
    .theme-page-grid[b-b7shtfocki] {
        grid-template-columns: 220px 1fr;
    }
    .theme-page-preview[b-b7shtfocki] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .theme-page-grid[b-b7shtfocki] {
        grid-template-columns: 1fr;
    }
    .theme-rail[b-b7shtfocki] {
        position: static;
    }
}

/* ─── Rail (master) ─── */
.theme-rail[b-b7shtfocki] {
    position: sticky;
    top: 1rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
}

.theme-rail-title[b-b7shtfocki] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    padding: 0.25rem 0.5rem 0.5rem;
}

.theme-rail-items[b-b7shtfocki] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.theme-rail-item[b-b7shtfocki] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: background .15s, border-color .15s;
}

.theme-rail-item:hover[b-b7shtfocki] {
    background: rgba(21, 101, 192, .06);
}

.theme-rail-item.is-active[b-b7shtfocki] {
    background: rgba(21, 101, 192, .10);
    border-left-color: var(--mud-palette-primary);
}

.theme-rail-dot[b-b7shtfocki] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
    box-shadow: 0 0 0 1px var(--mud-palette-divider);
    flex: 0 0 14px;
}

.theme-rail-text[b-b7shtfocki] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.theme-rail-label[b-b7shtfocki] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.theme-rail-sub[b-b7shtfocki] {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-rail-item.is-custom .theme-rail-sub[b-b7shtfocki] {
    color: var(--mud-palette-info);
    font-weight: 600;
}

/* Pending override (non-customised, non-global): dimmed to signal "create on click",
   the + icon on the right hints that this is an explicit creation action. */
.theme-rail-item.is-pending[b-b7shtfocki] {
    opacity: 0.62;
}

.theme-rail-item.is-pending:hover[b-b7shtfocki],
.theme-rail-item.is-pending.is-active[b-b7shtfocki] {
    opacity: 1;
}

/* Decorative + icon, absolutely positioned so it lines up vertically and
   horizontally with the × of customised siblings. Pointer-events:none so
   clicks pass through to the rail-item button underneath. */
.theme-rail-add[b-b7shtfocki] {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

/* Wrapper around each rail item — positions the inline delete button at the
   right edge without disturbing the main button's flex content. */
.theme-rail-item-wrap[b-b7shtfocki] {
    position: relative;
    display: block;
}

.theme-rail-item-wrap .theme-rail-item[b-b7shtfocki] {
    width: 100%;
    /* Make room for the absolute-positioned delete button on customised items. */
    padding-right: 2.25rem;
}

.theme-rail-remove[b-b7shtfocki] {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}

.theme-rail-item-wrap:hover .theme-rail-remove[b-b7shtfocki],
.theme-rail-item-wrap.is-active .theme-rail-remove[b-b7shtfocki] {
    opacity: 0.8;
}

.theme-rail-remove:hover[b-b7shtfocki] {
    opacity: 1 !important;
    background: rgba(225, 29, 72, 0.10);
    color: #e11d48;
}

.theme-rail-dirty[b-b7shtfocki] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
}

/* ─── Controls panel ─── */
.theme-page-controls[b-b7shtfocki] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.theme-toolbar[b-b7shtfocki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-wrap: wrap;
}

.theme-toolbar-text[b-b7shtfocki] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.theme-toolbar-title[b-b7shtfocki] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-toolbar-chips[b-b7shtfocki] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.theme-toolbar-version[b-b7shtfocki] {
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}

.theme-toolbar-actions[b-b7shtfocki] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Inheritance banner */
.theme-banner[b-b7shtfocki] {
    margin-bottom: 1rem;
}

/* ─── Preview ─── */
.theme-page-preview[b-b7shtfocki] {
    min-width: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 4rem);
    display: flex;
}

.theme-mono[b-b7shtfocki] {
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* ─── Tab panel: more breathing room than the MudTabs default ─── */
.theme-tab-panel[b-b7shtfocki] {
    padding: 1.5rem 1.5rem !important;
    min-height: 400px;
}

.theme-tab-header[b-b7shtfocki] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.theme-tab-header-text[b-b7shtfocki] {
    min-width: 0;
}

.theme-tab-header-title[b-b7shtfocki] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.theme-tab-header-sub[b-b7shtfocki] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.theme-section-title[b-b7shtfocki] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.5rem;
}

.theme-section-block + .theme-section-block[b-b7shtfocki] {
    margin-top: 1.5rem;
}

.theme-slider-row[b-b7shtfocki] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.theme-slider-row > :first-child[b-b7shtfocki] {
    flex: 1;
}

.theme-slider-value[b-b7shtfocki] {
    min-width: 56px;
    padding: 0.375rem 0.625rem;
    font-family: 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    flex: 0 0 auto;
}

/* ─── Preview frame ─── */
.preview-card[b-b7shtfocki] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.preview-header[b-b7shtfocki] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.preview-stage[b-b7shtfocki] {
    flex: 1;
    overflow: auto;
    padding: 1.25rem;
    background-color: #eef1f5;
    background-image: radial-gradient(#d6dbe2 1px, transparent 1px);
    background-size: 14px 14px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
}

.preview-stage--mobile[b-b7shtfocki] {
    padding: 1.5rem 0;
}

.preview-frame[b-b7shtfocki] {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .18), 0 4px 8px rgba(15, 23, 42, .06);
    border: 1px solid var(--mud-palette-divider);
}

.preview-frame--desktop[b-b7shtfocki] {
    width: 100%;
    max-width: none;
}

.preview-frame--phone[b-b7shtfocki] {
    width: 360px;
    height: 720px;
    border-radius: 36px;
    border: 8px solid #1a1f29;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .35);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.preview-appbar[b-b7shtfocki] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 56px;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.preview-appbar-title[b-b7shtfocki] {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}

.preview-appbar-flavor[b-b7shtfocki] {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: .85;
}

/* Shell = drawer + body (desktop), body only (mobile) */
.preview-shell[b-b7shtfocki] {
    display: flex;
    min-height: 0;
}

.preview-frame--phone .preview-shell[b-b7shtfocki] {
    flex: 1;
}

.preview-drawer[b-b7shtfocki] {
    width: 180px;
    flex: 0 0 180px;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-drawer-logo[b-b7shtfocki] {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    padding: 0 0.625rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: 0.5rem;
}

.preview-drawer-item[b-b7shtfocki] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    opacity: 0.92;
    cursor: default;
}

.preview-drawer-item:hover[b-b7shtfocki] {
    background: rgba(255, 255, 255, .08);
}

.preview-body[b-b7shtfocki] {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: auto;
    min-width: 0;
}

.preview-frame--phone .preview-body[b-b7shtfocki] {
    padding: 0.75rem;
    gap: 0.75rem;
}

/* Mobile preview: stack all widgets in a single column, scroll vertically.
   The reviewer sees the same set of themed components as on desktop but in a
   phone-friendly layout. */
.preview-frame--phone .preview-stats[b-b7shtfocki] {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.preview-frame--phone .preview-alerts[b-b7shtfocki] {
    grid-template-columns: 1fr;
}

/* Show only the first stat on mobile — Active Accounts. The other two
   (New this week, Pending sync) take vertical room without adding much
   theming value on the phone frame. */
.preview-frame--phone .preview-stat:nth-child(n+2)[b-b7shtfocki] {
    display: none;
}

/* Let the list grow with content inside the phone body. The previous
   `max-height: 240px` collapsed to 0 inside the overflow:hidden card on the
   phone shell — the rows disappeared. The phone .preview-body itself has
   overflow: auto so the page scrolls naturally. */
.preview-frame--phone .preview-list[b-b7shtfocki] {
    max-height: none;
    overflow: visible;
}

.preview-frame--phone .preview-row[b-b7shtfocki] {
    grid-template-columns: 64px 1fr auto;
    gap: 0.5rem;
    font-size: 0.75rem;
}

/* Mobile row hides the city column to fit the narrow frame — name + pill is
   the meaningful subset, code stays as primary identifier. */
.preview-frame--phone .preview-row-city[b-b7shtfocki] {
    display: none;
}

.preview-card-block[b-b7shtfocki] {
    border: 1px solid var(--mud-palette-divider);
    overflow: hidden;
}

.preview-card-header[b-b7shtfocki] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.preview-list[b-b7shtfocki] {
    max-height: 320px;
    overflow: auto;
}

.preview-row[b-b7shtfocki] {
    display: grid;
    grid-template-columns: 80px 1fr 100px auto;
    gap: 1rem;
    align-items: center;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.8125rem;
    transition: background .15s;
}

.preview-row:last-child[b-b7shtfocki] {
    border-bottom: 0;
}

.preview-row-code[b-b7shtfocki] {
    font-weight: 600;
    font-family: 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
}

.preview-row-name[b-b7shtfocki] {
    font-weight: 500;
}

.preview-row-city[b-b7shtfocki] {
    font-size: 0.75rem;
}

.preview-row-pill[b-b7shtfocki] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Stat cards row */
.preview-stats[b-b7shtfocki] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.preview-stat[b-b7shtfocki] {
    padding: 1rem;
    border: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-stat-label[b-b7shtfocki] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.preview-stat-value[b-b7shtfocki] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.preview-stat-delta[b-b7shtfocki] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.preview-alerts[b-b7shtfocki] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.preview-form-body[b-b7shtfocki] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1rem;
}

.preview-form-actions[b-b7shtfocki] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.preview-footer[b-b7shtfocki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.preview-footer span[b-b7shtfocki] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ─── Light/Dark physical toggle (skeuomorphic) ───
   Single pill control with two halves (Sun / Moon) and a sliding thumb that
   covers the active half. Mirror of dark-mode toggles in Stripe / Linear /
   Vercel. State communicated visually by the thumb position; the inactive
   half stays dimmed. */
.theme-mode-switch[b-b7shtfocki] {
    --thumb-pad: 4px;
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: 220px;
    height: 36px;
    padding: var(--thumb-pad);
    background: var(--mud-palette-divider);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background .2s;
    overflow: hidden;
}

.theme-mode-switch:hover[b-b7shtfocki] {
    background: rgba(15, 23, 42, .14);
}

.theme-mode-side[b-b7shtfocki] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    z-index: 1;
    transition: color .2s;
    pointer-events: none;
}

.theme-mode-switch.is-light .theme-mode-side-light[b-b7shtfocki],
.theme-mode-switch.is-dark .theme-mode-side-dark[b-b7shtfocki] {
    color: var(--mud-palette-text-primary);
}

.theme-mode-thumb[b-b7shtfocki] {
    position: absolute;
    top: var(--thumb-pad);
    bottom: var(--thumb-pad);
    width: calc(50% - var(--thumb-pad));
    background: var(--mud-palette-surface);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .08);
    transition: left .22s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-mode-switch.is-light .theme-mode-thumb[b-b7shtfocki] {
    left: var(--thumb-pad);
}

.theme-mode-switch.is-dark .theme-mode-thumb[b-b7shtfocki] {
    left: 50%;
}

/* ─── Edit ↔ preview "where-used" overlay ───
   Pattern: Figma "Go to style usage" / DevTools inspect — outline matching
   elements with a vivid fixed colour (#e11d48 / rose-600) so the highlight
   is visible regardless of theme, and KEEP the rest of the preview at full
   opacity so the reviewer doesn't lose context. A floating chip names the
   token via `attr(data-edit-focus)` on a ::after pseudo-element. */
.preview-frame[data-edit-focus] [data-paints][b-b7shtfocki] {
    transition: outline-color .15s, box-shadow .15s;
}

.preview-frame[data-edit-focus="Primary"] [data-paints~="Primary"][b-b7shtfocki],
.preview-frame[data-edit-focus="Secondary"] [data-paints~="Secondary"][b-b7shtfocki],
.preview-frame[data-edit-focus="Tertiary"] [data-paints~="Tertiary"][b-b7shtfocki],
.preview-frame[data-edit-focus="Background"] [data-paints~="Background"][b-b7shtfocki],
.preview-frame[data-edit-focus="Surface"] [data-paints~="Surface"][b-b7shtfocki],
.preview-frame[data-edit-focus="Success"] [data-paints~="Success"][b-b7shtfocki],
.preview-frame[data-edit-focus="Info"] [data-paints~="Info"][b-b7shtfocki],
.preview-frame[data-edit-focus="Warning"] [data-paints~="Warning"][b-b7shtfocki],
.preview-frame[data-edit-focus="Error"] [data-paints~="Error"][b-b7shtfocki],
.preview-frame[data-edit-focus="TextPrimary"] [data-paints~="TextPrimary"][b-b7shtfocki],
.preview-frame[data-edit-focus="TextSecondary"] [data-paints~="TextSecondary"][b-b7shtfocki],
.preview-frame[data-edit-focus="AppbarBackground"] [data-paints~="AppbarBackground"][b-b7shtfocki],
.preview-frame[data-edit-focus="AppbarText"] [data-paints~="AppbarText"][b-b7shtfocki],
.preview-frame[data-edit-focus="DrawerBackground"] [data-paints~="DrawerBackground"][b-b7shtfocki],
.preview-frame[data-edit-focus="DrawerText"] [data-paints~="DrawerText"][b-b7shtfocki],
.preview-frame[data-edit-focus="StripeColor"] [data-paints~="StripeColor"][b-b7shtfocki] {
    outline: 2px solid #e11d48;
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.14), 0 2px 12px rgba(225, 29, 72, 0.18);
    z-index: 1;
    position: relative;
}

/* /Components/Pages/Translations.razor.rz.scp.css */
[b-vbhfcalmuj] .translation-row-overridden {
    background-color: #e3f2fd !important;
}

[b-vbhfcalmuj] .translation-row-custom-only {
    background-color: #fff9c4 !important;
}
/* /Components/Pages/UserPage.razor.rz.scp.css */
.userpage-header[b-aza8ns1qjw] {
    background-color: var(--mud-palette-surface);
    padding: 16px;
    margin: -16px -16px 0 -16px;
    padding-bottom: 12px;
    position: sticky;
    top: var(--mud-appbar-height);
    z-index: 9;
}

/* MudBlazor v8.x internal classes — no public API for this level of tab customization.
   Review on MudBlazor upgrade: .mud-tabs, .mud-tabs-header, .mud-tab, .mud-tab-slider */

/* Remove MudTabs rounded container border, full width */
[b-aza8ns1qjw] .mud-tabs {
    border: none;
    margin: 0 -16px;
}

/* Tab bar container — sticky below header, full width */
[b-aza8ns1qjw] .mud-tabs-header {
    position: sticky;
    top: calc(var(--mud-appbar-height) + 65px);
    z-index: 10;
    background-color: var(--mud-palette-surface);
    padding: 8px 16px 0 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Sentence case + larger font */
[b-aza8ns1qjw] .mud-tab {
    text-transform: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 12px 24px !important;
    min-height: 48px;
    color: var(--mud-palette-text-secondary);
    transition: all 0.2s ease;
}

/* Active tab — pill with colored bottom border */
[b-aza8ns1qjw] .mud-tab.mud-tab-active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border-radius: 8px 8px 0 0;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Hover on inactive tab */
[b-aza8ns1qjw] .mud-tab:not(.mud-tab-active):hover {
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 8px 8px 0 0;
}

/* Slider as colored line under active tab */
[b-aza8ns1qjw] .mud-tab-slider {
    background-color: var(--mud-palette-primary);
    height: 3px;
    border-radius: 3px 3px 0 0;
}

.kimo-role-card[b-aza8ns1qjw] {
    transition: all 0.2s ease;
    border-color: var(--mud-palette-lines-default);
}

.kimo-role-card:hover[b-aza8ns1qjw] {
    border-color: var(--mud-palette-primary);
}

.permission-search[b-aza8ns1qjw] {
    position: sticky;
    top: 0;
    background-color: var(--mud-palette-surface);
    z-index: 1;
    padding-bottom: 4px;
}

.permission-category-header[b-aza8ns1qjw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    cursor: pointer;
    user-select: none;
}

.permission-category-header:hover[b-aza8ns1qjw] {
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 4px;
}

.permission-chevron[b-aza8ns1qjw] {
    transition: transform 0.2s ease;
}

.permission-row[b-aza8ns1qjw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 32px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.permission-row:nth-child(even)[b-aza8ns1qjw] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.permission-row:last-child[b-aza8ns1qjw] {
    border-bottom: none;
}

.kimo-role-card--selected[b-aza8ns1qjw] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    border-color: var(--mud-palette-primary);
}
/* /Components/PermissionToggleList.razor.rz.scp.css */
.permission-search[b-6xovbotslg] {
    position: sticky;
    top: 0;
    background-color: var(--mud-palette-surface);
    z-index: 1;
    padding-bottom: 4px;
}

.permission-category-header[b-6xovbotslg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    cursor: pointer;
    user-select: none;
}

.permission-category-header:hover[b-6xovbotslg] {
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 4px;
}

.permission-chevron[b-6xovbotslg] {
    transition: transform 0.2s ease;
}

.permission-row[b-6xovbotslg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 32px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.permission-row:nth-child(even)[b-6xovbotslg] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.permission-row:last-child[b-6xovbotslg] {
    border-bottom: none;
}
/* /Components/Settings/FieldListEditorDialog.razor.rz.scp.css */
.field-list-dialog__property[b-xju96tnpmu] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.field-list-dialog__current[b-xju96tnpmu],
.field-list-dialog__suggestions[b-xju96tnpmu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.field-list-dialog__add[b-xju96tnpmu] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.field-list-dialog__add-input[b-xju96tnpmu] {
    flex: 1 1 auto;
}

.field-list-dialog__preview[b-xju96tnpmu] {
    background-color: var(--mud-palette-background-grey);
    border-radius: var(--mud-default-borderradius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    word-break: break-all;
}
/* /Components/Settings/SettingRowEditor.razor.rz.scp.css */
.setting-row[b-ipy2lzdrrk] {
    border-radius: var(--mud-default-borderradius);
    border-color: var(--mud-palette-divider);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.setting-row:hover[b-ipy2lzdrrk] {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
}

/* Compact mode (default): identity left, editor right. Short scalar values fit. */
.setting-row__main[b-ipy2lzdrrk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 1rem;
    align-items: start;
}

/* Advanced mode (Template / Field list): identity column spans full width and
   the editor lives in a Modifica button on the title row + a single preview
   line under the description. Two visual lines + button — same vertical budget
   as the simple rows. */
.setting-row__main--advanced[b-ipy2lzdrrk] {
    display: block;
}

.setting-row__info[b-ipy2lzdrrk] {
    min-width: 0;
}

.setting-row__title[b-ipy2lzdrrk] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    flex-wrap: nowrap;
}

.setting-row__name[b-ipy2lzdrrk] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
    min-width: 0;
}

.setting-row__type-chip[b-ipy2lzdrrk] {
    height: auto;
    padding: 0 0.45rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    border-radius: 999px;
    flex-shrink: 0;
}

.setting-row__badge[b-ipy2lzdrrk] {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    line-height: 1.4;
    flex-shrink: 0;
}

.setting-row__badge.is-custom[b-ipy2lzdrrk] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.setting-row__badge.is-default[b-ipy2lzdrrk] {
    background-color: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
}

.setting-row__advanced-button[b-ipy2lzdrrk] {
    flex-shrink: 0;
}

.setting-row__description[b-ipy2lzdrrk] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    margin-top: 0.1rem;
    font-size: 0.85rem;
}

.setting-row__editor[b-ipy2lzdrrk] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.setting-row__input[b-ipy2lzdrrk],
.setting-row__bool[b-ipy2lzdrrk] {
    width: 100%;
}

.setting-row__json :deep(textarea)[b-ipy2lzdrrk] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

/* Preview row under the description in --advanced mode. Single visual line. */
.setting-row__preview[b-ipy2lzdrrk] {
    display: block;
    margin-top: 0.35rem;
    line-height: 1.4;
    font-size: 0.82rem;
    word-break: break-all;
}

.setting-row__preview--code[b-ipy2lzdrrk] {
    padding: 0.3rem 0.55rem;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-grey);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
}

.setting-row__preview--chips[b-ipy2lzdrrk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.setting-row__preview-chip[b-ipy2lzdrrk] {
    height: auto;
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
}

.setting-row__actions[b-ipy2lzdrrk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.setting-row__actions--advanced[b-ipy2lzdrrk] {
    margin-top: 0.5rem;
}

.setting-row__failures[b-ipy2lzdrrk] {
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .setting-row__main[b-ipy2lzdrrk] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Settings/TemplateEditorDialog.razor.rz.scp.css */
.template-editor-dialog__property[b-hrb1htticd] {
    color: var(--mud-palette-text-secondary);
    font-family: var(--mud-typography-default-family);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.template-editor-dialog__text :deep(textarea)[b-hrb1htticd] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.template-editor-dialog__chips[b-hrb1htticd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.template-editor-dialog__preview[b-hrb1htticd] {
    background-color: var(--mud-palette-background-grey);
    border-radius: var(--mud-default-borderradius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}