@import '_content/Ratho.Cockpit.UI/Ratho.Cockpit.UI.dhsxzwzztt.bundle.scp.css';
@import '_content/Ratho.Shared.UI/Ratho.Shared.UI.94ppt91rm5.bundle.scp.css';
@import '_content/Ratho.SparkForge.UI/Ratho.SparkForge.UI.11pegzbjnt.bundle.scp.css';

/* /Components/Pages/Compliance/AccessReviewTab.razor.rz.scp.css */
/* Access-review · wie-mag-wat met échte beslissingen (#1381). Warme rust; intrekken = ingetogen
   terracotta-outline (--ck-error), nooit een alarm-rood vlak. */

/* ── header ── */
.ck-arv-header[b-ewaspfdq6l] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl, 14px);
    padding: 16px 19px;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .04);
}

.ck-arv-header__main[b-ewaspfdq6l] { flex: 1; min-width: 0; }

.ck-arv-header__title[b-ewaspfdq6l] { font-size: 0.96875rem; font-weight: 600; color: var(--ck-text); }

.ck-arv-header__sub[b-ewaspfdq6l] { font-size: 0.78125rem; color: var(--ck-text-muted); margin-top: 2px; }

.ck-arv-header__stat[b-ewaspfdq6l] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
}

.ck-arv-header__stat-value[b-ewaspfdq6l] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ck-accent-ink);
    line-height: 1;
}

.ck-arv-header__stat-label[b-ewaspfdq6l] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ck-text-subtle);
    margin-top: 4px;
}

/* ── rollen-lijst ── */
.ck-arv-roles[b-ewaspfdq6l] { display: flex; flex-direction: column; gap: 9px; }

.ck-arv-role[b-ewaspfdq6l] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg, 10px);
    overflow: hidden;
}

.ck-arv-role--open[b-ewaspfdq6l] { border-color: var(--ck-border-strong); }

.ck-arv-role__head[b-ewaspfdq6l] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 16px;
    /* Reset native button chrome so the warm-surface styling doesn't bleed cross-browser. */
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

.ck-arv-role__head:hover[b-ewaspfdq6l] { background: var(--ck-surface-high); }

.ck-arv-role__chevron[b-ewaspfdq6l] { color: var(--ck-text-subtle); flex: none; }

.ck-arv-role__name[b-ewaspfdq6l] { font-size: 0.875rem; font-weight: 600; color: var(--ck-text); }

.ck-arv-role__dept[b-ewaspfdq6l] { font-size: 0.75rem; color: var(--ck-text-subtle); }

.ck-arv-role__spacer[b-ewaspfdq6l] { flex: 1; }

.ck-arv-role__body[b-ewaspfdq6l] {
    padding: 6px 16px 14px 43px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--ck-border);
}

/* ── toekenning-rij ── */
.ck-arv-row[b-ewaspfdq6l] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg, 10px);
}

.ck-arv-avatar[b-ewaspfdq6l] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    flex: none;
}

.ck-arv-row__id[b-ewaspfdq6l] { min-width: 0; }

.ck-arv-row__name[b-ewaspfdq6l] { font-size: 0.84375rem; font-weight: 600; color: var(--ck-text); }

.ck-arv-row__meta[b-ewaspfdq6l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.ck-arv-row__assigned[b-ewaspfdq6l] { font-size: 0.71875rem; color: var(--ck-text-subtle); }

.ck-arv-row__spacer[b-ewaspfdq6l] { flex: 1; }

/* Intrekken — ingetogen terracotta-outline (LOCKED --ck-error), geen fel rood. */
.ck-arv-revoke[b-ewaspfdq6l] ,
.ck-arv-revoke[b-ewaspfdq6l] {
    color: var(--ck-error, #bf5440);
    border-color: var(--ck-error-border, #d8b3a8);
}

.ck-arv-footnote[b-ewaspfdq6l] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--ck-text-subtle);
}
/* /Components/Pages/Compliance/ComplianceGapNote.razor.rz.scp.css */
/* Scoped styling voor de calme "nog niet beschikbaar"-melding (#1381) — zelfde rustige taal
   als VoiceDataGapNote, maar Compliance-scoped zodat de stijl niet over de DOM dupliceert. */
.ck-compl-gap[b-tqvj9j2cf0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--ck-border);
    border-radius: 12px;
    background: var(--ck-surface);
}

.ck-compl-gap__icon[b-tqvj9j2cf0] {
    color: var(--ck-text-subtle);
    margin-top: 1px;
    flex: none;
}

.ck-compl-gap__title[b-tqvj9j2cf0] {
    font-size: var(--ck-text-sm, 0.8125rem);
    font-weight: 600;
    color: var(--ck-text-muted);
}

.ck-compl-gap__body[b-tqvj9j2cf0] {
    font-size: var(--ck-text-xs, 0.75rem);
    color: var(--ck-text-subtle);
    margin-top: 2px;
    line-height: 1.5;
}
/* /Components/Pages/Compliance/DsarCaseDetail.razor.rz.scp.css */
/* DSAR-zaakdetail · levenscyclus (#1381). Warm, rustig; rood alleen op het verwijder-pad.
   1-op-1 met "Cockpit Management - DSAR-locator & levenscyclus" (hoofd-content). */

.ck-dcase__top[b-9vg4tb6qqe] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ck-dcase__crumb[b-9vg4tb6qqe] { font-size: 0.8125rem; color: var(--ck-text-muted); font-weight: 600; }
.ck-dcase__spacer[b-9vg4tb6qqe] { flex: 1; }

/* ── stepper ── */
.ck-stepper[b-9vg4tb6qqe] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 15px 4px;
    border-bottom: 1px solid var(--ck-border);
}
.ck-step[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 8px; }
.ck-step__dot[b-9vg4tb6qqe] {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6875rem; font-weight: 700; flex: none;
    background: var(--ck-surface-raised); border: 2px solid var(--ck-border-strong); color: var(--ck-text-subtle);
}
.ck-step__label[b-9vg4tb6qqe] { font-size: 0.78125rem; font-weight: 500; color: var(--ck-text-subtle); }
.ck-step--done .ck-step__dot[b-9vg4tb6qqe] { background: var(--ck-success); border-color: var(--ck-success); color: #fff; }
.ck-step--done .ck-step__label[b-9vg4tb6qqe] { color: var(--ck-success); font-weight: 600; }
.ck-step--active .ck-step__dot[b-9vg4tb6qqe] { background: var(--ck-accent); border-color: var(--ck-accent); color: #fff; box-shadow: 0 0 0 4px var(--ck-accent-glow); }
.ck-step--active .ck-step__label[b-9vg4tb6qqe] { color: var(--ck-accent-ink); font-weight: 600; }
.ck-step__bar[b-9vg4tb6qqe] { width: 50px; height: 2px; margin: 0 12px; background: var(--ck-border-strong); }
.ck-step__bar--done[b-9vg4tb6qqe] { background: var(--ck-accent-soft); }

/* ── done ── */
.ck-dcase__done[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 14px; }
.ck-dcase__done-icon[b-9vg4tb6qqe] { color: var(--ck-success); flex: none; }
.ck-dcase__done-title[b-9vg4tb6qqe] { font-size: 0.9375rem; font-weight: 600; color: var(--ck-text); }
.ck-dcase__done-body[b-9vg4tb6qqe] { font-size: 0.8125rem; color: var(--ck-text-muted); margin-top: 2px; }

/* ── empty / searching ── */
.ck-dcase__empty[b-9vg4tb6qqe] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 32px; gap: 6px; }
.ck-dcase__empty-icon[b-9vg4tb6qqe] { color: var(--ck-text-subtle); }
.ck-dcase__empty-title[b-9vg4tb6qqe] { font-size: 0.9375rem; font-weight: 600; color: var(--ck-text); margin-top: 4px; }
.ck-dcase__empty-body[b-9vg4tb6qqe] { font-size: 0.78125rem; color: var(--ck-text-muted); max-width: 300px; line-height: 1.5; }
.ck-dcase__scan[b-9vg4tb6qqe] {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--ck-accent-soft); border-top-color: var(--ck-accent);
    animation: ckScanSpin-b-9vg4tb6qqe .8s linear infinite;
}
@keyframes ckScanSpin-b-9vg4tb6qqe { to { transform: rotate(360deg); } }

/* ── locator summary ── */
.ck-dcase__locsum[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ck-dcase__locsum-head[b-9vg4tb6qqe] { flex: 1; min-width: 0; }
.ck-dcase__locsum-title[b-9vg4tb6qqe] { font-size: 1.125rem; font-weight: 600; color: var(--ck-text); }
.ck-dcase__locsum-sub[b-9vg4tb6qqe] { font-size: 0.8125rem; color: var(--ck-text-muted); margin-top: 2px; }
.ck-dcase__locstats[b-9vg4tb6qqe] { display: flex; gap: 10px; flex: none; }
.ck-dcase__stat[b-9vg4tb6qqe] {
    background: var(--ck-surface-raised); border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl); padding: 10px 15px; text-align: center; min-width: 78px;
}
.ck-dcase__stat-v[b-9vg4tb6qqe] { font-size: 1.25rem; font-weight: 600; color: var(--ck-accent-ink); line-height: 1.1; }
.ck-dcase__stat:last-child .ck-dcase__stat-v[b-9vg4tb6qqe] { color: var(--ck-text); }
.ck-dcase__stat-d[b-9vg4tb6qqe] { font-size: 0.8125rem; color: var(--ck-text-subtle); font-weight: 400; }
.ck-dcase__stat-l[b-9vg4tb6qqe] { font-size: 0.6875rem; color: var(--ck-text-subtle); margin-top: 2px; }
.ck-dcase__never[b-9vg4tb6qqe] { font-size: 0.71875rem; color: var(--ck-text-subtle); font-style: italic; margin-bottom: 4px; }

/* ── per-source cards ── */
.ck-srcs[b-9vg4tb6qqe] { display: flex; flex-direction: column; gap: 10px; }
.ck-src[b-9vg4tb6qqe] {
    display: flex; align-items: center; gap: 15px;
    background: var(--ck-surface-raised); border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl); padding: 15px 17px;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .04);
}
.ck-src--not_found[b-9vg4tb6qqe] { background: var(--ck-surface); box-shadow: none; }
.ck-src--unreachable[b-9vg4tb6qqe] { background: var(--ck-surface-raised); border-color: var(--ck-warning); border-left: 3px solid var(--ck-warning); box-shadow: none; }
.ck-src__icon[b-9vg4tb6qqe] { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--ck-surface-high); color: var(--ck-text-subtle); }
.ck-src--found .ck-src__icon[b-9vg4tb6qqe] { background: var(--ck-success-subtle); color: var(--ck-success); }
.ck-src--unreachable .ck-src__icon[b-9vg4tb6qqe] { background: var(--ck-warning-subtle); color: var(--ck-warning); }
.ck-src__id[b-9vg4tb6qqe] { width: 170px; flex: none; }
.ck-src__name[b-9vg4tb6qqe] { font-size: 0.875rem; font-weight: 600; color: var(--ck-text); }
.ck-src__key[b-9vg4tb6qqe] { font-size: 0.6875rem; color: var(--ck-text-subtle); font-family: 'Spline Sans Mono', ui-monospace, monospace; }
.ck-src__cats[b-9vg4tb6qqe] { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ck-src__cat[b-9vg4tb6qqe] { font-size: 0.71875rem; color: var(--ck-text-muted); background: var(--ck-bg); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-full); padding: 3px 10px; }
.ck-src__count[b-9vg4tb6qqe] { font-size: 0.71875rem; color: var(--ck-text-subtle); font-variant-numeric: tabular-nums; }
.ck-src__warn[b-9vg4tb6qqe] { font-size: 0.75rem; color: var(--ck-warning); }
.ck-src__muted[b-9vg4tb6qqe] { font-size: 0.75rem; color: var(--ck-text-subtle); }
.ck-src__ret[b-9vg4tb6qqe] { width: 150px; flex: none; text-align: right; }
.ck-src__ret-label[b-9vg4tb6qqe] { font-size: 0.71875rem; font-weight: 600; }
.ck-src__ret-label--hold[b-9vg4tb6qqe] { color: var(--ck-warning); }
.ck-src__ret-label--free[b-9vg4tb6qqe] { color: var(--ck-success); }
.ck-src__ret-basis[b-9vg4tb6qqe] { font-size: 0.65625rem; color: var(--ck-text-subtle); }
.ck-src__ret-na[b-9vg4tb6qqe] { font-size: 0.6875rem; color: var(--ck-text-subtle); }
.ck-src__status[b-9vg4tb6qqe] { width: 120px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ck-src__status .ck-pill[b-9vg4tb6qqe] { display: inline-flex; align-items: center; gap: 6px; }
.ck-src__statusdot[b-9vg4tb6qqe] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.ck-src__live[b-9vg4tb6qqe] { font-size: 0.625rem; color: var(--ck-text-subtle); }
.ck-src__retry[b-9vg4tb6qqe]  .mud-button-root,
.ck-src__retry[b-9vg4tb6qqe] { margin-bottom: 2px; }

.ck-dcase__retnote[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--ck-text-subtle); }
.ck-dcase__locfoot[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 10px; }

/* ── review & actie split ── */
.ck-dcase__split[b-9vg4tb6qqe] { display: flex; gap: 16px; align-items: stretch; }
.ck-dcase__split-main[b-9vg4tb6qqe] { flex: 1; min-width: 0; }
.ck-dcase__split-side[b-9vg4tb6qqe] { width: 368px; flex: none; background: var(--ck-surface); }
.ck-dcase__split-sub[b-9vg4tb6qqe] { font-size: 0.78125rem; color: var(--ck-text-muted); margin: 2px 0 14px; }

.ck-del-row[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: var(--ck-surface-raised); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); margin-bottom: 10px; box-shadow: 0 1px 2px rgba(40, 38, 34, .04); }
.ck-del-row--kept[b-9vg4tb6qqe] { background: var(--ck-warning-subtle); border-color: var(--ck-warning); box-shadow: none; }
.ck-del-mark[b-9vg4tb6qqe] { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--ck-accent); color: #fff; }
.ck-del-mark--kept[b-9vg4tb6qqe] { background: var(--ck-surface-high); color: var(--ck-warning); border: 1.5px solid var(--ck-border-strong); }
.ck-del-row__id[b-9vg4tb6qqe] { flex: 1; min-width: 0; }
.ck-del-row__name[b-9vg4tb6qqe] { font-size: 0.84375rem; font-weight: 600; color: var(--ck-text); }
.ck-del-row__meta[b-9vg4tb6qqe] { font-size: 0.71875rem; color: var(--ck-text-subtle); margin-top: 1px; }
.ck-del-row--kept .ck-del-row__meta[b-9vg4tb6qqe] { color: var(--ck-warning); }
.ck-del-row__kept[b-9vg4tb6qqe] { color: var(--ck-warning); font-weight: 600; }
.ck-del-row__free[b-9vg4tb6qqe] { color: var(--ck-success); font-weight: 600; }

.ck-dcase__gate-title[b-9vg4tb6qqe] { font-size: 1.0625rem; font-weight: 600; color: var(--ck-text); margin: 8px 0 6px; }
.ck-dcase__gate-body[b-9vg4tb6qqe] { font-size: 0.78125rem; color: var(--ck-text-muted); line-height: 1.5; }

/* RACI / approval block */
.ck-raci[b-9vg4tb6qqe] { margin-top: 15px; background: var(--ck-surface-raised); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); padding: 14px 15px; box-shadow: 0 1px 2px rgba(40, 38, 34, .04); }
.ck-raci__head[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 10px; }
.ck-raci__head-icon[b-9vg4tb6qqe] { width: 34px; height: 34px; border-radius: 9px; background: var(--ck-warning-subtle); color: var(--ck-warning); display: flex; align-items: center; justify-content: center; flex: none; }
.ck-raci__head-text[b-9vg4tb6qqe] { flex: 1; min-width: 0; }
.ck-raci__head-title[b-9vg4tb6qqe] { font-size: 0.84375rem; font-weight: 600; color: var(--ck-text); }
.ck-raci__head-sub[b-9vg4tb6qqe] { font-size: 0.71875rem; color: var(--ck-text-subtle); }
.ck-raci__list[b-9vg4tb6qqe] { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ck-border); display: flex; flex-direction: column; gap: 8px; }
.ck-raci__row[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 8px; }
.ck-raci__summary[b-9vg4tb6qqe] { flex: 1; font-size: 0.71875rem; color: var(--ck-text-muted); word-break: break-word; }
.ck-raci__acts[b-9vg4tb6qqe] { display: flex; gap: 4px; flex: none; }

/* explicit confirm (gated) */
.ck-dcase__confirm[b-9vg4tb6qqe] { margin-top: 13px; background: var(--ck-surface-raised); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); padding: 14px 15px; box-shadow: 0 1px 2px rgba(40, 38, 34, .04); }
.ck-confirm__eyebrow[b-9vg4tb6qqe] { font-size: 0.6875rem; color: var(--ck-text-subtle); font-weight: 600; margin-bottom: 8px; }
.ck-confirm__ack[b-9vg4tb6qqe] { display: flex; align-items: flex-start; gap: 9px; }
.ck-confirm__box[b-9vg4tb6qqe] { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ck-border-strong); background: var(--ck-surface-raised); flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; color: #fff; }
.ck-confirm__box--on[b-9vg4tb6qqe] { background: var(--ck-accent); border-color: var(--ck-accent); }
.ck-confirm__ack-text[b-9vg4tb6qqe] { font-size: 0.75rem; color: var(--ck-text-muted); line-height: 1.5; }
.ck-confirm__field[b-9vg4tb6qqe] { margin-top: 10px; }
.ck-confirm__hint[b-9vg4tb6qqe] { font-size: 0.6875rem; color: var(--ck-text-subtle); margin-bottom: 5px; }
.ck-dcase__erase-btn[b-9vg4tb6qqe]  .mud-button-root,
.ck-dcase__erase-btn[b-9vg4tb6qqe] { background: var(--ck-error-subtle); color: var(--ck-error); }
.ck-dcase__gatehint[b-9vg4tb6qqe] { text-align: center; font-size: 0.6875rem; color: var(--ck-text-subtle); margin-top: 7px; }
.ck-mono[b-9vg4tb6qqe] { font-family: 'Spline Sans Mono', ui-monospace, monospace; color: var(--ck-text-muted); }

/* ── audit-trail timeline ── */
.ck-audit__head[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 9px; }
.ck-audit__spacer[b-9vg4tb6qqe] { flex: 1; }
.ck-audit[b-9vg4tb6qqe] { display: flex; flex-direction: column; }
.ck-audit__row[b-9vg4tb6qqe] { display: flex; gap: 12px; }
.ck-audit__rail[b-9vg4tb6qqe] { display: flex; flex-direction: column; align-items: center; flex: none; }
.ck-audit__dot[b-9vg4tb6qqe] { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ck-audit__dot--done[b-9vg4tb6qqe] { background: var(--ck-success); }
.ck-audit__dot--active[b-9vg4tb6qqe] { background: var(--ck-accent); box-shadow: 0 0 0 3px var(--ck-accent-glow); }
.ck-audit__dot--todo[b-9vg4tb6qqe] { background: var(--ck-surface-raised); border: 2px solid var(--ck-border-strong); }
.ck-audit__line[b-9vg4tb6qqe] { width: 2px; flex: 1; min-height: 18px; background: var(--ck-border-strong); margin-top: 1px; }
.ck-audit__body[b-9vg4tb6qqe] { padding-bottom: 14px; }
.ck-audit__row--last .ck-audit__body[b-9vg4tb6qqe] { padding-bottom: 0; }
.ck-audit__t[b-9vg4tb6qqe] { font-size: 0.78125rem; font-weight: 600; color: var(--ck-text); }
.ck-audit__t--todo[b-9vg4tb6qqe] { color: var(--ck-text-subtle); }
.ck-audit__m[b-9vg4tb6qqe] { font-size: 0.6875rem; color: var(--ck-text-subtle); margin-top: 1px; }
.ck-audit__foot[b-9vg4tb6qqe] { display: flex; align-items: center; gap: 7px; font-size: 0.6875rem; color: var(--ck-text-subtle); padding-top: 13px; margin-top: 14px; border-top: 1px solid var(--ck-border); }

/* Reject ("Afwijzen") in the RACI approval panel — muted destructive tone. Defined here (not reused
   from AccessReviewTab) because component-isolated CSS classes don't cross component boundaries. */
.ck-dcase__reject[b-9vg4tb6qqe] ,
.ck-dcase__reject[b-9vg4tb6qqe] {
    color: var(--ck-error, #bf5440);
}

/* ── afhandel-flow (mockup "Afhandeling") — actor/tijd-gestempelde stappen met gekleurde connectors ── */
.ck-flow[b-9vg4tb6qqe] { display: flex; flex-direction: column; }
.ck-flow__step[b-9vg4tb6qqe] { display: flex; gap: 11px; }
.ck-flow__rail[b-9vg4tb6qqe] { display: flex; flex-direction: column; align-items: center; flex: none; }
.ck-flow__dot[b-9vg4tb6qqe] {
    width: 24px; height: 24px; border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.ck-flow__dot--done[b-9vg4tb6qqe] { background: var(--ck-success); }
.ck-flow__dot--active[b-9vg4tb6qqe] { background: var(--ck-accent); box-shadow: 0 0 0 4px var(--ck-accent-glow); }
.ck-flow__dot--active[b-9vg4tb6qqe]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.ck-flow__dot--todo[b-9vg4tb6qqe] { background: var(--ck-surface-raised); border: 2px solid var(--ck-border-strong); }
.ck-flow__line[b-9vg4tb6qqe] { width: 2px; flex: 1; min-height: 14px; background: var(--ck-border-strong); margin: 2px 0; }
.ck-flow__line--done[b-9vg4tb6qqe] { background: var(--ck-accent-soft); }
.ck-flow__step--last .ck-flow__line[b-9vg4tb6qqe] { display: none; }
.ck-flow__body[b-9vg4tb6qqe] { flex: 1; min-width: 0; padding-bottom: 16px; }
.ck-flow__step--last .ck-flow__body[b-9vg4tb6qqe] { padding-bottom: 0; }
.ck-flow__t[b-9vg4tb6qqe] { font-size: 0.84375rem; font-weight: 600; color: var(--ck-text); }
.ck-flow__t--todo[b-9vg4tb6qqe] { color: var(--ck-text-subtle); }
.ck-flow__m[b-9vg4tb6qqe] { font-size: 0.71875rem; color: var(--ck-text-subtle); margin-top: 1px; }

/* per-connector record-chips binnen de "Data verzameld"-stap */
.ck-flow__srcs[b-9vg4tb6qqe] { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.ck-flow__src[b-9vg4tb6qqe] {
    display: flex; align-items: center; gap: 8px;
    background: var(--ck-surface-raised); border: 1px solid var(--ck-border);
    border-radius: 9px; padding: 7px 10px;
}
.ck-flow__src-dot[b-9vg4tb6qqe] { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ck-flow__src-dot--ok[b-9vg4tb6qqe] { background: var(--ck-success); }
.ck-flow__src-dot--warn[b-9vg4tb6qqe] { background: var(--ck-warning); }
.ck-flow__src-name[b-9vg4tb6qqe] { flex: 1; min-width: 0; font-size: 0.75rem; color: var(--ck-text); }
.ck-flow__src-count[b-9vg4tb6qqe] { font-size: 0.6875rem; color: var(--ck-text-subtle); font-variant-numeric: tabular-nums; }
.ck-flow__src-count--warn[b-9vg4tb6qqe] { color: var(--ck-warning); }
/* /Components/Pages/Compliance/DsarTab.razor.rz.scp.css */
/* DSAR · intake + zaak-inbox (#1381). Warme rust; rood is voorbehouden aan het verwijder-pad (case-detail). */

/* ── federatie-principe-banner ── */
.ck-dsar__intro[b-e1qczm81ml] {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--ck-surface-raised);
    border: 1.5px solid var(--ck-accent-soft);
    border-radius: var(--ck-radius-xl, 14px);
    padding: 15px 18px;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .04), 0 8px 20px -14px rgba(40, 38, 34, .14);
}
.ck-dsar__intro-icon[b-e1qczm81ml] {
    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;
}
.ck-dsar__intro-title[b-e1qczm81ml] { font-size: 0.875rem; font-weight: 600; color: var(--ck-text); }
.ck-dsar__intro-body[b-e1qczm81ml] { font-size: 0.8125rem; color: var(--ck-text-muted); margin-top: 2px; line-height: 1.5; }
.ck-dsar__intro > div:nth-child(2)[b-e1qczm81ml] { flex: 1; }
.ck-dsar__intro-pill[b-e1qczm81ml] {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    font-size: 0.71875rem; font-weight: 600; color: var(--ck-accent-ink);
    background: var(--ck-accent-tint); border-radius: var(--ck-radius-full, 999px); padding: 5px 12px;
}
/* LIVE-puls via de gedeelde .ck-live-dot (ck-dot-pulse 1.8s, reduced-motion-vloer in motion.css);
   alleen de maat 7px blijft lokaal zodat de stip in de pill past. */
.ck-dsar__intro-dot[b-e1qczm81ml] { width: 7px; height: 7px; }

/* ── intake ── */
.ck-dsar-intake-card[b-e1qczm81ml] { max-width: 560px; }
.ck-dsar-intake__title[b-e1qczm81ml] { font-size: 1rem; font-weight: 600; color: var(--ck-text); margin-top: 2px; }
.ck-dsar-intake__sub[b-e1qczm81ml] { font-size: 0.78125rem; color: var(--ck-text-muted); margin-top: 3px; margin-bottom: 16px; }
.ck-dsar-intake__panel[b-e1qczm81ml] {
    background: var(--ck-surface-raised); border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl); padding: 17px 18px;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .04);
}
.ck-dsar-intake__field[b-e1qczm81ml] { margin-top: 2px; }
.ck-dsar-intake__hints[b-e1qczm81ml] { display: flex; gap: 9px; margin-top: 9px; }
.ck-dsar-intake__hint[b-e1qczm81ml] {
    flex: 1; text-align: left; font-size: 0.78125rem; color: var(--ck-text-subtle);
    background: var(--ck-surface-raised); border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md); padding: 9px 12px;
}
.ck-dsar-types[b-e1qczm81ml] { display: flex; gap: 8px; margin-top: 4px; }
.ck-dsar-type[b-e1qczm81ml] {
    flex: 1; text-align: center; font-family: inherit; cursor: pointer;
    font-size: 0.78125rem; font-weight: 500; color: var(--ck-text-muted);
    background: var(--ck-surface-raised); border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg, 10px); padding: 9px 0;
}
.ck-dsar-type:hover[b-e1qczm81ml] { background: var(--ck-surface-high); }
.ck-dsar-type--on[b-e1qczm81ml] {
    color: var(--ck-accent-ink); font-weight: 600;
    background: var(--ck-accent-tint); border-color: var(--ck-accent-soft);
}
.ck-dsar-identity-note[b-e1qczm81ml] {
    display: flex; align-items: center; gap: 7px; margin-top: 11px;
    font-size: 0.71875rem; color: var(--ck-text-subtle);
}

