@import '_content/Ratho.Cockpit.UI/Ratho.Cockpit.UI.vnudxa5lxv.bundle.scp.css';
@import '_content/Ratho.Shared.UI/Ratho.Shared.UI.lw7ourqvks.bundle.scp.css';
@import '_content/Ratho.SparkForge.UI/Ratho.SparkForge.UI.yiau96ljf7.bundle.scp.css';

/* /Components/Builder/AI/AiCoPilotPanel.razor.rz.scp.css */
/* AI co-pilot panel — conversational thread + suggestions list (P8f). */

.ck-ai-panel[b-7rw9zgqetu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ck-surface);
}

.ck-ai-panel__header[b-7rw9zgqetu] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-2) var(--ck-space-3);
    border-bottom: 1px solid var(--ck-border);
    flex-shrink: 0;
}

.ck-ai-panel__title[b-7rw9zgqetu] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-1-5);
    flex-shrink: 0;
}

.ck-ai-panel__tabs[b-7rw9zgqetu] {
    display: flex;
    gap: var(--ck-space-1);
    margin-left: auto;
    margin-right: var(--ck-space-1);
}

.ck-ai-panel__tab[b-7rw9zgqetu] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ck-radius-full);
    padding: 2px var(--ck-space-2);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ck-text-muted);
    cursor: pointer;
    transition: background var(--ck-duration-fast) ease,
                color var(--ck-duration-fast) ease;
}

.ck-ai-panel__tab:hover[b-7rw9zgqetu] {
    background: var(--ck-surface-high);
    color: var(--ck-text);
}

.ck-ai-panel__tab--active[b-7rw9zgqetu] {
    background: var(--ck-primary-subtle);
    color: var(--ck-primary-text);
}

.ck-ai-panel__chip[b-7rw9zgqetu] {
    display: inline-block;
    background: var(--ck-primary);
    color: var(--ck-accent-contrast);
    font-size: 0.65rem;
    line-height: 1;
    padding: 2px 5px;
    margin-left: 4px;
    border-radius: var(--ck-radius-full);
}

.ck-ai-panel__body[b-7rw9zgqetu] {
    flex: 1;
    overflow-y: auto;
    padding: var(--ck-space-3) var(--ck-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

/* Welcome block — compact greeting + suggested-prompt chips. */
.ck-ai-panel__welcome[b-7rw9zgqetu] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
    padding: var(--ck-space-1) 0;
}

.ck-ai-panel__greeting[b-7rw9zgqetu] {
    margin: 0;
    font-size: 0.875rem;
    line-height: var(--ck-leading-snug);
    color: var(--ck-text-muted);
}

.ck-ai-panel__chips[b-7rw9zgqetu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-1-5);
}

.ck-ai-panel__suggested[b-7rw9zgqetu] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: var(--ck-space-1) var(--ck-space-2-5);
    font-size: 0.75rem;
    color: var(--ck-text);
    cursor: pointer;
    transition: background var(--ck-duration-fast) ease,
                border-color var(--ck-duration-fast) ease;
}

.ck-ai-panel__suggested:hover:not(:disabled)[b-7rw9zgqetu] {
    background: var(--ck-primary-subtle);
    border-color: var(--ck-primary);
    color: var(--ck-primary-text);
}

.ck-ai-panel__suggested:disabled[b-7rw9zgqetu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ck-ai-panel__footer[b-7rw9zgqetu] {
    padding: var(--ck-space-2) var(--ck-space-3) var(--ck-space-3);
    border-top: 1px solid var(--ck-border);
    background: var(--ck-surface);
    flex-shrink: 0;
}

.ck-ai-panel__footer-actions[b-7rw9zgqetu] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--ck-space-2);
}

.ck-ai-panel__collapsed[b-7rw9zgqetu] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: var(--ck-space-4);
    background: var(--ck-surface);
    border: none;
    border-left: 1px solid var(--ck-border);
    cursor: pointer;
    color: inherit;
}

.ck-ai-panel__collapsed:hover[b-7rw9zgqetu] {
    background: var(--ck-surface-high);
}

.ck-ai-panel__badge[b-7rw9zgqetu] {
    position: absolute;
    top: 4px;
    right: 8px;
    background: var(--ck-primary);
    color: var(--ck-accent-contrast);
    font-size: 0.65rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: var(--ck-radius-full);
}

/* Chat bubbles */
.ck-ai-msg[b-7rw9zgqetu] {
    display: flex;
    flex-direction: column;
}

.ck-ai-msg--user[b-7rw9zgqetu] {
    align-items: flex-end;
}

.ck-ai-msg--assistant[b-7rw9zgqetu] {
    align-items: flex-start;
}

.ck-ai-msg__bubble[b-7rw9zgqetu] {
    max-width: 88%;
    padding: var(--ck-space-2) var(--ck-space-3);
    border-radius: var(--ck-radius-lg);
    font-size: 0.875rem;
    line-height: var(--ck-leading-snug);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ck-ai-msg__bubble--user[b-7rw9zgqetu] {
    background: var(--ck-primary);
    color: var(--ck-accent-contrast);
    border-bottom-right-radius: var(--ck-radius-xs);
}

.ck-ai-msg__bubble--assistant[b-7rw9zgqetu] {
    background: var(--ck-surface-high);
    color: var(--ck-text);
    border-bottom-left-radius: var(--ck-radius-xs);
}

.ck-ai-msg__bubble--thinking[b-7rw9zgqetu] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    font-style: italic;
    color: var(--ck-text-muted);
}

.ck-ai-msg__tools[b-7rw9zgqetu] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-1);
    margin-top: var(--ck-space-2);
    width: 88%;
}

.ck-tool-card[b-7rw9zgqetu] {
    display: flex;
    align-items: flex-start;
    gap: var(--ck-space-2);
    padding: var(--ck-space-2) var(--ck-space-3);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    font-size: 0.8125rem;
}

.ck-tool-card--applied[b-7rw9zgqetu] {
    border-left: 3px solid var(--ck-success);
}

.ck-tool-card--rejected[b-7rw9zgqetu] {
    border-left: 3px solid var(--ck-warning);
}

.ck-tool-card__body[b-7rw9zgqetu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Proposal confirm card */
.ck-proposal-card[b-7rw9zgqetu] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-2);
    padding: var(--ck-space-3);
    background: var(--ck-warning-subtle);
    border: 1px solid var(--ck-warning);
    border-radius: var(--ck-radius-md);
    width: 88%;
}

.ck-proposal-card__body[b-7rw9zgqetu] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ck-proposal-card__args[b-7rw9zgqetu] {
    font-family: var(--ck-font-mono);
    word-break: break-all;
    color: var(--ck-text-muted);
}

.ck-proposal-card__actions[b-7rw9zgqetu] {
    grid-column: 2;
    display: flex;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-2);
}

/* Suggestions list */
.ck-suggestions-header[b-7rw9zgqetu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-2);
}

.ck-suggestion[b-7rw9zgqetu] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: var(--ck-space-2);
    padding: var(--ck-space-2) var(--ck-space-3);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    border-left: 3px solid transparent;
}

.ck-suggestion--error[b-7rw9zgqetu] {
    border-left-color: var(--ck-error);
}

.ck-suggestion--warning[b-7rw9zgqetu] {
    border-left-color: var(--ck-warning);
}

.ck-suggestion--info[b-7rw9zgqetu] {
    border-left-color: var(--ck-primary);
}

.ck-suggestion__body[b-7rw9zgqetu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ck-suggestion__element[b-7rw9zgqetu] {
    font-family: var(--ck-font-mono);
    color: var(--ck-text-muted);
}

.ck-suggestion__actions[b-7rw9zgqetu] {
    display: flex;
    gap: var(--ck-space-1);
}
/* /Components/Builder/ArtifactVersionHistoryPanel.razor.rz.scp.css */
/* Version history (#4303) — lives in the builder flyout, one card per version. */

.ck-version-history[b-c9f4a4mo3s] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

.ck-version-history__list[b-c9f4a4mo3s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
}

.ck-version-history__item[b-c9f4a4mo3s] {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-2) var(--ck-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-1);
}

.ck-version-history__head[b-c9f4a4mo3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-2);
}

.ck-version-history__number[b-c9f4a4mo3s] {
    font-weight: 600;
}

.ck-version-history__meta[b-c9f4a4mo3s] {
    color: var(--ck-text-muted);
    font-size: 0.8125rem;
}

.ck-version-history__actions[b-c9f4a4mo3s] {
    display: flex;
    gap: var(--ck-space-2);
    flex-wrap: wrap;
}
/* /Components/Builder/BuilderShell.razor.rz.scp.css */
/* Builder shell — three-pane editor layout shared by all builders.
   Spec: docs/proposals/STUDIO-BUILDER-REWRITE.md §1.1 + §7.3.
   Token strategy: use canonical Cockpit --ck-* tokens (spacing.css/colors.css). */

.ck-builder-shell[b-bajthli9s0] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    background: var(--ck-bg);
    color: var(--ck-text);
    overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.ck-builder-toolbar[b-bajthli9s0] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-2) var(--ck-space-4);
    background: var(--ck-surface);
    border-bottom: 1px solid var(--ck-border);
    z-index: 10;
    min-height: var(--ck-appbar-height);
}

.ck-builder-toolbar__left[b-bajthli9s0] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    min-width: 0;
    flex: 1;
}

.ck-builder-toolbar__title[b-bajthli9s0] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

.ck-builder-toolbar__status[b-bajthli9s0] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-left: var(--ck-space-2);
    flex-wrap: wrap;
}

.ck-builder-toolbar__right[b-bajthli9s0] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    flex-shrink: 0;
}

/* ── Main grid ───────────────────────────────────────────── */

.ck-builder-main[b-bajthli9s0] {
    display: grid;
    grid-template-columns: 280px 1fr 360px;
    min-height: 0;
    position: relative;
    transition: grid-template-columns var(--ck-duration-normal) var(--ck-ease-default);
}

.ck-builder-shell.ai-collapsed .ck-builder-main[b-bajthli9s0] {
    grid-template-columns: 280px 1fr 48px;
}

.ck-builder-palette[b-bajthli9s0],
.ck-builder-canvas[b-bajthli9s0],
.ck-builder-ai-panel[b-bajthli9s0] {
    min-height: 0;
    overflow: auto;
}

.ck-builder-palette[b-bajthli9s0] {
    border-right: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

.ck-builder-canvas[b-bajthli9s0] {
    position: relative;
    background: var(--ck-bg);
}

.ck-builder-ai-panel[b-bajthli9s0] {
    border-left: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

/* ── Tablet (768–1279px): collapse palette to icon-rail, hide AI panel.
   Showing the AI panel content in a 56px column is illegible (text wraps
   vertically). At tablet width users review/tweak content; the agent +
   suggestions experience is desktop-only. */

@media (max-width: 1279px) {
    .ck-builder-main[b-bajthli9s0] {
        grid-template-columns: 56px 1fr;
    }

    .ck-builder-shell.ai-collapsed .ck-builder-main[b-bajthli9s0] {
        grid-template-columns: 56px 1fr;
    }

    .ck-builder-palette[b-bajthli9s0] {
        overflow: visible;
    }

    .ck-builder-ai-panel[b-bajthli9s0] {
        display: none;
    }
}

/* ── Phone (<768px): view-only message overlay ────────────── */

@media (max-width: 767px) {
    .ck-builder-shell[b-bajthli9s0]::before {
        content: attr(data-mobile-message);
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--ck-space-6);
        text-align: center;
        background: var(--ck-bg);
        color: var(--ck-text);
        font-size: var(--ck-text-base);
        line-height: var(--ck-leading-normal);
    }
}

/* A refused "Voorbeeld" stays focusable so its reason is reachable without a pointer (#3032). MudBlazor's own disabled
   styling does not apply then, so the muted look lives here. ::deep, because MudButton renders the button element. */
.ck-builder-toolbar__right[b-bajthli9s0]  .ck-builder-toolbar__blocked {
    color: var(--ck-text-muted);
    cursor: not-allowed;
}
/* /Components/Builder/ComponentPalette.razor.rz.scp.css */
/* Left rail of the BuilderShell: tabbed Componenten + Sjablonen palettes. */

.ck-component-palette[b-ajjd5vjzzf] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--ck-surface);
}

[b-ajjd5vjzzf] .ck-component-palette__tabs {
    height: 100%;
}

[b-ajjd5vjzzf] .ck-component-palette__tabs .mud-tabs-toolbar {
    padding: 0 var(--ck-space-2);
}

/* MudTabs auto-renders scroll buttons even when content fits — they eat ~50px
   off the toolbar and forced the actual tabs into a scrollable strip that
   clipped "Componenten" to "EN" (audit finding A). Hide them and let the
   tab wrapper use the full palette width. The class is singular
   ("mud-tabs-scroll-button"), not plural. */
[b-ajjd5vjzzf] .ck-component-palette__tabs .mud-tabs-scroll-button {
    display: none !important;
}

[b-ajjd5vjzzf] .ck-component-palette__tabs .mud-tabs-tabbar-content,
[b-ajjd5vjzzf] .ck-component-palette__tabs .mud-tabs-tabbar-wrapper {
    overflow: visible;
    flex: 1 1 auto;
}

[b-ajjd5vjzzf] .ck-component-palette__tabs .mud-tab {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    min-width: 0 !important; /* override MudTabs inline style min-width:160px */
    min-height: 40px;
    padding: 0 var(--ck-space-3);
    flex: 1 1 auto;
}

.ck-component-palette__list[b-ajjd5vjzzf] {
    padding: var(--ck-space-2);
}

/* Template card — matches the EmptyStateAiHero template gallery so users see
   the same shape no matter which entry point they use (audit finding G). */
.ck-component-palette__template[b-ajjd5vjzzf] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-1);
    width: 100%;
    text-align: left;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-3);
    margin-bottom: var(--ck-space-2);
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color var(--ck-duration-fast) ease,
                background var(--ck-duration-fast) ease,
                transform var(--ck-duration-fast) ease;
}

.ck-component-palette__template:hover[b-ajjd5vjzzf] {
    background: var(--ck-surface-high);
    border-color: var(--ck-border-strong);
    transform: translateY(-1px);
}

.ck-component-palette__template:focus-visible[b-ajjd5vjzzf] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}
/* /Components/Builder/EmptyStateAiHero.razor.rz.scp.css */
/* AI-first empty state — centered hero with auto-focused prompt. */

.ck-empty-hero[b-tu38ttkmha] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--ck-space-6);
    background:
        radial-gradient(ellipse at center,
            var(--ck-surface-raised) 0%,
            var(--ck-bg) 70%);
}

.ck-empty-hero__inner[b-tu38ttkmha] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ck-space-3);
    max-width: 560px;
    width: 100%;
}

.ck-empty-hero__sparkle[b-tu38ttkmha] {
    font-size: var(--ck-text-4xl);
    margin-bottom: var(--ck-space-2);
}

.ck-empty-hero__heading[b-tu38ttkmha] {
    font-weight: 600;
    text-align: center;
}

.ck-empty-hero__subtitle[b-tu38ttkmha] {
    text-align: center;
    margin-bottom: var(--ck-space-3);
    color: var(--ck-text-muted);
}

.ck-empty-hero__input[b-tu38ttkmha] {
    width: 100%;
}

.ck-empty-hero__generate[b-tu38ttkmha] {
    margin-top: var(--ck-space-2);
}

.ck-empty-hero__secondary[b-tu38ttkmha] {
    display: flex;
    gap: var(--ck-space-3);
    margin-top: var(--ck-space-4);
}

.ck-empty-hero__templates[b-tu38ttkmha] {
    width: 100%;
    margin-top: var(--ck-space-3);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface);
    padding: var(--ck-space-2);
}

/* Template card — uniform shape across the gallery + Sjablonen tab.
   Keeps MudCard's appearance but gives keyboard + screen-reader users a real button. */
.ck-template-card-button[b-tu38ttkmha] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    border-radius: var(--ck-radius-md);
    transition: transform var(--ck-duration-fast) ease;
}

.ck-template-card-button:hover[b-tu38ttkmha] {
    transform: translateY(-1px);
}