/* ── zaak-inbox: klikbare rij ── */
.ck-gtable__row--interactive[b-e1qczm81ml] { cursor: pointer; }
.ck-gtable__row--interactive:hover[b-e1qczm81ml] { background: var(--ck-surface-high); }

/* ── SLA-kop-chip — amber bij actie nodig, nooit rood (geen security-blokkade) ── */
.ck-sla-chip[b-e1qczm81ml] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.71875rem; font-weight: 600;
    border-radius: var(--ck-radius-full, 999px); padding: 4px 11px;
}
.ck-sla-chip--ok[b-e1qczm81ml] { color: var(--ck-success); background: var(--ck-success-subtle); }
.ck-sla-chip--attention[b-e1qczm81ml] { color: var(--ck-warning); background: var(--ck-warning-subtle); }

/* ── inbox: betrokkene-cel met aanmaakdatum-subregel ── */
.ck-dsar__subject[b-e1qczm81ml] { display: flex; flex-direction: column; gap: 1px; }
.ck-dsar__subject-name[b-e1qczm81ml] { font-weight: 600; color: var(--ck-text); }
.ck-dsar__subject-sub[b-e1qczm81ml] { font-size: 0.6875rem; font-weight: 400; color: var(--ck-text-subtle); }

/* ── inbox: termijn-cel (countdown) — amber als de wettelijke termijn nadert/verstreken is ── */
.ck-dsar__term[b-e1qczm81ml] { font-size: 0.8125rem; color: var(--ck-text-muted); }
.ck-dsar__term--attention[b-e1qczm81ml] { color: var(--ck-warning); font-weight: 600; }
.ck-dsar__term--done[b-e1qczm81ml] { color: var(--ck-text-subtle); }

/* near-SLA rij krijgt een rustige warme tint (geen alarm) */
.ck-gtable__row--attention[b-e1qczm81ml],
.ck-gtable__row--interactive.ck-gtable__row--attention:hover[b-e1qczm81ml] { background: var(--ck-warning-subtle); }
/* /Components/Pages/Compliance/SecurityEventsTab.razor.rz.scp.css */
/* Security-events · verificatie-zegel + tamper-evident tijdlijn (#1381). Warme rust;
   severiteit alleen in chips, nooit een alarm-rood vlak. */

/* ── verificatie-zegel ── */
.ck-seal[b-ugowetd3fq] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ck-surface-raised);
    border: 1.5px solid var(--ck-accent-soft);
    border-radius: var(--ck-radius-xl, 14px);
    padding: 15px 18px;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .04), 0 8px 20px -14px rgba(40, 38, 34, .14);
}

.ck-seal--attention[b-ugowetd3fq] {
    border-color: var(--ck-warning, #c79a52);
}

.ck-seal__mark[b-ugowetd3fq] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ck-seal--attention .ck-seal__mark[b-ugowetd3fq] {
    background: var(--ck-warning-subtle, #f5efe2);
    color: var(--ck-warning, #c79a52);
}

.ck-seal__body[b-ugowetd3fq] { flex: 1; min-width: 0; }

.ck-seal__title[b-ugowetd3fq] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ck-text);
}

.ck-seal__sub[b-ugowetd3fq] {
    font-size: 0.8125rem;
    color: var(--ck-text-muted);
    margin-top: 2px;
}

.ck-seal__verified-when[b-ugowetd3fq] {
    color: var(--ck-success, #6f9a6a);
    font-weight: 600;
}

.ck-seal__pill[b-ugowetd3fq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ck-success, #6f9a6a);
    background: var(--ck-success-subtle, #e8efe2);
    border-radius: var(--ck-radius-full, 999px);
    padding: 6px 13px;
    flex: none;
}

.ck-seal--attention .ck-seal__pill[b-ugowetd3fq] {
    color: var(--ck-warning, #c79a52);
    background: var(--ck-warning-subtle, #f5efe2);
}

/* OK-staat = LIVE: puls via de gedeelde .ck-live-dot (ck-dot-pulse 1.8s + reduced-motion-vloer in
   motion.css). Alleen de maat blijft lokaal zodat de stip in de pill past. */
.ck-seal__dot[b-ugowetd3fq] {
    width: 7px;
    height: 7px;
}

/* Attention (keten verbroken) = géén live-puls: een rustige statische waarschuwingsstip. De hogere
   specificiteit overrulet de .ck-live-dot-animatie én -kleur. */
.ck-seal--attention .ck-seal__dot[b-ugowetd3fq] {
    background: var(--ck-warning, #c79a52);
    animation: none;
}

/* ── tijdlijn ── */
.ck-timeline[b-ugowetd3fq] { display: flex; flex-direction: column; }

.ck-tl-entry[b-ugowetd3fq] { display: flex; gap: 14px; }

.ck-tl-rail[b-ugowetd3fq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
}

.ck-tl-icon[b-ugowetd3fq] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Neutrale tegel + ingetogen tint per type; de severiteit zelf zit in de chip ernaast. */
.ck-tl-icon--neutral[b-ugowetd3fq] { background: var(--ck-surface-high); color: var(--ck-text-subtle); }
.ck-tl-icon--info[b-ugowetd3fq]    { background: var(--ck-info-subtle, #e6eef1); color: var(--ck-info, #4f7c8c); }
.ck-tl-icon--warning[b-ugowetd3fq] { background: var(--ck-warning-subtle, #f5efe2); color: var(--ck-warning, #c79a52); }
.ck-tl-icon--error[b-ugowetd3fq]   { background: var(--ck-error-subtle, #f6e7e1); color: var(--ck-error, #bf5440); }

.ck-tl-line[b-ugowetd3fq] {
    width: 2px;
    flex: 1;
    background: var(--ck-border-strong);
    min-height: 14px;
}

.ck-tl-content[b-ugowetd3fq] { flex: 1; min-width: 0; padding-bottom: 16px; }

/* Standaard-regel = geen kader (identiek aan voorheen). Gevoelige (export/DSAR) regels krijgen een
   kalme amber kaart-rand als nadruk uit de mockup — bewust géén alarm-rood, alleen een rustig accent. */
.ck-tl-body--accent[b-ugowetd3fq] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-warning-soft, #e6d4a8);
    border-radius: var(--ck-radius-lg, 13px);
    padding: 13px 15px;
}

.ck-tl-head[b-ugowetd3fq] { display: flex; align-items: center; gap: 9px; }

.ck-tl-title[b-ugowetd3fq] { font-size: 0.84375rem; font-weight: 600; color: var(--ck-text); }

.ck-tl-spacer[b-ugowetd3fq] { flex: 1; }

.ck-tl-time[b-ugowetd3fq] {
    font-size: 0.71875rem;
    color: var(--ck-text-subtle);
    font-variant-numeric: tabular-nums;
}

.ck-tl-detail[b-ugowetd3fq] {
    font-size: 0.78125rem;
    color: var(--ck-text-muted);
    margin-top: 4px;
    word-break: break-word;
}

.ck-tl-actor[b-ugowetd3fq] { color: var(--ck-text-muted); }

.ck-tl-hash[b-ugowetd3fq] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--ck-text-subtle);
}

.ck-tl-hash__icon[b-ugowetd3fq] { color: var(--ck-accent-soft); }
.ck-tl-hash__label[b-ugowetd3fq] { color: var(--ck-text-muted); }
.ck-tl-hash__val[b-ugowetd3fq] { color: var(--ck-text); }
.ck-tl-hash__arrow[b-ugowetd3fq] { color: var(--ck-border-strong); }

.ck-tl-footnote[b-ugowetd3fq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--ck-text-subtle);
}

/* ── tijdlijn-werkbalk + filterchips (puur client-side zicht) ── */
.ck-tl-toolbar[b-ugowetd3fq] { display: flex; align-items: center; gap: 8px; }
.ck-tl-toolbar__spacer[b-ugowetd3fq] { flex: 1; }

.ck-filter-chip[b-ugowetd3fq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    line-height: 1.4;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ck-text-muted);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md, 8px);
    padding: 5px 8px 5px 11px;
    cursor: pointer;
    transition:
        border-color var(--ck-duration-normal, 180ms) var(--ck-ease-default, ease),
        color var(--ck-duration-normal, 180ms) var(--ck-ease-default, ease),
        background-color var(--ck-duration-normal, 180ms) var(--ck-ease-default, ease);
}

.ck-filter-chip:hover[b-ugowetd3fq] {
    border-color: var(--ck-border-strong);
    color: var(--ck-text);
}

/* Actief = niet de standaard "alles"-keuze: rustig accent zodat het filter zichtbaar aanstaat. */
.ck-filter-chip--active[b-ugowetd3fq] {
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-color: var(--ck-accent-soft);
}

/* Native <select> chevron (appearance is reset above), tinted to the muted text colour. */
select.ck-filter-chip[b-ugowetd3fq] {
    padding-right: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2379756f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
/* /Components/Pages/Compliance/Workspace.razor.rz.scp.css */
/* Compliance-werkvlak — warme header-icoontegel + vlakke tab-strip (#1381, zelfde taal als Voice-AI). */

.ck-compl__mark[b-mmx7j3ma7b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    flex: none;
}

/* Vlak de MudTabs-toolbar tot de mockup-onderstreepstrip: geen paper-kaart,
   warme hairline onder de rij, accent-indicator via Color="Primary". */
.ck-compl-tabs[b-mmx7j3ma7b]  .mud-tabs-tabbar,
.ck-compl-tabs[b-mmx7j3ma7b]  .mud-tabs-tabbar.mud-tabs-tabbar-primary {
    background: transparent;
    background-color: transparent;
    color: var(--ck-text-subtle);
    border-bottom: 1px solid var(--ck-border);
}

.ck-compl-tabs[b-mmx7j3ma7b]  .mud-tab {
    text-transform: none;
    font-weight: 500;
    color: var(--ck-text-subtle);
}

.ck-compl-tabs[b-mmx7j3ma7b]  .mud-tab.mud-tab-active {
    color: var(--ck-accent-ink);
    font-weight: 600;
}
/* /Components/Pages/DataGovernance/Classification.razor.rz.scp.css */
/* Classificatiebeleid-modal · warme Richting-A — effectief-standaard-context + niveau-grid + toggles.
   Bron: "Cockpit Management - Governance-modals.dc.html" + IDENTITY.md / --ck- tokens.
   Alleen modal-chrome; bindings/save-flow blijven in de .razor. */

.dgm[b-4ckyqang26] {
    display: flex;
    flex-direction: column;
}

/* Effectief-standaard-context — kalme greige kaart met het cascade-resultaat als status-pil. */
.dgm-effective[b-4ckyqang26] {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--ck-surface, #f6f5f1);
    border: 1px solid var(--ck-border, #e7e4dc);
    border-radius: var(--ck-radius-xl, 11px);
    padding: 11px 13px;
    margin-bottom: 16px;
}

.dgm-effective__text[b-4ckyqang26] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dgm-effective__eyebrow[b-4ckyqang26] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-subtle, #9d9a92);
    font-weight: var(--ck-weight-semibold, 600);
}

.dgm-effective__scope[b-4ckyqang26] {
    font-size: 12px;
    color: var(--ck-text-muted, #79756f);
    margin-top: 2px;
}

.dgm-effective__scope strong[b-4ckyqang26] {
    color: var(--ck-text, #47443f);
    font-weight: var(--ck-weight-semibold, 600);
}

.dgm-stack[b-4ckyqang26] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dgm-field[b-4ckyqang26] {
    display: flex;
    flex-direction: column;
}

/* Standaard-niveau · max-sync naast elkaar. */
.dgm-grid2[b-4ckyqang26] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Warme toggle-rijen (Classificatie verplicht / Auto-classificeren) ─────── */
.dgm-toggle[b-4ckyqang26] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: var(--ck-surface, #f6f5f1);
    border-radius: var(--ck-radius-lg, 10px);
}

.dgm-toggle__text[b-4ckyqang26] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dgm-toggle__label[b-4ckyqang26] {
    font-size: 12.5px;
    font-weight: var(--ck-weight-medium, 500);
    color: var(--ck-text-muted, #47443f);
}

.dgm-toggle__state[b-4ckyqang26] {
    font-size: 11.5px;
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text-disabled, #a8a49b);
    flex: none;
}

.dgm-toggle__state--on[b-4ckyqang26] {
    color: var(--ck-success, #5e7d59);
}

.dgm-switch[b-4ckyqang26] {
    flex: none;
    margin: 0;
}

.dgm-switch[b-4ckyqang26]  .mud-switch {
    margin: 0;
}

@media (max-width: 560px) {
    .dgm-grid2[b-4ckyqang26] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/DataGovernance/GovernancePolicies.razor.rz.scp.css */
/* Governancebeleid-modal · warme Richting-A — drie logische groepen i.p.v. één veld-stack.
   Bron: "Cockpit Management - Governance-modals.dc.html" + IDENTITY.md / --ck- tokens.
   Alleen modal-chrome; bindings/validatie/save-flow blijven in de .razor. */

.dgm[b-h2xiry11ju] {
    display: flex;
    flex-direction: column;
}

/* ── Groep-kop · mono eyebrow + rustige rule-lijn ─────────────────────────── */
.dgm-eyebrow[b-h2xiry11ju] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 12px;
}

.dgm-eyebrow:first-child[b-h2xiry11ju] {
    margin-top: 2px;
}

.dgm-eyebrow > span:first-child[b-h2xiry11ju] {
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    font-size: 11px;
    font-weight: var(--ck-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ck-accent-ink, #17605b);
}

.dgm-eyebrow__rule[b-h2xiry11ju] {
    height: 1px;
    flex: 1;
    background: var(--ck-border, #efece5);
}

.dgm-stack[b-h2xiry11ju] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dgm-field[b-h2xiry11ju] {
    display: flex;
    flex-direction: column;
}

/* Type/scope-vergrendeling bij bewerken — informatief, geen alarm. */
.dgm-lock[b-h2xiry11ju] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    color: var(--ck-text-subtle, #918e87);
    line-height: 1.45;
}

.dgm-lock[b-h2xiry11ju]  .mud-icon-root {
    font-size: 14px;
    margin-top: 1px;
    flex: none;
    color: var(--ck-text-subtle, #918e87);
}

/* ── JSON-editor · warm greige vloer (geen dark-terminal) ─────────────────── */
.dgm-json__head[b-h2xiry11ju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.dgm-json__badge[b-h2xiry11ju] {
    font-size: 11px;
    font-weight: var(--ck-weight-semibold, 600);
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    color: var(--ck-accent-ink, #17605b);
    background: var(--ck-accent-tint, #dde8e6);
    border-radius: var(--ck-radius-sm, 6px);
    padding: 2px 8px;
}

.dgm-json[b-h2xiry11ju] {
    background: var(--ck-surface, #f7f6f1);
    border: 1px solid var(--ck-border, #e3e1da);
    border-radius: var(--ck-radius-lg, 10px);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* Ongeldige JSON = inhoudelijke fout → amber, nooit alarm-rood. */
.dgm-json--invalid[b-h2xiry11ju] {
    border-color: #d99a8a;
    box-shadow: 0 0 0 3px var(--ck-warning-subtle, rgba(191, 84, 64, 0.1));
}

.dgm-json__bar[b-h2xiry11ju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 11px;
    border-bottom: 1px solid var(--ck-border, #ebe8e0);
    background: var(--ck-surface-high, #f1efe8);
}

.dgm-json__bar-label[b-h2xiry11ju] {
    font-size: 10.5px;
    color: var(--ck-text-subtle, #918e87);
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
}

.dgm-json__valid[b-h2xiry11ju],
.dgm-json__warn[b-h2xiry11ju] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: var(--ck-weight-semibold, 600);
}

.dgm-json__valid[b-h2xiry11ju] {
    color: var(--ck-success, #5e7d59);
}

.dgm-json__warn[b-h2xiry11ju] {
    color: var(--ck-warning, #a47a32);
}

.dgm-json__valid[b-h2xiry11ju]  .mud-icon-root,
.dgm-json__warn[b-h2xiry11ju]  .mud-icon-root {
    font-size: 12px;
}

.dgm-json__warn[b-h2xiry11ju]  .mud-icon-root {
    color: var(--ck-warning, #a47a32);
}

.dgm-json__valid[b-h2xiry11ju]  .mud-icon-root {
    color: var(--ck-success, #5e7d59);
}

.dgm-json__area[b-h2xiry11ju] {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    resize: vertical;
    background: var(--ck-surface, #f7f6f1);
    padding: 12px 13px;
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    font-size: 12px;
    line-height: 1.7;
    color: var(--ck-text-muted, #47443f);
    min-height: 116px;
}

.dgm-json__area:focus-visible[b-h2xiry11ju] {
    box-shadow: inset 0 0 0 2px var(--ck-accent-soft, #9ec5c1);
}

.dgm-hint[b-h2xiry11ju] {
    font-size: 11px;
    color: var(--ck-text-subtle, #918e87);
    margin-top: 5px;
    line-height: 1.45;
}

/* ── PII-scan-toggle-kaart (alleen bij PiiHandling) ───────────────────────── */
.dgm-pii[b-h2xiry11ju] {
    background: var(--ck-accent-tint, #dde8e6);
    border: 1px solid var(--ck-accent-soft, #9ec5c1);
    border-radius: var(--ck-radius-xl, 11px);
    padding: 12px 14px;
}

.dgm-pii__row[b-h2xiry11ju] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgm-pii__title[b-h2xiry11ju] {
    flex: 1;
    font-size: 13.5px;
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-accent-ink, #2f5f5a);
}

.dgm-pii__state[b-h2xiry11ju] {
    font-size: 11px;
    font-weight: var(--ck-weight-bold, 700);
    color: var(--ck-accent-ink, #17605b);
}

.dgm-pii__help[b-h2xiry11ju] {
    font-size: 11.5px;
    color: var(--ck-accent-ink, #3f6f6a);
    line-height: 1.5;
    margin-top: 7px;
    padding-left: 52px;
}

/* ── Prioriteit-rij ───────────────────────────────────────────────────────── */
.dgm-priority[b-h2xiry11ju] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dgm-priority__label[b-h2xiry11ju] {
    flex: none;
    margin: 0;
}

.dgm-priority__field[b-h2xiry11ju] {
    width: 110px;
    flex: none;
}

.dgm-priority .dgm-hint[b-h2xiry11ju] {
    margin-top: 0;
}

/* ── Warme toggle-rijen (Actief / Overerven) ──────────────────────────────── */
.dgm-toggle[b-h2xiry11ju] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: var(--ck-surface, #f6f5f1);
    border-radius: var(--ck-radius-lg, 10px);
}

.dgm-toggle__text[b-h2xiry11ju] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dgm-toggle__label[b-h2xiry11ju] {
    font-size: 12.5px;
    font-weight: var(--ck-weight-medium, 500);
    color: var(--ck-text-muted, #47443f);
}

.dgm-toggle__sub[b-h2xiry11ju] {
    font-size: 11px;
    color: var(--ck-text-subtle, #918e87);
    margin-top: 1px;
}

.dgm-toggle__state[b-h2xiry11ju] {
    font-size: 11.5px;
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text-disabled, #a8a49b);
    flex: none;
}

.dgm-toggle__state--on[b-h2xiry11ju] {
    color: var(--ck-success, #5e7d59);
}

/* Owner-binding-noot voor SP-scope — kalme amber 'let op', nooit alarm-rood (binding volgt). */
.dgm-ownernote[b-h2xiry11ju] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    background: var(--ck-warning-subtle, #f9f1df);
    border: 1px solid #e6d4a8;
    border-radius: var(--ck-radius-lg, 9px);
    font-size: 11.5px;
    color: var(--ck-warning, #7a5c28);
    line-height: 1.45;
}

.dgm-ownernote[b-h2xiry11ju]  .mud-icon-root {
    font-size: 14px;
    margin-top: 1px;
    flex: none;
    color: var(--ck-warning, #a47a32);
}

/* MudSwitch zonder eigen marge zodat-ie netjes in de warme rij zit. */
.dgm-switch[b-h2xiry11ju] {
    flex: none;
    margin: 0;
}

.dgm-switch[b-h2xiry11ju]  .mud-switch {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dgm-json[b-h2xiry11ju] {
        transition: none;
    }
}
/* /Components/Pages/DataGovernance/PiiDetection.razor.rz.scp.css */
/* PII-detectie · 'live · gefedereerd'-pill in de topbar. Zelfde warme taal als de DSAR-banner-pill;
   de pulserende stip zelf komt uit de gedeelde .ck-live-dot (motion.css), inclusief reduced-motion-vloer. */
.ck-pii-live[b-hmpc5pxgbt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-radius: var(--ck-radius-full, 999px);
    padding: 5px 12px;
}
/* /Components/Pages/DataGovernance/Workspace.razor.rz.scp.css */
/* Data-governance-werkvlak — warme header-icoontegel + vlakke tab-strip (#1381). */

.ck-dg__mark[b-bxbqwvx107] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    flex: none;
}

.ck-dg-tabs[b-bxbqwvx107]  .mud-tabs-tabbar,
.ck-dg-tabs[b-bxbqwvx107]  .mud-tabs-tabbar.mud-tabs-tabbar-primary {
    background: transparent;
    background-color: transparent;
    color: var(--ck-text-subtle);
    border-bottom: 1px solid var(--ck-border);
}

.ck-dg-tabs[b-bxbqwvx107]  .mud-tab {
    text-transform: none;
    font-weight: 500;
    color: var(--ck-text-subtle);
}

.ck-dg-tabs[b-bxbqwvx107]  .mud-tab.mud-tab-active {
    color: var(--ck-accent-ink);
    font-weight: 600;
}

/* De geconsolideerde tab-bodies brachten elk hun eigen ck-page-padding mee; binnen het werkvlak
   verzorgt de schil de marges, dus de tab-inhoud zelf staat strak. */
.ck-dg-tab[b-bxbqwvx107] {
    display: block;
}
/* /Components/Pages/Forges/ContainerLogsDialog.razor.rz.scp.css */
/* Container-log console (Lane M5 → MM4 build-to-design) — warme greige mono "code"-vloer met
   toolbar (auto-scroll + kopiëren), per-regel-toon en een eerlijke leeg-staat. Warme --ck-tokens,
   nooit hardcoded-dark. Mockup: Cockpit Management - Forge-modals.dc.html → A · Container-logs. */

/* ── toolbar ── */
.clog-bar[b-vii01amwbg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px 12px;
}

/* auto-scroll-schakelaar — warme pill, petrol als aan */
.clog-toggle[b-vii01amwbg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.clog-toggle__input[b-vii01amwbg] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.clog-toggle__track[b-vii01amwbg] {
    width: 30px;
    height: 18px;
    border-radius: var(--ck-radius-full, 999px);
    background: var(--ck-border);
    position: relative;
    flex: none;
    transition: background-color .18s ease;
}

.clog-toggle__thumb[b-vii01amwbg] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ck-surface-raised);
    box-shadow: 0 1px 2px color-mix(in oklab, var(--ck-text) 20%, transparent);
    transition: transform .18s ease;
}

.clog-toggle__input:checked + .clog-toggle__track[b-vii01amwbg] {
    background: var(--ck-accent);
}

.clog-toggle__input:checked + .clog-toggle__track .clog-toggle__thumb[b-vii01amwbg] {
    transform: translateX(12px);
}

.clog-toggle__input:focus-visible + .clog-toggle__track[b-vii01amwbg] {
    box-shadow: 0 0 0 3px var(--ck-accent-soft);
}

.clog-toggle__label[b-vii01amwbg] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ck-text-muted);
}

.clog-bar__count[b-vii01amwbg] {
    margin-left: auto;
    font-size: 11px;
    color: var(--ck-text-subtle);
    font-family: var(--ck-font-mono, 'Spline Sans Mono', ui-monospace, monospace);
}

.clog-copy[b-vii01amwbg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ck-text-muted);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md, 8px);
    padding: 6px 11px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.clog-copy:hover[b-vii01amwbg] {
    background: var(--ck-surface-high);
    border-color: var(--ck-accent-soft);
}

.clog-copy__icon[b-vii01amwbg] {
    font-size: 14px;
}

/* ── warme mono log-vloer ── */
.clog[b-vii01amwbg] {
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: 12px;
    padding: 13px 16px;
    max-height: 460px;
    overflow-y: auto;
    font-family: var(--ck-font-mono, 'Spline Sans Mono', ui-monospace, monospace);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ck-text);
}

.clog__line[b-vii01amwbg] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* per-regel-toon — LOCKED status-kleuren als tekst (geen vlak, geen alarm-rood) */
.clog__line--warn[b-vii01amwbg] {
    color: var(--ck-warning);
}

.clog__line--error[b-vii01amwbg] {
    color: var(--ck-error);
}

/* ── eerlijke leeg-staat ── */
.clog--empty[b-vii01amwbg] {
    text-align: center;
    padding: 34px 16px;
}

.clog__empty[b-vii01amwbg] {
    color: var(--ck-text-subtle);
    font-family: var(--ck-font-mono, 'Spline Sans Mono', ui-monospace, monospace);
    font-size: 12.5px;
}

.clog__empty-sub[b-vii01amwbg] {
    color: var(--ck-text-muted);
    font-size: 11.5px;
    margin-top: 6px;
}

/* ── footer ── */
.clog-foot[b-vii01amwbg] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.clog-foot__hint[b-vii01amwbg] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ck-text-subtle);
}

.clog-foot__hint-icon[b-vii01amwbg] {
    font-size: 13px;
}
/* /Components/Pages/Forges/DeleteForgeConfirmDialog.razor.rz.scp.css */
/* Verwijder-bevestiging body (Lane M5) — warme let-op-regel, amber, geen alarm-rood. */
.dfc[b-gbmrg81h5w] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ck-warning-subtle);
    border: 1px solid var(--ck-warning-subtle);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 13px;
    color: var(--ck-text);
    line-height: 1.5;
}

.dfc[b-gbmrg81h5w]  .mud-icon-root {
    color: var(--ck-warning);
    flex: none;
    font-size: 18px;
    margin-top: 1px;
}
/* /Components/Pages/Forges/DeleteModelConfirmDialog.razor.rz.scp.css */
/* Model-verwijder-bevestiging body (MM4 build-to-design) — rustige uitleg-regel; de destructieve
   toon zit in de terracotta header-chip + knop, niet in een alarm-vlak. */
.dmc__body[b-xjqxlzm1rp] {
    font-size: 13px;
    color: var(--ck-text-muted);
    line-height: 1.55;
    margin: 0;
}

.dmc__body strong[b-xjqxlzm1rp] {
    color: var(--ck-text);
    font-weight: 600;
}
/* /Components/Pages/Forges/Enroll.razor.rz.scp.css */
/* Inschrijving goedkeuren (R5) — warme Richting-A redesign.
   Bron: docs/proposals/immersive-design-kit/designs/Cockpit Management - Forge-flow.dc.html (#1593)
   Tokens: --ck-* . Status LOCKED: onbereikbaar/verloop = amber/terracotta, nooit alarm-rood. */

/* ===== Step indicator ===== */
.enr-steps[b-7ksteau5pk] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 20px;
    flex-wrap: wrap;
}

.enr-step[b-7ksteau5pk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ck-text-subtle);
    font-weight: 500;
}

.enr-step--active[b-7ksteau5pk] {
    color: var(--ck-accent-ink);
    font-weight: 600;
}

.enr-step--done[b-7ksteau5pk] {
    color: var(--ck-text-muted);
}

.enr-step__dot[b-7ksteau5pk] {
    width: 18px;
    height: 18px;
    border-radius: var(--ck-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    background: var(--ck-surface-high);
    color: var(--ck-text-subtle);
}

.enr-step--active .enr-step__dot[b-7ksteau5pk] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.enr-step--done .enr-step__dot[b-7ksteau5pk] {
    background: var(--ck-success-subtle);
    color: var(--ck-success);
}

.enr-step__bar[b-7ksteau5pk] {
    width: 18px;
    height: 1px;
    background: var(--ck-border-strong);
}

/* ===== Success ===== */
.enr-success[b-7ksteau5pk] {
    text-align: center;
    padding: var(--ck-space-8);
}

.enr-success[b-7ksteau5pk]  .enr-success__icon {
    font-size: 64px;
}

/* ===== Lookup card ===== */
.enr-lookup[b-7ksteau5pk] {
    text-align: center;
}

.enr-lookup__icon[b-7ksteau5pk] {
    width: 52px;
    height: 52px;
    border-radius: var(--ck-radius-xl);
    background: var(--ck-accent-tint);
    color: var(--ck-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.enr-lookup__icon[b-7ksteau5pk]  .mud-icon-root {
    font-size: 25px;
}

.enr-lookup__title[b-7ksteau5pk] {
    font-size: 21px;
    font-weight: 600;
    color: var(--ck-text);
    margin: 14px 0 0;
}

.enr-lookup__intro[b-7ksteau5pk] {
    font-size: 13.5px;
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 8px auto 0;
    max-width: 480px;
}

.enr-lookup__field[b-7ksteau5pk] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 22px;
    text-align: left;
}

.enr-lookup[b-7ksteau5pk]  .enr-lookup__input {
    flex: 1;
}

.enr-lookup[b-7ksteau5pk]  .enr-lookup__btn {
    height: 56px;
    flex: none;
}

.enr-field-hint[b-7ksteau5pk] {
    font-size: 11.5px;
    color: var(--ck-text-subtle);
    margin-top: 9px;
    text-align: left;
}

/* ===== Two-column split ===== */
.enr-split[b-7ksteau5pk] {
    display: flex;
    gap: 26px;
    align-items: flex-start;
}

.enr-split__details[b-7ksteau5pk] {
    width: 520px;
    flex: none;
    max-width: 100%;
}

.enr-split__config[b-7ksteau5pk] {
    flex: 1;
    min-width: 0;
}

@media (max-width: 1100px) {
    .enr-split[b-7ksteau5pk] {
        flex-direction: column;
    }

    .enr-split__details[b-7ksteau5pk] {
        width: 100%;
    }
}

/* ===== Section head ===== */
.enr-section-head[b-7ksteau5pk] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 26px;
    margin-bottom: 11px;
}

.enr-section-head__label[b-7ksteau5pk] {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.enr-badge[b-7ksteau5pk] {
    font-size: 11px;
    border-radius: var(--ck-radius-md);
    padding: 2px 8px;
}

.enr-badge--muted[b-7ksteau5pk] {
    color: var(--ck-text-subtle);
    background: var(--ck-surface-high);
}

/* ===== Forge details (read-only) ===== */
.enr-details__top[b-7ksteau5pk] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ck-border);
}

.enr-details__avatar[b-7ksteau5pk] {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--ck-radius-xl);
    background: var(--ck-accent-tint);
    color: var(--ck-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.enr-details__avatar[b-7ksteau5pk]  .mud-icon-root {
    font-size: 22px;
}

.enr-details__name[b-7ksteau5pk] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ck-text);
    font-family: var(--ck-font-mono);
    word-break: break-all;
}

.enr-details__sub[b-7ksteau5pk] {
    font-size: 12px;
    color: var(--ck-text-muted);
    margin-top: 2px;
}

.enr-row[b-7ksteau5pk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ck-border);
}

.enr-row--start[b-7ksteau5pk] {
    align-items: flex-start;
}

.enr-row--last[b-7ksteau5pk] {
    border-bottom: none;
}

.enr-row__key[b-7ksteau5pk] {
    width: 130px;
    flex: none;
    font-size: 12.5px;
    color: var(--ck-text-subtle);
}

.enr-row__val[b-7ksteau5pk] {
    font-size: 12.5px;
    color: var(--ck-text);
    min-width: 0;
}

.enr-row__val--mono[b-7ksteau5pk] {
    font-family: var(--ck-font-mono);
}

.enr-row__break[b-7ksteau5pk] {
    word-break: break-all;
}

.enr-row__expiry[b-7ksteau5pk] {
    color: var(--ck-warning);
}

.enr-key-ok[b-7ksteau5pk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ck-success);
    font-weight: 600;
}

.enr-key-ok[b-7ksteau5pk]  .mud-icon-root {
    font-size: 15px;
}

/* ===== Reachability ===== */
.enr-reach[b-7ksteau5pk] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.enr-reach__badge[b-7ksteau5pk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--ck-radius-full);
    padding: 4px 11px;
}

.enr-reach__badge[b-7ksteau5pk]  .mud-icon-root {
    font-size: 14px;
}

.enr-reach__badge--ok[b-7ksteau5pk] {
    color: var(--ck-success);
    background: var(--ck-success-subtle);
}

.enr-reach__badge--urgent[b-7ksteau5pk] {
    color: var(--ck-error);
    background: var(--ck-error-subtle);
}

.enr-reach__badge--muted[b-7ksteau5pk] {
    color: var(--ck-text-muted);
    background: var(--ck-surface-high);
}

.enr-reach[b-7ksteau5pk]  .enr-reach__spin {
    width: 14px;
    height: 14px;
}

.enr-reach__retest[b-7ksteau5pk] {
    border: none;
    background: transparent;
    color: var(--ck-accent-ink);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.enr-reach__retest:hover[b-7ksteau5pk] {
    text-decoration: underline;
}

.enr-reach__meta[b-7ksteau5pk] {
    font-size: 11px;
    color: var(--ck-text-disabled);
}

/* ===== Capabilities ===== */
.enr-caps[b-7ksteau5pk] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.enr-cap[b-7ksteau5pk] {
    font-size: 11.5px;
    color: var(--ck-text-muted);
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 3px 9px;
}

/* ===== Field / label / hint ===== */
.enr-field[b-7ksteau5pk] {
    display: flex;
    flex-direction: column;
}

.enr-field__label[b-7ksteau5pk] {
    font-size: 12px;
    color: var(--ck-text-muted);
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.enr-field__hint[b-7ksteau5pk] {
    font-size: 11.5px;
    color: var(--ck-text-subtle);
    margin-top: 7px;
}

/* ===== Priority +/- stepper ===== */
.enr-stepper[b-7ksteau5pk] {
    display: flex;
    align-items: center;
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-lg);
    overflow: hidden;
    background: var(--ck-surface-raised);
    max-width: 160px;
}

.enr-stepper__btn[b-7ksteau5pk] {
    border: none;
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    width: 40px;
    height: 42px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s ease;
}

.enr-stepper__btn:hover:not(:disabled)[b-7ksteau5pk] {
    background: var(--ck-border-strong);
}

.enr-stepper__btn:disabled[b-7ksteau5pk] {
    color: var(--ck-text-disabled);
    cursor: not-allowed;
}

.enr-stepper__val[b-7ksteau5pk] {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-text);
    font-variant-numeric: tabular-nums;
}

/* ===== Segmented toggle (connection mode + auto-lock) ===== */
.enr-seg[b-7ksteau5pk] {
    display: flex;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 4px;
    gap: 3px;
}

.enr-seg__opt[b-7ksteau5pk] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ck-text-subtle);
    font: inherit;
    font-size: 13px;
    padding: 9px;
    border-radius: var(--ck-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color .15s ease, color .15s ease;
}

.enr-seg__opt--active[b-7ksteau5pk] {
    color: var(--ck-accent-ink);
    background: var(--ck-surface-raised);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .08);
}

.enr-seg__opt:disabled[b-7ksteau5pk] {
    color: var(--ck-text-disabled);
    cursor: not-allowed;
}

.enr-seg__opt[b-7ksteau5pk]  .mud-icon-root {
    font-size: 15px;
}

.enr-seg__auto[b-7ksteau5pk] {
    font-size: 10px;
    font-weight: 600;
    color: var(--ck-success);
    background: var(--ck-success-subtle);
    border-radius: var(--ck-radius-sm);
    padding: 1px 6px;
}

/* ===== Notes ===== */
.enr-note[b-7ksteau5pk] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--ck-radius-lg);
    padding: 11px 13px;
    margin-top: 9px;
    font-size: 12.5px;
    line-height: 1.5;
}

.enr-note[b-7ksteau5pk]  .mud-icon-root {
    flex: none;
    margin-top: 1px;
    font-size: 16px;
}

.enr-note--error[b-7ksteau5pk] {
    background: var(--ck-error-subtle);
    border: 1px solid var(--ck-error-subtle);
    border-left: 3px solid var(--ck-error);
    color: var(--ck-text-muted);
}

.enr-note--error[b-7ksteau5pk]  .mud-icon-root {
    color: var(--ck-error);
}

.enr-note--urgent[b-7ksteau5pk] {
    background: var(--ck-error-subtle);
    border: 1px solid var(--ck-error-subtle);
    border-left: 3px solid var(--ck-error);
    color: var(--ck-text-muted);
}

.enr-note--urgent[b-7ksteau5pk]  .mud-icon-root {
    color: var(--ck-error);
}

/* ===== Reverse-tunnel mini diagram ===== */
.enr-tunnel[b-7ksteau5pk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 11px 13px;
}

.enr-tunnel__node[b-7ksteau5pk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--ck-text-muted);
    font-weight: 500;
    flex: none;
}

.enr-tunnel__node--accent[b-7ksteau5pk] {
    color: var(--ck-accent-ink);
    font-weight: 600;
}

.enr-tunnel__dot[b-7ksteau5pk] {
    width: 9px;
    height: 9px;
    border-radius: var(--ck-radius-xs);
}

.enr-tunnel__dot--muted[b-7ksteau5pk] {
    background: var(--ck-text-disabled);
}

.enr-tunnel__dot--accent[b-7ksteau5pk] {
    background: var(--ck-accent);
}

.enr-tunnel__line[b-7ksteau5pk] {
    flex: 1;
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.enr-tunnel__flow[b-7ksteau5pk] {
    flex: 1;
    height: 2px;
    border-radius: var(--ck-radius-full);
    background-image: linear-gradient(90deg, var(--ck-accent) 0 6px, transparent 6px 12px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
    animation: enrFlow-b-7ksteau5pk 1s linear infinite;
}

.enr-tunnel__caption[b-7ksteau5pk] {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ck-accent-ink);
    background: var(--ck-surface-high);
    padding: 0 6px;
}

@keyframes enrFlow-b-7ksteau5pk {
    to {
        background-position: -12px 0;
    }
}

/* ===== Reduced-motion guard ===== */
@media (prefers-reduced-motion: reduce) {
    .enr-tunnel__flow[b-7ksteau5pk] {
        animation: none;
    }
}
/* /Components/Pages/Forges/ForgeCard.razor.rz.scp.css */
/* ForgeCard — warme forge-statuskaart (werkvlak Fleet, #1346).
   Zachte greige surface + soft lift; LOCKED status-stippen via globale --ck-status-*. */

.ck-forge-card[b-bfof46bdyz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 16px 18px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 16px;
    box-shadow: var(--ck-shadow-soft);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ck-forge-card:hover[b-bfof46bdyz] {
    border-color: var(--ck-accent-soft);
    box-shadow: var(--ck-shadow-md);
    transform: translateY(-2px);
}

.ck-forge-card__head[b-bfof46bdyz] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.ck-forge-card__mark[b-bfof46bdyz] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.ck-forge-card__id[b-bfof46bdyz] {
    flex: 1;
    min-width: 0;
}

.ck-forge-card__name[b-bfof46bdyz] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ck-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-forge-card__host[b-bfof46bdyz] {
    font-size: 12px;
    color: var(--ck-text-subtle);
    font-family: var(--ck-font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-forge-card__meta[b-bfof46bdyz] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ck-forge-card__chip[b-bfof46bdyz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ck-text-muted);
    line-height: 1.4;
}

.ck-forge-card__seen[b-bfof46bdyz] {
    font-size: 11.5px;
    color: var(--ck-text-subtle);
    margin-top: -2px;
}

.ck-forge-card__seen-sep[b-bfof46bdyz] {
    margin: 0 4px;
    color: var(--ck-border-strong);
}

.ck-forge-card__actions[b-bfof46bdyz] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 4px;
}

/* Push the destructive/edit icon buttons to the right of the primary action */
.ck-forge-card__actions[b-bfof46bdyz]  .mud-icon-button:nth-last-child(2) {
    margin-left: auto;
}

/* The ck-badge base lives in cards.css; lock the dot vertical rhythm inside it */
.ck-forge-card .ck-badge[b-bfof46bdyz] {
    flex: none;
    align-self: flex-start;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11.5px;
}
/* /Components/Pages/Forges/ForgeClusterTab.razor.rz.scp.css */
/* ============================================================
   ForgeClusterTab — scoped warm Richting-A styles
   Prefix: fg-
   Tokens: --ck- (never raw hex unless token absent)
   ============================================================ */

/* ---- Pool summary strip ---- */
.fg-pool-strip[b-vjq0hnqx8g] {
    margin-bottom: var(--ck-space-4, 14px);
}

/* Forge-scoped stat surface. Deliberately NOT the shared KpiCard: the cluster strip is a
   dense read-out (fg-stat-value / fg-stat-model overrides below). See the
   KpiCard-consolidation PR for the rationale. Defined before the fg-stat-* value overrides
   so those (equal specificity) win. */
.fg-stat-card[b-vjq0hnqx8g] {
    background-color: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-4) var(--ck-space-5);
    transition:
        border-color var(--ck-duration-normal) var(--ck-ease-default),
        box-shadow var(--ck-duration-normal) var(--ck-ease-default),
        transform var(--ck-duration-normal) var(--ck-ease-default);
}

.fg-stat-card:hover[b-vjq0hnqx8g] {
    border-color: var(--ck-border-strong);
    box-shadow: var(--ck-shadow-sm);
    transform: translateY(-1px);
}

.fg-stat-card__label[b-vjq0hnqx8g] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    margin-bottom: var(--ck-space-2);
}

.fg-stat-card__value[b-vjq0hnqx8g] {
    font-size: var(--ck-text-3xl);
    font-weight: var(--ck-weight-bold);
    color: var(--ck-text);
    line-height: var(--ck-leading-tight);
    letter-spacing: var(--ck-tracking-tight);
}

.fg-stat-value[b-vjq0hnqx8g] {
    font-size: var(--ck-text-2xl, 22px);
    font-weight: var(--ck-weight-bold, 600);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: var(--ck-space-1, 3px);
    color: var(--ck-text, #36342f);
}

.fg-stat-unit[b-vjq0hnqx8g] {
    font-size: var(--ck-text-sm, 13px);
    font-weight: var(--ck-weight-normal, 400);
    color: var(--ck-text-muted, #918e87);
}

.fg-stat-model[b-vjq0hnqx8g] {
    font-size: var(--ck-text-base, 15px);
    font-weight: var(--ck-weight-semibold, 600);
    font-family: 'Spline Sans Mono', 'Cascadia Code', monospace;
    margin-top: var(--ck-space-1, 4px);
    color: var(--ck-text, #36342f);
}

.fg-stat-dash[b-vjq0hnqx8g] {
    color: var(--ck-text-subtle, #a8a49b);
}

/* ---- Topology card ---- */
.fg-topology-card[b-vjq0hnqx8g] {
    background: var(--ck-surface-raised, #fbfbf8);
    border: 1px solid var(--ck-border, #e7e5de);
    border-radius: var(--ck-radius-2xl, 16px);
    padding: var(--ck-space-6, 26px) var(--ck-space-8, 30px);
    box-shadow: 0 1px 2px rgba(40, 38, 34, .04);
    margin-bottom: var(--ck-space-3, 13px);
}

/* ---- Topology rail — nodes side by side with link between ---- */
.fg-topology-rail[b-vjq0hnqx8g] {
    display: flex;
    align-items: center;
    gap: 0;
}

.fg-topology-rail--single[b-vjq0hnqx8g] {
    max-width: 880px;
    margin: 0 auto;
}

/* ---- Node cards ---- */
.fg-node-card[b-vjq0hnqx8g] {
    flex: 1;
    background: var(--ck-surface, #f6f5f1);
    border: 1px solid var(--ck-border, #e7e5de);
    border-radius: var(--ck-radius-xl, 15px);
    padding: var(--ck-space-5, 18px) var(--ck-space-5, 20px);
}

.fg-node-card--primary[b-vjq0hnqx8g] {
    border-width: 1.5px;
    border-color: var(--ck-accent-soft, #9ec5c1);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb, 28, 107, 102), .08);
}

.fg-node-header[b-vjq0hnqx8g] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3, 11px);
}

.fg-node-icon[b-vjq0hnqx8g] {
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-lg, 11px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.fg-node-icon--primary[b-vjq0hnqx8g] {
    background: var(--ck-accent-tint, #dde8e6);
}

.fg-node-icon--worker[b-vjq0hnqx8g] {
    background: var(--ck-surface-high, #efece4);
}

.fg-node-name-block[b-vjq0hnqx8g] {
    flex: 1;
    min-width: 0;
}

.fg-node-name[b-vjq0hnqx8g] {
    font-size: var(--ck-text-base, 15px);
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text, #36342f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-node-host[b-vjq0hnqx8g] {
    font-size: var(--ck-text-xs, 11px);
    color: var(--ck-text-muted, #79756f);
    font-family: 'Spline Sans Mono', 'Cascadia Code', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-node-role-badge[b-vjq0hnqx8g] {
    flex: none;
    font-size: 10.5px;
    font-weight: var(--ck-weight-semibold, 600);
    border-radius: var(--ck-radius-sm, 6px);
    padding: 3px 8px;
    line-height: 1;
}

.fg-node-role-badge--primary[b-vjq0hnqx8g] {
    color: var(--ck-accent-ink, #17605b);
    background: var(--ck-accent-tint, #dde8e6);
}

.fg-node-role-badge--worker[b-vjq0hnqx8g] {
    color: var(--ck-text-muted, #79756f);
    background: var(--ck-surface-high, #f0efe9);
}

/* ---- Node per-metric row ---- */
.fg-node-metrics[b-vjq0hnqx8g] {
    display: flex;
    gap: var(--ck-space-5, 18px);
    margin-top: var(--ck-space-4, 14px);
}

.fg-node-metric-label[b-vjq0hnqx8g] {
    font-size: 10.5px;
    color: var(--ck-text-muted, #918e87);
    margin-bottom: 2px;
}

.fg-node-metric-value[b-vjq0hnqx8g] {
    font-size: var(--ck-text-base, 14px);
    font-weight: var(--ck-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    color: var(--ck-text, #36342f);
}

.fg-node-offline-chip[b-vjq0hnqx8g] {
    margin-top: var(--ck-space-2, 8px);
}

/* ---- Interconnect link ---- */
.fg-link[b-vjq0hnqx8g] {
    width: 200px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--ck-space-2, 6px);
}

.fg-link-label[b-vjq0hnqx8g] {
    font-size: var(--ck-text-xs, 11px);
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-accent-ink, #17605b);
    background: var(--ck-accent-tint, #dde8e6);
    border-radius: var(--ck-radius-full, 999px);
    padding: 4px 11px;
    white-space: nowrap;
    margin-bottom: 9px;
}

.fg-link-line[b-vjq0hnqx8g] {
    position: relative;
    width: 100%;
    height: 3px;
    background: var(--ck-accent-soft, #9ec5c1);
    border-radius: var(--ck-radius-full, 999px);
}

/* Animated flow dots — reduced-motion-safe */
.fg-link-dot[b-vjq0hnqx8g] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: var(--ck-radius-full, 50%);
    background: var(--ck-accent, #1c6b66);
    animation: fg-dot-pulse-b-vjq0hnqx8g 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fg-link-dot[b-vjq0hnqx8g] {
        animation: none;
        opacity: .6;
    }
}

@keyframes fg-dot-pulse-b-vjq0hnqx8g {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: .35; transform: translate(-50%, -50%) scale(.7); }
}

.fg-link-sub[b-vjq0hnqx8g] {
    font-size: 10.5px;
    color: var(--ck-text-muted, #79756f);
    margin-top: 9px;
}

/* Dashed link variant (single-node) */
.fg-link--dashed[b-vjq0hnqx8g] {
    width: 170px;
}

.fg-link-line--dashed[b-vjq0hnqx8g] {
    background: transparent;
    border-top: 2px dashed var(--ck-border-strong, #d2cfc6);
    height: 0;
}

/* ---- Empty peer slot (CTA) ---- */
.fg-node-slot[b-vjq0hnqx8g] {
    flex: 1;
    background: var(--ck-surface-raised, #f8f7f3);
    border: 1.5px dashed var(--ck-border-strong, #cfccc3);
    border-radius: var(--ck-radius-xl, 15px);
    padding: var(--ck-space-5, 18px) var(--ck-space-5, 20px);
    display: flex;
    align-items: center;
    gap: var(--ck-space-3, 12px);
    transition: border-color var(--ck-duration-fast, 100ms), background var(--ck-duration-fast, 100ms);
}

.fg-node-slot:hover[b-vjq0hnqx8g] {
    border-color: var(--ck-accent-soft, #9ec5c1);
    background: var(--ck-surface-raised, #fbfbf8);
}

.fg-node-slot-icon[b-vjq0hnqx8g] {
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-lg, 11px);
    background: var(--ck-surface-high, #f0efe9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.fg-node-slot-title[b-vjq0hnqx8g] {
    font-size: var(--ck-text-base, 14px);
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text-muted, #605d57);
}

.fg-node-slot-sub[b-vjq0hnqx8g] {
    font-size: var(--ck-text-xs, 11px);
    color: var(--ck-text-subtle, #918e87);
}

/* ---- Single-node promo copy ---- */
.fg-single-pill[b-vjq0hnqx8g] {
    margin-bottom: var(--ck-space-4, 18px);
}

.fg-single-promo[b-vjq0hnqx8g] {
    max-width: 620px;
    margin: var(--ck-space-7, 26px) auto 0;
    text-align: center;
}

.fg-single-promo-title[b-vjq0hnqx8g] {
    font-size: var(--ck-text-lg, 16px);
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text, #36342f);
    margin: 0 0 var(--ck-space-2, 9px);
}

.fg-single-promo-body[b-vjq0hnqx8g] {
    font-size: var(--ck-text-sm, 13px);
    color: var(--ck-text-muted, #79756f);
    line-height: var(--ck-leading-relaxed, 1.55);
    margin: 0;
}

/* ---- Shard bar section ---- */
.fg-shard-section[b-vjq0hnqx8g] {
    margin-top: var(--ck-space-6, 22px);
    padding-top: var(--ck-space-5, 18px);
    border-top: 1px solid var(--ck-border, #ebe9e2);
}

.fg-shard-header[b-vjq0hnqx8g] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2, 10px);
    margin-bottom: var(--ck-space-3, 10px);
}

.fg-shard-title[b-vjq0hnqx8g] {
    font-size: var(--ck-text-sm, 12.5px);
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text, #36342f);
}

.fg-shard-sub[b-vjq0hnqx8g] {
    font-size: var(--ck-text-xs, 11px);
    color: var(--ck-text-muted, #79756f);
    margin-left: auto;
}

.fg-mono[b-vjq0hnqx8g] {
    font-family: 'Spline Sans Mono', 'Cascadia Code', monospace;
    font-weight: var(--ck-weight-normal, 400);
}

.fg-shard-bar[b-vjq0hnqx8g] {
    display: flex;
    height: 16px;
    border-radius: var(--ck-radius-sm, 7px);
    overflow: hidden;
    gap: 2px;
}

.fg-shard-segment[b-vjq0hnqx8g] {
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 10px;
    font-weight: var(--ck-weight-semibold, 600);
    white-space: nowrap;
    overflow: hidden;
}

.fg-shard-segment--primary[b-vjq0hnqx8g] {
    background: var(--ck-accent, #1c6b66);
    color: #fff;
}

.fg-shard-segment--worker[b-vjq0hnqx8g] {
    background: var(--ck-accent-soft, #9ec5c1);
    color: var(--ck-accent-ink, #1d4d49);
}

/* ---- Footnote ---- */
.fg-cluster-footnote[b-vjq0hnqx8g] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2, 7px);
    font-size: var(--ck-text-xs, 11.5px);
    color: var(--ck-text-subtle, #918e87);
    margin: 0;
    line-height: 1.5;
}

/* ---- Offline / empty banner ---- */
.fg-offline-banner[b-vjq0hnqx8g] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2, 7px);
    padding: var(--ck-space-4, 14px) var(--ck-space-5, 18px);
    background: #faf1ee;
    border-left: 3px solid #bf5440;
    border-radius: var(--ck-radius-md, 8px);
    font-size: var(--ck-text-sm, 13px);
    color: var(--ck-text-muted, #605d57);
}

/* ---- Loading skeleton ---- */
.fg-cluster-loading[b-vjq0hnqx8g] {
    padding: var(--ck-space-4, 14px) 0;
}
/* /Components/Pages/Forges/ForgeContainersTab.razor.rz.scp.css */
/* ================================================================
   ForgeContainersTab — scoped warm Richting-A styles
   Prefix: fg-  |  Colours via --ck- tokens only
   ================================================================ */

/* ---- Loading strip ---- */
.fg-skeleton-strip[b-jhklvhpd8x] {
  margin-bottom: var(--ck-space-4);
}

/* ---- Summary chip bar ---- */
.fg-summary-bar[b-jhklvhpd8x] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ck-space-2-5);
  margin-bottom: var(--ck-space-4);
}

.fg-summary-chip[b-jhklvhpd8x] {
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-border);
  border-radius: 11px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: var(--ck-shadow-xs, 0 1px 2px rgba(40,38,34,.04));
}

.fg-chip-count[b-jhklvhpd8x] {
  font-size: var(--ck-text-sm);
  font-weight: var(--ck-weight-semibold);
  color: var(--ck-text);
  font-variant-numeric: tabular-nums;
}

.fg-chip-label[b-jhklvhpd8x] {
  font-size: var(--ck-text-xs);
  color: var(--ck-text-muted);
}

.fg-summary-spacer[b-jhklvhpd8x] {
  flex: 1;
}

/* ---- Status dots ---- */
.fg-dot[b-jhklvhpd8x] {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.fg-dot--running[b-jhklvhpd8x]    { background: #6f9a6a; }
.fg-dot--neutral[b-jhklvhpd8x]    { background: var(--ck-border-strong, #c2bfb6); }
.fg-dot--restarting[b-jhklvhpd8x] { background: var(--ck-warning, #c79a52); }

/* ---- Refresh button ---- */
.fg-refresh-btn[b-jhklvhpd8x] {
  border: 1px solid var(--ck-border) !important;
  background: var(--ck-surface-raised) !important;
  color: var(--ck-text-muted) !important;
  border-radius: var(--ck-radius-lg) !important;
  padding: 8px 13px !important;
  font-size: var(--ck-text-sm) !important;
  font-weight: var(--ck-weight-medium) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: border-color var(--ck-duration-fast) var(--ck-ease-out),
              background var(--ck-duration-fast) var(--ck-ease-out) !important;
}

.fg-refresh-btn:hover[b-jhklvhpd8x] {
  border-color: var(--ck-border-strong) !important;
  background: var(--ck-surface-high) !important;
}

/* ---- Container table wrapper ---- */
.fg-table-wrap[b-jhklvhpd8x] {
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-2xl, 16px);
  box-shadow: var(--ck-shadow-xs, 0 1px 2px rgba(40,38,34,.04));
  overflow: hidden;
}

/* ---- Column grid: Container | Status | Port | Uptime | Actions ---- */
.fg-table-header[b-jhklvhpd8x],
.fg-table-row[b-jhklvhpd8x] {
  display: grid;
  grid-template-columns: 2.7fr 1.1fr 0.8fr 0.7fr 1fr;
  gap: 12px;
  padding: 0 20px;
  align-items: center;
}

.fg-table-header[b-jhklvhpd8x] {
  padding-top: 11px;
  padding-bottom: 11px;
  background: var(--ck-surface, #f6f5f1);
  border-bottom: 1px solid var(--ck-border);
  font-size: var(--ck-text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ck-text-subtle);
  font-weight: var(--ck-weight-semibold);
}

.fg-table-row[b-jhklvhpd8x] {
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--ck-border);
  transition: background var(--ck-duration-fast) var(--ck-ease-out);
}

.fg-table-row:last-child[b-jhklvhpd8x] {
  border-bottom: none;
}

.fg-table-row:hover[b-jhklvhpd8x] {
  background: var(--ck-surface-high);
}

/* Completed row: muted warm background */
.fg-row--completed[b-jhklvhpd8x] {
  background: var(--ck-surface, #faf9f6);
}

.fg-row--completed:hover[b-jhklvhpd8x] {
  background: var(--ck-surface-high);
}

/* Restarting row: soft amber wash */
.fg-row--restarting[b-jhklvhpd8x] {
  background: #fdfaf3;
}

.fg-row--restarting:hover[b-jhklvhpd8x] {
  background: #faf6e8;
}

/* ---- Column helpers ---- */
.fg-col--right[b-jhklvhpd8x] {
  text-align: right;
}

.fg-col--actions[b-jhklvhpd8x] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

/* ---- Container name + image cell ---- */
.fg-container-info[b-jhklvhpd8x] {
  min-width: 0;
}

.fg-container-name[b-jhklvhpd8x] {
  font-family: 'Spline Sans Mono', 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: var(--ck-text-sm);
  color: var(--ck-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fg-row--completed .fg-container-name[b-jhklvhpd8x] {
  color: var(--ck-text-muted);
}

.fg-container-image[b-jhklvhpd8x] {
  font-family: 'Spline Sans Mono', 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: var(--ck-text-xs);
  color: var(--ck-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.fg-row--restarting .fg-container-image[b-jhklvhpd8x] {
  color: #a47a32;
}

/* ---- Status badges ---- */
.fg-status[b-jhklvhpd8x] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ck-text-xs);
  font-weight: var(--ck-weight-semibold);
}

.fg-status--running[b-jhklvhpd8x]    { color: #5e7d59; }
.fg-status--completed[b-jhklvhpd8x]  { color: var(--ck-text-muted); }
.fg-status--restarting[b-jhklvhpd8x] { color: #a47a32; }
.fg-status--unknown[b-jhklvhpd8x]    { color: var(--ck-text-muted); }

/* ---- Mono port ---- */
.fg-mono[b-jhklvhpd8x] {
  font-family: 'Spline Sans Mono', 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: var(--ck-text-xs);
  color: var(--ck-text-muted);
}

/* ---- Uptime ---- */
.fg-uptime[b-jhklvhpd8x] {
  font-size: var(--ck-text-xs);
  color: var(--ck-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ---- Empty dash ---- */
.fg-empty-dash[b-jhklvhpd8x] {
  color: var(--ck-text-disabled, #a8a49b);
}

/* ---- Action buttons ---- */
.fg-btn-secondary[b-jhklvhpd8x] {
  border: 1px solid var(--ck-border);
  background: var(--ck-surface-raised);
  color: var(--ck-text-muted);
  border-radius: var(--ck-radius-md);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--ck-text-xs);
  font-weight: var(--ck-weight-medium);
  cursor: pointer;
  transition: border-color var(--ck-duration-fast) var(--ck-ease-out),
              background var(--ck-duration-fast) var(--ck-ease-out);
  white-space: nowrap;
}

.fg-btn-secondary:hover[b-jhklvhpd8x] {
  border-color: var(--ck-border-strong);
  background: var(--ck-surface-high);
}

/* More-menu icon button */
[b-jhklvhpd8x] .fg-more-btn {
  color: var(--ck-text-muted) !important;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md) !important;
  width: 30px;
  height: 30px;
  background: var(--ck-surface-raised);
  transition: border-color var(--ck-duration-fast) var(--ck-ease-out),
              background var(--ck-duration-fast) var(--ck-ease-out);
}

[b-jhklvhpd8x] .fg-more-btn:hover {
  border-color: var(--ck-border-strong);
  background: var(--ck-surface-high);
}

/* ---- Footer note ---- */
.fg-footer-note[b-jhklvhpd8x] {
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ck-text-xs);
  color: var(--ck-text-subtle);
  line-height: var(--ck-leading-relaxed);
}

.fg-footer-note svg[b-jhklvhpd8x] {
  flex: none;
  color: var(--ck-text-subtle);
}

/* ---- Reduced-motion guard ---- */
@media (prefers-reduced-motion: reduce) {
  .fg-refresh-btn[b-jhklvhpd8x],
  .fg-btn-secondary[b-jhklvhpd8x],
  .fg-table-row[b-jhklvhpd8x],
  .fg-summary-chip[b-jhklvhpd8x],
  [b-jhklvhpd8x] .fg-more-btn {
    transition: none;
  }
}
/* /Components/Pages/Forges/ForgeDetail.razor.rz.scp.css */
/* ForgeDetail — warme header-icoontegel + vlakke tab-strip (werkvlak Fleet, #1346). */

.ck-forge-detail__mark[b-9ufzo15a5w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    flex: none;
}

/* Flatten the MudTabs toolbar to the mockup's underline strip: no paper card,
   warm hairline under the row, accent indicator handled by Color="Primary". */
.ck-forge-tabs[b-9ufzo15a5w]  .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--ck-border);
}

.ck-forge-tabs[b-9ufzo15a5w]  .mud-tab {
    text-transform: none;
    font-weight: 500;
    color: var(--ck-text-subtle);
}

.ck-forge-tabs[b-9ufzo15a5w]  .mud-tab.mud-tab-active {
    color: var(--ck-accent-ink);
    font-weight: 600;
}
/* /Components/Pages/Forges/ForgeMaintenanceTab.razor.rz.scp.css */
/* ============================================================
   ForgeMaintenanceTab — warme Richting-A restyle (MG1)
   fg-  prefix voor tab-specifieke classes
   Alle kleuren via --ck- tokens; geen losse hexes behalve
   amber (#c79a52 / #8a6a2a) die geen eigen token heeft.
   ============================================================ */

/* ---- Body: twee kolommen (mockup §6) ---- */
.fg-maintenance-body[b-gposv0v26x] {
    display: flex;
    gap: var(--ck-space-6);
    align-items: flex-start;
}

.fg-main-col[b-gposv0v26x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-4);
}

.fg-side-col[b-gposv0v26x] {
    width: 340px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-4);
}

/* ---- 2×2 actiekaarten-grid ---- */
.fg-action-grid[b-gposv0v26x] {
    gap: var(--ck-space-4);
}

/* ---- Actiekaart ---- */
.fg-action-card[b-gposv0v26x] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--ck-space-5);
}

.fg-action-card--muted[b-gposv0v26x] {
    opacity: 0.82;
}

/* Icon-box varianten (naast de gedeelde ck-card__icon-box variants) */
.fg-icon--accent[b-gposv0v26x] {
    background-color: var(--ck-accent-tint);
    color: var(--ck-accent);
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.fg-icon--success[b-gposv0v26x] {
    background-color: var(--ck-success-subtle);
    color: var(--ck-success);
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.fg-icon--neutral[b-gposv0v26x] {
    background-color: var(--ck-surface-high);
    color: var(--ck-text-muted);
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.fg-icon--warning[b-gposv0v26x] {
    background-color: var(--ck-warning-subtle);
    color: var(--ck-warning);
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.fg-action-card__title[b-gposv0v26x] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    margin-top: var(--ck-space-3);
}

.fg-action-card__desc[b-gposv0v26x] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
    margin: var(--ck-space-1) 0 0;
}

.fg-action-card__meta[b-gposv0v26x] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    margin-top: var(--ck-space-2-5);
    min-height: 1.4em; /* stabiliseert kaartvlak als meta leeg is */
}

.fg-action-card__meta.fg-meta--success[b-gposv0v26x] {
    color: var(--ck-success);
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
}

.fg-action-card__meta.fg-meta--warning[b-gposv0v26x] {
    color: var(--ck-warning);
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
}

.fg-action-card__meta.fg-meta--muted[b-gposv0v26x] {
    color: var(--ck-text-subtle);
}

/* Actieknop in de kaart */
.fg-action-btn[b-gposv0v26x] {
    width: 100%;
    margin-top: var(--ck-space-3);
    border-radius: var(--ck-radius-md) !important;
    text-transform: none !important;
    font-size: var(--ck-text-sm) !important;
}

/* Primary-variant = accent-achtergrond (snapshot) */
.fg-action-btn--primary[b-gposv0v26x] {
    background-color: var(--ck-accent) !important;
    color: var(--ck-accent-contrast, #fff) !important;
}

.fg-action-btn--primary:hover:not(:disabled)[b-gposv0v26x] {
    background-color: var(--ck-accent-ink) !important;
}

/* ---- Status-dot helper (inline) ---- */
.fg-status-dot[b-gposv0v26x] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--ck-radius-full);
    background-color: var(--ck-text-subtle);
    flex: none;
}

.fg-status-dot--success[b-gposv0v26x] { background-color: var(--ck-success); }
.fg-status-dot--warning[b-gposv0v26x] { background-color: var(--ck-warning); }
.fg-status-dot--error[b-gposv0v26x]   { background-color: var(--ck-error); }

/* ---- Schijfgebruik-kaart ---- */
.fg-disk-card[b-gposv0v26x] {
    padding: var(--ck-space-5);
}

.fg-disk-summary[b-gposv0v26x] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.fg-disk-bars[b-gposv0v26x] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
    margin-top: var(--ck-space-3);
}

.fg-disk-row[b-gposv0v26x] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-1);
}

.fg-disk-row__label[b-gposv0v26x] {
    display: flex;
    justify-content: space-between;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.fg-disk-row__size[b-gposv0v26x] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    font-variant-numeric: tabular-nums;
}

.fg-disk-row__size--free[b-gposv0v26x] {
    color: var(--ck-success);
}

.fg-disk-bar-track[b-gposv0v26x] {
    height: 6px;
    background-color: var(--ck-surface-high);
    border-radius: var(--ck-radius-full);
    overflow: hidden;
}

.fg-disk-bar-fill[b-gposv0v26x] {
    height: 100%;
    background-color: var(--ck-accent);
    border-radius: var(--ck-radius-full);
    transition: width var(--ck-duration-slow) var(--ck-ease-out);
}

.fg-disk-bar-fill--free[b-gposv0v26x] {
    background-color: var(--ck-success);
}

@media (prefers-reduced-motion: reduce) {
    .fg-disk-bar-fill[b-gposv0v26x] {
        transition: none;
    }
}

/* ---- Health-check-resultatenkaart ---- */
.fg-health-card[b-gposv0v26x] {
    padding: var(--ck-space-5);
}

.fg-health-list[b-gposv0v26x] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
}

.fg-health-row[b-gposv0v26x] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
}

.fg-health-row__name[b-gposv0v26x] {
    flex: 1;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
}

.fg-health-row__status[b-gposv0v26x] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* ============================================================
   Rechterkolom-kaarten
   ============================================================ */

/* ---- Update-kaart (amber aandacht, §--ck-status-attention) ---- */
.fg-update-card[b-gposv0v26x] {
    border-left: 3px solid #c79a52 !important; /* amber — geen --ck-token beschikbaar */
    border-color: #ecdfc6 !important;
    padding: var(--ck-space-5);
}

.fg-update-card__header[b-gposv0v26x] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-1-5);
}

.fg-update-icon[b-gposv0v26x] {
    color: #a47a32 !important;
}

.fg-update-card__title[b-gposv0v26x] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: #8a6a2a;
}

.fg-update-card__desc[b-gposv0v26x] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
    margin: 0 0 var(--ck-space-3);
}

.fg-update-card__actions[b-gposv0v26x] {
    display: flex;
    gap: var(--ck-space-2);
    flex-wrap: wrap;
}

/* Amber-primaire knop (update plannen) */
.fg-btn-amber[b-gposv0v26x] {
    background-color: #c79a52 !important;
    color: #fff !important;
    border-color: #c79a52 !important;
    text-transform: none !important;
    border-radius: var(--ck-radius-md) !important;
    font-size: var(--ck-text-sm) !important;
}

/* Amber-outline knop (release-notes) */
.fg-btn-amber-outline[b-gposv0v26x] {
    border-color: #e6dcc6 !important;
    color: #8a6a2a !important;
    text-transform: none !important;
    border-radius: var(--ck-radius-md) !important;
    font-size: var(--ck-text-sm) !important;
    background-color: transparent !important;
}

/* ---- Recent-onderhoud-kaart ---- */
.fg-recent-card[b-gposv0v26x] {
    padding: var(--ck-space-5);
}

.fg-recent-empty[b-gposv0v26x] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
    padding: var(--ck-space-3) 0;
}

.fg-recent-empty__icon[b-gposv0v26x] {
    color: var(--ck-text-subtle) !important;
    flex: none;
}

/* ---- Gevarenzone-kaart (terracotta-outline, GEEN rood-vlak) ---- */
.fg-danger-card[b-gposv0v26x] {
    border-color: #e6d2ca !important;
    padding: var(--ck-space-5);
}

.fg-danger-card__header[b-gposv0v26x] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-1-5);
}

.fg-danger-icon[b-gposv0v26x] {
    color: var(--ck-error) !important;
}

.fg-danger-card__title[b-gposv0v26x] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-error);
}

.fg-danger-card__desc[b-gposv0v26x] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
    margin: 0 0 var(--ck-space-3);
}

/* Terracotta-outline knoppen — GEEN rood-vlak */
.fg-danger-btn[b-gposv0v26x] {
    border-color: #e0ccc5 !important;
    color: var(--ck-error) !important;
    background-color: transparent !important;
    text-transform: none !important;
    border-radius: var(--ck-radius-md) !important;
    font-size: var(--ck-text-sm) !important;
    font-weight: var(--ck-weight-semibold) !important;
}

.fg-danger-btn:hover:not(:disabled)[b-gposv0v26x] {
    background-color: #faf1ee !important;
    border-color: #dabbb1 !important;
}

/* ---- Responsive: smalle schermen ---- */
@media (max-width: 1024px) {
    .fg-maintenance-body[b-gposv0v26x] {
        flex-direction: column;
    }

    .fg-side-col[b-gposv0v26x] {
        width: 100%;
    }
}

/* ---- Reduced-motion guard ---- */
@media (prefers-reduced-motion: reduce) {
    .fg-action-card[b-gposv0v26x],
    .fg-update-card[b-gposv0v26x],
    .fg-recent-card[b-gposv0v26x],
    .fg-danger-card[b-gposv0v26x] {
        transition: none !important;
    }
}
/* /Components/Pages/Forges/ForgeModelsTab.razor.rz.scp.css */
/* ============================================================
   ForgeModelsTab — scoped warm Richting-A restyle
   Prefix: fg-  |  All colours via --ck- tokens
   ============================================================ */

/* ── Body wrapper ── */
.fg-models-body[b-cy1odx6r1v] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-4, 16px);
}

/* ── Skeleton loader ── */
.fg-skeleton-wrap[b-cy1odx6r1v] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3, 12px);
    padding: var(--ck-space-4, 16px) 0;
}

.fg-skeleton-bar[b-cy1odx6r1v] {
    height: 14px;
    border-radius: var(--ck-radius-sm, 4px);
    width: 100%;
}

.fg-skeleton-bar--short[b-cy1odx6r1v] {
    width: 60%;
}

/* ── Card inner layout ── */
.fg-model-card[b-cy1odx6r1v] {
    padding: var(--ck-space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3, 12px);
}

.fg-model-card__head[b-cy1odx6r1v] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3, 12px);
    margin-bottom: var(--ck-space-1, 4px);
}

/* ── VRAM usage bar (active models) ── */
.fg-vram-bar-wrap[b-cy1odx6r1v] {
    background: var(--ck-surface-raised, #fbfbf8);
    border: 1px solid var(--ck-border, #e4e1d9);
    border-radius: var(--ck-radius-lg, 12px);
    padding: var(--ck-space-4, 16px) var(--ck-space-5, 20px);
    margin-bottom: var(--ck-space-2, 8px);
}

.fg-vram-bar-label[b-cy1odx6r1v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ck-space-3, 12px);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ck-text, #2a2825);
}

.fg-vram-bar-label__value[b-cy1odx6r1v] {
    font-size: 13px;
    font-weight: 400;
    color: var(--ck-text-muted, #605d57);
    font-variant-numeric: tabular-nums;
}

.fg-vram-bar[b-cy1odx6r1v] {
    display: flex;
    height: 22px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ck-surface-high, #ece9e2);
    gap: 2px;
}

.fg-vram-bar__seg[b-cy1odx6r1v] {
    background: var(--ck-accent, #1c6b66);
    min-width: 4px;
    transition: width 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .fg-vram-bar__seg[b-cy1odx6r1v] {
        transition: none;
    }
}

.fg-vram-bar__seg:nth-child(2)[b-cy1odx6r1v] { background: var(--ck-accent-soft, #9ec5c1); }
.fg-vram-bar__seg:nth-child(3)[b-cy1odx6r1v] { background: var(--ck-accent-ink, #17605b); }
.fg-vram-bar__seg:nth-child(4)[b-cy1odx6r1v] { background: var(--ck-border-strong, #dad8d1); }

.fg-vram-legend[b-cy1odx6r1v] {
    display: flex;
    gap: 18px;
    margin-top: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--ck-text-muted, #605d57);
}

.fg-vram-legend__item[b-cy1odx6r1v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fg-vram-legend__dot[b-cy1odx6r1v] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--ck-accent, #1c6b66);
    flex: none;
}

/* ── Active-models grid ── */
.fg-model-grid[b-cy1odx6r1v] {
    display: grid;
    grid-template-columns: 2.4fr 0.9fr 1fr 1fr 1.4fr;
    gap: 14px;
    align-items: center;
}

.fg-model-grid--head[b-cy1odx6r1v] {
    padding: 10px 16px;
    background: var(--ck-surface, #f6f5f1);
    border: 1px solid var(--ck-border, #e4e1d9);
    border-radius: var(--ck-radius-md, 8px) var(--ck-radius-md, 8px) 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ck-text-subtle, #6e6a64);
    font-weight: 600;
}

.fg-model-grid--row[b-cy1odx6r1v] {
    padding: 13px 16px;
    border: 1px solid var(--ck-border, #e4e1d9);
    border-top: none;
    background: var(--ck-surface-raised, #fbfbf8);
    transition: background-color 120ms ease;
}

.fg-model-grid--row:last-of-type[b-cy1odx6r1v] {
    border-radius: 0 0 var(--ck-radius-md, 8px) var(--ck-radius-md, 8px);
}

.fg-model-grid--row:hover[b-cy1odx6r1v] {
    background: var(--ck-surface-high, #ece9e2);
}

/* ── Cache grid (4 cols) ── */
.fg-cache-grid[b-cy1odx6r1v] {
    display: grid;
    grid-template-columns: 2.4fr 0.9fr 1fr 1fr;
    gap: 14px;
    align-items: center;
}

.fg-cache-grid--head[b-cy1odx6r1v] {
    padding: 10px 16px;
    background: var(--ck-surface, #f6f5f1);
    border: 1px solid var(--ck-border, #e4e1d9);
    border-radius: var(--ck-radius-md, 8px) var(--ck-radius-md, 8px) 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ck-text-subtle, #6e6a64);
    font-weight: 600;
}

.fg-cache-grid--row[b-cy1odx6r1v] {
    padding: 13px 16px;
    border: 1px solid var(--ck-border, #e4e1d9);
    border-top: none;
    background: var(--ck-surface-raised, #fbfbf8);
    transition: background-color 120ms ease;
}

.fg-cache-grid--row:last-of-type[b-cy1odx6r1v] {
    border-radius: 0 0 var(--ck-radius-md, 8px) var(--ck-radius-md, 8px);
}

.fg-cache-grid--row:hover[b-cy1odx6r1v] {
    background: var(--ck-surface-high, #ece9e2);
}

/* ── Model name cell ── */
.fg-model-name-cell[b-cy1odx6r1v] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.fg-model-icon[b-cy1odx6r1v] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--ck-accent-tint, #dde8e6);
}

.fg-model-icon--cached[b-cy1odx6r1v] {
    background: var(--ck-surface-high, #ece9e2);
}

.fg-model-name-text[b-cy1odx6r1v] {
    min-width: 0;
}

.fg-model-name-text__primary[b-cy1odx6r1v] {
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--ck-text, #2a2825);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-model-name-text__primary--muted[b-cy1odx6r1v] {
    color: var(--ck-text-muted, #605d57);
}

.fg-model-name-text__sub[b-cy1odx6r1v] {
    font-size: 11px;
    color: var(--ck-text-subtle, #6e6a64);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-model-name-text__sub--warn[b-cy1odx6r1v] {
    color: var(--ck-warning, #c79a52);
}

/* ── Cell variants ── */
.fg-cell-mono[b-cy1odx6r1v] {
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--ck-text-muted, #605d57);
    font-variant-numeric: tabular-nums;
}

.fg-cell-muted[b-cy1odx6r1v] {
    font-size: 12.5px;
    color: var(--ck-text-subtle, #6e6a64);
}

.fg-cell-empty[b-cy1odx6r1v] {
    color: var(--ck-text-disabled, #a8a49c);
}

/* ── Status + action column ── */
.fg-model-actions[b-cy1odx6r1v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ── Inline status badge ── */
.fg-status-inline[b-cy1odx6r1v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
}

.fg-status-dot[b-cy1odx6r1v] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ck-text-disabled, #a8a49c);
    flex: none;
}

/* up / running */
.fg-status-inline--up[b-cy1odx6r1v] {
    color: var(--ck-success, #6f9a6a);
}

.fg-status-inline--up .fg-status-dot[b-cy1odx6r1v] {
    background: var(--ck-success, #6f9a6a);
}

/* idle — amber, NOT alarm red */
.fg-status-inline--idle[b-cy1odx6r1v] {
    color: var(--ck-warning, #c79a52);
}

.fg-status-inline--idle .fg-status-dot[b-cy1odx6r1v] {
    background: var(--ck-warning, #c79a52);
}

/* loading / deploying */
.fg-status-inline--loading[b-cy1odx6r1v] {
    color: var(--ck-info, #4f7c8c);
}

.fg-status-inline--loading .fg-status-dot[b-cy1odx6r1v] {
    background: var(--ck-info, #4f7c8c);
    animation: fg-pulse-b-cy1odx6r1v 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fg-status-inline--loading .fg-status-dot[b-cy1odx6r1v] {
        animation: none;
    }
}

@keyframes fg-pulse-b-cy1odx6r1v {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* unknown */
.fg-status-inline--unknown[b-cy1odx6r1v] {
    color: var(--ck-text-muted, #605d57);
}

/* ── Buttons ── */
.fg-btn[b-cy1odx6r1v] {
    border-radius: 8px;
    padding: 6px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        color 120ms ease;
}

.fg-btn--outline[b-cy1odx6r1v] {
    border: 1px solid var(--ck-border-strong, #dad8d1);
    background: var(--ck-surface-raised, #fbfbf8);
    color: var(--ck-text-muted, #605d57);
}

.fg-btn--outline:hover[b-cy1odx6r1v] {
    border-color: var(--ck-text-disabled, #a8a49c);
    background: var(--ck-surface-high, #ece9e2);
}

.fg-btn--primary[b-cy1odx6r1v] {
    border: 1px solid transparent;
    background: var(--ck-accent, #1c6b66);
    color: var(--ck-accent-contrast, #ffffff);
}

.fg-btn--primary:hover[b-cy1odx6r1v] {
    background: var(--ck-accent-ink, #17605b);
}

/* ── Footnote ── */
.fg-footnote[b-cy1odx6r1v] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--ck-text-subtle, #6e6a64);
    margin-top: var(--ck-space-2, 8px);
    margin-bottom: 0;
}

/* /Components/Pages/Forges/ForgeMonitoringTab.razor.rz.scp.css */
/* ============================================================
   ForgeMonitoringTab — warm Richting-A restyle
   Prefix: fg-   (forge-monitoring scoped)
   Tokens: --ck-* only; no bare hex except mockup-exact warm tints
   ============================================================ */

/* ---- Spacing between stacked card groups ---- */
[b-b5ooappg9f] .ck-grid + .ck-grid,
[b-b5ooappg9f] .ck-grid + .fg-chart-card,
[b-b5ooappg9f] .fg-chart-card + .ck-grid,
[b-b5ooappg9f] .ck-grid + .fg-section-divider,
[b-b5ooappg9f] .fg-section-divider + .ck-grid,
[b-b5ooappg9f] .fg-section-divider + .fg-stat-card {
    margin-top: var(--ck-space-4);
}

/* Forge-scoped stat surface (vLLM-performance row). Deliberately NOT the shared KpiCard:
   these are dense read-outs inside the live monitoring dashboard. See the
   KpiCard-consolidation PR for the rationale. */
.fg-stat-card[b-b5ooappg9f] {
    background-color: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-4) var(--ck-space-5);
    transition:
        border-color var(--ck-duration-normal) var(--ck-ease-default),
        box-shadow var(--ck-duration-normal) var(--ck-ease-default),
        transform var(--ck-duration-normal) var(--ck-ease-default);
}

.fg-stat-card:hover[b-b5ooappg9f] {
    border-color: var(--ck-border-strong);
    box-shadow: var(--ck-shadow-sm);
    transform: translateY(-1px);
}

.fg-stat-card__label[b-b5ooappg9f] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    margin-bottom: var(--ck-space-2);
}

.fg-stat-card__value[b-b5ooappg9f] {
    font-size: var(--ck-text-3xl);
    font-weight: var(--ck-weight-bold);
    color: var(--ck-text);
    line-height: var(--ck-leading-tight);
    letter-spacing: var(--ck-tracking-tight);
}

/* ---- Controls row (Live / Pauzeer + badge + refresh) ---- */
.fg-controls-row[b-b5ooappg9f] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--ck-space-4);
}

.fg-controls-row__spacer[b-b5ooappg9f] {
    flex: 1;
}

.fg-controls-row__refresh[b-b5ooappg9f] {
    color: var(--ck-text-muted);
}

/* ---- Live / Pauzeer segmented pill (WCAG 2.2.2) ---- */
.fg-live-toggle[b-b5ooappg9f] {
    display: inline-flex;
    align-items: center;
    background: var(--ck-surface-high);
    border-radius: var(--ck-radius-lg);
    padding: 3px;
    gap: 2px;
}

.fg-live-toggle__btn[b-b5ooappg9f] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1-5);
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-1-5) var(--ck-space-3);
    cursor: pointer;
    transition:
        background var(--ck-duration-fast) var(--ck-ease-out),
        color var(--ck-duration-fast) var(--ck-ease-out),
        box-shadow var(--ck-duration-fast) var(--ck-ease-out);
    line-height: 1;
}

.fg-live-toggle__btn:focus-visible[b-b5ooappg9f] {
    outline: 2px solid var(--ck-border-focus);
    outline-offset: 1px;
}

.fg-live-toggle__btn--active[b-b5ooappg9f] {
    color: #fff;
    background: var(--ck-accent, #1c6b66);
    box-shadow: 0 1px 3px -1px rgba(20, 75, 71, 0.5);
    font-weight: var(--ck-weight-semibold);
}

/* Pulsing live dot — suppressed at reduced-motion */
.fg-live-dot[b-b5ooappg9f] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: fg-dot-pulse-b-b5ooappg9f 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fg-live-dot[b-b5ooappg9f] {
        animation: none;
    }
}

@keyframes fg-dot-pulse-b-b5ooappg9f {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ---- Chart card (warm surface, low-saliency) ---- */
.fg-chart-card[b-b5ooappg9f] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl);
    padding: var(--ck-space-4) var(--ck-space-5) var(--ck-space-3);
    box-shadow: 0 1px 2px rgba(40, 38, 34, 0.04);
    margin-top: var(--ck-space-4);
}

.fg-chart-card--wide[b-b5ooappg9f] {
    /* spans full row — used when placed outside a grid */
}

.fg-chart-card__header[b-b5ooappg9f] {
    display: flex;
    align-items: baseline;
    gap: var(--ck-space-3);
    justify-content: space-between;
    margin-bottom: var(--ck-space-2);
    flex-wrap: wrap;
}

.fg-chart-card__title[b-b5ooappg9f] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.fg-chart-card__value[b-b5ooappg9f] {
    font-size: var(--ck-text-2xl);
    font-weight: var(--ck-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--ck-text);
    line-height: 1;
}

.fg-chart-card__unit[b-b5ooappg9f] {
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-normal);
    color: var(--ck-text-muted);
    margin-left: 1px;
}

.fg-chart-card__value--stale[b-b5ooappg9f] {
    color: #a8a49b; /* mockup: --ck-text stale */
}

.fg-chart-card__meta[b-b5ooappg9f] {
    display: inline-flex;
    gap: var(--ck-space-4);
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    margin-left: auto;
}

.fg-chart-card__meta strong[b-b5ooappg9f] {
    color: var(--ck-text-subtle);
    font-weight: var(--ck-weight-semibold);
}

.fg-chart-card__overline[b-b5ooappg9f] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wider);
    color: var(--ck-text-muted);
    font-weight: var(--ck-weight-medium);
    margin-bottom: var(--ck-space-2);
}

.fg-chart-card__footer[b-b5ooappg9f] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--ck-space-2);
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.fg-chart-card__footer--stale[b-b5ooappg9f] {
    color: #a8a49b;
}

.fg-chart-card__footer--wide[b-b5ooappg9f] {
    font-size: var(--ck-text-xs);
}

.fg-chart-collecting[b-b5ooappg9f] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    padding: var(--ck-space-4) 0;
    text-align: center;
}

/* ---- Frozen chart overlay (offline state) ---- */
.fg-charts-offline[b-b5ooappg9f] {
    opacity: 0.74;
}

.fg-chart-card--frozen .fg-chart-card__title[b-b5ooappg9f] {
    color: var(--ck-text-subtle);
}

.fg-no-data-tail[b-b5ooappg9f] {
    color: #a47a32; /* amber — not live warning, not alarm-red */
}

/* ---- Offline banner (calm terracotta left-border, not flooded) ----
   Token-driven so it stays calm in both light and dark (never alarm-red flooded). */
.fg-offline-banner[b-b5ooappg9f] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    background: var(--ck-error-subtle);
    border: 1px solid var(--ck-border);
    border-left: 3px solid var(--ck-error);
    border-radius: var(--ck-radius-xl);
    padding: var(--ck-space-3) var(--ck-space-4);
    margin-bottom: var(--ck-space-4);
}

.fg-offline-banner__icon[b-b5ooappg9f] {
    flex: none;
    color: var(--ck-error);
}

.fg-offline-banner__text[b-b5ooappg9f] {
    flex: 1;
    font-size: var(--ck-text-sm);
    color: var(--ck-error);
    line-height: var(--ck-leading-relaxed);
}

.fg-offline-banner__retry[b-b5ooappg9f] {
    flex: none;
}

/* ---- Stale-data divider line (offline) ---- */
.fg-stale-label[b-b5ooappg9f] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin: var(--ck-space-4) 0 var(--ck-space-3);
}

.fg-stale-label__text[b-b5ooappg9f] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.fg-stale-badge[b-b5ooappg9f] {
    white-space: nowrap;
    flex: none;
}

.fg-stale-label__line[b-b5ooappg9f] {
    height: 1px;
    flex: 1;
    background: var(--ck-border);
}

/* ---- Mini stat cards (row C: GPU-temp, Vermogen, Netwerk) ---- */
.fg-mini-stat[b-b5ooappg9f] {
    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-4);
    box-shadow: 0 1px 2px rgba(40, 38, 34, 0.04);
    margin-top: var(--ck-space-4);
}

.fg-mini-stat__header[b-b5ooappg9f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--ck-space-1-5);
}

.fg-mini-stat__label[b-b5ooappg9f] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.fg-mini-stat__value[b-b5ooappg9f] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--ck-text);
}

.fg-mini-stat__value--stale[b-b5ooappg9f] {
    color: #a8a49b;
}

/* Not-available cards are visually dimmed (honest unavailable, not broken) */
.fg-mini-stat--unavailable[b-b5ooappg9f] {
    opacity: 0.65;
}

.fg-unavailable-hint[b-b5ooappg9f] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    display: block;
    margin-top: var(--ck-space-1);
}

/* ---- Section divider (between logical groups) ---- */
.fg-section-divider[b-b5ooappg9f] {
    margin-top: var(--ck-space-6);
    margin-bottom: var(--ck-space-3);
    padding-bottom: var(--ck-space-1);
    border-bottom: 1px solid var(--ck-border);
}
/* /Components/Pages/Forges/ForgeOverviewTab.razor.rz.scp.css */
/* ============================================================
   ForgeOverviewTab — warm Richting-A restyle (MG1)
   Prefix: fg-   · Colours via --ck- tokens only
   ============================================================ */

/* ── Action bar ─────────────────────────────────────────────── */
.fg-action-bar[b-j2deigbxk4] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--ck-space-4, 16px);
}

/* ── KPI row ─────────────────────────────────────────────────── */
.fg-kpi-row[b-j2deigbxk4] {
    margin-bottom: var(--ck-space-4, 14px);
}

/* Forge-scoped dense stat surface. Deliberately NOT the shared KpiCard / ck-stat-card:
   the live forge dashboard runs a compact 26px/tabular-nums treatment with progress bars
   and dot sub-lines. See the KpiCard-consolidation PR for the rationale. */
.fg-kpi-card[b-j2deigbxk4] {
    background-color: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-4) var(--ck-space-5);
    transition:
        border-color var(--ck-duration-normal) var(--ck-ease-default),
        box-shadow var(--ck-duration-normal) var(--ck-ease-default),
        transform var(--ck-duration-normal) var(--ck-ease-default);
}

.fg-kpi-card:hover[b-j2deigbxk4] {
    border-color: var(--ck-border-strong);
    box-shadow: var(--ck-shadow-sm);
    transform: translateY(-1px);
}

.fg-kpi-card__label[b-j2deigbxk4] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    margin-bottom: var(--ck-space-2);
}

.fg-kpi-value[b-j2deigbxk4] {
    font-size: 1.625rem; /* ~26px, tabular-nums */
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ck-text);
    margin-top: 4px;
    line-height: 1.1;
}

.fg-kpi-unit[b-j2deigbxk4] {
    font-size: 0.9375rem; /* 15px */
    font-weight: 400;
    color: var(--ck-text-muted);
    margin-left: 1px;
}

.fg-kpi-stale[b-j2deigbxk4] {
    color: #a8a49b; /* mockup stale dash colour */
}

.fg-kpi-sub[b-j2deigbxk4] {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--ck-text-subtle);
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fg-kpi-sub--ok[b-j2deigbxk4]  { color: var(--ck-success); }
.fg-kpi-sub--warn[b-j2deigbxk4] { color: var(--ck-warning); }

/* Progress bar */
.fg-bar-track[b-j2deigbxk4] {
    height: 5px;
    background: var(--ck-surface-high);
    border-radius: 999px;
    margin-top: 9px;
    overflow: hidden;
}

.fg-bar-fill[b-j2deigbxk4] {
    height: 100%;
    border-radius: 999px;
    transition: width 400ms ease;
}

.fg-bar-fill--accent[b-j2deigbxk4]  { background: var(--ck-accent); }
.fg-bar-fill--warning[b-j2deigbxk4] { background: var(--ck-warning); } /* amber when near-full ≥90% */

@media (prefers-reduced-motion: reduce) {
    .fg-bar-fill[b-j2deigbxk4] { transition: none; }
}

/* Status dot */
.fg-dot[b-j2deigbxk4] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fg-dot--ok[b-j2deigbxk4]   { background: var(--ck-success); }
.fg-dot--warn[b-j2deigbxk4] { background: var(--ck-warning); }

/* ── Row 2 layout ─────────────────────────────────────────────── */
.fg-row2[b-j2deigbxk4] {
    display: flex;
    gap: var(--ck-space-4, 14px);
    margin-bottom: var(--ck-space-4, 14px);
    align-items: flex-start;
}

/* ── Device & connection card ─────────────────────────────────── */
.fg-device-card[b-j2deigbxk4] {
    flex: 1;
    min-width: 0;
}

.fg-device-header[b-j2deigbxk4] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

/* Health / connection status chip */
.fg-conn-chip[b-j2deigbxk4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71875rem; /* 11.5px */
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 9px;
    margin-left: auto;
}

.fg-conn-chip--ok[b-j2deigbxk4] {
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
}

.fg-conn-chip--warn[b-j2deigbxk4] {
    color: var(--ck-warning);
    background: var(--ck-warning-subtle);
}

.fg-conn-chip--error[b-j2deigbxk4] {
    color: var(--ck-error);
    background: var(--ck-error-subtle);
}

.fg-conn-chip--neutral[b-j2deigbxk4] {
    color: var(--ck-text-muted);
    background: var(--ck-surface-high);
}

/* 2-column grid of device info items */
.fg-device-grid[b-j2deigbxk4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 20px;
}

.fg-device-item[b-j2deigbxk4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fg-device-item--full[b-j2deigbxk4] {
    grid-column: 1 / -1;
}

.fg-device-icon[b-j2deigbxk4] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fg-device-icon--accent[b-j2deigbxk4] {
    background: var(--ck-accent-tint);
    color: var(--ck-accent);
}

.fg-device-icon--neutral[b-j2deigbxk4] {
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
}

.fg-device-label[b-j2deigbxk4] {
    font-size: 0.6875rem; /* 11px */
    color: var(--ck-text-muted);
    line-height: 1.2;
}

.fg-device-value[b-j2deigbxk4] {
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 600;
    color: var(--ck-text);
    margin-top: 1px;
}

.fg-device-sub[b-j2deigbxk4] {
    font-weight: 400;
    color: var(--ck-text-muted);
}

/* Component chip row */
.fg-components-row[b-j2deigbxk4] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.fg-comp-chip[b-j2deigbxk4] {
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Device footer — CPU + mono tags */
.fg-device-footer[b-j2deigbxk4] {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--ck-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fg-device-tag[b-j2deigbxk4] {
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 0.71875rem;
    color: var(--ck-text-subtle);
}

/* ── Loaded models card ───────────────────────────────────────── */
.fg-models-card[b-j2deigbxk4] {
    width: 360px;
    flex-shrink: 0;
}

.fg-models-header[b-j2deigbxk4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.fg-model-list[b-j2deigbxk4] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.fg-model-row[b-j2deigbxk4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fg-model-name[b-j2deigbxk4] {
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 0.75rem; /* 12px */
    color: var(--ck-text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-model-status[b-j2deigbxk4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.71875rem;
    font-weight: 600;
    white-space: nowrap;
}

.fg-model-status--ok[b-j2deigbxk4]   { color: var(--ck-success); }
.fg-model-status--warn[b-j2deigbxk4] { color: var(--ck-warning); }

.fg-model-empty[b-j2deigbxk4] {
    font-size: 0.8125rem;
    color: var(--ck-text-subtle);
    padding: 6px 0;
}

/* ── Thermals row ────────────────────────────────────────────── */
.fg-thermals-row[b-j2deigbxk4] {
    margin-bottom: var(--ck-space-4, 14px);
}

.fg-thermal-card[b-j2deigbxk4] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
}

.fg-thermal-icon[b-j2deigbxk4] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fg-thermal-icon--neutral[b-j2deigbxk4] {
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
}

.fg-thermal-label[b-j2deigbxk4] {
    font-size: 0.6875rem; /* 11px */
    color: var(--ck-text-muted);
    line-height: 1.2;
}

.fg-thermal-value[b-j2deigbxk4] {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ck-text);
    margin-top: 1px;
}

.fg-thermal-sub[b-j2deigbxk4] {
    font-size: 0.71875rem;
    font-weight: 500;
    color: var(--ck-success);
    margin-left: 4px;
}

/* ── Charts row ──────────────────────────────────────────────── */
.fg-charts-row[b-j2deigbxk4] {
    margin-bottom: var(--ck-space-4, 14px);
}

.fg-chart-label[b-j2deigbxk4] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-muted);
    margin-bottom: 8px;
}

/* "Collecting metrics" notice */
.fg-collecting-notice[b-j2deigbxk4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ck-text-subtle);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg, 12px);
    padding: 12px 16px;
    margin-bottom: var(--ck-space-4, 14px);
}

/* ── Offline state (1B) ──────────────────────────────────────── */

/* Calm banner: soft terracotta-tinted fill + 3px terracotta left border.
   Token-driven so the strip stays calm in both light and dark (never alarm-red flooded). */
.fg-offline-banner[b-j2deigbxk4] {
    background: var(--ck-error-subtle);
    border: 1px solid var(--ck-border);
    border-left: 3px solid var(--ck-error);
    border-radius: 12px;
    padding: 13px 16px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
}

.fg-offline-banner__text[b-j2deigbxk4] {
    font-size: 0.8125rem;
    color: var(--ck-error);
    flex: 1;
    line-height: 1.5;
}

/* Central calm offline panel (grey icon, no alarm-red) */
.fg-offline-panel[b-j2deigbxk4] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 16px;
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 18px;
}

.fg-offline-icon[b-j2deigbxk4] {
    width: 62px;
    height: 62px;
    border-radius: 17px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    box-shadow: 0 1px 2px rgba(40, 38, 34, 0.04), 0 12px 26px -16px rgba(40, 38, 34, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.fg-offline-title[b-j2deigbxk4] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ck-text);
    margin: 0;
}

.fg-offline-body[b-j2deigbxk4] {
    font-size: 0.84375rem;
    color: var(--ck-text-subtle);
    margin: 9px 0 0;
    max-width: 460px;
    line-height: 1.55;
}

/* Stale values divider */
.fg-stale-header[b-j2deigbxk4] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.fg-stale-label[b-j2deigbxk4] {
    font-size: 0.75rem;
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.fg-not-live-chip[b-j2deigbxk4] {
    font-size: 0.6875rem;
    color: var(--ck-warning);
    background: var(--ck-warning-subtle);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

.fg-stale-rule[b-j2deigbxk4] {
    height: 1px;
    flex: 1;
    background: var(--ck-border);
}

/* Stale KPI row uses opacity per mockup 1B */
.fg-stale-kpis[b-j2deigbxk4] {
    opacity: 0.72;
}

/* Offline panel — eerlijke mini-stats (Laatst gezien · Laatste heartbeat · Pogingen) */
.fg-offline-stats[b-j2deigbxk4] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-6, 26px);
    margin-top: 18px;
}

.fg-offline-stat[b-j2deigbxk4] {
    text-align: center;
}

.fg-offline-stat__label[b-j2deigbxk4] {
    font-size: 0.6875rem; /* 11px */
    color: var(--ck-text-muted);
}

.fg-offline-stat__value[b-j2deigbxk4] {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ck-text);
    margin-top: 2px;
}

.fg-offline-stat__divider[b-j2deigbxk4] {
    width: 1px;
    align-self: stretch;
    background: var(--ck-border);
}

.fg-offline-actions[b-j2deigbxk4] {
    display: flex;
    gap: var(--ck-space-3, 10px);
    margin-top: 20px;
}
/* /Components/Pages/Forges/ModelLibrary.razor.rz.scp.css */
/* Model-toevoeg/bewerk-dialog (MM4 build-to-design) — gegroepeerde veld-layout i.p.v. één lange stack.
   Mockup: Cockpit Management - Forge-modals.dc.html → B · Modelbibliotheek. Warme --ck-tokens. */
.mll-form[b-ryeif9qjy8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.mll-form__grid[b-ryeif9qjy8] {
    display: grid;
    gap: 11px;
}

.mll-form__grid--3[b-ryeif9qjy8] {
    grid-template-columns: 1fr 1fr 1fr;
}

.mll-form__grid--2[b-ryeif9qjy8] {
    grid-template-columns: 1fr 1.4fr;
}

/* HF-model-ID — monospace zodat de repo/model-ID leesbaar uitlijnt */
.mll-form__mono[b-ryeif9qjy8]  input {
    font-family: var(--ck-font-mono, 'Spline Sans Mono', ui-monospace, monospace);
    font-size: 12.5px;
}

/* goedgekeurd/geblokkeerd + scope op één warme greige strip */
.mll-form__flags[b-ryeif9qjy8] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--ck-surface-high);
    border-radius: var(--ck-radius-lg, 10px);
    padding: 8px 14px;
}

.mll-form__scope[b-ryeif9qjy8] {
    margin-left: auto;
    min-width: 220px;
}

@media (max-width: 600px) {
    .mll-form__grid--3[b-ryeif9qjy8],
    .mll-form__grid--2[b-ryeif9qjy8] {
        grid-template-columns: 1fr;
    }

    .mll-form__scope[b-ryeif9qjy8] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Pages/Forges/Register.razor.rz.scp.css */
/* Forge-registratie (R5) — warme Richting-A redesign.
   Bron: docs/proposals/immersive-design-kit/designs/Cockpit Management - Forge-flow.dc.html (#1593)
   Tokens: --ck-* (src/Shared/Ratho.Shared.UI/wwwroot/css/tokens). Status-kleuren LOCKED:
   offline/verloop = amber (--ck-warning), nooit alarm-rood. */

/* ===== Step indicator ===== */
.reg-steps[b-nmizh87p2o] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 20px;
    flex-wrap: wrap;
}

.reg-step[b-nmizh87p2o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ck-text-subtle);
    font-weight: 500;
}

.reg-step--active[b-nmizh87p2o] {
    color: var(--ck-accent-ink);
    font-weight: 600;
}

.reg-step--done[b-nmizh87p2o] {
    color: var(--ck-text-muted);
}

.reg-step__dot[b-nmizh87p2o] {
    width: 18px;
    height: 18px;
    border-radius: var(--ck-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    background: var(--ck-surface-high);
    color: var(--ck-text-subtle);
}

.reg-step--active .reg-step__dot[b-nmizh87p2o] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.reg-step--done .reg-step__dot[b-nmizh87p2o] {
    background: var(--ck-success-subtle);
    color: var(--ck-success);
}

.reg-step__bar[b-nmizh87p2o] {
    width: 18px;
    height: 1px;
    background: var(--ck-border-strong);
}

/* ===== Method cards (1A) ===== */
.reg-method[b-nmizh87p2o] {
    height: 100%;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-2xl);
    padding: 22px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.reg-method:hover[b-nmizh87p2o],
.reg-method:focus-visible[b-nmizh87p2o] {
    border-color: var(--ck-accent-soft);
    box-shadow: 0 10px 26px -16px rgba(40, 38, 34, .22);
    transform: translateY(-2px);
    outline: none;
}

.reg-method--recommended[b-nmizh87p2o] {
    border-color: var(--ck-accent);
    box-shadow: 0 0 0 3px var(--ck-accent-glow), 0 10px 26px -16px rgba(40, 38, 34, .22);
}

.reg-method__icon[b-nmizh87p2o] {
    width: 46px;
    height: 46px;
    border-radius: var(--ck-radius-xl);
    background: var(--ck-accent-tint);
    color: var(--ck-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-method__icon--neutral[b-nmizh87p2o] {
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
}

.reg-method__icon[b-nmizh87p2o]  .mud-icon-root {
    font-size: 23px;
}

.reg-method__title[b-nmizh87p2o] {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ck-text);
    margin-top: 15px;
}

.reg-method__hint[b-nmizh87p2o] {
    font-size: 12px;
    font-family: var(--ck-font-mono);
    color: var(--ck-accent-ink);
    margin-top: 4px;
}

.reg-method__desc[b-nmizh87p2o] {
    font-size: 13px;
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 10px 0 0;
}

.reg-method__badges[b-nmizh87p2o] {
    display: flex;
    gap: 7px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.reg-method__footnote[b-nmizh87p2o] {
    font-size: 12.5px;
    color: var(--ck-text-subtle);
    margin: 16px 0 0;
}

/* ===== Badges ===== */
.reg-badge[b-nmizh87p2o] {
    font-size: 11px;
    color: var(--ck-text-muted);
    background: var(--ck-surface-high);
    border-radius: var(--ck-radius-md);
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reg-badge--ok[b-nmizh87p2o] {
    color: var(--ck-success);
    background: var(--ck-success-subtle);
    font-weight: 600;
}

.reg-badge--dot[b-nmizh87p2o]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--ck-radius-full);
    background: var(--ck-success);
}

/* ===== Headless 2-column split (1C) ===== */
.reg-split[b-nmizh87p2o] {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.reg-split__form[b-nmizh87p2o] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 540px;
}

.reg-split__result[b-nmizh87p2o] {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 960px) {
    .reg-split[b-nmizh87p2o] {
        flex-direction: column;
    }

    .reg-split__form[b-nmizh87p2o] {
        max-width: none;
        width: 100%;
    }
}

/* ===== Generated result block ===== */
.reg-result[b-nmizh87p2o] {
    margin-top: 14px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl);
    padding: 18px 20px;
}

.reg-result__head[b-nmizh87p2o] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 27px;
    margin-bottom: 11px;
}

.reg-result__meta[b-nmizh87p2o] {
    font-size: 12px;
    color: var(--ck-text-subtle);
}

.reg-result__secure[b-nmizh87p2o] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    font-size: 12px;
    color: var(--ck-text-subtle);
}

.reg-result__secure[b-nmizh87p2o]  .mud-icon-root {
    font-size: 15px;
    color: var(--ck-success);
}

/* ===== Field + label + hint ===== */
.reg-field[b-nmizh87p2o] {
    display: flex;
    flex-direction: column;
}

.reg-field__label[b-nmizh87p2o] {
    font-size: 12px;
    color: var(--ck-text-muted);
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.reg-field__hint[b-nmizh87p2o] {
    font-size: 11.5px;
    color: var(--ck-text-subtle);
    margin-top: 7px;
}

/* ===== Priority +/- stepper ===== */
.reg-stepper[b-nmizh87p2o] {
    display: flex;
    align-items: center;
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-lg);
    overflow: hidden;
    background: var(--ck-surface-raised);
    max-width: 160px;
}

.reg-stepper__btn[b-nmizh87p2o] {
    border: none;
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    width: 40px;
    height: 42px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s ease;
}

.reg-stepper__btn:hover:not(:disabled)[b-nmizh87p2o] {
    background: var(--ck-border-strong);
}

.reg-stepper__btn:disabled[b-nmizh87p2o] {
    color: var(--ck-text-disabled);
    cursor: not-allowed;
}

.reg-stepper__val[b-nmizh87p2o] {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-text);
    font-variant-numeric: tabular-nums;
}

/* ===== Segmented toggle (connection mode) ===== */
.reg-seg[b-nmizh87p2o] {
    display: flex;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 4px;
    gap: 3px;
}

.reg-seg__opt[b-nmizh87p2o] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ck-text-subtle);
    font: inherit;
    font-size: 13px;
    padding: 9px;
    border-radius: var(--ck-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color .15s ease, color .15s ease;
}

.reg-seg__opt--active[b-nmizh87p2o] {
    color: var(--ck-accent-ink);
    background: var(--ck-surface-raised);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(40, 38, 34, .08);
}

.reg-seg__opt:disabled[b-nmizh87p2o] {
    color: var(--ck-text-disabled);
    cursor: not-allowed;
}

.reg-seg__opt[b-nmizh87p2o]  .mud-icon-root {
    font-size: 16px;
}

/* ===== Code / token / link blocks ===== */
.reg-code[b-nmizh87p2o] {
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: 11px 13px;
    font-size: 12.5px;
    color: var(--ck-text);
    font-family: var(--ck-font-mono);
}

.reg-code--link[b-nmizh87p2o] {
    line-height: 1.5;
    word-break: break-all;
}

.reg-code--inline[b-nmizh87p2o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reg-code__text[b-nmizh87p2o] {
    word-break: break-all;
}

.reg-code__copy[b-nmizh87p2o] {
    border: 1px solid var(--ck-border-strong);
    background: var(--ck-surface-raised);
    color: var(--ck-text-muted);
    border-radius: var(--ck-radius-sm);
    padding: 5px 7px;
    cursor: pointer;
    flex: none;
    display: inline-flex;
    align-items: center;
}

.reg-code__copy:hover[b-nmizh87p2o] {
    border-color: var(--ck-text-disabled);
}

/* ===== CLI block ===== */
.reg-cli[b-nmizh87p2o] {
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    overflow: hidden;
}

.reg-cli__bar[b-nmizh87p2o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

.reg-cli__shell[b-nmizh87p2o] {
    font-size: 11px;
    font-family: var(--ck-font-mono);
    color: var(--ck-text-subtle);
}

.reg-cli__copy[b-nmizh87p2o] {
    border: none;
    background: transparent;
    color: var(--ck-accent-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reg-cli__copy[b-nmizh87p2o]  .mud-icon-root {
    font-size: 13px;
}

.reg-cli__code[b-nmizh87p2o] {
    margin: 0;
    padding: 13px 14px;
    font-family: var(--ck-font-mono);
    font-size: 12.5px;
    color: var(--ck-text-muted);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
}

.reg-cli__var[b-nmizh87p2o] {
    color: var(--ck-accent-ink);
}

.reg-cli__str[b-nmizh87p2o] {
    color: var(--ck-text);
}

.reg-cli__cmd[b-nmizh87p2o] {
    color: var(--ck-accent-ink);
    font-weight: 500;
}

/* ===== Notes (info / warning / error rails) — never alarm-red for non-security ===== */
.reg-note[b-nmizh87p2o] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border-radius: var(--ck-radius-lg);
    padding: 12px 14px;
    margin-top: 15px;
    font-size: 12.5px;
    line-height: 1.5;
}

.reg-note[b-nmizh87p2o]  .mud-icon-root {
    flex: none;
    margin-top: 1px;
    font-size: 17px;
}

.reg-note--info[b-nmizh87p2o] {
    background: var(--ck-accent-tint);
    border: 1px solid var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.reg-note--info[b-nmizh87p2o]  .mud-icon-root {
    color: var(--ck-accent-ink);
}

.reg-note--warning[b-nmizh87p2o] {
    background: var(--ck-warning-subtle);
    border: 1px solid var(--ck-warning-subtle);
    border-left: 3px solid var(--ck-warning);
    color: var(--ck-text-muted);
}

.reg-note--warning[b-nmizh87p2o]  .mud-icon-root {
    color: var(--ck-warning);
}

.reg-note--error[b-nmizh87p2o] {
    background: var(--ck-error-subtle);
    border: 1px solid var(--ck-error-subtle);
    border-left: 3px solid var(--ck-error);
    color: var(--ck-text-muted);
}

.reg-note--error[b-nmizh87p2o]  .mud-icon-root {
    color: var(--ck-error);
}

/* ===== Empty state (result column, before generate) ===== */
.reg-empty[b-nmizh87p2o] {
    margin-top: 14px;
    border: 1px dashed var(--ck-border-strong);
    border-radius: var(--ck-radius-xl);
    padding: 40px 24px;
    text-align: center;
    color: var(--ck-text-subtle);
}

.reg-empty[b-nmizh87p2o]  .reg-empty__icon {
    font-size: 34px;
    color: var(--ck-text-disabled);
}

.reg-empty__title[b-nmizh87p2o] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-text-muted);
    margin-top: 10px;
}

.reg-empty__text[b-nmizh87p2o] {
    font-size: 12.5px;
    margin-top: 4px;
}

/* ===== Reduced-motion guard ===== */
@media (prefers-reduced-motion: reduce) {
    .reg-method[b-nmizh87p2o] {
        transition: none;
    }

    .reg-method:hover[b-nmizh87p2o],
    .reg-method:focus-visible[b-nmizh87p2o] {
        transform: none;
    }
}
/* /Components/Pages/PlatformAdmin/DataSources/List.razor.rz.scp.css */
/* Databronnen-pagina · warme lege-staten (Richting-A).
   De tabel/kaarten erven de gedeelde --ck- warme herbouw (#1347); dit bestand
   vervangt alleen de kil-blauwe MudAlert-Info-meldingen door warme kaarten en
   gebruikt --ck--tokens met hex-fallbacks (sage-ink heeft geen token → warme hex). */

.ds-note[b-e3t892kggg] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-top: 14px;
    background: var(--ck-surface-raised, #fbfbf8);
    border: 1px solid var(--ck-border, #e7e5de);
    border-radius: var(--ck-radius-lg, 14px);
}

.ds-note__icon[b-e3t892kggg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    background: var(--ck-surface-high, #f0efe9);
    color: var(--ck-text-subtle, #918e87);
}

.ds-note__body[b-e3t892kggg] {
    margin: 0;
    align-self: center;
    font-size: var(--ck-text-md, 14px);
    line-height: 1.55;
    color: var(--ck-text-muted, #605d57);
}

/* Sage/greige variant — "platform-standaard geldt", kalm, nooit alarm. */
.ds-note--policy[b-e3t892kggg] {
    background: #f3f5f0;
    border-color: #dde7d6;
}

.ds-note--policy .ds-note__icon[b-e3t892kggg] {
    background: #e7efe2;
    color: var(--ck-success, #6f9a6a);
}

.ds-note--policy .ds-note__body[b-e3t892kggg] {
    color: #43603f;
}

/* De kaarten gebruiken de globale ck-animate-in; expliciete lokale guard conform conventie. */
@media (prefers-reduced-motion: reduce) {
    .ds-note[b-e3t892kggg] {
        animation: none;
    }
}
/* /Components/Pages/PlatformAdmin/DataSources/RagProjectionDialog.razor.rz.scp.css */
/* RAG-projectie · warme Richting-A — veld-projectie (Opnemen/Maskeren/Uitsluiten) + roadmap-noot.
   Bron: IDENTITY.md + --ck- tokens. Maskeren = #1642 (live). PII-badges (#1643) + preview (#1644) blijven gated. */

/* Roadmap-noot: kalm, informatief — geen alarm. Petrol-accent, geen rood. */
.rag-soon[b-div1lhgg8p] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ck-accent-tint, #dde8e6);
    border: 1px solid var(--ck-accent-soft, #9ec5c1);
    border-radius: var(--ck-radius-lg, 10px);
    color: var(--ck-accent-ink, #17605b);
    font-size: var(--ck-text-md, 14px);
    line-height: 1.5;
}

.rag-soon .mud-icon-root[b-div1lhgg8p] {
    margin-top: 1px;
    flex: none;
    color: var(--ck-accent-ink, #17605b);
}

/* Veld-projectie-sectie */
.rag-fields[b-div1lhgg8p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rag-fields__head[b-div1lhgg8p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rag-fields__title[b-div1lhgg8p] {
    font-size: var(--ck-text-md, 14px);
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text, #2a2825);
}

.rag-fields__status[b-div1lhgg8p] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ck-text-muted, #79756f);
}

.rag-fields__source[b-div1lhgg8p] {
    font-size: 12px;
    color: var(--ck-text-subtle, #918e87);
}

.rag-fields__hint[b-div1lhgg8p] {
    font-size: 12px;
    color: var(--ck-text-muted, #79756f);
    line-height: 1.45;
}

/* Per-veld rijen */
.rag-fieldlist[b-div1lhgg8p] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rag-field[b-div1lhgg8p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 13px;
    background: var(--ck-surface-raised, #fbfbf8);
    border: 1px solid var(--ck-border, #e7e5de);
    border-radius: var(--ck-radius-lg, 10px);
    transition: border-color .18s ease, background-color .18s ease;
}

/* Opgenomen veld = zachte petrol-rand, leest als "actief" zonder alarm. */
.rag-field--in[b-div1lhgg8p] {
    border-color: var(--ck-accent-soft, #9ec5c1);
    background: var(--ck-accent-tint, #dde8e6);
}

/* Gemaskeerd veld = wel opgenomen maar geredigeerd → zelfde warme tint + een petrol-rail links als
   "beschermd"-signaal. Geen alarm: maskeren is een keuze, geen security-grens. */
.rag-field--mask[b-div1lhgg8p] {
    border-color: var(--ck-accent-soft, #9ec5c1);
    background: var(--ck-accent-tint, #dde8e6);
    box-shadow: inset 3px 0 0 var(--ck-accent, #1c6b66);
}

/* Korte uitleg onder de veldnaam wanneer het veld op Maskeren staat. */
.rag-field__masknote[b-div1lhgg8p] {
    display: block;
    font-size: 11px;
    color: var(--ck-accent-ink, #17605b);
    margin-top: 2px;
}

.rag-field__meta[b-div1lhgg8p] {
    flex: 1;
    min-width: 0;
}

.rag-field__key[b-div1lhgg8p] {
    display: block;
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    font-size: 13px;
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text, #2a2825);
    overflow: hidden;
    text-overflow: ellipsis;
}

.rag-field__type[b-div1lhgg8p] {
    display: block;
    font-size: 11px;
    color: var(--ck-text-subtle, #918e87);
    margin-top: 1px;
}

/* 3-staps segment — Opnemen / Maskeren / Uitsluiten (#1642). */
.rag-seg[b-div1lhgg8p] {
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 3px;
    background: var(--ck-surface, #f6f5f1);
    border: 1px solid var(--ck-border, #e7e5de);
    border-radius: 9px;
}

.rag-seg__opt[b-div1lhgg8p] {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    color: var(--ck-text-subtle, #918e87);
    padding: 5px 12px;
    border-radius: 6px;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.rag-seg__opt.is-active[b-div1lhgg8p] {
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-accent-ink, #17605b);
    background: var(--ck-surface-raised, #fbfbf8);
    box-shadow: 0 1px 2px rgba(40, 38, 34, .08);
}

/* Maskeren actief = gevulde petrol-pil ("beschermend" transform), onderscheidt zich van het neutrale
   Opnemen-actief. Moet NA .rag-seg__opt.is-active staan (gelijke specificiteit → bronvolgorde wint). */
.rag-seg__opt--mask.is-active[b-div1lhgg8p] {
    color: #fff;
    background: var(--ck-accent, #1c6b66);
    box-shadow: 0 1px 2px rgba(40, 38, 34, .12);
}

.rag-seg__opt:disabled[b-div1lhgg8p] {
    cursor: not-allowed;
    opacity: .55;
}

.rag-seg__opt:focus-visible[b-div1lhgg8p] {
    outline: 2px solid var(--ck-accent-ink, #17605b);
    outline-offset: 2px;
}

/* ============================================================
   Herontwerp · accordion + chip-input + warme banner/lege-staat
   Bron: IDENTITY.md + --ck- tokens. Amber-ink (#7a5c28/#917345) heeft
   geen token → warme hex, conform de "hex waar geen token"-conventie.
   ============================================================ */

/* Warme AVG-banner — kalm amber/greige, geen alarm-rood. */
.rag-avg[b-div1lhgg8p] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    background: var(--ck-warning-subtle, rgba(199, 154, 82, .16));
    border: 1px solid rgba(199, 154, 82, .42);
    border-radius: var(--ck-radius-lg, 12px);
}

.rag-avg__icon[b-div1lhgg8p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background: rgba(199, 154, 82, .22);
    color: #a47a32;
}

.rag-avg__body[b-div1lhgg8p] {
    flex: 1;
    min-width: 0;
}

.rag-avg__title[b-div1lhgg8p] {
    font-size: 13px;
    font-weight: var(--ck-weight-semibold, 600);
    color: #7a5c28;
}

.rag-avg__text[b-div1lhgg8p] {
    font-size: 12px;
    color: #917345;
    line-height: 1.5;
    margin-top: 1px;
}

/* Warme lege-staat — geen kil-blauwe MudAlert. */
.rag-empty[b-div1lhgg8p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 28px 22px;
    background: var(--ck-surface-raised, #fbfbf8);
    border: 1px solid var(--ck-border, #e7e5de);
    border-radius: var(--ck-radius-lg, 13px);
}

.rag-empty__icon[b-div1lhgg8p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: var(--ck-surface-high, #f0efe9);
    color: var(--ck-text-subtle, #a8a49b);
}

.rag-empty__title[b-div1lhgg8p] {
    font-size: 14px;
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text, #47443f);
}

.rag-empty__text[b-div1lhgg8p] {
    font-size: 12.5px;
    color: var(--ck-text-subtle, #918e87);
    line-height: 1.5;
    max-width: 330px;
}

/* Accordion-lijst */
.rag-list[b-div1lhgg8p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rag-erow[b-div1lhgg8p] {
    background: var(--ck-surface-raised, #fbfbf8);
    border: 1px solid var(--ck-border, #e7e5de);
    border-radius: var(--ck-radius-lg, 12px);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.rag-erow--off[b-div1lhgg8p] {
    background: var(--ck-surface, #f6f5f1);
}

.rag-erow--open[b-div1lhgg8p] {
    border-color: var(--ck-accent-soft, #9ec5c1);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb, 28, 107, 102), .07), 0 10px 26px -18px rgba(40, 38, 34, .3);
}

.rag-erow__head[b-div1lhgg8p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
}

.rag-erow--open .rag-erow__head[b-div1lhgg8p] {
    background: rgba(var(--ck-accent-rgb, 28, 107, 102), .05);
}

.rag-erow__head:focus-visible[b-div1lhgg8p] {
    outline: 2px solid var(--ck-accent-ink, #17605b);
    outline-offset: -2px;
}

.rag-erow__name[b-div1lhgg8p] {
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    font-size: 13px;
    font-weight: var(--ck-weight-semibold, 600);
    color: var(--ck-text, #2a2825);
    min-width: 96px;
}

.rag-erow--off .rag-erow__name[b-div1lhgg8p] {
    color: var(--ck-text-subtle, #918e87);
}

.rag-erow__toggle[b-div1lhgg8p] {
    flex: none;
    display: inline-flex;
}

.rag-erow__spacer[b-div1lhgg8p] {
    flex: 1;
}

.rag-erow__summary[b-div1lhgg8p] {
    font-size: 11.5px;
    color: var(--ck-text-subtle, #918e87);
    white-space: nowrap;
}

.rag-erow__chev[b-div1lhgg8p] {
    display: inline-flex;
    flex: none;
    color: var(--ck-text-subtle, #a8a49b);
    transition: transform .2s ease, color .2s ease;
}

.rag-erow--open .rag-erow__chev[b-div1lhgg8p] {
    transform: rotate(180deg);
    color: var(--ck-accent, #1c6b66);
}

/* schema / geen-schema badge in de rij */
.rag-badge[b-div1lhgg8p] {
    font-size: 11px;
    font-weight: var(--ck-weight-semibold, 600);
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
    flex: none;
}

.rag-badge--schema[b-div1lhgg8p] {
    color: var(--ck-accent-ink, #17605b);
    background: var(--ck-accent-tint, #dde8e6);
}

.rag-badge--noschema[b-div1lhgg8p] {
    color: #7a5c28;
    background: rgba(199, 154, 82, .18);
}

/* uitgeklapte body */
.rag-erow__body[b-div1lhgg8p] {
    padding: 2px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: ragExpand-b-div1lhgg8p .22s ease both;
}

@keyframes ragExpand-b-div1lhgg8p {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* WAT- en HOE-kaarten */
.rag-card[b-div1lhgg8p] {
    background: var(--ck-surface, #f8f7f3);
    border: 1px solid var(--ck-border, #ece9e2);
    border-radius: var(--ck-radius-lg, 12px);
    padding: 14px 15px;
}

.rag-card__head[b-div1lhgg8p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.rag-card__label[b-div1lhgg8p] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ck-text-subtle, #9d9a92);
    font-weight: var(--ck-weight-semibold, 600);
}

/* Chip-input (geen schema → Autotask-hoofd-ervaring) */
.rag-chip__lead[b-div1lhgg8p] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rag-chip__badge[b-div1lhgg8p] {
    font-size: 11px;
    color: #7a5c28;
    background: rgba(199, 154, 82, .16);
    border: 1px solid rgba(199, 154, 82, .4);
    border-radius: 6px;
    padding: 2px 7px;
}

.rag-chipbox[b-div1lhgg8p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    background: var(--ck-surface-raised, #fbfbf8);
    border: 1.5px solid var(--ck-border, #e7e5de);
    border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.rag-chipbox:focus-within[b-div1lhgg8p] {
    border-color: var(--ck-accent-soft, #9ec5c1);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb, 28, 107, 102), .1);
}

.rag-chipbox--disabled[b-div1lhgg8p] {
    opacity: .6;
    pointer-events: none;
}

.rag-chipbox__input[b-div1lhgg8p] {
    flex: 1;
    min-width: 120px;
    border: none;
    background: none;
    outline: none;
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    font-size: 12.5px;
    color: var(--ck-text, #36342f);
    padding: 4px 2px;
}

.rag-chipbox__input[b-div1lhgg8p]::placeholder {
    color: var(--ck-text-disabled, #bdb9b0);
}

.rag-chip[b-div1lhgg8p] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    font-size: 12.5px;
    color: var(--ck-accent-ink, #17605b);
    background: var(--ck-accent-tint, #dde8e6);
    border: 1px solid var(--ck-accent-soft, #9ec5c1);
    border-radius: 7px;
    padding: 4px 5px 4px 9px;
}

.rag-chip__x[b-div1lhgg8p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--ck-accent-ink, #17605b);
    transition: background-color .18s ease;
}

.rag-chip__x:hover[b-div1lhgg8p] {
    background: rgba(var(--ck-accent-rgb, 28, 107, 102), .16);
}

.rag-chip__x:disabled[b-div1lhgg8p] {
    cursor: not-allowed;
    opacity: .5;
}

.rag-chip__x[b-div1lhgg8p]  .mud-icon-root {
    font-size: 13px;
}

/* Suggestie-chips — generieke gemak-velden, GÉÉN ontdekt schema. */
.rag-suggs[b-div1lhgg8p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

.rag-suggs__lbl[b-div1lhgg8p] {
    font-size: 11px;
    color: var(--ck-text-subtle, #9d9a92);
}

.rag-suggs__hint[b-div1lhgg8p] {
    font-size: 11px;
    color: var(--ck-text-disabled, #a8a49b);
    margin-left: auto;
}

.rag-sugg[b-div1lhgg8p] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--ck-font-mono, 'Spline Sans Mono', monospace);
    font-size: 11.5px;
    color: var(--ck-text-muted, #605d57);
    background: var(--ck-surface-high, #f0efe9);
    border: 1px solid var(--ck-border, #e3e1da);
    border-radius: 7px;
    padding: 3px 9px 3px 6px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.rag-sugg:hover[b-div1lhgg8p] {
    border-color: var(--ck-accent-soft, #9ec5c1);
    color: var(--ck-accent-ink, #17605b);
    background: var(--ck-surface-raised, #fbfbf8);
}

.rag-sugg:disabled[b-div1lhgg8p] {
    cursor: not-allowed;
    opacity: .5;
}

.rag-sugg[b-div1lhgg8p]  .mud-icon-root {
    font-size: 13px;
}

/* Label/Bovenliggend-veld · acties · meta */
.rag-lp[b-div1lhgg8p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.rag-actions[b-div1lhgg8p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rag-meta[b-div1lhgg8p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Voet — "X van Y entiteiten aan" links, knoppen rechts. */
.rag-footcount[b-div1lhgg8p] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    font-size: 11.5px;
    color: var(--ck-text-subtle, #918e87);
}

.rag-footcount__dot[b-div1lhgg8p] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-success, #6f9a6a);
}

@media (prefers-reduced-motion: reduce) {
    .rag-field[b-div1lhgg8p],
    .rag-seg__opt[b-div1lhgg8p],
    .rag-erow[b-div1lhgg8p],
    .rag-erow__chev[b-div1lhgg8p],
    .rag-chipbox[b-div1lhgg8p],
    .rag-chip__x[b-div1lhgg8p],
    .rag-sugg[b-div1lhgg8p] {
        transition: none;
    }

    .rag-erow__body[b-div1lhgg8p] {
        animation: none;
    }
}
/* /Components/Pages/PlatformAdmin/Insights/DeletePolicyConfirmDialog.razor.rz.scp.css */
/* Verwijder-bevestiging body (#1565) — warme let-op-regel, amber, geen alarm-rood. */
.dpc[b-fjrr4l7d68] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ck-warning-subtle);
    border: 1px solid var(--ck-warning-subtle);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 13px;
    color: var(--ck-text);
    line-height: 1.5;
}

.dpc[b-fjrr4l7d68]  .mud-icon-root {
    color: var(--ck-warning);
    flex: none;
    font-size: 18px;
    margin-top: 1px;
}
/* /Components/Pages/PlatformAdmin/Insights/VerbruikFacturatie.razor.rz.scp.css */
/* Verbruik & facturatie — warme Richting-A surface (#1564 / #1565) */

.vf-scope[b-vnsmfwbjt0] { display:flex; align-items:center; gap:12px; }
.vf-live[b-vnsmfwbjt0] {
    display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500;
    color:var(--ck-success,#5e7d59); background:color-mix(in srgb, var(--ck-success,#6f9a6a) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--ck-success,#6f9a6a) 30%, transparent);
    border-radius:999px; padding:5px 11px; white-space:nowrap;
}
.vf-dot[b-vnsmfwbjt0] { width:7px; height:7px; border-radius:50%; background:var(--ck-success,#6f9a6a); flex:none; }
.vf-dot.warn[b-vnsmfwbjt0] { background:var(--ck-warning,#c79a52); }

.vf-tabs[b-vnsmfwbjt0] { margin-top:8px; }

/* layout */
.vf-split[b-vnsmfwbjt0] { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.vf-main[b-vnsmfwbjt0] { min-width:0; display:flex; flex-direction:column; gap:16px; }
.vf-rail[b-vnsmfwbjt0] { display:flex; flex-direction:column; gap:16px; }
.vf-kpis[b-vnsmfwbjt0] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vf-breakdowns[b-vnsmfwbjt0] { grid-template-columns:1fr 1fr; }
@media (max-width:1180px) {
    .vf-split[b-vnsmfwbjt0] { grid-template-columns:1fr; }
    .vf-kpis[b-vnsmfwbjt0] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
    .vf-breakdowns[b-vnsmfwbjt0] { grid-template-columns:1fr; }
}

/* cards & headings */
.vf-card-head[b-vnsmfwbjt0] { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.vf-card-title[b-vnsmfwbjt0] { font-size:15px; font-weight:600; color:var(--ck-text,#36342f); }
.vf-card-sub[b-vnsmfwbjt0] { font-size:11.5px; color:var(--ck-text-muted,#918e87); margin-top:2px; }
.vf-muted[b-vnsmfwbjt0] { color:var(--ck-text-muted,#918e87); }
.vf-strong[b-vnsmfwbjt0] { font-weight:600; color:var(--ck-text,#36342f); }
.vf-mono[b-vnsmfwbjt0] { font-family:'Spline Sans Mono','SF Mono',ui-monospace,monospace; font-size:12.5px; }
.vf-sm[b-vnsmfwbjt0] { font-size:11px; }
.vf-unit[b-vnsmfwbjt0] { font-size:14px; color:var(--ck-text-muted,#918e87); font-weight:500; margin-left:3px; }
.ta-r[b-vnsmfwbjt0] { text-align:right; }
.mb-3[b-vnsmfwbjt0] { margin-bottom:12px; }
.mt-4[b-vnsmfwbjt0] { margin-top:16px; }

/* KPI */
.vf-kpi-sub[b-vnsmfwbjt0] { font-size:11.5px; color:var(--ck-text-muted,#918e87); margin-top:3px; }
/* .vf-kpi-trend retired — the KPI-row trend now renders through the shared KpiCard.
   .vf-trend is still used by the period-comparison rail below. */
.vf-trend.up[b-vnsmfwbjt0] { color:var(--ck-success,#5e7d59); }
.vf-trend.down[b-vnsmfwbjt0] { color:var(--ck-text-muted,#918e87); }
.vf-budget-chip[b-vnsmfwbjt0] {
    display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; margin-top:5px;
    border-radius:999px; padding:2px 9px;
}
.vf-budget-chip.ok[b-vnsmfwbjt0] { color:var(--ck-success,#5e7d59); background:color-mix(in srgb, var(--ck-success,#6f9a6a) 14%, transparent); }
.vf-budget-chip.warn[b-vnsmfwbjt0] { color:#8a6a2f; background:color-mix(in srgb, var(--ck-warning,#c79a52) 18%, transparent); }

/* forecast chart */
.vf-chart-card[b-vnsmfwbjt0] { }
.vf-legend[b-vnsmfwbjt0] { display:flex; gap:14px; font-size:11.5px; color:var(--ck-text-muted,#79756f); }
.vf-legend span[b-vnsmfwbjt0] { display:inline-flex; align-items:center; gap:6px; }
.vf-sw[b-vnsmfwbjt0] { width:11px; height:11px; border-radius:3px; display:inline-block; }
.vf-sw-dash[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-accent,#1c6b66) 12%, transparent); border:1px dashed var(--ck-accent-soft,#9ec5c1); }
.vf-daily[b-vnsmfwbjt0] { display:flex; align-items:flex-end; gap:3px; height:190px; margin-top:14px; }
.vf-daily-bar[b-vnsmfwbjt0] { flex:1; background:var(--ck-accent-soft,#9ec5c1); border-radius:3px 3px 0 0; min-height:2px; transition:height .3s ease; }
.vf-daily-bar.proj[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-accent,#1c6b66) 10%, transparent); border:1px dashed var(--ck-accent-soft,#9ec5c1); border-bottom:none; }
.vf-noforecast[b-vnsmfwbjt0] {
    display:flex; align-items:center; gap:14px; padding:22px; margin-top:8px;
    border:1px dashed var(--ck-border,#d6d3ca); border-radius:12px;
    background:color-mix(in srgb, var(--ck-warning,#c79a52) 6%, transparent);
    color:var(--ck-text-muted,#79756f); font-size:12.5px; line-height:1.4;
}
.vf-noforecast .mud-icon-root[b-vnsmfwbjt0] { color:var(--ck-text-muted,#a8a49b); }

/* breakdown donut */
.vf-breakdown[b-vnsmfwbjt0] { display:flex; align-items:center; gap:20px; }
.vf-donut[b-vnsmfwbjt0] { position:relative; width:118px; height:118px; border-radius:50%; flex:none; }
.vf-donut-hole[b-vnsmfwbjt0] {
    position:absolute; inset:22px; background:var(--ck-surface,#fbfbf8); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; color:var(--ck-text,#36342f);
}
.vf-legend-list[b-vnsmfwbjt0] { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.vf-legend-row[b-vnsmfwbjt0] { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.vf-legend-label[b-vnsmfwbjt0] { flex:1; color:var(--ck-text,#47443f); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* tables */
.vf-grid-table[b-vnsmfwbjt0] { width:100%; border-collapse:collapse; font-size:12.5px; }
.vf-grid-table thead th[b-vnsmfwbjt0] {
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ck-text-muted,#9d9a92); font-weight:600; padding:9px 10px;
    background:color-mix(in srgb, var(--ck-border,#f0efe9) 40%, transparent);
    border-top:1px solid var(--ck-border,#e7e5de); border-bottom:1px solid var(--ck-border,#e7e5de);
}
.vf-grid-table tbody td[b-vnsmfwbjt0] { padding:11px 10px; border-bottom:1px solid color-mix(in srgb, var(--ck-border,#f0efe9) 60%, transparent); color:var(--ck-text,#47443f); }
.vf-grid-table tbody tr:hover[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-accent,#1c6b66) 4%, transparent); }
.vf-grid-table tr.vf-current[b-vnsmfwbjt0] { background:var(--ck-accent-tint,#dde8e6); box-shadow:inset 3px 0 0 var(--ck-accent,#1c6b66); }
.vf-rank[b-vnsmfwbjt0] { color:var(--ck-text-muted,#918e87); font-weight:600; }
.vf-inline-empty[b-vnsmfwbjt0] { padding:18px 10px; color:var(--ck-text-muted,#918e87); font-size:13px; }

/* bars */
.vf-bar-row[b-vnsmfwbjt0] { display:flex; align-items:center; gap:9px; }
.vf-bar[b-vnsmfwbjt0] { flex:1; height:6px; background:var(--ck-border,#e0ddd4); border-radius:999px; overflow:hidden; }
.vf-bar-fill[b-vnsmfwbjt0] { height:100%; background:var(--ck-accent,#1c6b66); border-radius:999px; }
.vf-bar-fill.muted[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-text-muted,#918e87) 55%, transparent); }
.vf-bar-fill.success[b-vnsmfwbjt0] { background:var(--ck-success,#6f9a6a); }
.vf-bar-label[b-vnsmfwbjt0] { font-size:12px; color:var(--ck-text,#605d57); width:46px; text-align:right; flex:none; }

/* rail */
.vf-rail-card[b-vnsmfwbjt0] { }
.vf-rail-head[b-vnsmfwbjt0] { display:flex; align-items:center; gap:8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ck-text-muted,#9d9a92); font-weight:600; }
.vf-rail-head-row[b-vnsmfwbjt0] { display:flex; align-items:center; justify-content:space-between; }
.vf-rail-eyebrow[b-vnsmfwbjt0] { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ck-text-muted,#9d9a92); font-weight:600; }
.vf-rail-text[b-vnsmfwbjt0] { font-size:12.5px; color:var(--ck-text,#605d57); line-height:1.5; margin:11px 0 0; }
.vf-rail-title[b-vnsmfwbjt0] { font-size:13.5px; font-weight:600; margin-bottom:13px; color:var(--ck-text,#36342f); }
.vf-rail-bigtitle[b-vnsmfwbjt0] { font-size:18px; font-weight:600; margin:8px 0 2px; }
.vf-rail-subtitle[b-vnsmfwbjt0] { font-size:12.5px; font-weight:600; color:var(--ck-text,#605d57); margin:16px 0 11px; }
.vf-railrow[b-vnsmfwbjt0] { margin-bottom:11px; }
.vf-railrow-head[b-vnsmfwbjt0] { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; font-size:12px; color:var(--ck-text,#605d57); }
.vf-railrow-more[b-vnsmfwbjt0] { display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--ck-text-muted,#918e87); padding-top:3px; }
.vf-trend[b-vnsmfwbjt0] { font-size:12px; font-weight:600; margin-top:11px; padding-top:11px; border-top:1px solid var(--ck-border,#ece9e2); }
.vf-budget-block[b-vnsmfwbjt0] { margin-top:14px; padding-top:13px; border-top:1px solid var(--ck-border,#ece9e2); }

/* facturatie banner & hero */
.vf-banner[b-vnsmfwbjt0] {
    display:flex; align-items:center; gap:13px; padding:13px 16px; margin-bottom:16px;
    background:var(--ck-surface,#fbfbf8); border:1px solid var(--ck-border,#e7e5de);
    border-left:3px solid var(--ck-accent,#1c6b66); border-radius:12px; font-size:13.5px;
}
.vf-banner .mud-icon-root[b-vnsmfwbjt0] { color:var(--ck-accent,#1c6b66); }
.vf-banner-tag[b-vnsmfwbjt0] {
    margin-left:auto; font-size:12px; font-weight:600; color:#a47a32; white-space:nowrap;
    background:color-mix(in srgb, var(--ck-warning,#c79a52) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--ck-warning,#c79a52) 35%, transparent);
    border-radius:999px; padding:4px 11px;
}
.vf-hero[b-vnsmfwbjt0] { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.vf-hero-fig[b-vnsmfwbjt0] { flex:none; }
.vf-hero-label[b-vnsmfwbjt0] { font-size:12px; color:var(--ck-text-muted,#83807a); }
.vf-hero-value[b-vnsmfwbjt0] { font-size:34px; font-weight:600; letter-spacing:-.02em; margin-top:4px; }
.vf-hero-value.sm[b-vnsmfwbjt0] { font-size:25px; }
.vf-hero-sep[b-vnsmfwbjt0] { width:1px; align-self:stretch; background:var(--ck-border,#ece9e2); }
.vf-hero-spacer[b-vnsmfwbjt0] { flex:1; }
.vf-hero-action[b-vnsmfwbjt0] { flex:none; }

/* status pills */
.vf-status[b-vnsmfwbjt0] { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border-radius:999px; padding:2px 9px; }
.vf-status.cur[b-vnsmfwbjt0] { color:var(--ck-accent-ink,#17605b); background:var(--ck-accent-tint,#dde8e6); }
.vf-status.done[b-vnsmfwbjt0] { color:var(--ck-success,#5e7d59); background:color-mix(in srgb, var(--ck-success,#6f9a6a) 14%, transparent); }
.vf-status.open[b-vnsmfwbjt0] { color:var(--ck-text-muted,#79756f); background:color-mix(in srgb, var(--ck-text-muted,#918e87) 14%, transparent); }

/* recente mutaties */
.vf-mutrow[b-vnsmfwbjt0] { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--ck-border,#ebe9e2); }
.vf-mutrow:last-child[b-vnsmfwbjt0] { border-bottom:none; }
.vf-mut-ico[b-vnsmfwbjt0] { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.vf-mut-ico.pos[b-vnsmfwbjt0] { color:var(--ck-success,#5e7d59); background:color-mix(in srgb, var(--ck-success,#6f9a6a) 16%, transparent); }
.vf-mut-ico.neg[b-vnsmfwbjt0] { color:var(--ck-text-muted,#83807a); background:color-mix(in srgb, var(--ck-text-muted,#918e87) 12%, transparent); }
.vf-mut-body[b-vnsmfwbjt0] { flex:1; line-height:1.3; font-size:12.5px; }
.vf-mut-amt[b-vnsmfwbjt0] { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.vf-mut-amt.pos[b-vnsmfwbjt0] { color:var(--ck-success,#5e7d59); }
.vf-mut-amt.neg[b-vnsmfwbjt0] { color:var(--ck-text,#605d57); }

/* budget-attentie (#G2) — kalme strip: amber nadert, terracotta over. Nooit alarm-rood. */
.vf-attn[b-vnsmfwbjt0] {
    display:flex; align-items:center; gap:14px; padding:14px 17px; border-radius:13px;
    border:1px solid transparent;
}
.vf-attn--near[b-vnsmfwbjt0] {
    background:color-mix(in srgb, var(--ck-warning,#c79a52) 13%, var(--ck-surface,#fbfbf8));
    border-color:color-mix(in srgb, var(--ck-warning,#c79a52) 38%, transparent);
}
.vf-attn--over[b-vnsmfwbjt0] {
    background:color-mix(in srgb, var(--ck-error,#bf5440) 11%, var(--ck-surface,#fbfbf8));
    border-color:color-mix(in srgb, var(--ck-error,#bf5440) 34%, transparent);
}
.vf-attn__icon[b-vnsmfwbjt0] {
    width:34px; height:34px; flex:none; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
}
.vf-attn--near .vf-attn__icon[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-warning,#c79a52) 22%, transparent); color:#b1842f; }
.vf-attn--over .vf-attn__icon[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-error,#bf5440) 20%, transparent); color:var(--ck-error,#bf5440); }
.vf-attn__icon .mud-icon-root[b-vnsmfwbjt0] { color:inherit; }
.vf-attn__body[b-vnsmfwbjt0] { flex:1; line-height:1.4; min-width:0; }
.vf-attn__title[b-vnsmfwbjt0] { font-size:13.5px; font-weight:600; }
.vf-attn--near .vf-attn__title[b-vnsmfwbjt0] { color:#7a5f23; }
.vf-attn--over .vf-attn__title[b-vnsmfwbjt0] { color:#9a4d36; }
.vf-attn__sub[b-vnsmfwbjt0] { font-size:12.5px; margin-top:2px; }
.vf-attn--near .vf-attn__sub[b-vnsmfwbjt0] { color:#866a2c; }
.vf-attn--over .vf-attn__sub[b-vnsmfwbjt0] { color:#a8482f; }
.vf-attn__action[b-vnsmfwbjt0] { flex:none; }

/* maandbudget-meter — drie kalme staten */
.vf-budgetcard__head[b-vnsmfwbjt0] { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.vf-budget-badge[b-vnsmfwbjt0] {
    display:inline-flex; align-items:center; gap:7px; flex:none; white-space:nowrap;
    font-size:12.5px; font-weight:600; border-radius:999px; padding:5px 12px; border:1px solid transparent;
}
.vf-budget-badge__dot[b-vnsmfwbjt0] { width:7px; height:7px; border-radius:50%; flex:none; }
.vf-budget-badge--ok[b-vnsmfwbjt0] {
    color:var(--ck-success,#5e7d59);
    background:color-mix(in srgb, var(--ck-success,#6f9a6a) 14%, transparent);
    border-color:color-mix(in srgb, var(--ck-success,#6f9a6a) 28%, transparent);
}
.vf-budget-badge--ok .mud-icon-root[b-vnsmfwbjt0] { color:var(--ck-success,#5e7d59); }
.vf-budget-badge--near[b-vnsmfwbjt0] {
    color:#8a6d2e; background:color-mix(in srgb, var(--ck-warning,#c79a52) 18%, transparent);
    border-color:color-mix(in srgb, var(--ck-warning,#c79a52) 34%, transparent);
}
.vf-budget-badge--near .vf-budget-badge__dot[b-vnsmfwbjt0] { background:var(--ck-warning,#c79a52); }
.vf-budget-badge--over[b-vnsmfwbjt0] {
    color:#a8482f; background:color-mix(in srgb, var(--ck-error,#bf5440) 14%, transparent);
    border-color:color-mix(in srgb, var(--ck-error,#bf5440) 30%, transparent);
}
.vf-budget-badge--over .vf-budget-badge__dot[b-vnsmfwbjt0] { background:var(--ck-error,#bf5440); }
.vf-budgetcard__figures[b-vnsmfwbjt0] { display:flex; align-items:baseline; gap:10px; margin-bottom:9px; }
.vf-budgetcard__value[b-vnsmfwbjt0] { font-size:28px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.vf-budgetcard__spacer[b-vnsmfwbjt0] { flex:1; }
.vf-budgetcard__remain[b-vnsmfwbjt0] { font-size:12.5px; font-weight:600; color:var(--ck-text-muted,#918e87); white-space:nowrap; }
.vf-budgetcard__remain.near[b-vnsmfwbjt0] { color:#866a2c; }
.vf-budgetcard__remain.over[b-vnsmfwbjt0] { color:#a8482f; }
.vf-budgetcard__track[b-vnsmfwbjt0] { height:11px; background:var(--ck-border,#e0ddd4); border-radius:999px; overflow:hidden; }
.vf-budgetcard__fill[b-vnsmfwbjt0] { height:100%; border-radius:999px; transition:width .3s ease; }
.vf-budgetcard__fill.ok[b-vnsmfwbjt0] { background:var(--ck-success,#6f9a6a); }
.vf-budgetcard__fill.near[b-vnsmfwbjt0] { background:var(--ck-warning,#c79a52); }
.vf-budgetcard__fill.over[b-vnsmfwbjt0] { background:var(--ck-error,#bf5440); }
.vf-budgetcard__note[b-vnsmfwbjt0] {
    display:flex; align-items:center; gap:9px; margin-top:13px; padding-top:13px;
    border-top:1px solid var(--ck-border,#ece9e2); font-size:12.5px; line-height:1.4;
    color:var(--ck-text-muted,#79756f);
}
.vf-budgetcard__note .mud-icon-root[b-vnsmfwbjt0] { color:var(--ck-text-muted,#a8a49b); flex:none; }
.vf-budgetcard__note.warn[b-vnsmfwbjt0] { color:#866a2c; }
.vf-budgetcard__note.warn .mud-icon-root[b-vnsmfwbjt0] { color:#b1842f; }

/* ── export affordance (#1602 G3) ───────────────────────────────────────────── */
.vf-export-btn[b-vnsmfwbjt0] {
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    font-size:12.5px; font-weight:600; line-height:1; user-select:none;
    color:var(--ck-accent-ink,#17605b); background:var(--ck-accent-tint,#dde8e6);
    border:1.5px solid var(--ck-accent,#1c6b66); border-radius:9px; padding:7px 13px;
    transition:background-color .18s ease, box-shadow .18s ease;
}
.vf-export-btn:hover[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-accent,#1c6b66) 22%, transparent); }
.vf-export-btn .mud-icon-root[b-vnsmfwbjt0] { font-size:16px; color:var(--ck-accent-ink,#17605b); }

.vf-export-pop[b-vnsmfwbjt0] {
    width:344px; max-width:92vw; font-size:13px; color:var(--ck-text,#36342f);
    background:var(--ck-surface,#fbfbf8); border-radius:14px; overflow:hidden;
}
.vf-export-head[b-vnsmfwbjt0] { padding:15px 18px 13px; border-bottom:1px solid color-mix(in srgb, var(--ck-border,#f0ede6) 70%, transparent); }
.vf-export-title[b-vnsmfwbjt0] { font-size:14.5px; font-weight:600; }
.vf-export-sub[b-vnsmfwbjt0] { font-size:12px; color:var(--ck-text-muted,#79756f); margin-top:2px; }
.vf-export-body[b-vnsmfwbjt0] { padding:15px 18px 16px; }
.vf-export-lbl[b-vnsmfwbjt0] { display:block; font-size:11.5px; color:var(--ck-text,#605d57); font-weight:600; margin-bottom:7px; }
.vf-export-lbl + .vf-export-lbl[b-vnsmfwbjt0], .vf-export-formats + .vf-export-lbl[b-vnsmfwbjt0], .vf-export-select + .vf-export-lbl[b-vnsmfwbjt0] { margin-top:14px; }

.vf-export-select[b-vnsmfwbjt0] {
    width:100%; font:inherit; font-size:13px; color:var(--ck-text,#36342f);
    background:var(--ck-surface-raised,#fff); border:1px solid var(--ck-border,#ddd9cf);
    border-radius:10px; padding:9px 12px; cursor:pointer; appearance:auto;
}
.vf-export-select:focus-visible[b-vnsmfwbjt0] { outline:2px solid var(--ck-accent,#1c6b66); outline-offset:1px; }

.vf-export-formats[b-vnsmfwbjt0] { display:flex; gap:8px; }
.vf-export-fmt[b-vnsmfwbjt0] {
    flex:1; display:flex; flex-direction:column; gap:1px; text-align:left; cursor:pointer;
    font:inherit; padding:9px 12px; border-radius:10px;
    background:var(--ck-surface-raised,#fff); border:1px solid var(--ck-border,#ddd9cf);
    transition:border-color .18s ease, background-color .18s ease;
}
.vf-export-fmt.active[b-vnsmfwbjt0] {
    background:var(--ck-accent-tint,#dde8e6); border:1.5px solid var(--ck-accent,#1c6b66);
}
.vf-export-fmt-name[b-vnsmfwbjt0] { font-size:12.5px; font-weight:600; color:var(--ck-text,#47443f); }
.vf-export-fmt.active .vf-export-fmt-name[b-vnsmfwbjt0] { color:var(--ck-accent-ink,#17605b); }
.vf-export-fmt-sub[b-vnsmfwbjt0] { font-size:10.5px; color:var(--ck-text-muted,#918e87); }
.vf-export-fmt.active .vf-export-fmt-sub[b-vnsmfwbjt0] { color:var(--ck-accent-ink,#5e766f); }
.vf-export-fmt:focus-visible[b-vnsmfwbjt0] { outline:2px solid var(--ck-accent,#1c6b66); outline-offset:1px; }

.vf-export-content[b-vnsmfwbjt0] { display:flex; flex-direction:column; gap:7px; }
.vf-export-check[b-vnsmfwbjt0] {
    display:flex; align-items:center; gap:10px; padding:8px 11px; cursor:pointer;
    font-size:12.5px; color:var(--ck-text,#36342f);
    background:var(--ck-surface-raised,#fff); border:1px solid var(--ck-border,#ddd9cf); border-radius:9px;
    transition:border-color .18s ease;
}
.vf-export-check:hover[b-vnsmfwbjt0] { border-color:var(--ck-accent-soft,#9ec5c1); }
.vf-export-check input[type="checkbox"][b-vnsmfwbjt0] { width:16px; height:16px; accent-color:var(--ck-accent,#1c6b66); cursor:pointer; }
.vf-export-note[b-vnsmfwbjt0] {
    font-size:11.5px; line-height:1.45; color:var(--ck-text-muted,#79756f);
    background:color-mix(in srgb, var(--ck-accent,#1c6b66) 6%, transparent);
    border:1px solid color-mix(in srgb, var(--ck-accent-soft,#9ec5c1) 45%, transparent);
    border-radius:9px; padding:9px 11px;
}

.vf-export-foot[b-vnsmfwbjt0] {
    display:flex; align-items:center; gap:9px; padding:13px 18px;
    border-top:1px solid var(--ck-border,#ece9e2); background:color-mix(in srgb, var(--ck-border,#faf9f5) 30%, transparent);
}
.vf-export-cancel[b-vnsmfwbjt0] {
    margin-left:auto; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
    color:var(--ck-text,#605d57); background:var(--ck-surface-raised,#fff);
    border:1px solid var(--ck-border,#d8d4cb); border-radius:9px; padding:8px 14px;
    transition:border-color .18s ease, background-color .18s ease;
}
.vf-export-cancel:hover[b-vnsmfwbjt0] { border-color:var(--ck-text-muted,#c4bfb4); }
.vf-export-go[b-vnsmfwbjt0] {
    display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
    color:#fff; background:var(--ck-accent,#1c6b66); border:none; border-radius:9px; padding:8px 15px;
    transition:background-color .18s ease;
}
.vf-export-go:hover:not(:disabled)[b-vnsmfwbjt0] { background:var(--ck-accent-ink,#17605b); }
.vf-export-go:disabled[b-vnsmfwbjt0] { opacity:.6; cursor:default; }
.vf-export-go .mud-icon-root[b-vnsmfwbjt0] { font-size:16px; }

@media (prefers-reduced-motion: reduce) {
    .vf-export-btn[b-vnsmfwbjt0], .vf-export-fmt[b-vnsmfwbjt0], .vf-export-check[b-vnsmfwbjt0], .vf-export-cancel[b-vnsmfwbjt0], .vf-export-go[b-vnsmfwbjt0] { transition:none; }
}

/* empty */
.vf-empty[b-vnsmfwbjt0] {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
    padding:56px 24px; border:1px dashed var(--ck-border,#d6d3ca); border-radius:16px;
    background:color-mix(in srgb, var(--ck-surface,#faf9f5) 60%, transparent);
}
.vf-empty .mud-icon-root[b-vnsmfwbjt0] { font-size:40px; color:var(--ck-text-muted,#a8a49b); }

/* ───────────── Kostenbeleid (#1565) ───────────── */
.mp-mono[b-vnsmfwbjt0] { font-family:'Spline Sans Mono','SF Mono',ui-monospace,monospace; font-size:.92em; }
.mp-readtag[b-vnsmfwbjt0] {
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ck-text-muted,#83807a);
    background:color-mix(in srgb, var(--ck-border,#efeee8) 50%, transparent);
    border:1px solid var(--ck-border,#e3e1da); border-radius:999px; padding:5px 11px; white-space:nowrap;
}
.mp-readtag .mud-icon-root[b-vnsmfwbjt0] { font-size:13px; color:var(--ck-text-muted,#918e87); }

.mp-table[b-vnsmfwbjt0] { margin-top:2px; }
.mp-table tbody td[b-vnsmfwbjt0] { vertical-align:middle; }
.mp-num[b-vnsmfwbjt0] { font-variant-numeric:tabular-nums; color:var(--ck-text,#36342f); white-space:nowrap; }
.mp-dash[b-vnsmfwbjt0] { color:var(--ck-text-muted,#bdb9b0); }
.mp-ntb[b-vnsmfwbjt0] { color:#8a6d2e; font-weight:600; }
.mp-license[b-vnsmfwbjt0] { color:var(--ck-text-muted,#79756f); font-family:'Spline Sans Mono','SF Mono',ui-monospace,monospace; font-size:12px; }

/* model cell */
.mp-model[b-vnsmfwbjt0] { display:flex; align-items:center; gap:10px; min-width:0; }
.mp-model-tile[b-vnsmfwbjt0] {
    width:28px; height:28px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
}
.mp-model-tile .mud-icon-root[b-vnsmfwbjt0] { font-size:16px; }
.mp-star[b-vnsmfwbjt0] { font-family:'Spline Sans Mono',monospace; font-size:15px; font-weight:600; line-height:1; }
.mp-model-id-wrap[b-vnsmfwbjt0] { line-height:1.25; min-width:0; display:flex; flex-direction:column; }
.mp-model-id[b-vnsmfwbjt0] { color:var(--ck-text,#36342f); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-model-sub[b-vnsmfwbjt0] { font-size:10.5px; color:var(--ck-text-muted,#9d9a92); }

/* tone helper (tiles + legend swatches) */
.mp-tile--accent[b-vnsmfwbjt0]  { background:var(--ck-accent-tint,#dde8e6); color:var(--ck-accent,#1c6b66); }
.mp-tile--neutral[b-vnsmfwbjt0] { background:color-mix(in srgb, var(--ck-text-muted,#a8a49b) 16%, transparent); color:var(--ck-text-muted,#7d7a72); }
.mp-tile--warn[b-vnsmfwbjt0]    { background:color-mix(in srgb, var(--ck-warning,#c79a52) 20%, transparent); color:#b1842f; }
.mp-tile--sage[b-vnsmfwbjt0]    { background:color-mix(in srgb, var(--ck-success,#6f9a6a) 18%, transparent); color:var(--ck-success,#5e7d59); }

/* bearer + resale chips */
.mp-dot[b-vnsmfwbjt0] { width:6px; height:6px; border-radius:50%; flex:none; background:currentColor; opacity:.85; }
.mp-bearer[b-vnsmfwbjt0], .mp-chip[b-vnsmfwbjt0] {
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
    border-radius:8px; padding:4px 10px; white-space:nowrap;
}
.mp-bearer[b-vnsmfwbjt0] { border-radius:999px; }
.mp-bearer--accent[b-vnsmfwbjt0]  { color:var(--ck-accent-ink,#17605b); background:var(--ck-accent-tint,#dde8e6); }
.mp-bearer--neutral[b-vnsmfwbjt0] { color:var(--ck-text-muted,#7d7a72); background:color-mix(in srgb, var(--ck-text-muted,#a8a49b) 14%, transparent); border:1px solid var(--ck-border,#e0ddd4); }
.mp-chip--accent[b-vnsmfwbjt0]  { color:var(--ck-accent-ink,#17605b); background:var(--ck-accent-tint,#dde8e6); border:1px solid var(--ck-accent-soft,#9ec5c1); }
.mp-chip--neutral[b-vnsmfwbjt0] { color:var(--ck-text-muted,#7d7a72); background:color-mix(in srgb, var(--ck-text-muted,#a8a49b) 12%, transparent); border:1px solid var(--ck-border,#e0ddd4); }
.mp-chip--warn[b-vnsmfwbjt0]    { color:#8a6d2e; background:color-mix(in srgb, var(--ck-warning,#c79a52) 16%, transparent); border:1px solid color-mix(in srgb, var(--ck-warning,#c79a52) 38%, transparent); }
.mp-chip--sage[b-vnsmfwbjt0]    { color:var(--ck-success,#5e7d59); background:color-mix(in srgb, var(--ck-success,#6f9a6a) 14%, transparent); border:1px solid color-mix(in srgb, var(--ck-success,#6f9a6a) 32%, transparent); }

/* edit button */
.mp-edit[b-vnsmfwbjt0] {
    width:30px; height:30px; border-radius:8px; border:none; background:transparent; cursor:pointer;
    color:var(--ck-text-muted,#918e87); display:inline-flex; align-items:center; justify-content:center;
    transition:background-color .15s ease, color .15s ease;
}
.mp-edit:hover[b-vnsmfwbjt0] { background:var(--ck-accent-tint,#dde8e6); color:var(--ck-accent-ink,#17605b); }
.mp-edit .mud-icon-root[b-vnsmfwbjt0] { font-size:16px; }

/* row action cluster (edit + delete) */
.mp-row-actions[b-vnsmfwbjt0] { display:inline-flex; align-items:center; gap:2px; justify-content:flex-end; }

/* delete button — terracotta on hover; disabled (fallback "*") reads as muted/non-interactive */
.mp-del[b-vnsmfwbjt0] {
    width:30px; height:30px; border-radius:8px; border:none; background:transparent; cursor:pointer;
    color:var(--ck-text-muted,#918e87); display:inline-flex; align-items:center; justify-content:center;
    transition:background-color .15s ease, color .15s ease;
}
.mp-del:hover:not(:disabled)[b-vnsmfwbjt0] { background:var(--ck-error-subtle,#f3ddd6); color:var(--ck-error,#b4543a); }
.mp-del:disabled[b-vnsmfwbjt0] { opacity:.4; cursor:not-allowed; }
.mp-del .mud-icon-root[b-vnsmfwbjt0] { font-size:16px; }

/* card-head action cluster (new-policy button + read tag) */
.mp-head-actions[b-vnsmfwbjt0] { display:flex; align-items:center; gap:12px; }

/* honest strip */
.mp-honest[b-vnsmfwbjt0] {
    display:flex; align-items:center; gap:11px; padding:12px 16px;
    background:var(--ck-surface,#fbfbf8); border:1px solid var(--ck-border,#e7e5de); border-radius:12px;
    font-size:12.5px; color:var(--ck-text,#605d57); line-height:1.45;
}
.mp-honest-icon[b-vnsmfwbjt0] {
    width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--ck-text-muted,#a8a49b) 14%, transparent); color:var(--ck-text-muted,#7d7a72);
}
.mp-honest-icon .mud-icon-root[b-vnsmfwbjt0] { font-size:15px; }

/* rail */
.mp-stat[b-vnsmfwbjt0] { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ck-text,#605d57); padding:5px 0; }
.mp-yes[b-vnsmfwbjt0] { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--ck-success,#5e7d59); }
.mp-yes .mud-icon-root[b-vnsmfwbjt0] { font-size:14px; }
.mp-legend[b-vnsmfwbjt0] { display:flex; flex-direction:column; gap:11px; }
.mp-legend-row[b-vnsmfwbjt0] { display:flex; gap:10px; align-items:flex-start; }
.mp-legend-sw[b-vnsmfwbjt0] { width:11px; height:11px; border-radius:3px; margin-top:3px; flex:none; }
.mp-legend-name[b-vnsmfwbjt0] { font-size:12.5px; font-weight:600; color:var(--ck-text,#36342f); font-family:'Spline Sans Mono',monospace; }
.mp-legend-hint[b-vnsmfwbjt0] { font-size:11.5px; color:var(--ck-text-muted,#83807a); line-height:1.4; }
.mp-scope-head[b-vnsmfwbjt0] { display:flex; align-items:center; gap:8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ck-text-muted,#9d9a92); font-weight:600; }
.mp-scope-head .mud-icon-root[b-vnsmfwbjt0] { font-size:14px; }
.vf-empty-title[b-vnsmfwbjt0] { font-size:15px; font-weight:600; color:var(--ck-text,#605d57); }
/* /Components/Pages/PlatformAdmin/Users/InviteUserDialog.razor.rz.scp.css */
/* Kalme beslissings-preview onder in de Uitnodigen-dialog — warme neutrale tegel met petrol-accent-icoon,
   géén alarm-rood (dit is geen fout, alleen een vooruitblik op wat er gebeurt). Volgt Richting-A tokens. */
.ck-invite-preview[b-tiit519otq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    color: var(--ck-text, inherit);
    min-height: 3rem;
}

/* Nog niets in te vullen → gedempt, uitnodigend leeg. */
.ck-invite-preview--idle[b-tiit519otq] {
    background-color: transparent;
    border-style: dashed;
    opacity: 0.7;
}
/* /Components/Pages/PlatformAdmin/Users/List.razor.rz.scp.css */
/* Uitnodigingen-tab: pending-status-pill.
   Volgt de Gebruikers-lijst-design (§ "Cockpit Identity - Gebruikers-lijst"): een warme
   waarschuwings-dot in een NEUTRALE surface-high pill. Uitnodigen is geen fout, dus géén
   alarm-rood en géén waarschuwings-getinte achtergrond — alleen de dot draagt --ck-warning.
   Alle waarden zijn LOCKED --ck-tokens. */
.ck-invite-status[b-l161asis56] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ck-surface-high);
    color: var(--ck-text);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.ck-invite-status__dot[b-l161asis56] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-warning);
}
/* /Components/Pages/Pricing/Index.razor.rz.scp.css */
/* Prijzen · warme herbouw (Lane MG2).
   Scoped laag bovenop de globale ck-card / ck-grid / ck-tab / ck-pill bouwstenen.
   Geen eigen kleuren — alles via --ck-tokens. Inactief = neutraal (geen alarm-rood). */

.pr-tabs[b-lucsspsd78] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-1);
    margin-bottom: var(--ck-space-4);
}

.pr-toolbar[b-lucsspsd78] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--ck-space-4);
}

/* Gevulde accent-actie ("Nieuw …") — bouwt op .ck-insp__btn, maar accent-gevuld
   i.p.v. outline en niet uitgerekt (de toolbar lijnt 'm rechts uit). */
.pr-btn--primary[b-lucsspsd78] {
    flex: none;
    background: var(--ck-accent);
    border-color: var(--ck-accent);
    color: var(--ck-on-accent, #fff);
}

.pr-btn--primary:hover[b-lucsspsd78] {
    border-color: var(--ck-accent);
    color: var(--ck-on-accent, #fff);
    filter: brightness(1.06);
}

.pr-partner-picker[b-lucsspsd78] {
    margin-bottom: var(--ck-space-4);
    max-width: 420px;
}

/* Gelijke kaarthoogte binnen de grid + acties onderaan vastgepind. */
.pr-card[b-lucsspsd78] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pr-card__head[b-lucsspsd78] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ck-space-3);
    margin-bottom: var(--ck-space-3);
}

.pr-card__ident[b-lucsspsd78] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pr-card__title[b-lucsspsd78] {
    font-size: var(--ck-text-md, 1rem);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    line-height: 1.25;
}

.pr-card__band[b-lucsspsd78] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: var(--ck-weight-semibold);
}

.pr-fields[b-lucsspsd78] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
    margin: 0;
}

.pr-field[b-lucsspsd78] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ck-space-3);
    padding-bottom: var(--ck-space-2);
    border-bottom: 1px solid var(--ck-border);
}

.pr-field:last-child[b-lucsspsd78] {
    border-bottom: none;
    padding-bottom: 0;
}

.pr-field dt[b-lucsspsd78] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: 0;
}

.pr-field dd[b-lucsspsd78] {
    margin: 0;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* De hoofdprijs van de kaart krijgt nadruk via de accent-inkt. */
.pr-field--primary dd[b-lucsspsd78] {
    font-size: var(--ck-text-lg, 1.125rem);
    font-weight: var(--ck-weight-bold, 700);
    color: var(--ck-accent-ink);
}

/* Acties onderaan de kaart, ongeacht hoeveel velden de kaart heeft. */
.pr-card .ck-insp__actions[b-lucsspsd78] {
    margin-top: auto;
    padding-top: var(--ck-space-4);
}
/* /Components/Pages/VoiceAi/VoiceDataGapNote.razor.rz.scp.css */
/* Scoped styling for the calm "nog niet beschikbaar"-melding (#1381). Scoped (not an inline
   <style>) so it isn't duplicated in the DOM when the note renders several times on one tab. */
.ck-voice-gap[b-e54ayty8kl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--ck-border);
    border-radius: 12px;
    background: var(--ck-surface);
}

.ck-voice-gap__icon[b-e54ayty8kl] {
    color: var(--ck-text-subtle);
    margin-top: 1px;
    flex: none;
}

.ck-voice-gap__title[b-e54ayty8kl] {
    font-size: var(--ck-text-sm, 0.8125rem);
    font-weight: 600;
    color: var(--ck-text-muted);
}

.ck-voice-gap__body[b-e54ayty8kl] {
    font-size: var(--ck-text-xs, 0.75rem);
    color: var(--ck-text-subtle);
    margin-top: 2px;
    line-height: 1.5;
}
/* /Components/Pages/VoiceAi/VoiceHealthTab.razor.rz.scp.css */
/* Motion-fideliteit (#1469, clusters B + C3) — Voice-gezondheid.

   B  · De live system-gezondheid-indicator in de header pulseert canoniek
        (ck-dot-pulse 1.8s — gedeelde kit-keyframe uit tokens/motion.css, géén lokale
        duplicatie) zolang de probe live bereikbaar is. Onbereikbaar (--offline) blijft
        een STILLE rode stip: geen heartbeat = geen puls.

   C3 · De per-tegel status-stippen staan STIL. De puls is voorbehouden aan de échte
        live-header-indicator (MOTION.md: LIVE = puls, stil = statisch — de puls is het
        énige verschil tussen live en stil; keer die hiërarchie nooit om). */

.ck-badge .ck-status-dot--online[b-euothw9eqm],
.ck-badge .ck-status-dot--degraded[b-euothw9eqm] {
    animation: ck-dot-pulse 1.8s ease-in-out infinite;
}

.ck-card .ck-status-dot[b-euothw9eqm] {
    animation: none;
}

/* Reduced-motion is een vloer: zet de header-puls expliciet UIT (canonieke ruststaat),
   niet de 100%-keyframe laten hangen. */
@media (prefers-reduced-motion: reduce) {
    .ck-badge .ck-status-dot--online[b-euothw9eqm],
    .ck-badge .ck-status-dot--degraded[b-euothw9eqm] {
        animation: none;
    }
}
/* /Components/Pages/VoiceAi/VoiceTrunksTab.razor.rz.scp.css */
/* Motion-fideliteit (#1469, cluster C3) — SIP-trunks.

   Trunk-status is configuratie-status (actief/inactief), géén live-heartbeat — dus een
   STILLE stip, nooit een puls (MOTION.md: stil = statisch). Live SIP-telemetrie
   (verbonden/kanalen/latency) bestaat hier nog niet en is apart geflagd (VoiceDataGapNote).
   Dit vlak heeft geen live-header-indicator die wél hoort te pulsen, dus de stippen staan
   integraal stil. */

.ck-status-dot[b-22gb3gkvt4] {
    animation: none;
}
/* /Components/Pages/VoiceAi/Workspace.razor.rz.scp.css */
/* Voice-AI werkvlak — warme header-icoontegel + vlakke tab-strip (#1381, zelfde taal als ForgeDetail). */

.ck-voice__mark[b-skgee5eubu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    flex: none;
}

/* Flatten the MudTabs toolbar to the mockup's underline strip: no paper card,
   warm hairline under the row, accent indicator handled by Color="Primary". */
.ck-voice-tabs[b-skgee5eubu]  .mud-tabs-tabbar,
.ck-voice-tabs[b-skgee5eubu]  .mud-tabs-tabbar.mud-tabs-tabbar-primary {
    background: transparent;
    background-color: transparent;
    color: var(--ck-text-subtle);
    border-bottom: 1px solid var(--ck-border);
}

.ck-voice-tabs[b-skgee5eubu]  .mud-tab {
    text-transform: none;
    font-weight: 500;
    color: var(--ck-text-subtle);
}

.ck-voice-tabs[b-skgee5eubu]  .mud-tab.mud-tab-active {
    color: var(--ck-accent-ink);
    font-weight: 600;
}
/* /Components/Shared/WarmDialogHeader.razor.rz.scp.css */
/* Warm modal header (Lane M5) — icon-chip + titel + uitleg-regel, warme --ck-tokens.
   Mockup: Cockpit Modal-systeem.dc.html → "Anatomie · HEADER". */
.wdh[b-huw7phy4i9] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* Ruimte rechts zodat de titel niet onder MudDialog's sluit-✕ loopt. */
    padding-right: 28px;
}

.wdh__icon[b-huw7phy4i9] {
    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;
}

/* Let-op (amber) — niet-geconfigureerd / operationeel. */
.wdh__icon--warning[b-huw7phy4i9] {
    background: var(--ck-warning-subtle);
    color: var(--ck-warning);
}

/* Destructief (terracotta) — verwijderen / afwijzen. Nooit security-alarm-rood. */
.wdh__icon--error[b-huw7phy4i9] {
    background: var(--ck-error-subtle);
    color: var(--ck-error);
}

.wdh__icon[b-huw7phy4i9]  .mud-icon-root {
    font-size: 20px;
}

.wdh__text[b-huw7phy4i9] {
    flex: 1;
    min-width: 0;
}

.wdh__title[b-huw7phy4i9] {
    font-size: 17px;
    font-weight: 600;
    color: var(--ck-text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.wdh__sub[b-huw7phy4i9] {
    font-size: 13px;
    color: var(--ck-text-muted);
    margin-top: 3px;
    line-height: 1.45;
}