.ck-template-card-button:focus-visible[b-tu38ttkmha] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}
/* /Components/Builder/LockBanner.razor.rz.scp.css */
/* Read-only lock indicator rendered inline in BuilderShell toolbar.
   Audit finding D — replaces full-width MudAlert. */

.ck-lock-pill[b-cyka4x8ujf] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    padding: var(--ck-space-1) var(--ck-space-2);
    background: var(--ck-warning-subtle);
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
    border: 1px solid var(--ck-warning-subtle);
    border-radius: var(--ck-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.ck-lock-pill__text[b-cyka4x8ujf] {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-cyka4x8ujf] .mud-icon-size-small {
    font-size: var(--ck-text-sm);
}
/* /Components/Builder/Process/BpmnPalette.razor.rz.scp.css */
/* BPMN shape palette — section headers + indented shape rows.
   Same compact-row look as the wizard and dashboard catalogs. */

[b-yz4kn5ulbo] .ck-bpmn-palette {
    padding: var(--ck-space-2);
    background: transparent;
}

[b-yz4kn5ulbo] .ck-bpmn-palette__section {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ck-text-muted);
    padding: var(--ck-space-3) var(--ck-space-2) var(--ck-space-1);
}

[b-yz4kn5ulbo] .ck-bpmn-palette__section:first-child {
    padding-top: var(--ck-space-1);
}

[b-yz4kn5ulbo] .ck-bpmn-palette .mud-list-item {
    padding: var(--ck-space-2) var(--ck-space-3);
    border: 1px solid transparent;
    border-radius: var(--ck-radius-md);
    margin-bottom: var(--ck-space-1);
    cursor: pointer;
    transition: background var(--ck-duration-fast) ease,
                border-color var(--ck-duration-fast) ease;
}

[b-yz4kn5ulbo] .ck-bpmn-palette .mud-list-item:hover {
    background: var(--ck-surface-high);
    border-color: var(--ck-border);
}

[b-yz4kn5ulbo] .ck-bpmn-palette .mud-list-item:focus-visible {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}
/* /Components/Builder/PropertiesFlyout.razor.rz.scp.css */
/* Properties flyout — slides over the AI panel from the right edge. */

.ck-properties-flyout[b-ag5u2vg4ft] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    background: var(--ck-surface);
    border-left: 1px solid var(--ck-border);
    transform: translateX(100%);
    transition: transform var(--ck-duration-normal) var(--ck-ease-default);
    z-index: 20;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ck-shadow-lg);
}

.ck-properties-flyout.open[b-ag5u2vg4ft] {
    transform: translateX(0);
}

.ck-properties-flyout__header[b-ag5u2vg4ft] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-2);
    padding: var(--ck-space-3) var(--ck-space-4);
    border-bottom: 1px solid var(--ck-border);
    flex-shrink: 0;
}

.ck-properties-flyout__title[b-ag5u2vg4ft] {
    font-weight: 600;
}

.ck-properties-flyout__body[b-ag5u2vg4ft] {
    flex: 1;
    overflow-y: auto;
    padding: var(--ck-space-4);
}

/* Mobile: full-width sheet from bottom (better thumb reach than from right) */
@media (max-width: 767px) {
    .ck-properties-flyout[b-ag5u2vg4ft] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 80vh;
        border-left: none;
        border-top: 1px solid var(--ck-border);
        transform: translateY(100%);
        box-shadow: var(--ck-shadow-xl);
        border-top-left-radius: var(--ck-radius-xl);
        border-top-right-radius: var(--ck-radius-xl);
    }

    .ck-properties-flyout.open[b-ag5u2vg4ft] {
        transform: translateY(0);
    }
}
/* /Components/Builder/Wizard/StepCard.razor.rz.scp.css */
/* Wizard step card — compact row: clickable <button> (icon-circle + body) +
   sibling reorder actions. Real <button> means Space/Enter activate natively
   with no preventDefault timing issues (Copilot review on PR #848).
   Audit finding B (density). */

.ck-step-card-row[b-k6uw4x131x] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--ck-space-1);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    transition: border-color var(--ck-duration-fast) ease,
                background var(--ck-duration-fast) ease,
                box-shadow var(--ck-duration-fast) ease;
}

.ck-step-card-row:hover[b-k6uw4x131x] {
    background: var(--ck-surface-high);
    border-color: var(--ck-border-strong);
}

.ck-step-card-row--selected[b-k6uw4x131x] {
    border-color: var(--ck-primary);
    box-shadow: 0 0 0 1px var(--ck-primary);
    background: var(--ck-primary-subtle);
}

/* The clickable column — real <button> stripped of native chrome so it
   visually blends with the row. */
.ck-step-card[b-k6uw4x131x] {
    all: unset;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-2) var(--ck-space-3);
    cursor: pointer;
    min-width: 0;
    border-radius: var(--ck-radius-md) 0 0 var(--ck-radius-md);
}

.ck-step-card:focus-visible[b-k6uw4x131x] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: -2px;
}

.ck-step-card__index[b-k6uw4x131x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ck-radius-full);
    background: var(--ck-primary-subtle);
    color: var(--ck-primary-text);
    flex-shrink: 0;
}

.ck-step-card-row--selected .ck-step-card__index[b-k6uw4x131x] {
    background: var(--ck-primary);
    color: var(--ck-accent-contrast);
}

.ck-step-card__body[b-k6uw4x131x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ck-step-card__title-row[b-k6uw4x131x] {
    display: flex;
    align-items: baseline;
    gap: var(--ck-space-2);
    min-width: 0;
}

.ck-step-card__title[b-k6uw4x131x] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

.ck-step-card__step-num[b-k6uw4x131x] {
    color: var(--ck-text-muted);
    margin-right: 2px;
}

.ck-step-card__meta[b-k6uw4x131x] {
    font-size: 0.75rem;
    color: var(--ck-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.ck-step-card__description[b-k6uw4x131x] {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-snug);
}

.ck-step-card__actions[b-k6uw4x131x] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    padding-right: var(--ck-space-2);
}
/* /Components/Builder/Wizard/StepTypeCatalog.razor.rz.scp.css */
/* Step type catalog — mirrors the dashboard widget catalog look. */

[b-10rpu920tv] .ck-step-catalog {
    padding: var(--ck-space-2);
    background: transparent;
}

[b-10rpu920tv] .ck-step-catalog__item {
    padding: var(--ck-space-2) var(--ck-space-3);
    border: 1px solid transparent;
    border-radius: var(--ck-radius-md);
    margin-bottom: var(--ck-space-1);
    cursor: pointer;
    transition: background var(--ck-duration-fast) ease,
                border-color var(--ck-duration-fast) ease;
}

[b-10rpu920tv] .ck-step-catalog__item:hover {
    background: var(--ck-surface-high);
    border-color: var(--ck-border);
}

[b-10rpu920tv] .ck-step-catalog__item:focus-visible {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}
/* /Components/Builder/Wizard/WizardCanvas.razor.rz.scp.css */
/* Wizard timeline — vertical stack of step cards. */

.ck-wizard-canvas[b-z9f8p7cm2p] {
    height: 100%;
    padding: var(--ck-space-4);
    overflow-y: auto;
}

.ck-wizard-canvas__empty[b-z9f8p7cm2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    height: 100%;
    color: var(--ck-text-muted);
}

.ck-wizard-canvas__timeline[b-z9f8p7cm2p] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
    max-width: 720px;
    margin: 0 auto;
}

.ck-wizard-canvas__connector[b-z9f8p7cm2p] {
    display: flex;
    justify-content: center;
    color: var(--ck-text-subtle);
    opacity: 0.7;
}
/* /Components/Builder/Wizard/WizardFieldCanvas.razor.rz.scp.css */
/* Field-centric wizard canvas — field cards, dropzone, empty state, preview.
   Field layer #1381. */

.ck-fcanvas[b-v1lo6m1b9m] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--ck-bg);
}

.ck-fcanvas--placeholder[b-v1lo6m1b9m] {
    align-items: center;
    justify-content: center;
    padding: var(--ck-space-6);
}

.ck-fcanvas__header[b-v1lo6m1b9m] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-4) var(--ck-space-5) var(--ck-space-3);
}

.ck-fcanvas__title[b-v1lo6m1b9m] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ck-text);
}

.ck-fcanvas__sub[b-v1lo6m1b9m] {
    font-size: 0.75rem;
    color: var(--ck-text-muted);
    margin-top: 1px;
}

.ck-fcanvas__spacer[b-v1lo6m1b9m] {
    flex: 1;
}

/* ---- Bouwen / Voorbeeld segment ---- */
.ck-fcanvas__segment[b-v1lo6m1b9m] {
    display: flex;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 3px;
}

.ck-fcanvas__seg[b-v1lo6m1b9m] {
    all: unset;
    box-sizing: border-box;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ck-text-muted);
    border-radius: var(--ck-radius-sm);
    cursor: pointer;
}

.ck-fcanvas__seg:focus-visible[b-v1lo6m1b9m] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 1px;
}

.ck-fcanvas__seg--active[b-v1lo6m1b9m] {
    background: var(--ck-surface-raised);
    color: var(--ck-accent-ink);
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.08);
}

.ck-fcanvas__body[b-v1lo6m1b9m] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--ck-space-1) var(--ck-space-5) var(--ck-space-5);
}

/* ---- field card ---- */
.ck-field-card[b-v1lo6m1b9m] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-3) var(--ck-space-3);
    margin-bottom: var(--ck-space-2);
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.ck-field-card:hover[b-v1lo6m1b9m] {
    border-color: var(--ck-border-strong);
}

.ck-field-card:focus-visible[b-v1lo6m1b9m] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.ck-field-card--selected[b-v1lo6m1b9m] {
    background: var(--ck-surface-raised);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.1),
                0 8px 20px -14px rgba(var(--ck-accent-rgb), 0.2);
}

.ck-field-card__grip[b-v1lo6m1b9m] {
    display: inline-flex;
    color: var(--ck-text-disabled);
    flex: none;
}

.ck-field-card__icon[b-v1lo6m1b9m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    flex: none;
}

.ck-field-card--selected .ck-field-card__icon[b-v1lo6m1b9m] {
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.ck-field-card__body[b-v1lo6m1b9m] {
    flex: 1;
    min-width: 0;
}

.ck-field-card__label[b-v1lo6m1b9m] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-field-card--selected .ck-field-card__label[b-v1lo6m1b9m] {
    color: var(--ck-accent-ink);
}

.ck-field-card__meta[b-v1lo6m1b9m] {
    font-size: 0.72rem;
    color: var(--ck-text-muted);
}

.ck-field-card__chip[b-v1lo6m1b9m] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-radius: var(--ck-radius-full);
    padding: 3px 9px;
    flex: none;
}

.ck-field-card__required[b-v1lo6m1b9m] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ck-error);
    flex: none;
}

.ck-field-card__reorder[b-v1lo6m1b9m] {
    display: inline-flex;
    flex: none;
}

/* ---- dropzone ---- */
.ck-fcanvas__dropzone[b-v1lo6m1b9m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    border: 1.5px dashed var(--ck-border-strong);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-4);
    color: var(--ck-text-disabled);
    font-size: 0.78rem;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ck-fcanvas__dropzone--over[b-v1lo6m1b9m] {
    background: var(--ck-accent-tint);
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

/* ---- empty state ---- */
.ck-fcanvas__empty[b-v1lo6m1b9m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ck-space-6) var(--ck-space-5);
    min-height: 280px;
}

.ck-fcanvas__empty--over[b-v1lo6m1b9m] {
    background: var(--ck-accent-tint);
    border-radius: var(--ck-radius-lg);
    outline: 1.5px dashed var(--ck-accent-soft);
    outline-offset: -1.5px;
}

.ck-fcanvas__empty-icon[b-v1lo6m1b9m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    color: var(--ck-text-disabled);
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
}

.ck-fcanvas__empty-title[b-v1lo6m1b9m] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ck-text);
    margin-top: var(--ck-space-3);
}

.ck-fcanvas__empty-body[b-v1lo6m1b9m] {
    font-size: 0.8125rem;
    color: var(--ck-text-muted);
    line-height: 1.5;
    max-width: 330px;
    margin: var(--ck-space-2) 0 var(--ck-space-4);
}

.ck-fcanvas__empty-actions[b-v1lo6m1b9m] {
    display: flex;
    gap: var(--ck-space-2);
}

/* ---- preview ---- */
.ck-fpreview[b-v1lo6m1b9m] {
    display: flex;
    justify-content: center;
    padding: var(--ck-space-4) 0;
}

.ck-fpreview__card[b-v1lo6m1b9m] {
    width: 100%;
    max-width: 420px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-4);
    box-shadow: var(--ck-shadow-soft);
}

.ck-fpreview__progress-row[b-v1lo6m1b9m] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-2);
}

.ck-fpreview__progress-label[b-v1lo6m1b9m] {
    font-size: 0.7rem;
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.ck-fpreview__progress-track[b-v1lo6m1b9m] {
    flex: 1;
    height: 4px;
    background: var(--ck-border-strong);
    border-radius: var(--ck-radius-full);
    overflow: hidden;
}

.ck-fpreview__progress-fill[b-v1lo6m1b9m] {
    height: 100%;
    background: var(--ck-accent);
}

.ck-fpreview__title[b-v1lo6m1b9m] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ck-text);
    margin: var(--ck-space-2) 0 var(--ck-space-3);
}

.ck-fpreview__label[b-v1lo6m1b9m] {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ck-text-muted);
    margin: var(--ck-space-2) 0 5px;
}

.ck-fpreview__req[b-v1lo6m1b9m] {
    color: var(--ck-error);
    margin-left: 2px;
}

.ck-fpreview__input[b-v1lo6m1b9m] {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    padding: 9px 11px;
    font-size: 0.78rem;
    color: var(--ck-text-disabled);
}
/* /Components/Builder/Wizard/WizardFieldInspector.razor.rz.scp.css */
/* Field inspector — warm-styled field config. Field layer #1381. */

.ck-finspector[b-jok9beewqa] {
    display: flex;
    flex-direction: column;
}

.ck-finspector__title[b-jok9beewqa] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ck-text);
    margin: 0 0 var(--ck-space-3);
}

.ck-finspector__toggle-row[b-jok9beewqa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-1) var(--ck-space-3);
}

.ck-finspector__toggle-label[b-jok9beewqa] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ck-text);
}

.ck-finspector__section-head[b-jok9beewqa] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
    margin: var(--ck-space-4) 0 var(--ck-space-2);
}

.ck-finspector__panel[b-jok9beewqa] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-3);
}

.ck-finspector__cond-tabs[b-jok9beewqa] {
    display: flex;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-1);
}

.ck-finspector__cond-tab[b-jok9beewqa] {
    all: unset;
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ck-text-muted);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    padding: 5px 10px;
    cursor: pointer;
}

.ck-finspector__cond-tab:focus-visible[b-jok9beewqa] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 1px;
}

.ck-finspector__cond-tab--active[b-jok9beewqa] {
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-color: var(--ck-accent-soft);
}

.ck-finspector__cond-row[b-jok9beewqa] {
    display: flex;
    gap: var(--ck-space-2);
}

.ck-finspector__cond-op[b-jok9beewqa] {
    flex: none;
    width: 96px;
}

.ck-finspector__cond-val[b-jok9beewqa] {
    flex: 1;
}
/* /Components/Builder/Wizard/WizardStepPalette.razor.rz.scp.css */
/* Wizard palette — step list + draggable field-type grid. Field layer #1381. */

.ck-wiz-palette[b-5quraj339x] {
    display: flex;
    flex-direction: column;
    padding: var(--ck-space-2) 0 var(--ck-space-4);
}

.ck-wiz-palette__section-head[b-5quraj339x] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-3) var(--ck-space-3) var(--ck-space-2);
}

.ck-wiz-palette__section-head--stacked[b-5quraj339x] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.ck-wiz-palette__section-label[b-5quraj339x] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.ck-wiz-palette__section-sub[b-5quraj339x] {
    font-size: 0.7rem;
    color: var(--ck-text-disabled);
}

.ck-wiz-palette__count[b-5quraj339x] {
    font-size: 0.7rem;
    color: var(--ck-text-muted);
}

.ck-wiz-palette__steps[b-5quraj339x] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
    padding: 0 var(--ck-space-3);
}

/* ---- step row ---- */
.ck-wiz-step[b-5quraj339x] {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-2) var(--ck-space-2);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.ck-wiz-step:hover[b-5quraj339x] {
    background: var(--ck-surface-high);
    border-color: var(--ck-border-strong);
}

.ck-wiz-step:focus-visible[b-5quraj339x] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.ck-wiz-step--active[b-5quraj339x] {
    background: var(--ck-accent-tint);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.ck-wiz-step__grip[b-5quraj339x] {
    display: inline-flex;
    color: var(--ck-text-disabled);
    flex: none;
}

.ck-wiz-step__num[b-5quraj339x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    flex: none;
}

.ck-wiz-step--active .ck-wiz-step__num[b-5quraj339x] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-wiz-step__title[b-5quraj339x] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ck-wiz-step--active .ck-wiz-step__title[b-5quraj339x] {
    font-weight: 600;
    color: var(--ck-accent-ink);
}

/* ---- add step ---- */
.ck-wiz-palette__add-step[b-5quraj339x] {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-1);
    padding: var(--ck-space-2);
    border: 1px dashed var(--ck-border-strong);
    border-radius: var(--ck-radius-md);
    color: var(--ck-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ck-wiz-palette__add-step:hover[b-5quraj339x] {
    background: var(--ck-surface-high);
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.ck-wiz-palette__add-step:focus-visible[b-5quraj339x] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

/* ---- divider ---- */
.ck-wiz-palette__divider[b-5quraj339x] {
    height: 1px;
    background: var(--ck-border);
    margin: var(--ck-space-3) var(--ck-space-3) var(--ck-space-1);
}

/* ---- field-type grid ---- */
.ck-wiz-palette__fields[b-5quraj339x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ck-space-2);
    padding: var(--ck-space-1) var(--ck-space-3) 0;
}

.ck-wiz-fieldtype[b-5quraj339x] {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-2);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    color: var(--ck-text-muted);
    cursor: grab;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.ck-wiz-fieldtype:hover[b-5quraj339x] {
    background: var(--ck-surface-high);
    border-color: var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.06);
}

.ck-wiz-fieldtype:active[b-5quraj339x] {
    cursor: grabbing;
}

.ck-wiz-fieldtype:focus-visible[b-5quraj339x] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.ck-wiz-fieldtype__label[b-5quraj339x] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Connectors/ConnectorConfigDialog.razor.rz.scp.css */
/* Warm modal-systeem (Cockpit Modal-systeem.dc.html) — ConnectorConfig (md, icon-chip).
   Header via Mud TitleContent-hook; schema-velden (MudTextField/MudNumericField/MudSwitch),
   raw-JSON-fallback en save-logica blijven 100% MudBlazor. */
.ccfg__head[b-r4e9pkmlys] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.ccfg__icon[b-r4e9pkmlys] {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ccfg__icon[b-r4e9pkmlys]  .mud-icon-root {
    font-size: var(--ck-text-lg);
}

.ccfg__heading[b-r4e9pkmlys] {
    flex: 1;
    min-width: 0;
}

.ccfg__title[b-r4e9pkmlys] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccfg__body[b-r4e9pkmlys] {
    padding-top: 4px;
}
/* /Components/Navigation/NavItemInspector.razor.rz.scp.css */
/* Navigation-builder inspector — right rail.
   Design: Authoring-builders.dc.html §3. Warm --ck-* tokens only. */

.ck-navinsp[b-hksbxymlxn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: var(--ck-space-4) var(--ck-space-5);
    background: var(--ck-surface);
}

.ck-navinsp__eyebrow[b-hksbxymlxn] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-bottom: 4px;
}

.ck-navinsp__eyebrow-icon[b-hksbxymlxn] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ck-navinsp__eyebrow-text[b-hksbxymlxn] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.ck-navinsp__title[b-hksbxymlxn] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin: var(--ck-space-2) 0 var(--ck-space-4);
    color: var(--ck-text);
}

.ck-navinsp__field[b-hksbxymlxn] {
    margin-bottom: var(--ck-space-2);
}

.ck-navinsp__row[b-hksbxymlxn] {
    display: flex;
    gap: var(--ck-space-2);
    align-items: flex-start;
}

.ck-navinsp__field--icon[b-hksbxymlxn] {
    flex: 0 0 46%;
}

.ck-navinsp__field--route[b-hksbxymlxn] {
    flex: 1;
}

.ck-navinsp__section[b-hksbxymlxn] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
    margin: var(--ck-space-4) 0 var(--ck-space-2);
}

/* ── Markeringen toggles ─────────────────────────────────── */

.ck-navinsp__toggles[b-hksbxymlxn] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
}

.ck-navinsp__toggle[b-hksbxymlxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-2);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 6px 12px;
}

.ck-navinsp__toggle-title[b-hksbxymlxn] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    font-weight: 500;
}

.ck-navinsp__toggle-hint[b-hksbxymlxn] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

/* ── Zichtbaar voor (role checkboxes) ────────────────────── */

.ck-navinsp__roles[b-hksbxymlxn] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ck-navinsp__role[b-hksbxymlxn] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    width: 100%;
    text-align: left;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 8px 12px;
    cursor: pointer;
    font: inherit;
    transition: border-color 120ms ease, background 120ms ease;
}

.ck-navinsp__role:hover[b-hksbxymlxn] {
    border-color: var(--ck-border-strong);
}

.ck-navinsp__check[b-hksbxymlxn] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--ck-border-strong);
    background: var(--ck-surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--ck-accent-contrast);
}

.ck-navinsp__role--on .ck-navinsp__check[b-hksbxymlxn] {
    background: var(--ck-accent);
    border-color: var(--ck-accent);
}

.ck-navinsp__role-label[b-hksbxymlxn] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    font-weight: 500;
}

.ck-navinsp__role--on .ck-navinsp__role-label[b-hksbxymlxn] {
    color: var(--ck-text);
}

/* A role the item names but the builder does not offer (#4451): kept as stored, marked so it reads as such. */
.ck-navinsp__role--unlisted[b-hksbxymlxn] {
    border-style: dashed;
}

.ck-navinsp__role-hint[b-hksbxymlxn] {
    margin-left: auto;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-navinsp__roles-empty[b-hksbxymlxn] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
    line-height: 1.5;
}
/* /Components/Navigation/NavPalette.razor.rz.scp.css */
/* Navigation-builder palette — left rail.
   Design: Authoring-builders.dc.html §3. Warm --ck-* tokens only. */

.ck-navpal[b-445lhawpg7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    background: var(--ck-surface);
}

.ck-navpal__head[b-445lhawpg7] {
    padding: var(--ck-space-4) var(--ck-space-4) var(--ck-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ck-navpal__head--stacked[b-445lhawpg7] {
    padding-top: var(--ck-space-1);
}

.ck-navpal__label[b-445lhawpg7] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.ck-navpal__sub[b-445lhawpg7] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-navpal__chips[b-445lhawpg7] {
    padding: 0 var(--ck-space-3) var(--ck-space-2);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ck-navpal__chip[b-445lhawpg7] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    width: 100%;
    text-align: left;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 9px 10px;
    cursor: grab;
    color: var(--ck-text-muted);
    font: inherit;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}

.ck-navpal__chip:hover[b-445lhawpg7] {
    border-color: var(--ck-border-strong);
    background: var(--ck-surface-high);
}

.ck-navpal__chip:active[b-445lhawpg7] {
    cursor: grabbing;
    transform: scale(0.99);
}

.ck-navpal__chip-label[b-445lhawpg7] {
    font-size: var(--ck-text-sm);
    font-weight: 500;
    color: var(--ck-text);
}

.ck-navpal__divider[b-445lhawpg7] {
    height: 1px;
    background: var(--ck-border);
    margin: var(--ck-space-3) var(--ck-space-3);
}

.ck-navpal__roles[b-445lhawpg7] {
    padding: 0 var(--ck-space-3) var(--ck-space-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ck-navpal__role[b-445lhawpg7] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--ck-radius-md);
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
    color: var(--ck-text-muted);
    transition: background 120ms ease;
}

.ck-navpal__role:hover[b-445lhawpg7] {
    background: var(--ck-surface-high);
}

.ck-navpal__role--active[b-445lhawpg7] {
    background: var(--ck-accent-tint);
}

.ck-navpal__role--active .ck-navpal__role-label[b-445lhawpg7] {
    color: var(--ck-accent-ink);
    font-weight: 600;
}

.ck-navpal__role--active .ck-navpal__dot[b-445lhawpg7] {
    background: var(--ck-accent);
}

.ck-navpal__dot[b-445lhawpg7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ck-border-strong);
    flex: none;
}

.ck-navpal__role-label[b-445lhawpg7] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}
/* /Components/Navigation/NavTreeCanvas.razor.rz.scp.css */
/* Navigation-builder canvas — the menu tree.
   Design: Authoring-builders.dc.html §3. Warm --ck-* tokens only. */

.ck-navcanvas[b-4300wvjuz8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: var(--ck-bg);
}

.ck-navcanvas__header[b-4300wvjuz8] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-4) var(--ck-space-5) var(--ck-space-3);
}

.ck-navcanvas__title[b-4300wvjuz8] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    color: var(--ck-text);
}

.ck-navcanvas__hint[b-4300wvjuz8] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-navcanvas__body[b-4300wvjuz8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--ck-space-1) var(--ck-space-5) var(--ck-space-5);
}

.ck-navcanvas__tree[b-4300wvjuz8] {
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

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

.ck-navcard[b-4300wvjuz8] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 10px 12px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.ck-navcard:active[b-4300wvjuz8] {
    cursor: grabbing;
}

.ck-navcard--child[b-4300wvjuz8] {
    margin-left: 26px;
}

.ck-navcard__grip[b-4300wvjuz8] {
    flex: none;
    display: flex;
    color: var(--ck-text-disabled);
}

.ck-navcard__icon[b-4300wvjuz8],
.ck-navcard__chevron[b-4300wvjuz8] {
    flex: none;
    color: var(--ck-text-muted);
}

.ck-navcard__label[b-4300wvjuz8] {
    flex: 1;
    min-width: 0;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BÈTA = amber attention label (status --ck-warning family) */
.ck-navcard__beta[b-4300wvjuz8] {
    flex: none;
    font-size: var(--ck-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
    background: var(--ck-warning-subtle);
    border: 1px solid var(--ck-warning);
    border-radius: 5px;
    padding: 1px 6px;
}

/* badge = accent pill */
.ck-navcard__badge[b-4300wvjuz8] {
    flex: none;
    font-size: var(--ck-text-xs);
    font-weight: 700;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    border-radius: 999px;
    padding: 1px 7px;
}

.ck-navcard__group-cap[b-4300wvjuz8],
.ck-navcard__off-cap[b-4300wvjuz8] {
    flex: none;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Selected = white-ish raised bg + accent-soft border + accent ring */
.ck-navcard--selected[b-4300wvjuz8] {
    background: var(--ck-surface-raised);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.1),
                0 8px 20px -14px rgba(var(--ck-accent-rgb), 0.2);
}

.ck-navcard--selected .ck-navcard__label[b-4300wvjuz8],
.ck-navcard--selected .ck-navcard__icon[b-4300wvjuz8],
.ck-navcard--selected .ck-navcard__chevron[b-4300wvjuz8] {
    color: var(--ck-accent-ink);
}

/* Disabled = dashed border + dimmed */
.ck-navcard--disabled[b-4300wvjuz8] {
    background: var(--ck-bg);
    border-style: dashed;
    opacity: 0.7;
}

.ck-navcard--disabled .ck-navcard__label[b-4300wvjuz8] {
    font-weight: 500;
    color: var(--ck-text-disabled);
}

/* View-as: an item not visible to the previewed role renders faded + struck. */
.ck-navcard--rolehidden[b-4300wvjuz8] {
    opacity: 0.42;
    filter: grayscale(0.4);
}

/* Drag affordance: a card hovered as a nest target glows with the accent ring. */
.ck-navcard--nestover[b-4300wvjuz8] {
    border: 1.5px solid var(--ck-accent);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.16);
}

/* ── Drop indicator (2px accent line + ring dot) ─────────── */

.ck-navcanvas__dropline[b-4300wvjuz8] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: 2px 0;
}

.ck-navcanvas__dropdot[b-4300wvjuz8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--ck-accent);
    flex: none;
}

.ck-navcanvas__dropbar[b-4300wvjuz8] {
    flex: 1;
    height: 2px;
    background: var(--ck-accent);
    border-radius: 2px;
}

/* ── Empty state ─────────────────────────────────────────── */

.ck-navcanvas__empty[b-4300wvjuz8] {
    max-width: 440px;
    margin: var(--ck-space-8) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--ck-space-6);
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl);
}

.ck-navcanvas__empty-icon[b-4300wvjuz8] {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-subtle);
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
}

.ck-navcanvas__empty-title[b-4300wvjuz8] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin-top: var(--ck-space-3);
    color: var(--ck-text);
}

.ck-navcanvas__empty-body[b-4300wvjuz8] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: var(--ck-space-2) 0 var(--ck-space-4);
    max-width: 340px;
}

.ck-navcanvas__empty-actions[b-4300wvjuz8] {
    display: flex;
    gap: var(--ck-space-2);
    flex-wrap: wrap;
    justify-content: center;
}
/* /Components/Pages/Builder/EntityHubBuilderPage.razor.rz.scp.css */
.hub-editor[b-oklyp97wrb] { padding-block: var(--ck-space-6); }
.hub-editor__heading[b-oklyp97wrb] { display: flex; justify-content: space-between; align-items: center; gap: var(--ck-space-4); margin-bottom: var(--ck-space-5); }
.hub-editor__heading h1[b-oklyp97wrb] { margin: 0; font-size: 1.6rem; color: var(--ck-text); }
.hub-editor__heading p[b-oklyp97wrb] { margin: var(--ck-space-1) 0 0; color: var(--ck-text-muted); }
.hub-editor__actions[b-oklyp97wrb] { display: flex; gap: var(--ck-space-2); flex-wrap: wrap; }
.hub-editor__card[b-oklyp97wrb] { margin-block: var(--ck-space-4); padding: var(--ck-space-5); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface-raised); }
.hub-editor__card h2[b-oklyp97wrb] { margin: 0 0 var(--ck-space-2); font-size: 1.05rem; }
.hub-editor__card p[b-oklyp97wrb] { margin: 0 0 var(--ck-space-4); color: var(--ck-text-muted); }
.hub-editor__tile[b-oklyp97wrb] { display: flex; align-items: center; gap: var(--ck-space-3); padding: var(--ck-space-3); border-block-start: 1px solid var(--ck-border); }
.hub-editor__tile-main[b-oklyp97wrb] { display: flex; flex-direction: column; gap: var(--ck-space-1); flex: 1; min-width: 0; }
.hub-editor__type[b-oklyp97wrb] { font-size: 0.72rem; color: var(--ck-text-muted); }
.hub-editor__tile input[b-oklyp97wrb], .hub-editor__tile select[b-oklyp97wrb], .hub-editor__add select[b-oklyp97wrb] { min-height: 2.25rem; padding: 0.35rem 0.55rem; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); background: var(--ck-surface); color: var(--ck-text); }
.hub-editor__tile input[b-oklyp97wrb] { width: 100%; }
.hub-editor__width[b-oklyp97wrb] { display: flex; align-items: center; gap: var(--ck-space-2); color: var(--ck-text-muted); font-size: 0.8rem; }
.hub-editor__tile-actions[b-oklyp97wrb] { display: flex; gap: var(--ck-space-1); }
.hub-editor__tile-actions button[b-oklyp97wrb] { min-width: 2.25rem; min-height: 2.25rem; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); background: var(--ck-surface); color: var(--ck-text); cursor: pointer; }
.hub-editor__tile-actions button:hover:not(:disabled)[b-oklyp97wrb] { border-color: var(--ck-accent); }
.hub-editor__tile input:focus-visible[b-oklyp97wrb], .hub-editor__tile select:focus-visible[b-oklyp97wrb],
.hub-editor__add select:focus-visible[b-oklyp97wrb], .hub-editor__tile-actions button:focus-visible[b-oklyp97wrb] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: var(--ck-focus-offset);
}
.hub-editor__tile-actions button:disabled[b-oklyp97wrb] { opacity: 0.45; cursor: not-allowed; }
.hub-editor__tile-actions .hub-editor__remove[b-oklyp97wrb] { color: var(--ck-error); }
.hub-editor__add[b-oklyp97wrb] { display: flex; gap: var(--ck-space-3); align-items: center; }
.hub-editor__add select[b-oklyp97wrb] { min-width: 16rem; }
@media (max-width: 700px) {
    .hub-editor__heading[b-oklyp97wrb], .hub-editor__tile[b-oklyp97wrb] { align-items: stretch; flex-direction: column; }
    .hub-editor__add[b-oklyp97wrb] { flex-wrap: wrap; }
    .hub-editor__add select[b-oklyp97wrb] { min-width: 0; width: 100%; }
}
/* /Components/Pages/Builder/ImmersiveSpikePage.razor.rz.scp.css */
.ck-immersive-commit[b-ithe6w4pq5] {
    margin-top: 8px;
    padding: 8px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey, var(--ck-info-subtle));
    font-size: var(--ck-text-xs);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow: auto;
}
/* /Components/Pages/Builder/NewArtifactChooserPage.razor.rz.scp.css */
/* Artifact keuzescherm (warme herbouw #1347) — warm-greige, one accent reserved for the
   assistant CTA. Layout 1-on-1 with "Cockpit Studio - Bouwen.dc.html" §Nieuw artifact. */

.ck-newartifact__types[b-bt50vqqojq],
.ck-newartifact__ai[b-bt50vqqojq] {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.ck-newartifact__ai[b-bt50vqqojq] {
    margin-top: var(--ck-space-4);
}

/* Type tiles stay NEUTRAL per type (mockup footnote: "icoon-tegels neutraal per type") so the
   single accent is reserved for the assistant CTA below — IDENTITY: one accent, sparingly. */
.ck-newartifact__tile[b-bt50vqqojq] {
    background-color: var(--ck-surface-high);
    color: var(--ck-text-muted);
    margin-bottom: var(--ck-space-3);
}

/* Assistant option — accent-soft frame + accent icon wash + one filled accent button. */
.ck-newartifact__ai[b-bt50vqqojq] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-4);
    border: 1.5px solid var(--ck-accent-soft);
}

.ck-newartifact__ai-icon[b-bt50vqqojq] {
    flex: none;
    background-color: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.ck-newartifact__ai-text[b-bt50vqqojq] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/DataAnalyse/PlanBuilder.razor.rz.scp.css */
/* ============================================================
   Query-studio · score-plan builder (#969 F2 / #1347 warm step-rail)
   Component-scoped tweaks on top of the shared .ck-planrail / .ck-planstep
   step-rail (management-dataai.css). Mirrors ReportPlanBuilder's rail, but for
   the score-plan shape: Bron (accent) → Filter (goud sub-stap) → Factor (groen).
   Only additive rules live here; the global classes are reused as-is. The plan-type
   node colours are a fixed legend (not tenant-themed) — consistent with the
   global --group/--aggregate/--sort node colours; status colours stay LOCKED.
   ============================================================ */

.ck-qsbuilder[b-htptfwofdy] {
  display: flex;
  flex-direction: column;
  gap: var(--ck-space-4);
}

/* Plan-brede config (klantsleutel + top-N), boven de rail. */
.ck-qsbuilder__config .ck-planstep__kind[b-htptfwofdy] {
  margin-bottom: var(--ck-space-2);
}

/* Card-kop: type-label links, verwijder-knop rechts. */
.ck-planstep__cardhead[b-htptfwofdy] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-space-2);
  margin-bottom: var(--ck-space-1);
}

.ck-planstep__cardhead .ck-planstep__kind[b-htptfwofdy] {
  margin-bottom: 0;
}

/* Filter-node — zesde kleur uit de categorische reeks, in lijn met de globale legenda
   in components/management-dataai.css (geen --filter daar, wel dezelfde reeks). */
.ck-planstep__node--filter[b-htptfwofdy] {
  background: var(--ck-chart-cat-6);
}

/* Filter-substappen visueel onder hun bron — card ingesprongen, node blijft op de lijn. */
.ck-planstep--sub .ck-planstep__card[b-htptfwofdy] {
  margin-left: var(--ck-space-5);
}

/* "Filter toevoegen" lijnt uit onder de ingesprongen filter-cards (geen volle breedte). */
.ck-add-dashed--sub[b-htptfwofdy] {
  width: auto;
  align-self: flex-start;
  margin-left: var(--ck-space-5);
}

/* De stap waarin de operator werkt krijgt de accent-ring (geselecteerde stap, mockup). */
.ck-planstep__card:focus-within[b-htptfwofdy] {
  border-color: var(--ck-border-focus);
  box-shadow: var(--ck-shadow-glow);
}
/* /Components/Pages/EntityTypes/Editor.razor.rz.scp.css */
/* Entity-type editor — Velden-tabel (warme herbouw #1347), 1-on-1 with
   "Cockpit Studio - Bouwen.dc.html" §Entity-types · velden. Read-only: connector-driven. */

.ck-fields-table[b-x8kpiqqnl2] {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    overflow: hidden;
    background: var(--ck-surface-raised);
}

.ck-fields-table__head[b-x8kpiqqnl2],
.ck-fields-table__row[b-x8kpiqqnl2] {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.6fr;
    gap: var(--ck-space-3);
    align-items: center;
    padding: var(--ck-space-3) var(--ck-space-4);
}

.ck-fields-table__head[b-x8kpiqqnl2] {
    background: var(--ck-surface-high);
    border-bottom: 1px solid var(--ck-border);
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    color: var(--ck-text-subtle);
    font-weight: var(--ck-weight-semibold);
}

.ck-fields-table__row[b-x8kpiqqnl2] {
    border-bottom: 1px solid var(--ck-border);
    font-size: var(--ck-text-sm);
}

.ck-fields-table__row:last-child[b-x8kpiqqnl2] {
    border-bottom: none;
}

/* Warm zebra (mockup footnote: velden-tabel zebra). */
.ck-fields-table__row:nth-child(even)[b-x8kpiqqnl2] {
    background: var(--ck-bg);
}

.ck-fields-table__name[b-x8kpiqqnl2] {
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-fields-table__type[b-x8kpiqqnl2] {
    color: var(--ck-text-muted);
}

.ck-fields-table__req[b-x8kpiqqnl2] {
    color: var(--ck-text-subtle);
}

/* "ja" leans on the locked success token (never the brand accent). */
.ck-fields-table__req--yes[b-x8kpiqqnl2] {
    color: var(--ck-success);
    font-weight: var(--ck-weight-semibold);
}
/* /Components/Pages/Navigation/Builder.razor.rz.scp.css */
/* Navigation-builder page shell — warm 3-pane builder (palette · canvas · inspector).
   Mirrors the BuilderShell grid pattern. Design: Authoring-builders.dc.html §3.
   Warm --ck-* tokens only. */

.ck-navbuilder[b-akbhupgnt4] {
    display: grid;
    grid-template-rows: auto auto 1fr;
    height: calc(100vh - var(--ck-appbar-height));
    background: var(--ck-bg);
    color: var(--ck-text);
    overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────── */

.ck-navbuilder__topbar[b-akbhupgnt4] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-2) var(--ck-space-5);
    background: var(--ck-surface);
    border-bottom: 1px solid var(--ck-border);
    min-height: var(--ck-appbar-height);
}

.ck-navbuilder__crumb[b-akbhupgnt4] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    min-width: 0;
}

.ck-navbuilder__crumb-chip[b-akbhupgnt4] {
    margin: 0;
    font-size: var(--ck-text-base);
    font-weight: 600;
    color: var(--ck-text);
}

.ck-navbuilder__spacer[b-akbhupgnt4] {
    flex: 1;
}

/* ── Main grid ───────────────────────────────────────────── */

.ck-navbuilder__main[b-akbhupgnt4] {
    display: grid;
    grid-template-columns: 236px 1fr 328px;
    min-height: 0;
    grid-row: 3;
}

.ck-navbuilder__palette[b-akbhupgnt4],
.ck-navbuilder__canvas[b-akbhupgnt4],
.ck-navbuilder__inspector[b-akbhupgnt4] {
    min-height: 0;
    overflow: hidden;
}

.ck-navbuilder__palette[b-akbhupgnt4] {
    border-right: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

.ck-navbuilder__canvas[b-akbhupgnt4] {
    position: relative;
    background: var(--ck-bg);
}

.ck-navbuilder__inspector[b-akbhupgnt4] {
    border-left: 1px solid var(--ck-border);
    background: var(--ck-surface);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ck-navbuilder__inspector-actions[b-akbhupgnt4] {
    padding: 0 var(--ck-space-5) var(--ck-space-5);
}

.ck-navbuilder__inspector-empty[b-akbhupgnt4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-6);
    text-align: center;
    color: var(--ck-text-subtle);
}

.ck-navbuilder__inspector-empty p[b-akbhupgnt4] {
    font-size: var(--ck-text-sm);
    line-height: 1.5;
    max-width: 220px;
}

/* ── Tablet: drop the inspector to a narrower column ─────── */

@media (max-width: 1279px) {
    .ck-navbuilder__main[b-akbhupgnt4] {
        grid-template-columns: 200px 1fr 280px;
    }
}

@media (max-width: 1023px) {
    .ck-navbuilder__main[b-akbhupgnt4] {
        grid-template-columns: 1fr;
    }

    .ck-navbuilder__palette[b-akbhupgnt4],
    .ck-navbuilder__inspector[b-akbhupgnt4] {
        display: none;
    }
}
/* /Components/Pages/Plugins/Marketplace.razor.rz.scp.css */
/* Plugin marketplace (warme herbouw #1347) — warm card-grid, 1-on-1 with
   "Cockpit Studio - Bouwen.dc.html" §Plugins · marketplace. */

.ck-plugin-toolbar[b-yyrizo9qog] {
    display: flex;
    align-items: flex-start;
    gap: var(--ck-space-3);
    margin-top: var(--ck-space-4);
    flex-wrap: wrap;
}

.ck-plugin-toolbar__tenant[b-yyrizo9qog] {
    flex: 0 1 280px;
}

.ck-plugin-toolbar__search[b-yyrizo9qog] {
    flex: 1 1 240px;
}

/* ── Filter chips — pill row; active = raised surface + border + semibold ── */
.ck-plugin-filters[b-yyrizo9qog] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-4);
}

/* Rendered as a MudButton (warme herbouw #1391 review) — these overrides strip the
   default mud-button chrome (min-width, uppercase, elevation) so the warm pill shows through. */
.ck-plugin-chip[b-yyrizo9qog] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--ck-radius-full);
    padding: var(--ck-space-1-5) var(--ck-space-3);
    min-width: 0;
    height: auto;
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    text-transform: none;
    letter-spacing: normal;
    color: var(--ck-text-muted);
    cursor: pointer;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-out),
        color var(--ck-duration-fast) var(--ck-ease-out),
        border-color var(--ck-duration-fast) var(--ck-ease-out);
}

.ck-plugin-chip:hover[b-yyrizo9qog] {
    background: var(--ck-surface-high);
    color: var(--ck-text);
}

.ck-plugin-chip--active[b-yyrizo9qog] {
    background: var(--ck-surface-raised);
    border-color: var(--ck-border-strong);
    color: var(--ck-text);
    font-weight: var(--ck-weight-semibold);
}

/* ── Plugin card ── */
.ck-plugin-card[b-yyrizo9qog] {
    display: flex;
    flex-direction: column;
}

/* SDK-docs tile — een echte externe route (geen dode CTA), iets gedempt t.o.v. de plugin-kaarten. */
.ck-plugin-card--dev[b-yyrizo9qog] {
    text-decoration: none;
    color: inherit;
    background: var(--ck-surface);
    transition: border-color .15s ease, background .15s ease;
}

.ck-plugin-card--dev:hover[b-yyrizo9qog] {
    border-color: var(--ck-accent-soft);
    background: var(--ck-surface-raised);
}

.ck-plugin-card__extlink[b-yyrizo9qog] {
    color: var(--ck-text-subtle);
}

.ck-plugin-card__top[b-yyrizo9qog] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ck-space-3);
}

/* Neutral icon tile (one accent stays reserved for status/CTA — IDENTITY). */
.ck-plugin-card__tile[b-yyrizo9qog] {
    width: 38px;
    height: 38px;
    background-color: var(--ck-surface-high);
    color: var(--ck-text-muted);
}

.ck-plugin-card__title[b-yyrizo9qog] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-plugin-card__desc[b-yyrizo9qog] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: var(--ck-space-1);
    line-height: var(--ck-leading-relaxed);
    flex: 1;
}

.ck-plugin-card__foot[b-yyrizo9qog] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
    padding-top: var(--ck-space-3);
    border-top: 1px solid var(--ck-border);
}

.ck-plugin-card__byline[b-yyrizo9qog] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-plugin-card__action[b-yyrizo9qog] {
    flex: none;
}
/* /Components/Pages/Processes/CreateProcessDialog.razor.rz.scp.css */
/* Warm modal-systeem (Cockpit Modal-systeem.dc.html) — CreateProcess (sm).
   Titel-only header per het systeem; veld/validatie/submit blijven MudBlazor. */
.cproc__head[b-s8a868sso4] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.cproc__heading[b-s8a868sso4] {
    flex: 1;
    min-width: 0;
}

.cproc__title[b-s8a868sso4] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cproc__body[b-s8a868sso4] {
    padding-top: 4px;
}
/* /Components/Pages/Processes/Designer.razor.rz.scp.css */
/* Warm process-designer — palet links · canvas (node-flow) · inspector rechts.
   Leading design: docs/proposals/immersive-design-kit/designs/Cockpit Studio - Authoring-builders.dc.html
   §"2 · PROCESS-DESIGNER". Warm --ck-* tokens only; rings via rgba(var(--ck-accent-rgb), …).
   Child panes (palette/canvas/inspector) carry their own scoped .razor.css — only markup the
   PAGE renders directly is styled here (shell, topbar, grid, and the process-details inspector). */

/* ── Shell ───────────────────────────────────────────────── */
.pd-shell[b-iu784lqoim] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
    background: var(--ck-bg);
    color: var(--ck-text);
    overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────── */
.pd-topbar[b-iu784lqoim] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: 0 var(--ck-space-5);
    min-height: 56px;
    background: var(--ck-surface);
    border-bottom: 1px solid var(--ck-border);
}

.pd-topbar__left[b-iu784lqoim] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    min-width: 0;
    flex: 1;
}

.pd-topbar__right[b-iu784lqoim] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    flex-shrink: 0;
}

.pd-breadcrumb[b-iu784lqoim] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    min-width: 0;
    font-size: var(--ck-text-sm);
}

.pd-breadcrumb__sep[b-iu784lqoim] {
    color: var(--ck-border-strong);
}

.pd-breadcrumb__crumb[b-iu784lqoim] {
    color: var(--ck-text-muted);
    cursor: pointer;
    /* Semantic <button> reset — renders as an inline link-style crumb. */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}

.pd-breadcrumb__crumb:hover[b-iu784lqoim] {
    color: var(--ck-text);
}

.pd-breadcrumb__crumb:focus-visible[b-iu784lqoim] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.pd-breadcrumb__current[b-iu784lqoim] {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--ck-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.pd-tenant-chip[b-iu784lqoim] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    border-radius: 999px;
    padding: 5px 11px 5px 7px;
    font-weight: 600;
    font-size: var(--ck-text-sm);
    white-space: nowrap;
}

.pd-tenant-chip__mark[b-iu784lqoim] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ck-text-xs);
    font-weight: 700;
}

/* ── Three-pane grid ─────────────────────────────────────── */
.pd-main[b-iu784lqoim] {
    display: grid;
    grid-template-columns: 256px 1fr 340px;
    min-height: 0;
    overflow: hidden;
}

.pd-pane[b-iu784lqoim] {
    min-height: 0;
    overflow-y: auto;
}

.pd-pane--palette[b-iu784lqoim] {
    border-right: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

.pd-pane--canvas[b-iu784lqoim] {
    background: var(--ck-bg);
    display: flex;
    flex-direction: column;
}

.pd-pane--inspector[b-iu784lqoim] {
    border-left: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

@media (max-width: 1279px) {
    .pd-main[b-iu784lqoim] {
        grid-template-columns: 220px 1fr;
    }

    .pd-pane--inspector[b-iu784lqoim] {
        display: none;
    }
}

/* ── Process-details inspector (rendered by the page when no step is selected) ── */
.pd-inspector[b-iu784lqoim] {
    padding: 18px 20px;
}

.pd-inspector__kicker[b-iu784lqoim] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.pd-inspector__kicker-icon[b-iu784lqoim] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pd-inspector__title[b-iu784lqoim] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin: 8px 0 16px;
}

.pd-inspector__section-title[b-iu784lqoim] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
    margin: 20px 0 9px;
}

.pd-links[b-iu784lqoim] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pd-link-tile[b-iu784lqoim] {
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ck-accent-tint);
    border: 1px solid var(--ck-accent-soft);
    border-radius: 10px;
    padding: 9px 11px;
    cursor: pointer;
    width: 100%;
}

.pd-link-tile:hover[b-iu784lqoim] {
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.pd-link-tile:disabled[b-iu784lqoim] {
    cursor: default;
    opacity: 0.7;
}

.pd-link-tile__icon[b-iu784lqoim] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--ck-surface-raised);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pd-link-tile__text[b-iu784lqoim] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-link-tile__label[b-iu784lqoim] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
}

.pd-link-tile__hint[b-iu784lqoim] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}
/* /Components/Pages/Rag/Collections.razor.rz.scp.css */
/* RAG-beheer workspace — page shell only (rail + detail panes carry their own scoped CSS).
   Leading design: docs/proposals/immersive-design-kit/designs/Cockpit Studio - Routing-rules & RAG.dc.html
   §"2 · RAG-beheer". Mirrors the shipped pd-shell (Processes/Designer). Warm --ck-* tokens only. */

.rag-shell[b-s6n9i8uoc2] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
    background: var(--ck-bg);
    color: var(--ck-text);
    overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────── */
.rag-topbar[b-s6n9i8uoc2] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: 0 var(--ck-space-5);
    min-height: 56px;
    background: var(--ck-surface);
    border-bottom: 1px solid var(--ck-border);
}

.rag-topbar__left[b-s6n9i8uoc2] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    min-width: 0;
    flex: 1;
}

.rag-topbar__kicker[b-s6n9i8uoc2] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.rag-topbar__sep[b-s6n9i8uoc2] {
    color: var(--ck-border-strong);
}

.rag-topbar__title[b-s6n9i8uoc2] {
    margin: 0;
    font-size: var(--ck-text-base);
    font-weight: 600;
    color: var(--ck-text);
}

.rag-topbar__right[b-s6n9i8uoc2] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.rag-topbar__add[b-s6n9i8uoc2] {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    border-radius: 10px;
    padding: 9px 15px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px -2px rgba(var(--ck-accent-rgb), 0.4);
}

.rag-topbar__add:hover[b-s6n9i8uoc2] {
    background: var(--ck-accent-ink);
}

.rag-topbar__add:focus-visible[b-s6n9i8uoc2] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

/* ── Loading / error ─────────────────────────────────────── */
.rag-loading[b-s6n9i8uoc2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px;
}

.rag-error-banner[b-s6n9i8uoc2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ck-error-subtle);
    color: var(--ck-error);
    font-size: var(--ck-text-sm);
}

/* ── Two-pane grid ───────────────────────────────────────── */
.rag-main[b-s6n9i8uoc2] {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 0;
    overflow: hidden;
}

.rag-pane[b-s6n9i8uoc2] {
    min-height: 0;
    overflow-y: auto;
}

.rag-pane--rail[b-s6n9i8uoc2] {
    border-right: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

.rag-pane--detail[b-s6n9i8uoc2] {
    background: var(--ck-bg);
}

@media (max-width: 1023px) {
    .rag-main[b-s6n9i8uoc2] {
        grid-template-columns: 240px 1fr;
    }
}
/* /Components/Pages/RoutingRules/Workspace.razor.rz.scp.css */
/* Routing-rules workspace shell — topbar + three-pane grid. Warm --ck-* tokens only.
   Mirrors the shipped process-designer shell. Child panes carry their own scoped .razor.css. */

.rr-shell[b-bv2s3n4hj7] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
    background: var(--ck-bg);
    color: var(--ck-text);
    overflow: hidden;
}

/* ── Top bar ──────────────────────────────────────────── */
.rr-topbar[b-bv2s3n4hj7] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: 0 22px;
    min-height: 56px;
    background: var(--ck-surface);
    border-bottom: 1px solid var(--ck-border);
}

.rr-topbar__left[b-bv2s3n4hj7] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    min-width: 0;
    flex: 1;
}

.rr-topbar__right[b-bv2s3n4hj7] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    flex-shrink: 0;
}

.rr-topbar__crumb[b-bv2s3n4hj7] {
    margin: 0;
    font-weight: 400;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.rr-topbar__sep[b-bv2s3n4hj7] {
    color: var(--ck-border-strong);
}

.rr-topbar__current[b-bv2s3n4hj7] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

/* ── Buttons ──────────────────────────────────────────── */
.rr-btn[b-bv2s3n4hj7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    padding: 8px 15px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
}

.rr-btn:disabled[b-bv2s3n4hj7] {
    opacity: 0.55;
    cursor: default;
}

.rr-btn:focus-visible[b-bv2s3n4hj7] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.rr-btn--primary[b-bv2s3n4hj7] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    box-shadow: 0 2px 8px -2px rgba(var(--ck-accent-rgb), 0.4);
}

.rr-btn--primary:not(:disabled):hover[b-bv2s3n4hj7] {
    background: var(--ck-accent-ink);
}

.rr-btn--ghost[b-bv2s3n4hj7] {
    background: var(--ck-surface-raised);
    border-color: var(--ck-border-strong);
    color: var(--ck-text-muted);
}

.rr-btn--ghost:not(:disabled):hover[b-bv2s3n4hj7] {
    color: var(--ck-error);
    border-color: var(--ck-error);
}

.rr-btn__spin[b-bv2s3n4hj7] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ck-accent-contrast-rgb), 0.4);
    border-top-color: var(--ck-accent-contrast);
    animation: rr-shell-spin-b-bv2s3n4hj7 0.8s linear infinite;
}

/* ── Three-pane grid ──────────────────────────────────── */
.rr-main[b-bv2s3n4hj7] {
    display: grid;
    grid-template-columns: 268px 1fr 336px;
    min-height: 0;
    overflow: hidden;
}

.rr-pane[b-bv2s3n4hj7] {
    min-height: 0;
    overflow: hidden;
}

.rr-pane--rail[b-bv2s3n4hj7] {
    border-right: 1px solid var(--ck-border);
}

.rr-pane--editor[b-bv2s3n4hj7] {
    min-width: 0;
}

.rr-pane--dry[b-bv2s3n4hj7] {
    border-left: 1px solid var(--ck-border);
}

@media (max-width: 1279px) {
    .rr-main[b-bv2s3n4hj7] {
        grid-template-columns: 240px 1fr;
    }

    .rr-pane--dry[b-bv2s3n4hj7] {
        display: none;
    }
}

/* ── Loading / error ──────────────────────────────────── */
.rr-loading[b-bv2s3n4hj7] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rr-spinner-lg[b-bv2s3n4hj7] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--ck-border-strong);
    border-top-color: var(--ck-accent);
    animation: rr-shell-spin-b-bv2s3n4hj7 0.8s linear infinite;
}

.rr-error-banner[b-bv2s3n4hj7] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--ck-error-subtle);
    border: 1px solid var(--ck-error);
    color: var(--ck-error);
    font-size: var(--ck-text-sm);
}

@keyframes rr-shell-spin-b-bv2s3n4hj7 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .rr-btn__spin[b-bv2s3n4hj7],
    .rr-spinner-lg[b-bv2s3n4hj7] {
        animation-duration: 0.001ms;
    }
}
/* /Components/Pages/Tenants/CreateTenantDialog.razor.rz.scp.css */
/* Warm modal-systeem (Cockpit Modal-systeem.dc.html) — CreateTenant (sm).
   Titel-only header; velden/validatie/submit blijven MudBlazor. */
.cten__head[b-vvrx70t6vm] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.cten__heading[b-vvrx70t6vm] {
    flex: 1;
    min-width: 0;
}

.cten__title[b-vvrx70t6vm] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cten__body[b-vvrx70t6vm] {
    padding-top: 4px;
}
/* /Components/Pages/Tenants/ProposalSendDialog.razor.rz.scp.css */
/* Warm modal-systeem (Cockpit Modal-systeem.dc.html) — ProposalSend (md, icon-chip).
   Header via Mud TitleContent-hook; velden/validatie/submit blijven MudBlazor. */
.psend__head[b-xrlbr81m37] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.psend__icon[b-xrlbr81m37] {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.psend__icon[b-xrlbr81m37]  .mud-icon-root {
    font-size: var(--ck-text-lg);
}

.psend__heading[b-xrlbr81m37] {
    flex: 1;
    min-width: 0;
}

.psend__title[b-xrlbr81m37] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.psend__body[b-xrlbr81m37] {
    padding-top: 4px;
}
/* /Components/Pages/Tenants/SubscriptionManagement.razor.rz.scp.css */
/* Abonnement per tenant: plaatsen per niveau, facturering en een live overzicht. */
.subm-empty[b-bkmmwcpc7t] {
    text-align: center;
    padding: var(--ck-space-8);
}

.subm-block[b-bkmmwcpc7t] {
    margin-top: var(--ck-space-4);
}

.subm-num[b-bkmmwcpc7t] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Facturering: naam + korte uitleg per keuze */
.subm-period[b-bkmmwcpc7t] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-1);
    min-width: 0;
}

.subm-period__name[b-bkmmwcpc7t] {
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.subm-period__hint[b-bkmmwcpc7t] {
    margin-left: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* Plaatsentabel */
.subm-seats th[b-bkmmwcpc7t],
.subm-seats td[b-bkmmwcpc7t] {
    vertical-align: top;
}

.subm-seats thead th[b-bkmmwcpc7t] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.subm-seats__level[b-bkmmwcpc7t] {
    padding-top: var(--ck-space-4);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    text-align: left;
}

.subm-seats__count[b-bkmmwcpc7t] {
    width: 9rem;
    min-width: 7rem;
}

.subm-seats__price[b-bkmmwcpc7t] {
    min-width: 12rem;
}

.subm-seats td.subm-num[b-bkmmwcpc7t] {
    padding-top: var(--ck-space-4);
}

.subm-seats__row--bought .subm-seats__level[b-bkmmwcpc7t] {
    color: var(--ck-primary-text);
}

/* Overzicht onderaan het formulier */
.subm-summary[b-bkmmwcpc7t] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface-subtle);
}

.subm-summary__head[b-bkmmwcpc7t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-3);
}

.subm-summary__row[b-bkmmwcpc7t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--ck-space-3);
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
}

.subm-summary__row--line[b-bkmmwcpc7t] {
    grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) auto;
}

.subm-summary__level[b-bkmmwcpc7t] {
    font-weight: var(--ck-weight-semibold);
}

.subm-summary__row--total[b-bkmmwcpc7t] {
    padding-top: var(--ck-space-2);
    border-top: 1px solid var(--ck-border);
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
}

.subm-summary__note[b-bkmmwcpc7t] {
    margin: 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* Actief abonnement: plaatsen per niveau */
.subm-card-seats[b-bkmmwcpc7t] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-0-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.subm-card-seats__level[b-bkmmwcpc7t] {
    display: inline-block;
    min-width: 4.5rem;
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

@media (max-width: 600px) {
    .subm-period__hint[b-bkmmwcpc7t] {
        display: block;
        margin-left: 0;
    }

    .subm-summary__row--line[b-bkmmwcpc7t] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .subm-summary__row--line .subm-summary__level[b-bkmmwcpc7t] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Tenants/TenantSeatAssignments.razor.rz.scp.css */
/* Plaatsen per tenant: gebruik per niveau en de plaats van elk lid. */
.seats[b-t4wk2714id] {
    margin-top: var(--ck-space-4);
}

.seats__head[b-t4wk2714id] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-1);
    margin-bottom: var(--ck-space-4);
}

.seats__usage[b-t4wk2714id] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin: 0 0 var(--ck-space-4);
    padding: 0;
    list-style: none;
}

.seats__level[b-t4wk2714id] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-1-5) var(--ck-space-3);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface-subtle);
    color: var(--ck-text);
    font-size: var(--ck-text-sm);
}

.seats__count[b-t4wk2714id] {
    font-variant-numeric: tabular-nums;
}

.seats__level--over[b-t4wk2714id] {
    border-color: var(--ck-warning);
    background: var(--ck-warning-subtle);
}

.seats__over-note[b-t4wk2714id] {
    color: var(--ck-text-muted);
}

.seats__members thead th[b-t4wk2714id] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.seats__members td[b-t4wk2714id] {
    vertical-align: middle;
}

.seats__name[b-t4wk2714id] {
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text);
}

/* An address stays whole: overflow-wrap: anywhere let this cell collapse to a few letters wide beside the seat column,
   while a table that does not fit already scrolls in its MudSimpleTable container (#3988). */
.seats__email[b-t4wk2714id] {
    color: var(--ck-text-muted);
    overflow-wrap: normal;
}

.seats__seat[b-t4wk2714id] {
    width: 16rem;
    min-width: 12rem;
}
/* /Components/Pages/Webhooks/WebhookSecretDialog.razor.rz.scp.css */
/* Warm modal-systeem (Cockpit Modal-systeem.dc.html) — WebhookSecret (sm).
   Titel-only header; amber waarschuwing + mono geheim (--ck-font-mono inline op het veld).
   Geheim/copy/close-logica blijft MudBlazor. */
.wsec__head[b-whn1yfxiux] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.wsec__heading[b-whn1yfxiux] {
    flex: 1;
    min-width: 0;
}

.wsec__title[b-whn1yfxiux] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.wsec__body[b-whn1yfxiux] {
    padding-top: 4px;
}
/* /Components/Pages/Webhooks/WebhookSubscribeDialog.razor.rz.scp.css */
/* Warm modal-systeem (Cockpit Modal-systeem.dc.html) — WebhookSubscribe (md, icon-chip).
   Header via Mud TitleContent-hook; MudSelect/MudTextField + validatie blijven intact. */
.wsub__head[b-v87blcvk91] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.wsub__icon[b-v87blcvk91] {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wsub__icon[b-v87blcvk91]  .mud-icon-root {
    font-size: var(--ck-text-lg);
}

.wsub__heading[b-v87blcvk91] {
    flex: 1;
    min-width: 0;
}

.wsub__title[b-v87blcvk91] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.wsub__body[b-v87blcvk91] {
    padding-top: 4px;
}
/* /Components/Pages/Workbench/TileEditor.razor.rz.scp.css */
[b-6jwuuaapeh] .wb-code textarea {
    font-family: var(--ck-font-mono);
    font-size: var(--ck-text-sm);
    line-height: 1.45;
}

.wb-ok[b-6jwuuaapeh] {
    margin: var(--ck-space-1) 0 0;
    color: var(--ck-success);
    font-size: var(--ck-text-sm);
}

.wb-problems[b-6jwuuaapeh] {
    margin: var(--ck-space-1) 0 0;
    padding-left: var(--ck-space-4);
    color: var(--ck-error);
    font-size: var(--ck-text-sm);
}
/* /Components/Pages/Workbench/TilePreview.razor.rz.scp.css */
/* The frame around the preview (#4317), as around a tile in the App: the containing block for anything the tile's
   CSS positions fixed or absolute, and the edge where that paint stops. The tile's CSS cannot select this element. */
.wb-preview-frame[b-smi4wf9b09] {
    contain: paint;
    isolation: isolate;
    border-radius: var(--ck-radius-md);
}

.wb-preview[b-smi4wf9b09] {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
    overflow: hidden;
}

.wb-preview__head[b-smi4wf9b09] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-2) var(--ck-space-4);
    border-bottom: 1px solid var(--ck-border);
}

.wb-preview__title[b-smi4wf9b09] {
    margin: 0;
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
    letter-spacing: var(--ck-tracking-wide);
    text-transform: uppercase;
    color: var(--ck-text-muted);
}

.wb-preview__chip[b-smi4wf9b09] {
    margin-left: auto;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.wb-preview__body[b-smi4wf9b09] {
    padding: var(--ck-space-4);
    min-height: 120px;
}

.wb-preview__note[b-smi4wf9b09] {
    margin: 0;
    color: var(--ck-text-subtle);
}

.wb-preview__note[data-state="error"][b-smi4wf9b09] {
    color: var(--ck-error);
}

.wb-preview__actions[b-smi4wf9b09] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    padding: var(--ck-space-2) var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
}

.wb-preview__action[b-smi4wf9b09] {
    padding: 2px var(--ck-space-2);
    border-radius: 999px;
    font-size: var(--ck-text-xs);
    background: var(--ck-surface-raised);
}

.wb-preview__action--off[b-smi4wf9b09] {
    text-decoration: line-through;
    color: var(--ck-text-subtle);
}
/* /Components/Pages/Workbench/WorkbenchEditor.razor.rz.scp.css */
[b-d0u0fw9tpw] .wb-code textarea {
    font-family: var(--ck-font-mono);
    font-size: var(--ck-text-sm);
    line-height: 1.45;
}

.wb-ok[b-d0u0fw9tpw] {
    margin: var(--ck-space-1) 0 0;
    color: var(--ck-success);
    font-size: var(--ck-text-sm);
}

.wb-problems[b-d0u0fw9tpw] {
    margin: var(--ck-space-1) 0 0;
    padding-left: var(--ck-space-4);
    color: var(--ck-error);
    font-size: var(--ck-text-sm);
}
/* /Components/ProcessDesigner/ProcessNodeFlowCanvas.razor.rz.scp.css */
/* Warm process-designer node-flow canvas. Scoped CSS. */

.pd-canvas[b-8t8j91eu1c] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    height: 100%;
}

.pd-canvas__head[b-8t8j91eu1c] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: 16px 22px 12px;
}

.pd-canvas__title[b-8t8j91eu1c] {
    font-size: var(--ck-text-base);
    font-weight: 600;
}

.pd-canvas__spacer[b-8t8j91eu1c] {
    flex: 1;
}

.pd-canvas__zoom[b-8t8j91eu1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: 9px;
    padding: 6px 11px;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.pd-canvas__body[b-8t8j91eu1c] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 22px 22px;
}

.pd-flow[b-8t8j91eu1c] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
    margin: 0 auto;
}

.pd-connector[b-8t8j91eu1c] {
    width: 2px;
    height: 18px;
    background: var(--ck-border-strong);
    margin-left: 6px;
}

.pd-node[b-8t8j91eu1c] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 13px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
    cursor: pointer;
}

.pd-node:hover[b-8t8j91eu1c] {
    border-color: var(--ck-accent-soft);
}

.pd-node:focus-visible[b-8t8j91eu1c] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.pd-node--selected[b-8t8j91eu1c] {
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.10),
                0 10px 24px -14px rgba(var(--ck-accent-rgb), 0.22);
}

.pd-node__text[b-8t8j91eu1c] {
    flex: 1;
    min-width: 0;
}

.pd-node__title[b-8t8j91eu1c] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-node--selected .pd-node__title[b-8t8j91eu1c] {
    color: var(--ck-accent-ink);
}

.pd-node__sub[b-8t8j91eu1c] {
    font-size: var(--ck-text-xs);
    color: var(--ck-accent-ink);
    opacity: 0.85;
    margin-top: 1px;
}

.pd-agent-chip[b-8t8j91eu1c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-radius: 999px;
    padding: 2px 8px;
    flex: none;
}

.pd-branch-chip[b-8t8j91eu1c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    color: oklch(from var(--ck-warning) calc(l - 0.14) c h);
    background: var(--ck-warning-subtle);
    border-radius: 999px;
    padding: 2px 8px;
    flex: none;
}

/* status dots */
.pd-status-dot[b-8t8j91eu1c] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
}

.pd-status-dot--done[b-8t8j91eu1c] {
    background: var(--ck-success);
}

.pd-status-dot--active[b-8t8j91eu1c] {
    background: var(--ck-accent);
    box-shadow: 0 0 0 4px rgba(var(--ck-accent-rgb), 0.16);
}

.pd-status-dot--open[b-8t8j91eu1c] {
    background: var(--ck-border-strong);
}

/* RACI avatars */
.pd-avatars[b-8t8j91eu1c] {
    display: flex;
    flex: none;
}

.pd-avatar[b-8t8j91eu1c] {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ck-text-xs);
    font-weight: 700;
    border: 2px solid var(--ck-surface-raised);
}

.pd-avatar + .pd-avatar[b-8t8j91eu1c] {
    margin-left: -6px;
}

.pd-avatar--r[b-8t8j91eu1c] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.pd-avatar--a[b-8t8j91eu1c] {
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.pd-avatar--ci[b-8t8j91eu1c] {
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
}

/* empty state */
.pd-empty[b-8t8j91eu1c] {
    max-width: 420px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: 14px;
}

.pd-empty__icon[b-8t8j91eu1c] {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-disabled);
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
}

.pd-empty__title[b-8t8j91eu1c] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin-top: 14px;
}

.pd-empty__body[b-8t8j91eu1c] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 6px 0 16px;
    max-width: 340px;
}

.pd-empty__actions[b-8t8j91eu1c] {
    display: flex;
    gap: 9px;
}
/* /Components/ProcessDesigner/ProcessSimulationDialog.razor.rz.scp.css */
/* Warm modal-systeem (Cockpit Modal-systeem.dc.html) — ProcessSimulation (lg).
   Header (titel + Test-run-pill + uitleg-regel) via Mud TitleContent-hook;
   timeline/chips/progress/alert + run-logica blijven 100% MudBlazor. */
.psim__head[b-qkmuyi6b7v] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.psim__heading[b-qkmuyi6b7v] {
    flex: 1;
    min-width: 0;
}

.psim__title-row[b-qkmuyi6b7v] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.psim__title[b-qkmuyi6b7v] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.psim__title-row[b-qkmuyi6b7v]  .mud-chip {
    margin: 0;
}

.psim__sub[b-qkmuyi6b7v] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
    margin-top: 3px;
    line-height: 1.45;
}

/* Testgegevens: de gegevens van de run waartegen de voorwaarden van de overgangen toetsen (#1468). */
.psim__data[b-qkmuyi6b7v] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.psim__data-label[b-qkmuyi6b7v] {
    font-size: var(--ck-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
}

.psim__data-input[b-qkmuyi6b7v] {
    font-family: var(--ck-font-mono, monospace);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    resize: vertical;
}

.psim__data-input:focus[b-qkmuyi6b7v] {
    outline: none;
    border-color: var(--ck-border-focus);
    box-shadow: var(--ck-shadow-glow);
}

.psim__data-hint[b-qkmuyi6b7v] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}
/* /Components/ProcessDesigner/ProcessStepInspectorWarm.razor.rz.scp.css */
/* Warm process-designer inspector. Scoped CSS.
   The inner ProcessStepInspector + StepRaciEditor + StepAgentSelector render their own
   (MudBlazor) markup; only the chrome rendered directly by this component is styled here. */

.pd-inspector[b-x1rfyn6ujj] {
    padding: 18px 20px;
}

.pd-inspector--empty[b-x1rfyn6ujj] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.pd-inspector__placeholder[b-x1rfyn6ujj] {
    color: var(--ck-text-muted);
    text-align: center;
}

.pd-inspector__kicker[b-x1rfyn6ujj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.pd-inspector__kicker-spacer[b-x1rfyn6ujj] {
    flex: 1;
}

.pd-inspector__kicker-icon[b-x1rfyn6ujj] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pd-inspector__title[b-x1rfyn6ujj] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin: 8px 0 16px;
}

.pd-inspector__section-title[b-x1rfyn6ujj] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
    margin: 20px 0 9px;
}

/* Koppelingen tiles */
.pd-links[b-x1rfyn6ujj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pd-link-tile[b-x1rfyn6ujj] {
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ck-accent-tint);
    border: 1px solid var(--ck-accent-soft);
    border-radius: 10px;
    padding: 9px 11px;
    cursor: pointer;
    width: 100%;
}

.pd-link-tile:hover[b-x1rfyn6ujj] {
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.pd-link-tile:disabled[b-x1rfyn6ujj] {
    cursor: default;
    opacity: 0.7;
}

.pd-link-tile__icon[b-x1rfyn6ujj] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--ck-surface-raised);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pd-link-tile__text[b-x1rfyn6ujj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-link-tile__label[b-x1rfyn6ujj] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
}

.pd-link-tile__hint[b-x1rfyn6ujj] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}
/* /Components/ProcessDesigner/ProcessStepPalette.razor.rz.scp.css */
/* Warm process-designer palette. Scoped CSS — classes here render in this component's DOM. */

.pd-palette[b-ehfuic7d4m] {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--ck-space-4);
}

.pd-palette__section-head[b-ehfuic7d4m] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: 15px 14px 10px;
}

.pd-palette__section-title[b-ehfuic7d4m] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.pd-palette__count[b-ehfuic7d4m] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.pd-palette__steps[b-ehfuic7d4m],
.pd-palette__blocks[b-ehfuic7d4m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px;
}

.pd-palette-step[b-ehfuic7d4m] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 9px 10px;
    cursor: pointer;
}

.pd-palette-step:hover[b-ehfuic7d4m] {
    background: var(--ck-surface-high);
}

.pd-palette-step--selected[b-ehfuic7d4m] {
    background: var(--ck-accent-tint);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.pd-palette-step--selected .pd-palette-step__title[b-ehfuic7d4m] {
    color: var(--ck-accent-ink);
    font-weight: 600;
}

.pd-palette-step__title[b-ehfuic7d4m] {
    font-size: var(--ck-text-sm);
    font-weight: 500;
    color: var(--ck-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-drag-dots[b-ehfuic7d4m] {
    color: var(--ck-text-disabled);
    display: flex;
    cursor: grab;
    flex: none;
}

.pd-status-dot[b-ehfuic7d4m] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.pd-status-dot--done[b-ehfuic7d4m] {
    background: var(--ck-success);
}

.pd-status-dot--active[b-ehfuic7d4m] {
    background: var(--ck-accent);
}

.pd-status-dot--open[b-ehfuic7d4m] {
    background: var(--ck-border-strong);
}

.pd-palette__add[b-ehfuic7d4m] {
    font-family: inherit;
    border: 1px dashed var(--ck-border-strong);
    background: none;
    color: var(--ck-text-muted);
    border-radius: 10px;
    padding: 8px;
    font-size: var(--ck-text-sm);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pd-palette__add:hover[b-ehfuic7d4m] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.pd-palette__divider[b-ehfuic7d4m] {
    height: 1px;
    background: var(--ck-border);
    margin: 14px 12px 0;
}

.pd-block[b-ehfuic7d4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 9px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--ck-text-muted);
    /* Semantic <button> reset so it blends with the warm palette. */
    width: 100%;
    font: inherit;
    text-align: left;
}

.pd-block:hover[b-ehfuic7d4m] {
    border-color: var(--ck-accent-soft);
}

.pd-palette-step:focus-visible[b-ehfuic7d4m],
.pd-block:focus-visible[b-ehfuic7d4m] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.pd-block__label[b-ehfuic7d4m] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    font-weight: 500;
}
/* /Components/ProcessDesigner/StepTransitionsEditor.razor.rz.scp.css */
/* Branch editor of the process-designer inspector (design "Voorwaarde-editor · overgang vertakt"). Scoped CSS. */

.pd-overgang[b-0zgekwfdc3] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 11px;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-branch-empty[b-0zgekwfdc3],
.pd-overgang__fallback[b-0zgekwfdc3],
.pd-branch__hint[b-0zgekwfdc3] {
    margin: 0;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    line-height: 1.45;
}

.pd-overgang__hint[b-0zgekwfdc3] {
    margin: 0;
    font-size: var(--ck-text-xs);
    color: oklch(from var(--ck-warning) calc(l - 0.14) c h);
    line-height: 1.45;
}

.pd-branch[b-0zgekwfdc3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-left: 3px solid var(--ck-accent);
    border-radius: 10px;
}

.pd-branch--otherwise[b-0zgekwfdc3] {
    border-left-color: var(--ck-warning);
    background: var(--ck-warning-subtle);
}

.pd-branch__head[b-0zgekwfdc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pd-branch__label[b-0zgekwfdc3] {
    font-size: var(--ck-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
}

.pd-branch__remove[b-0zgekwfdc3] {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--ck-text-muted);
    cursor: pointer;
    border-radius: 6px;
    padding: 2px;
}

.pd-branch__remove:hover[b-0zgekwfdc3] {
    color: var(--ck-error);
}

.pd-branch__toggle[b-0zgekwfdc3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    cursor: pointer;
}

.pd-branch__condition[b-0zgekwfdc3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-tr-input[b-0zgekwfdc3],
.pd-tr-select[b-0zgekwfdc3] {
    font-family: inherit;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    min-width: 0;
}

.pd-tr-input:focus[b-0zgekwfdc3],
.pd-tr-select:focus[b-0zgekwfdc3] {
    outline: none;
    border-color: var(--ck-border-focus);
    box-shadow: var(--ck-shadow-glow);
}

.pd-tr-field[b-0zgekwfdc3] {
    flex: 1 1 100%;
}

.pd-tr-operator[b-0zgekwfdc3] {
    flex: 1 1 auto;
}

.pd-tr-value[b-0zgekwfdc3] {
    flex: 1 1 100%;
}

.pd-branch__target[b-0zgekwfdc3] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ck-accent);
}

.pd-branch__target .pd-tr-select[b-0zgekwfdc3] {
    flex: 1;
}

.pd-branch__add[b-0zgekwfdc3] {
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    border: 1px dashed var(--ck-border-strong);
    background: none;
    color: var(--ck-text-muted);
    border-radius: 9px;
    padding: 8px;
    font-size: var(--ck-text-sm);
    font-weight: 500;
    cursor: pointer;
}

.pd-branch__add:hover[b-0zgekwfdc3] {
    color: var(--ck-accent-ink);
    border-color: var(--ck-accent);
}

.pd-tr-save[b-0zgekwfdc3] {
    font-family: inherit;
    align-self: flex-end;
    border: none;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    cursor: pointer;
}

.pd-tr-save:disabled[b-0zgekwfdc3] {
    opacity: 0.45;
    cursor: default;
}
/* /Components/RagManager/RagCollectionDetail.razor.rz.scp.css */
/* Warm RAG-manager detail pane (design "2 · RAG-beheer" detail).
   Warm --ck-* tokens only. Motion: riseIn one-shot on the pane; status pill dot is STILL
   (a finished index-state, not live). KpiCard / RagEmbedderProbeCard carry their own motion. */

.rag-detail[b-ggzvuzarpu] {
    padding: 24px 28px;
    min-height: 0;
    animation: rag-detail-riseIn-b-ggzvuzarpu 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rag-detail--empty[b-ggzvuzarpu] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.rag-detail__head[b-ggzvuzarpu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.rag-detail__head-text[b-ggzvuzarpu] {
    min-width: 0;
}

.rag-detail__title[b-ggzvuzarpu] {
    font-size: var(--ck-text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--ck-text);
}

.rag-detail__sub[b-ggzvuzarpu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: 5px;
}

/* ── Index-status pill ───────────────────────────────────── */
.rag-pill[b-ggzvuzarpu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 12px;
    flex: none;
    white-space: nowrap;
}

.rag-pill__dot[b-ggzvuzarpu] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.rag-pill--ok[b-ggzvuzarpu] {
    color: var(--ck-success);
    background: var(--ck-success-subtle);
}

.rag-pill--attention[b-ggzvuzarpu] {
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
    background: var(--ck-warning-subtle);
}

.rag-pill--error[b-ggzvuzarpu] {
    color: var(--ck-error);
    background: var(--ck-error-subtle);
}

/* ── Stats row ───────────────────────────────────────────── */
.rag-stats[b-ggzvuzarpu] {
    display: flex;
    gap: 13px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.rag-stats > *[b-ggzvuzarpu] {
    flex: 1;
    min-width: 150px;
}

/* ── Reindex card ────────────────────────────────────────── */
.rag-reindex[b-ggzvuzarpu] {
    margin-top: 16px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
    display: flex;
    align-items: center;
    gap: 14px;
}

.rag-reindex__icon[b-ggzvuzarpu] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rag-reindex__text[b-ggzvuzarpu] {
    flex: 1;
    min-width: 0;
}

.rag-reindex__title[b-ggzvuzarpu] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
}

.rag-reindex__body[b-ggzvuzarpu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ── Placeholder (no selection) ──────────────────────────── */
.rag-placeholder[b-ggzvuzarpu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 360px;
}

.rag-placeholder__tile[b-ggzvuzarpu] {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-subtle);
}

.rag-placeholder__title[b-ggzvuzarpu] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin-top: 14px;
    color: var(--ck-text);
}

.rag-placeholder__body[b-ggzvuzarpu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 6px 0 0;
}

/* ── Buttons + loader ────────────────────────────────────── */
.rag-btn[b-ggzvuzarpu] {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--ck-radius-md);
    padding: 10px 16px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.rag-btn--ghost[b-ggzvuzarpu] {
    background: var(--ck-surface);
    border: 1px solid var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.rag-btn--ghost:hover[b-ggzvuzarpu] {
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.rag-btn:disabled[b-ggzvuzarpu] {
    cursor: default;
    opacity: 0.6;
    box-shadow: none;
}

.rag-spinner[b-ggzvuzarpu] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ck-accent-rgb), 0.25);
    border-top-color: var(--ck-accent);
    animation: rag-detail-spin-b-ggzvuzarpu 0.8s linear infinite;
    flex: none;
}

@keyframes rag-detail-riseIn-b-ggzvuzarpu {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes rag-detail-spin-b-ggzvuzarpu {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *[b-ggzvuzarpu], *[b-ggzvuzarpu]::before, *[b-ggzvuzarpu]::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}
/* /Components/RagManager/RagCollectionRail.razor.rz.scp.css */
/* Warm RAG-manager rail — collection cards (design "2 · RAG-beheer").
   Warm --ck-* tokens only; rings via rgba(var(--ck-accent-rgb), …). Motion: riseIn stagger on cards;
   index-status dots are STILL (no pulse — sync is a finished/failed/stale state, not "live"). */

.rag-rail[b-kxjlo7lo6k] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.rag-rail__head[b-kxjlo7lo6k] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: 15px 14px 10px;
}

.rag-rail__title[b-kxjlo7lo6k] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.rag-rail__count[b-kxjlo7lo6k] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.rag-rail__list[b-kxjlo7lo6k] {
    padding: 0 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    min-height: 0;
}

/* ── Collection card ─────────────────────────────────────── */
.rag-card[b-kxjlo7lo6k] {
    /* Semantic <button> reset so the selectable card blends with the warm rail (incl. mobile-Safari UA chrome). */
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 12px 13px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
    cursor: pointer;
    animation: rag-riseIn-b-kxjlo7lo6k 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rag-card:focus-visible[b-kxjlo7lo6k] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

/* Gentle entrance stagger for the first handful of cards. */
.rag-card:nth-child(1)[b-kxjlo7lo6k] { animation-delay: 0s; }
.rag-card:nth-child(2)[b-kxjlo7lo6k] { animation-delay: 0.05s; }
.rag-card:nth-child(3)[b-kxjlo7lo6k] { animation-delay: 0.1s; }
.rag-card:nth-child(4)[b-kxjlo7lo6k] { animation-delay: 0.15s; }
.rag-card:nth-child(5)[b-kxjlo7lo6k] { animation-delay: 0.2s; }

.rag-card:hover[b-kxjlo7lo6k] {
    border-color: var(--ck-border-strong);
}

.rag-card:focus-visible[b-kxjlo7lo6k] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.rag-card--selected[b-kxjlo7lo6k] {
    background: var(--ck-accent-tint);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.rag-card--selected .rag-card__name[b-kxjlo7lo6k] {
    color: var(--ck-accent-ink);
}

.rag-card__row[b-kxjlo7lo6k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rag-card__name[b-kxjlo7lo6k] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rag-card__meta[b-kxjlo7lo6k] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    margin-top: 6px;
}

.rag-card__meta--error[b-kxjlo7lo6k] {
    color: var(--ck-error);
}

/* ── Status dot (STILL — no pulse) ───────────────────────── */
.rag-dot[b-kxjlo7lo6k] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--ck-text-subtle);
}

.rag-dot--ok[b-kxjlo7lo6k] { background: var(--ck-success); }
.rag-dot--attention[b-kxjlo7lo6k] { background: var(--ck-warning); }
.rag-dot--error[b-kxjlo7lo6k] { background: var(--ck-error); }

/* ── Empty / first-run state ─────────────────────────────── */
.rag-rail__empty[b-kxjlo7lo6k] {
    margin: 8px 12px;
}

.rag-empty[b-kxjlo7lo6k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
}

.rag-empty__tile[b-kxjlo7lo6k] {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-subtle);
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
}

.rag-empty__title[b-kxjlo7lo6k] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin-top: 14px;
    color: var(--ck-text);
}

.rag-empty__body[b-kxjlo7lo6k] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 6px 0 16px;
    max-width: 330px;
}

/* ── Warm buttons (mirror design) ────────────────────────── */
.rag-btn[b-kxjlo7lo6k] {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--ck-radius-md);
    padding: 9px 16px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.rag-btn--primary[b-kxjlo7lo6k] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    box-shadow: 0 2px 8px -2px rgba(var(--ck-accent-rgb), 0.4);
}

.rag-btn--primary:hover[b-kxjlo7lo6k] {
    box-shadow: 0 4px 12px -2px rgba(var(--ck-accent-rgb), 0.45);
}

@keyframes rag-riseIn-b-kxjlo7lo6k {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-kxjlo7lo6k], *[b-kxjlo7lo6k]::before, *[b-kxjlo7lo6k]::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}
/* /Components/RagManager/RagEmbedderProbeCard.razor.rz.scp.css */
/* Warm embedder + probe card (design "2 · RAG-beheer" embedder section + fail-state).
   Warm --ck-* tokens only. Motion: dotPulse 1.8s ONLY on the healthy/live probe dot; the loader
   uses a rotating ring (spin), never a pulsing ring. Failed/idle dots are still. */

.rag-section-title[b-ezyrlzf8a3] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
    margin: 22px 0 11px;
}

.rag-embedder[b-ezyrlzf8a3] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 18px 20px;
    box-shadow: var(--ck-shadow-soft);
}

.rag-embedder__fields[b-ezyrlzf8a3] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.rag-field[b-ezyrlzf8a3] {
    flex: 1;
    min-width: 200px;
}

.rag-field--key[b-ezyrlzf8a3] {
    flex: none;
    width: 220px;
}

.rag-field__label[b-ezyrlzf8a3] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.rag-field__value[b-ezyrlzf8a3] {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 9px 12px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    display: flex;
    align-items: center;
    gap: 9px;
}

.rag-field__value--chip[b-ezyrlzf8a3] {
    padding: 7px 10px;
}

.rag-dot[b-ezyrlzf8a3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--ck-text-subtle);
}

.rag-dot--ok[b-ezyrlzf8a3] { background: var(--ck-success); }
.rag-dot--attention[b-ezyrlzf8a3] { background: var(--ck-warning); }
.rag-dot--error[b-ezyrlzf8a3] { background: var(--ck-error); }

/* Live/healthy dot pulses — the ONE pulse allowed here (it signals a genuinely healthy probe).
   Canonical kit pulse (motion.css ck-dot-pulse, één timing kit-breed 1.8s) — geen lokale keyframe. */
.rag-dot--live[b-ezyrlzf8a3] {
    width: 7px;
    height: 7px;
    animation: ck-dot-pulse 1.8s ease-in-out infinite;
}

/* ── Probe block ─────────────────────────────────────────── */
.rag-probe[b-ezyrlzf8a3] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ck-border);
}

.rag-probe__idle[b-ezyrlzf8a3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rag-probe__hint[b-ezyrlzf8a3] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

/* Healthy state */
.rag-probe__ok[b-ezyrlzf8a3] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.rag-probe__ok-icon[b-ezyrlzf8a3] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ck-success-subtle);
    color: var(--ck-success);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rag-probe__ok-text[b-ezyrlzf8a3] {
    flex: 1;
    min-width: 0;
}

.rag-probe__ok-title[b-ezyrlzf8a3] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
}

.rag-probe__ok-sub[b-ezyrlzf8a3] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.rag-probe__badge[b-ezyrlzf8a3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 11px;
    flex: none;
}

.rag-probe__badge--ok[b-ezyrlzf8a3] {
    color: var(--ck-success);
    background: var(--ck-success-subtle);
}

.rag-probe__badge--error[b-ezyrlzf8a3] {
    color: var(--ck-error);
    background: var(--ck-error-subtle);
    border: 1px solid var(--ck-error-subtle);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Failed state — restrained --ck-error tint, never a brighter alarm-red. */
.rag-probe__error[b-ezyrlzf8a3] {
    background: var(--ck-surface);
    border: 1px solid var(--ck-error-subtle);
    border-radius: var(--ck-radius-md);
    padding: 14px 16px;
}

.rag-probe__error-head[b-ezyrlzf8a3] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.rag-probe__error-icon[b-ezyrlzf8a3] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ck-error-subtle);
    color: var(--ck-error);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rag-probe__error-title[b-ezyrlzf8a3] {
    flex: 1;
    min-width: 0;
}

.rag-probe__error-line1[b-ezyrlzf8a3] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
}

.rag-probe__code[b-ezyrlzf8a3] {
    margin-top: 13px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 11px 13px;
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: var(--ck-text-xs);
    color: var(--ck-error);
    line-height: 1.6;
    word-break: break-word;
}

.rag-probe__retry[b-ezyrlzf8a3] {
    margin-top: 14px;
}

/* ── No-config hint ──────────────────────────────────────── */
.rag-embedder--hint[b-ezyrlzf8a3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rag-embedder__hint-icon[b-ezyrlzf8a3] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rag-embedder__hint-text[b-ezyrlzf8a3] {
    flex: 1;
    min-width: 0;
}

.rag-embedder__hint-title[b-ezyrlzf8a3] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
}

.rag-embedder__hint-body[b-ezyrlzf8a3] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: 2px 0 0;
    line-height: 1.5;
}

/* ── Buttons + loader ────────────────────────────────────── */
.rag-btn[b-ezyrlzf8a3] {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--ck-radius-md);
    padding: 9px 15px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.rag-btn--ghost[b-ezyrlzf8a3] {
    background: var(--ck-surface);
    border: 1px solid var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.rag-btn--ghost:hover[b-ezyrlzf8a3] {
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.rag-btn:disabled[b-ezyrlzf8a3] {
    cursor: default;
    opacity: 0.6;
    box-shadow: none;
}

/* Rotating loader ring — never a pulsing ring (form = motion). */
.rag-spinner[b-ezyrlzf8a3] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ck-accent-rgb), 0.25);
    border-top-color: var(--ck-accent);
    animation: rag-spin-b-ezyrlzf8a3 0.8s linear infinite;
    flex: none;
}

@keyframes rag-spin-b-ezyrlzf8a3 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *[b-ezyrlzf8a3], *[b-ezyrlzf8a3]::before, *[b-ezyrlzf8a3]::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    /* De universele guard laat de puls op zijn 100%-keyframe settelen (gedimd/gekrompen).
       Zet de live-stip expliciet UIT zodat hij op zijn volle statische basis blijft staan
       (MOTION.md reduced-motion-vloer; matcht de .ck-live-dot-ruststaat in motion.css). */
    .rag-dot--live[b-ezyrlzf8a3] {
        animation: none !important;
    }
}
/* /Components/RoutingDesigner/RoutingDryRunPanel.razor.rz.scp.css */
/* Routing workspace — right pane (dry-run / diagnose). Warm --ck-* tokens only.
   Leading design: docs/proposals/immersive-design-kit/designs/Cockpit Studio - Routing-rules & RAG.dc.html §1. */

.rr-dry[b-ewlvmkubd9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding: 18px 20px;
    background: var(--ck-surface);
}

.rr-dry__head[b-ewlvmkubd9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.rr-dry__icon[b-ewlvmkubd9] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rr-dry__kicker[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.rr-dry__lead[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 6px 0 13px;
}

.rr-dry__form[b-ewlvmkubd9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rr-dry__form .rr-field__label[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    font-weight: 500;
    margin: 6px 0 1px;
}

.rr-input[b-ewlvmkubd9],
.rr-select[b-ewlvmkubd9] {
    width: 100%;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    font-family: inherit;
}

.rr-input:focus[b-ewlvmkubd9],
.rr-select:focus[b-ewlvmkubd9] {
    outline: none;
    border-color: var(--ck-border-focus);
    box-shadow: var(--ck-shadow-glow);
}

.rr-chk[b-ewlvmkubd9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: 6px 0 2px;
    cursor: pointer;
}

.rr-chk input[b-ewlvmkubd9] {
    accent-color: var(--ck-accent);
    width: 16px;
    height: 16px;
}

.rr-dry__run[b-ewlvmkubd9] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    border: none;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    border-radius: 10px;
    padding: 9px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px -2px rgba(var(--ck-accent-rgb), 0.4);
}

.rr-dry__run:hover[b-ewlvmkubd9] {
    background: var(--ck-accent-ink);
}

.rr-dry__run:disabled[b-ewlvmkubd9] {
    opacity: 0.7;
    cursor: default;
}

.rr-dry__run:focus-visible[b-ewlvmkubd9] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.rr-spinner[b-ewlvmkubd9] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ck-accent-contrast-rgb), 0.4);
    border-top-color: var(--ck-accent-contrast);
    animation: rr-spin-b-ewlvmkubd9 0.8s linear infinite;
}

/* ── Evaluation ───────────────────────────────────────── */
.rr-dry__section[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
    margin: 18px 0 9px;
}

.rr-eval[b-ewlvmkubd9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rr-eval__row[b-ewlvmkubd9] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 9px;
    padding: 8px 11px;
}

.rr-eval__row--won[b-ewlvmkubd9] {
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.rr-eval__dot[b-ewlvmkubd9] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ck-surface-high);
    color: var(--ck-text-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rr-eval__dot--match[b-ewlvmkubd9] {
    background: var(--ck-success);
    color: var(--ck-surface-raised);
}

.rr-eval__name[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-eval__row--won .rr-eval__name[b-ewlvmkubd9] {
    color: var(--ck-accent-ink);
    font-weight: 600;
}

.rr-eval__verdict[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-disabled);
    flex: none;
}

.rr-eval__row--won .rr-eval__verdict[b-ewlvmkubd9] {
    color: var(--ck-success);
    font-weight: 600;
}

.rr-eval__empty[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    padding: 8px 2px;
}

/* ── Result ───────────────────────────────────────────── */
.rr-result[b-ewlvmkubd9] {
    margin-top: 13px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-accent-soft);
    border-radius: 11px;
    padding: 13px 14px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
}

.rr-result__label[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    margin-bottom: 7px;
}

.rr-result__body[b-ewlvmkubd9] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rr-result__icon[b-ewlvmkubd9] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rr-result__title[b-ewlvmkubd9] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
}

.rr-result__sub[b-ewlvmkubd9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

@keyframes rr-spin-b-ewlvmkubd9 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rr-spinner[b-ewlvmkubd9] {
        animation-duration: 0.001ms;
    }
}
/* /Components/RoutingDesigner/RoutingRuleEditor.razor.rz.scp.css */
/* Routing workspace — center pane (ALS/DAN editor). Warm --ck-* tokens only.
   Leading design: docs/proposals/immersive-design-kit/designs/Cockpit Studio - Routing-rules & RAG.dc.html §1. */

.rr-editor[b-swkz1c9iqq] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--ck-bg);
}

/* ── Empty (no rule selected) ─────────────────────────── */
.rr-editor--empty[b-swkz1c9iqq] {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.rr-editor__empty-icon[b-swkz1c9iqq] {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-disabled);
}

.rr-editor__empty-title[b-swkz1c9iqq] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    margin-top: 14px;
}

.rr-editor__empty-body[b-swkz1c9iqq] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 6px 0 0;
    max-width: 340px;
}

/* ── Header ───────────────────────────────────────────── */
.rr-editor__head[b-swkz1c9iqq] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 24px 12px;
}

.rr-editor__num[b-swkz1c9iqq] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ck-text-sm);
    flex: none;
}

.rr-editor__name[b-swkz1c9iqq] {
    flex: 1;
    min-width: 0;
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
    border: none;
    background: none;
    font-family: inherit;
    outline: 1.5px dashed var(--ck-accent-soft);
    outline-offset: 5px;
    border-radius: 3px;
    padding: 0;
}

.rr-editor__name:focus[b-swkz1c9iqq] {
    outline-style: solid;
    outline-color: var(--ck-border-focus);
}

/* ── Toggle ───────────────────────────────────────────── */
.rr-toggle[b-swkz1c9iqq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: none;
}

.rr-toggle input[b-swkz1c9iqq] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rr-toggle__track[b-swkz1c9iqq] {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border-strong);
    position: relative;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.rr-toggle__knob[b-swkz1c9iqq] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ck-surface-raised);
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.2);
    transition: transform 0.18s ease;
}

.rr-toggle input:checked + .rr-toggle__track[b-swkz1c9iqq] {
    background: var(--ck-success);
    border-color: var(--ck-success);
}

.rr-toggle input:checked + .rr-toggle__track .rr-toggle__knob[b-swkz1c9iqq] {
    transform: translateX(16px);
}

.rr-toggle input:focus-visible + .rr-toggle__track[b-swkz1c9iqq] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.rr-toggle__label[b-swkz1c9iqq] {
    font-size: var(--ck-text-xs);
    font-weight: 600;
    color: var(--ck-text-muted);
}

/* ── Body ─────────────────────────────────────────────── */
.rr-editor__body[b-swkz1c9iqq] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 24px 24px;
}

/* ── Band labels (ALS / DAN) ──────────────────────────── */
.rr-band[b-swkz1c9iqq] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 0 10px;
}

.rr-band--dan[b-swkz1c9iqq] {
    margin-top: 22px;
}

.rr-band__tag[b-swkz1c9iqq] {
    font-size: var(--ck-text-xs);
    font-weight: 700;
    border-radius: 7px;
    padding: 3px 10px;
    letter-spacing: 0.04em;
}

.rr-band__tag--als[b-swkz1c9iqq] {
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
}

.rr-band__tag--dan[b-swkz1c9iqq] {
    color: var(--ck-accent-contrast);
    background: var(--ck-accent);
}

.rr-band__hint[b-swkz1c9iqq] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

/* ── Conditions ───────────────────────────────────────── */
.rr-conds[b-swkz1c9iqq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.rr-cond[b-swkz1c9iqq] {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 11px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04);
}

.rr-cond__field[b-swkz1c9iqq] {
    flex: none;
    width: 150px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
}

.rr-cond__op[b-swkz1c9iqq] {
    flex: none;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.rr-cond__val[b-swkz1c9iqq] {
    flex: 1;
    min-width: 0;
}

.rr-cond__remove[b-swkz1c9iqq] {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--ck-text-disabled);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
}

.rr-cond__remove:hover[b-swkz1c9iqq] {
    color: var(--ck-error);
    background: var(--ck-error-subtle);
}

.rr-cond__remove:focus-visible[b-swkz1c9iqq] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 1px;
}

.rr-cond__add[b-swkz1c9iqq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed var(--ck-border-strong);
    background: none;
    color: var(--ck-text-muted);
    border-radius: 9px;
    padding: 7px 12px;
    font: inherit;
    font-size: var(--ck-text-xs);
    font-weight: 500;
    cursor: pointer;
}

.rr-cond__add:hover[b-swkz1c9iqq] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
}

.rr-cond__add:focus-visible[b-swkz1c9iqq] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

/* ── Form controls (warm) ─────────────────────────────── */
.rr-input[b-swkz1c9iqq],
.rr-select[b-swkz1c9iqq] {
    width: 100%;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    font-family: inherit;
}

.rr-input:focus[b-swkz1c9iqq],
.rr-select:focus[b-swkz1c9iqq] {
    outline: none;
    border-color: var(--ck-border-focus);
    box-shadow: var(--ck-shadow-glow);
}

.rr-input--num[b-swkz1c9iqq] {
    max-width: 140px;
}

.rr-select--inline[b-swkz1c9iqq] {
    max-width: 220px;
}

/* ── DAN target ───────────────────────────────────────── */
.rr-target[b-swkz1c9iqq] {
    background: var(--ck-surface-raised);
    border: 1.5px solid var(--ck-accent-soft);
    border-radius: 13px;
    padding: 15px 16px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.04),
                0 8px 20px -14px rgba(var(--ck-accent-rgb), 0.16);
    animation: rr-rise-panel-b-swkz1c9iqq 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rr-target__row[b-swkz1c9iqq] {
    display: flex;
    gap: 12px;
}

.rr-target__row + .rr-target__row[b-swkz1c9iqq] {
    margin-top: 11px;
}

.rr-field[b-swkz1c9iqq] {
    flex: 1;
    min-width: 0;
}

.rr-field__label[b-swkz1c9iqq] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.rr-sovereign[b-swkz1c9iqq] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.rr-sovereign__icon[b-swkz1c9iqq] {
    color: var(--ck-text-subtle);
}

@keyframes rr-rise-panel-b-swkz1c9iqq {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rr-target[b-swkz1c9iqq] {
        animation-duration: 0.001ms;
    }
}
/* /Components/RoutingDesigner/RoutingRuleRail.razor.rz.scp.css */
/* Routing workspace — left rail (prioritised rule list). Warm --ck-* tokens only.
   Leading design: docs/proposals/immersive-design-kit/designs/Cockpit Studio - Routing-rules & RAG.dc.html §1. */

.rr-rail[b-7n8qcy0lf9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--ck-surface);
}

.rr-rail__head[b-7n8qcy0lf9] {
    display: flex;
    align-items: baseline;
    gap: var(--ck-space-2);
    padding: 15px 14px 10px;
}

.rr-rail__kicker[b-7n8qcy0lf9] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.rr-rail__hint[b-7n8qcy0lf9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.rr-rail__list[b-7n8qcy0lf9] {
    padding: 0 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
}

/* ── Rule card ─────────────────────────────────────────── */
.rr-rule[b-7n8qcy0lf9] {
    /* Semantic <button> reset so the rule card blends with the warm rail (incl. mobile-Safari UA chrome). */
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 9px 10px;
    cursor: pointer;
    animation: rr-rise-b-7n8qcy0lf9 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rr-rule:hover[b-7n8qcy0lf9] {
    border-color: var(--ck-accent-soft);
}

.rr-rule:focus-visible[b-7n8qcy0lf9] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.rr-rule--selected[b-7n8qcy0lf9] {
    background: var(--ck-accent-tint);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.rr-rule--selected .rr-rule__name[b-7n8qcy0lf9] {
    color: var(--ck-accent-ink);
}

.rr-rule--off[b-7n8qcy0lf9] {
    background: var(--ck-bg);
    border-style: dashed;
    opacity: 0.7;
}

.rr-rule--drop[b-7n8qcy0lf9] {
    border-color: var(--ck-accent);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.12);
}

.rr-rule__grip[b-7n8qcy0lf9] {
    display: flex;
    color: var(--ck-text-disabled);
    flex: none;
    width: 16px;
}

.rr-rule__num[b-7n8qcy0lf9] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ck-text-xs);
    font-weight: 700;
    flex: none;
}

.rr-rule--selected .rr-rule__num[b-7n8qcy0lf9] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.rr-rule__num--star[b-7n8qcy0lf9] {
    background: var(--ck-surface-high);
    color: var(--ck-text-disabled);
}

.rr-rule__body[b-7n8qcy0lf9] {
    flex: 1;
    min-width: 0;
}

.rr-rule__name[b-7n8qcy0lf9] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-rule__meta[b-7n8qcy0lf9] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Fallback (synthetic) ─────────────────────────────── */
.rr-rule--fallback[b-7n8qcy0lf9] {
    background: none;
    border: none;
    cursor: default;
    opacity: 1;
    animation: none;
}

.rr-rule--fallback .rr-rule__name[b-7n8qcy0lf9] {
    font-weight: 500;
    color: var(--ck-text-muted);
}

/* ── Add ──────────────────────────────────────────────── */
.rr-rail__add[b-7n8qcy0lf9] {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed var(--ck-border-strong);
    background: none;
    color: var(--ck-text-muted);
    border-radius: 10px;
    padding: 8px;
    font-size: var(--ck-text-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.rr-rail__add:hover[b-7n8qcy0lf9] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
}

.rr-rail__add:focus-visible[b-7n8qcy0lf9] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

@keyframes rr-rise-b-7n8qcy0lf9 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rr-rule[b-7n8qcy0lf9] {
        animation-duration: 0.001ms;
    }
}
/* /Components/Shared/StudioListTable.razor.rz.scp.css */
/* Warme Richting-A artifact-lijst — mockup "Cockpit Studio - Bouwen-lijsten.dc.html" §A.
   Thema-/oppervlak-kleuren komen uit de LIVE --ck- tokens, zodat de tabel met licht/donker
   en tenant-accent meebeweegt. De PER-TYPE-tegelkleuren (dashboard/wizard/proces) zijn bewuste,
   theme-neutrale type-identiteit-hues uit de mockup — analoog aan bestandstype-kleuren, niet aan
   thema-oppervlakken. De tegel-ACHTERGROND mengt die hue met het surface-token via color-mix, dus
   ook die past zich aan het actieve oppervlak (licht/donker) aan; alleen de icoon-hue blijft vast.
   Iconen erven hun kleur via currentColor van de ouder; maat staat inline op de MudIcon. */

.ck-slist[b-m0wa7i5krz] {
    display: flex;
    flex-direction: column;
}

/* ── Toolbar (zoeken) ─────────────────────────────────────────── */
.ck-slist__toolbar[b-m0wa7i5krz] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--ck-space-4);
}

/* MudTextField search — constrain its width; styling/clear-button/a11y come from MudBlazor
   so it matches the search fields elsewhere in Studio (e.g. Plugins/Marketplace). */
.ck-slist__search[b-m0wa7i5krz] {
    width: 260px;
    max-width: 100%;
    margin: 0;
}

/* ── Facet-chips ──────────────────────────────────────────────── */
.ck-slist__facets[b-m0wa7i5krz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--ck-space-4);
}

.ck-slist__facet[b-m0wa7i5krz] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 999px;
    padding: 6px 13px;
    font: inherit;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.ck-slist__facet:hover[b-m0wa7i5krz] { color: var(--ck-text); }

.ck-slist__facet--active[b-m0wa7i5krz] {
    background: var(--ck-surface-raised);
    border-color: var(--ck-border);
    color: var(--ck-text);
    font-weight: 600;
}

/* ── Card + grid ──────────────────────────────────────────────── */
.ck-slist__card[b-m0wa7i5krz] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ck-shadow-soft);
}

.ck-slist__row-grid[b-m0wa7i5krz] {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) 1fr 1.1fr minmax(0, 1.2fr) 0.9fr;
    gap: 14px;
    align-items: center;
    padding: 13px 20px;
}

.ck-slist__head[b-m0wa7i5krz] {
    background: var(--ck-surface-high);
    border-bottom: 1px solid var(--ck-border);
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.ck-slist__row[b-m0wa7i5krz] {
    border-bottom: 1px solid var(--ck-surface-high);
    transition: background .12s ease;
}

.ck-slist__row:last-child[b-m0wa7i5krz] { border-bottom: none; }

.ck-slist__row--zebra[b-m0wa7i5krz] { background: color-mix(in oklab, var(--ck-surface-high) 40%, var(--ck-surface-raised)); }

.ck-slist__row:hover[b-m0wa7i5krz] { background: var(--ck-surface-high); }

/* ── Naam + type-tegel ────────────────────────────────────────── */
.ck-slist__name[b-m0wa7i5krz] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ck-slist__tile[b-m0wa7i5krz] {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Artifact kinds are a CATEGORICAL set, so they take the categorical chart palette
   (static, never accent-derived) rather than three hand-picked hexes. */
.ck-slist__tile--dashboard[b-m0wa7i5krz] { background: color-mix(in oklab, var(--ck-chart-cat-5) 14%, var(--ck-surface-high)); color: var(--ck-chart-cat-5); }
.ck-slist__tile--wizard[b-m0wa7i5krz]    { background: color-mix(in oklab, var(--ck-chart-cat-2) 14%, var(--ck-surface-high)); color: var(--ck-chart-cat-2); }
.ck-slist__tile--process[b-m0wa7i5krz]   { background: color-mix(in oklab, var(--ck-chart-cat-4) 14%, var(--ck-surface-high)); color: var(--ck-chart-cat-4); }
.ck-slist__tile--neutral[b-m0wa7i5krz]   { background: var(--ck-surface-high); color: var(--ck-text-subtle); }

.ck-slist__name-text[b-m0wa7i5krz] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-slist__name-copy[b-m0wa7i5krz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ck-slist__row--scoped .ck-slist__name-text[b-m0wa7i5krz] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.ck-slist__scope[b-m0wa7i5krz] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── Status-stip ──────────────────────────────────────────────── */
.ck-slist__status[b-m0wa7i5krz] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ck-slist__dot[b-m0wa7i5krz] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.ck-slist__dot--ok[b-m0wa7i5krz]      { background: var(--ck-success); }
.ck-slist__dot--neutral[b-m0wa7i5krz] { background: var(--ck-text-disabled); }

.ck-slist__status-label[b-m0wa7i5krz] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* ── Laatst gewijzigd ─────────────────────────────────────────── */
.ck-slist__modified[b-m0wa7i5krz] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
}

/* ── Eigenaar ─────────────────────────────────────────────────── */
.ck-slist__owner[b-m0wa7i5krz] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ck-slist__avatar[b-m0wa7i5krz] {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--ck-border-strong);
    color: var(--ck-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--ck-text-xs);
}

.ck-slist__avatar--empty[b-m0wa7i5krz] { color: var(--ck-text-disabled); }

.ck-slist__owner-name[b-m0wa7i5krz] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-slist__owner-name--muted[b-m0wa7i5krz] { color: var(--ck-text-subtle); }

/* ── Rij-acties ───────────────────────────────────────────────── */
.ck-slist__actions[b-m0wa7i5krz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ck-slist__act[b-m0wa7i5krz] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ck-text-disabled);
    opacity: 0;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}

/* Acties verschijnen op rij-hover (en blijven zichtbaar bij focus voor toetsenbord-navigatie). */
.ck-slist__row:hover .ck-slist__act[b-m0wa7i5krz],
.ck-slist__act:focus-visible[b-m0wa7i5krz] {
    opacity: 1;
}

.ck-slist__act:hover[b-m0wa7i5krz] {
    background: var(--ck-surface-high);
    color: var(--ck-accent-ink);
}

.ck-slist__act--danger:hover[b-m0wa7i5krz] {
    color: var(--ck-error);
}

/* ── Lege filter + skeleton ───────────────────────────────────── */
.ck-slist__noresults[b-m0wa7i5krz] {
    padding: 28px 20px;
    text-align: center;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
}

.ck-slist__skeleton[b-m0wa7i5krz] {
    height: 48px;
    margin: 12px 20px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--ck-surface-high) 25%, var(--ck-surface) 50%, var(--ck-surface-high) 75%);
    background-size: 200% 100%;
    animation: ck-slist-shimmer-b-m0wa7i5krz 1.4s ease infinite;
}

@keyframes ck-slist-shimmer-b-m0wa7i5krz {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Responsief: verberg minder-kritische kolommen op smal ────── */
@media (max-width: 900px) {
    .ck-slist__row-grid[b-m0wa7i5krz] {
        grid-template-columns: minmax(0, 2fr) 1fr auto;
    }
    .ck-slist__modified[b-m0wa7i5krz],
    .ck-slist__owner[b-m0wa7i5krz] {
        display: none;
    }
    .ck-slist__act[b-m0wa7i5krz] { opacity: 1; }
}

@media (max-width: 600px) {
    .ck-slist__head[b-m0wa7i5krz] { display: none; }
    .ck-slist__row-grid[b-m0wa7i5krz] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 13px 14px;
    }
    .ck-slist__status[b-m0wa7i5krz] { grid-column: 1; }
    .ck-slist__actions[b-m0wa7i5krz] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}