@import '_content/Majorsoft.Blazor.Components.Common.JsInterop/Majorsoft.Blazor.Components.Common.JsInterop.5u9i6uqp9b.bundle.scp.css';
@import '_content/Majorsoft.Blazor.Components.GdprConsent/Majorsoft.Blazor.Components.GdprConsent.zmt6y26m3q.bundle.scp.css';
@import '_content/Majorsoft.Blazor.Components.Modal/Majorsoft.Blazor.Components.Modal.5xwq947tce.bundle.scp.css';
@import '_content/Majorsoft.Blazor.Components.Toggle/Majorsoft.Blazor.Components.Toggle.3jpexc40k1.bundle.scp.css';

/* /Pages/BatchManagement/Detail.razor.rz.scp.css */
/* Batch-detail als card-view (2026): terug-link, header met status-badge + accentbalk, meta-card,
   subjects in de app-standaard dip-data-table, en een moderne notities-sectie (composer + lijst
   met avatars). Scoped CSS: compileert mee met dotnet build en raakt alleen deze pagina.
   De badge-classes zijn bewust gedupliceerd uit de lijst-scope (scoped CSS deelt niet tussen
   componenten). */

.bd-page[b-45bzcapyr6] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ---- terug-link ---- */
.bd-back[b-45bzcapyr6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.2rem 0;
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.bd-back:hover[b-45bzcapyr6] {
    color: #1d4ed8;
}

.bd-back svg[b-45bzcapyr6] {
    width: 16px;
    height: 16px;
}

/* ---- header met status-accent ---- */
.bd-header[b-45bzcapyr6] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 1.1rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.bd-header[b-45bzcapyr6]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--bd-accent, #cbd5e1);
}

.bd-header--created[b-45bzcapyr6] { --bd-accent: #94a3b8; }
.bd-header--sent[b-45bzcapyr6] { --bd-accent: #2563eb; }
.bd-header--received[b-45bzcapyr6] { --bd-accent: #7c3aed; }
.bd-header--completed[b-45bzcapyr6] { --bd-accent: #059669; }

.bd-header__title[b-45bzcapyr6] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    word-break: break-word;
}

/* ---- status-badge (gedupliceerd uit de lijst-scope) ---- */
.bd-badge[b-45bzcapyr6] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.bd-badge[b-45bzcapyr6]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.bd-badge--created[b-45bzcapyr6] { color: #475569; background: #f1f5f9; }
.bd-badge--sent[b-45bzcapyr6] { color: #1d4ed8; background: #eff4ff; }
.bd-badge--received[b-45bzcapyr6] { color: #6d28d9; background: #f5f0ff; }
.bd-badge--completed[b-45bzcapyr6] { color: #047857; background: #ecfdf3; }

/* ---- meta-card ---- */
.bd-meta[b-45bzcapyr6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem 1.5rem;
    padding: 1.05rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bd-meta__item[b-45bzcapyr6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bd-meta__label[b-45bzcapyr6] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

.bd-meta__value[b-45bzcapyr6] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #0f172a;
    word-break: break-word;
}

/* ---- secties (subjects + notities) ---- */
.bd-section[b-45bzcapyr6] {
    padding: 1.15rem 1.35rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bd-section__head[b-45bzcapyr6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.bd-section__title[b-45bzcapyr6] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.bd-count[b-45bzcapyr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
}

/* profiel-link in de subjects-tabel — zelfde pill-vorm als de PGx-PDF-knop zodat beide acties
   als één set uitgelijnde knoppen ogen (i.p.v. een kale tekstlink naast een omrande knop) */
.bd-profile-link[b-45bzcapyr6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.bd-profile-link:hover[b-45bzcapyr6] {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
    text-decoration: none;
}

.bd-profile-link svg[b-45bzcapyr6] {
    width: 13px;
    height: 13px;
}

/* ---- notities ---- */
.bd-notes__hint[b-45bzcapyr6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #64748b;
}

.bd-notes__hint svg[b-45bzcapyr6] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #94a3b8;
}

.bd-composer[b-45bzcapyr6] {
    margin-bottom: 1.35rem;
}

.bd-composer__mode[b-45bzcapyr6] {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563eb;
}

.bd-composer__actions[b-45bzcapyr6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.bd-note-list[b-45bzcapyr6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bd-note[b-45bzcapyr6] {
    display: flex;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    border-radius: 12px;
}

.bd-note__avatar[b-45bzcapyr6] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 0.85rem;
    font-weight: 700;
}

.bd-note__body[b-45bzcapyr6] {
    flex: 1 1 auto;
    min-width: 0;
}

.bd-note__meta[b-45bzcapyr6] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    margin-bottom: 0.25rem;
}

.bd-note__author[b-45bzcapyr6] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.bd-note__time[b-45bzcapyr6] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.bd-note__edited[b-45bzcapyr6] {
    font-size: 0.75rem;
    font-style: italic;
    color: #94a3b8;
}

.bd-note__text[b-45bzcapyr6] {
    font-size: 0.9rem;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}

.bd-note__controls[b-45bzcapyr6] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.2rem;
    align-items: flex-start;
}

.bd-icon-btn[b-45bzcapyr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bd-icon-btn:hover[b-45bzcapyr6] {
    background: #eef2f7;
    color: #334155;
}

.bd-icon-btn--danger:hover[b-45bzcapyr6] {
    background: #fef2f2;
    color: #dc2626;
}

.bd-icon-btn svg[b-45bzcapyr6] {
    width: 16px;
    height: 16px;
}

.-visually-hidden[b-45bzcapyr6] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bd-note-empty[b-45bzcapyr6] {
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 12px;
    font-size: 0.88rem;
}

/* ---- PGx PDF export buttons (DOWNLOADPGXPDF) ---- */
.bd-section__head[b-45bzcapyr6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bd-pgxzip-btn[b-45bzcapyr6] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.bd-pgxzip-btn:not(:disabled):hover[b-45bzcapyr6] {
    background: #eef2ff;
    color: #4338ca;
}

.bd-pgxzip-btn:disabled[b-45bzcapyr6] {
    opacity: 0.55;
    cursor: default;
}

.bd-actions[b-45bzcapyr6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bd-pgxpdf-btn[b-45bzcapyr6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.bd-pgxpdf-btn:not(:disabled):hover[b-45bzcapyr6] {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.bd-pgxpdf-btn:disabled[b-45bzcapyr6] {
    opacity: 0.55;
    cursor: default;
}

.bd-badge-file[b-45bzcapyr6] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #fde68a;
    color: #92400e;
}

.bd-badge-file--pdf[b-45bzcapyr6] {
    background: #fee2e2;
    color: #b91c1c;
}

/* /Pages/BatchManagement/Index.razor.rz.scp.css */
/* Batch-overzicht als card-view (2026). Statusgedreven accent + badges, hele kaart klikbaar
   naar het detail, met een optionele PGx-matrix quick-link. Scoped CSS: compileert mee met
   dotnet build en raakt alleen deze pagina. Deze pagina hanteert bewust een "rond thema"
   (grotere radii, pill-vormige controls) dat NIET globaal geldt. */

/* Verticaal symmetrische header-sectie: .section staat als plain element in deze pagina, dus deze
   override raakt alleen /batches. De globale padding-top van 2rem wordt teruggebracht naar 1.35rem
   = dezelfde ruimte als de ondermarge van de header, zodat boven == onder de header. */
.section[b-49okttgaqw] {
    padding-top: 1.35rem;
}

/* ---- header: titel + intro links, zoekveld rechts ---- */
.batch-header[b-49okttgaqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0 0 1.35rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.batch-header__intro[b-49okttgaqw] {
    min-width: 0;
}

.batch-header__title[b-49okttgaqw] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.batch-header__subtitle[b-49okttgaqw] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.batch-search[b-49okttgaqw] {
    position: relative;
    flex: 0 1 320px;
    min-width: 220px;
    margin-left: auto;
}

/* De EditForm is een component en krijgt het scoped b-attribuut niet; deze plain <form> vult de
   wrapper zodat de input 100% breed blijft en de absolute knop aan .batch-search ankert. */
.batch-search__form[b-49okttgaqw] {
    display: block;
    width: 100%;
}

.batch-search__input[b-49okttgaqw] {
    width: 100%;
    /* icoon rechts -> ruimte rechts; placeholder start links (iets ruimer i.v.m. pill-vorm) */
    padding: 0.55rem 2.75rem 0.55rem 1.15rem;
    font-size: 0.9rem;
    color: #0f172a;
    /* grijze vulling zodat het veld opvalt tegen het witte header-paneel; wordt wit bij focus */
    background: #eef2f7;
    border: 1px solid #b8c2cf;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.batch-search__input[b-49okttgaqw]::placeholder {
    color: #64748b;
}

/* Zwevend label: verborgen zolang de placeholder zichtbaar is (leeg veld), verschijnt zodra er
   inhoud is (placeholder weg). Puur CSS via :placeholder-shown; zit op de bovenrand van de pill. */
.batch-search__label[b-49okttgaqw] {
    position: absolute;
    left: 0.9rem;
    top: 0;
    z-index: 2;
    padding: 0.05rem 0.5rem;
    background: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #2563eb;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10%);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.batch-search__input:not(:placeholder-shown) + .batch-search__label[b-49okttgaqw] {
    opacity: 1;
    transform: translateY(-52%);
}

.batch-search__input:focus[b-49okttgaqw] {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.batch-search__btn[b-49okttgaqw] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s ease;
}

.batch-search__btn:hover[b-49okttgaqw] {
    color: #2563eb;
}

.batch-search__btn svg[b-49okttgaqw] {
    width: 16px;
    height: 16px;
}

@media (max-width: 640px) {
    .batch-search[b-49okttgaqw] {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.batch-grid[b-49okttgaqw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin: 0.25rem 0 1.25rem;
}

/* ---- kaart ---- */
.batch-card[b-49okttgaqw] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* statusaccent-balkje links */
.batch-card[b-49okttgaqw]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--batch-accent, #cbd5e1);
}

.batch-card:hover[b-49okttgaqw] {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.10);
    border-color: #d3d8e0;
}

.batch-card:focus-visible[b-49okttgaqw] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.batch-card--created[b-49okttgaqw] { --batch-accent: #94a3b8; }
.batch-card--sent[b-49okttgaqw] { --batch-accent: #2563eb; }
.batch-card--received[b-49okttgaqw] { --batch-accent: #7c3aed; }
.batch-card--completed[b-49okttgaqw] { --batch-accent: #059669; }

/* ---- kop: titel + datum + status-badge ---- */
.batch-card__head[b-49okttgaqw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.batch-card__titles[b-49okttgaqw] {
    min-width: 0;
}

.batch-card__code[b-49okttgaqw] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    word-break: break-word;
}

.batch-card__date[b-49okttgaqw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
}

.batch-card__date svg[b-49okttgaqw] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

/* ---- status-badge ---- */
.batch-badge[b-49okttgaqw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.batch-badge[b-49okttgaqw]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.batch-badge--created[b-49okttgaqw] { color: #475569; background: #f1f5f9; }
.batch-badge--sent[b-49okttgaqw] { color: #1d4ed8; background: #eff4ff; }
.batch-badge--received[b-49okttgaqw] { color: #6d28d9; background: #f5f0ff; }
.batch-badge--completed[b-49okttgaqw] { color: #047857; background: #ecfdf3; }

/* ---- profielen-badge ---- */
.batch-card__meta[b-49okttgaqw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.batch-chip[b-49okttgaqw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    font-size: 0.8rem;
    color: #334155;
}

.batch-chip svg[b-49okttgaqw] {
    width: 15px;
    height: 15px;
    color: #64748b;
    flex: 0 0 auto;
}

.batch-chip__text strong[b-49okttgaqw] {
    color: #0f172a;
    font-weight: 700;
}

/* ---- voet: bekijk-cta + quick-link ---- */
.batch-card__foot[b-49okttgaqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px solid #f1f5f9;
}

.batch-card__cta[b-49okttgaqw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2563eb;
}

.batch-card__cta svg[b-49okttgaqw] {
    width: 15px;
    height: 15px;
    transition: transform 0.15s ease;
}

.batch-card:hover .batch-card__cta svg[b-49okttgaqw] {
    transform: translateX(2px);
}

.batch-card__quick[b-49okttgaqw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid #dbe1ea;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.batch-card__quick:hover[b-49okttgaqw] {
    background: #f1f5ff;
    border-color: #c7d2fe;
    color: #1d4ed8;
}

.batch-card__quick:focus-visible[b-49okttgaqw] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.batch-card__quick svg[b-49okttgaqw] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ---- lege staat ---- */
.batch-empty[b-49okttgaqw] {
    margin: 0.25rem 0 1.25rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 20px;
}

/* ---- rond thema voor de gedeelde Pager, alleen op deze pagina (::deep t/m de component-grens) ----
   .control-item leest zijn radius uit --border-radius; de knoppen hebben zelf geen radius. */
.container[b-49okttgaqw]  .control-item {
    --border-radius: 14px;
}

.container[b-49okttgaqw]  .control-item__button {
    border-radius: 10px;
}

.container[b-49okttgaqw]  .control-item__select {
    border-radius: 10px;
}
/* /Pages/Identity/Settings.razor.rz.scp.css */
/* Instellingen (2026). Kaarten onder elkaar, per module een keuzeblok van twee.

   Dit is hetzelfde "rond thema" als /orders, /orders/new, /batches en het orderdetail, en dat
   geldt NIET globaal. Scoped CSS, dus dit raakt alleen deze pagina en staat los van de Less-lagen
   in wwwroot/css: style.css wordt door Web Compiler uit style.less gegenereerd en mag niet met de
   hand aangepast worden.

   VALKUIL, meermaals eerder in dit project misgegaan: elk element hieronder is platte HTML uit
   Settings.razor en draagt dus het scope-attribuut. Blazor hangt dat attribuut aan het LAATSTE
   deel van een selector, dus ook `.st-card__icon svg` eist dat de svg zelf het attribuut heeft -
   vandaar dat de iconen letterlijk in de .razor staan en niet als MarkupString. Een klasse op een
   child-component (DisplaySpinnerForm, Mud*) zou nooit matchen; daar is `::deep` voor nodig. */

/* Verticaal symmetrische sectie, zelfde correctie als /orders en het orderdetail. */
.section[b-s9lsxwffa3] {
    padding-top: 1.35rem;
}

/* ------------------------------------------------------------------
   Kopkaart
   ------------------------------------------------------------------ */

/* Leeskolom, links uitgelijnd zoals de rest van de portal. Over de volle breedte stond de keuze
   ver van de naam van het onderdeel; een formulier leest rustiger in een smalle kolom. */
.st-page[b-s9lsxwffa3] {
    max-width: 880px;
}

.st-header[b-s9lsxwffa3] {
    margin: 0 0 1.25rem;
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.st-header__title[b-s9lsxwffa3] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
}

.st-header__sub[b-s9lsxwffa3] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #64748b;
}

/* ------------------------------------------------------------------
   Kaart
   ------------------------------------------------------------------ */

.st-card[b-s9lsxwffa3] {
    margin: 0 0 1.25rem;
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.st-card__head[b-s9lsxwffa3] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.st-card__icon[b-s9lsxwffa3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.st-card__icon svg[b-s9lsxwffa3] {
    width: 14px;
    height: 14px;
}

.st-card__title[b-s9lsxwffa3] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.st-card__intro[b-s9lsxwffa3] {
    margin: 0.7rem 0 0;
    max-width: 68ch;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #475569;
    text-wrap: pretty;
}

/* ------------------------------------------------------------------
   Modulerijen
   ------------------------------------------------------------------ */

.st-modules[b-s9lsxwffa3] {
    margin-top: 1.1rem;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    overflow: hidden;
}

.st-module[b-s9lsxwffa3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.05rem;
    border-top: 1px solid #eef1f4;
}

.st-module:first-child[b-s9lsxwffa3] {
    border-top: 0;
}

.st-module__icon[b-s9lsxwffa3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.st-module__icon svg[b-s9lsxwffa3] {
    width: 17px;
    height: 17px;
}

/* Een eigen tint per module, zodat de rij te herkennen is zonder te lezen. */
.st-module__icon--conditions[b-s9lsxwffa3] {
    background: #fef3f2;
    color: #b42318;
}

.st-module__icon--advice[b-s9lsxwffa3] {
    background: #ecfdf3;
    color: #027a48;
}

.st-module__icon--pharmaco[b-s9lsxwffa3] {
    background: #eff6ff;
    color: #1d4ed8;
}

.st-module__icon--traits[b-s9lsxwffa3] {
    background: #fffaeb;
    color: #b54708;
}

.st-module__name[b-s9lsxwffa3] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
}

/* ------------------------------------------------------------------
   Keuzeblok van twee
   ------------------------------------------------------------------ */

.st-seg[b-s9lsxwffa3] {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    background: #f3f6fb;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

/* De gekozen helft is een gekleurd vlakje met schaduw: je ziet wat gekozen is EN wat het
   alternatief is. Dat is precies wat een kale schakelaar niet doet. Groen met een oog = direct
   zichtbaar, amber met een slotje = zelf delen (dezelfde kleur als "nog niet in de app" in de
   profielkop). Het icoon maakt het verschil ook zonder kleurwaarneming. */
.st-seg__opt[b-s9lsxwffa3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.st-seg__opt:hover[b-s9lsxwffa3] {
    color: #0f172a;
}

.st-seg__opt:focus-visible[b-s9lsxwffa3] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.st-seg__opt svg[b-s9lsxwffa3] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.st-seg__opt--on[b-s9lsxwffa3] {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    color: #0f172a;
}

.st-seg__opt--direct.st-seg__opt--on[b-s9lsxwffa3] {
    border-color: #b7e0c7;
    background: #e8f6ee;
    color: #146c43;
}

.st-seg__opt--own.st-seg__opt--on[b-s9lsxwffa3] {
    border-color: #f2d3a2;
    background: #fff4e0;
    color: #8a4b0f;
}

/* "Gewijzigd" naast de naam van een rij die afwijkt van de opgeslagen stand. */
.st-module__changed[b-s9lsxwffa3] {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #e7f0fd;
    color: #1e4fa3;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ------------------------------------------------------------------
   Voor wie geldt dit?

   Vervangt de grijze regel onder de lijst (#94a3b8, haalde geen 4,5:1). Drie regels met een vinkje
   of een streepje: wie de instelling krijgt en wie niet.
   ------------------------------------------------------------------ */

.st-scope[b-s9lsxwffa3] {
    margin: 0.9rem 0 0;
    padding: 1rem 1.15rem;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    background: #f7f9fb;
}

.st-scope__title[b-s9lsxwffa3] {
    margin: 0 0 0.75rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.st-scope__list[b-s9lsxwffa3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-scope__item[b-s9lsxwffa3] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.st-scope__mark[b-s9lsxwffa3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #e7f0fd;
    color: #1d4ed8;
}

.st-scope__mark--off[b-s9lsxwffa3] {
    background: #e9edf1;
    color: #475569;
}

.st-scope__mark svg[b-s9lsxwffa3] {
    width: 13px;
    height: 13px;
}

.st-scope__body[b-s9lsxwffa3] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #475569;
}

.st-scope__body strong[b-s9lsxwffa3] {
    font-weight: 600;
    color: #0f172a;
}

/* ------------------------------------------------------------------
   Tegoed
   ------------------------------------------------------------------ */

.st-credit[b-s9lsxwffa3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem 1.5rem;
    margin-top: 0.95rem;
}

/* Grid-kinderen krimpen niet onder hun inhoud zonder dit; een lang bedrag zou de kolom oprekken. */
.st-credit__item[b-s9lsxwffa3] {
    min-width: 0;
}

.st-credit__label[b-s9lsxwffa3] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

.st-credit__value[b-s9lsxwffa3] {
    margin-top: 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.st-credit__note[b-s9lsxwffa3] {
    font-size: 0.78rem;
    color: #94a3b8;
}

.st-credit__info[b-s9lsxwffa3] {
    margin: 0.9rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid #eef1f4;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #94a3b8;
}

/* ------------------------------------------------------------------
   Opslaan
   ------------------------------------------------------------------ */

.st-savebar[b-s9lsxwffa3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.3rem;
    background: #fff;
    border: 1px solid #d3d7de;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

.st-savebar__icon[b-s9lsxwffa3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #fffaeb;
    border-radius: 50%;
    color: #b54708;
}

.st-savebar__icon svg[b-s9lsxwffa3] {
    width: 14px;
    height: 14px;
}

.st-savebar__text[b-s9lsxwffa3] {
    flex: 1 1 14rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #475569;
}

.st-btn[b-s9lsxwffa3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.st-btn:disabled[b-s9lsxwffa3] {
    opacity: 0.6;
    cursor: default;
}

.st-btn:focus-visible[b-s9lsxwffa3] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

/* Ongedaan maken is een uitweg, geen tweede hoofdactie: geen kader, geen vlak. */
.st-btn--quiet[b-s9lsxwffa3] {
    padding: 0 0.5rem;
}

.st-btn--quiet:hover:not(:disabled)[b-s9lsxwffa3] {
    color: #0f172a;
    text-decoration: underline;
}

.st-btn--primary[b-s9lsxwffa3] {
    background: hsl(209, 100%, 50%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 128, 255, 0.35);
}

.st-btn--primary:hover:not(:disabled)[b-s9lsxwffa3] {
    background: hsl(209, 100%, 44%);
}

/* ------------------------------------------------------------------
   Melding na opslaan
   ------------------------------------------------------------------ */

.st-note[b-s9lsxwffa3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0.8rem 1.3rem;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
}

.st-note svg[b-s9lsxwffa3] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.st-note--ok[b-s9lsxwffa3] {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #027a48;
}

.st-note--error[b-s9lsxwffa3] {
    background: #fef3f2;
    border-color: #fecdc9;
    color: #b42318;
}

/* ------------------------------------------------------------------
   Smalle schermen: het keuzeblok gaat onder de naam en pakt de volle breedte, en de raakvlakken
   worden 44px.
   ------------------------------------------------------------------ */

@media (max-width: 640px) {
    .st-module[b-s9lsxwffa3] {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 0.4rem 0.8rem;
        padding: 0.9rem 0.95rem;
    }

    .st-module__name[b-s9lsxwffa3] {
        align-self: center;
    }

    .st-seg[b-s9lsxwffa3] {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .st-seg__opt[b-s9lsxwffa3] {
        height: 40px;
        padding: 0 0.5rem;
        white-space: normal;
        text-align: center;
    }

    .st-savebar[b-s9lsxwffa3] {
        padding: 0.9rem 1.05rem;
    }

    .st-savebar__text[b-s9lsxwffa3] {
        flex: 1 1 100%;
    }

    .st-btn[b-s9lsxwffa3] {
        min-height: 44px;
        flex: 1 1 auto;
    }
}
/* /Pages/LimsReport/Index.razor.rz.scp.css */
/* LIMS-rapportage (PORTALPGXLIMSREPORTING): rond thema in lijn met /pgximport en /batches. Scoped CSS. */

.lir-page[b-86atvcadq6] {
    padding-top: 1.35rem;
    padding-bottom: 2.5rem;
}

/* ---- header ---- */
.lir-header[b-86atvcadq6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.35rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.lir-header__title[b-86atvcadq6] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.lir-header__subtitle[b-86atvcadq6] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.lir-header__stubs[b-86atvcadq6] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---- kaart ---- */
.lir-card[b-86atvcadq6] {
    margin: 0 0 1.15rem;
    padding: 1.15rem 1.35rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.lir-card__head[b-86atvcadq6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
}

.lir-card__title[b-86atvcadq6] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.lir-card__hint[b-86atvcadq6] {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: #64748b;
}

.lir-step[b-86atvcadq6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---- upload ---- */
.lir-upload[b-86atvcadq6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lir-filebtn[b-86atvcadq6] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* ::deep: InputFile is een component, dus zijn <input> draagt het scope-attribuut niet. Zonder ::deep
   matcht deze regel nooit en staat de kale browserknop ("Bestand kiezen / geen bestand") in beeld. */
.lir-filebtn[b-86atvcadq6]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.lir-filename[b-86atvcadq6] {
    font-size: 0.85rem;
    color: #334155;
}

.lir-filelist__remove[b-86atvcadq6] {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.lir-filelist__remove:hover[b-86atvcadq6] {
    color: #ef4444;
}

.lir-error[b-86atvcadq6] {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: #dc2626;
}

/* ---- taalkeuze ---- */
.lir-lang[b-86atvcadq6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0;
    flex-wrap: wrap;
}

.lir-lang__label[b-86atvcadq6] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.lir-radio[b-86atvcadq6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
}

/* ---- knoppen ---- */
.lir-actions[b-86atvcadq6] {
    margin: 1.1rem 0 0;
}

.lir-btn[b-86atvcadq6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.12s ease;
}

.lir-btn:disabled[b-86atvcadq6] {
    opacity: 0.55;
    cursor: default;
}

.lir-btn:not(:disabled):hover[b-86atvcadq6] {
    filter: brightness(0.97);
}

.lir-btn--primary[b-86atvcadq6] {
    background: #4338ca;
    color: #fff;
}

.lir-btn--soft[b-86atvcadq6] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
}

.lir-btn--ghost[b-86atvcadq6] {
    background: #fff;
    border-color: #d7dbe3;
    color: #334155;
}

/* ---- samenvatting ---- */
.lir-summary[b-86atvcadq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1.15rem;
    padding: 0.75rem 1.15rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 16px;
    font-size: 0.85rem;
    color: #065f46;
}

/* ---- unmatched ---- */
.lir-unmatched__ids[b-86atvcadq6] {
    margin: 0;
    font-size: 0.82rem;
    color: #b45309;
    word-break: break-word;
}

/* ---- bulk-export ---- */
.lir-bulk__buttons[b-86atvcadq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.lir-badge[b-86atvcadq6] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.lir-badge--zip[b-86atvcadq6] {
    background: #fde68a;
    color: #92400e;
}

/* ---- dokter-groep + tabel ---- */
.lir-doctor__name[b-86atvcadq6] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.lir-doctor__agb[b-86atvcadq6] {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
}

.lir-table-wrap[b-86atvcadq6] {
    overflow-x: auto;
}

.lir-table[b-86atvcadq6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.lir-table th[b-86atvcadq6] {
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    border-bottom: 1px solid #e6e8ec;
    white-space: nowrap;
}

.lir-table td[b-86atvcadq6] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.lir-input[b-86atvcadq6] {
    width: 100%;
    min-width: 8rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #d7dbe3;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #0f172a;
}

.lir-input--sm[b-86atvcadq6] {
    min-width: 6rem;
}


.lir-dl[b-86atvcadq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.lir-dl__btn[b-86atvcadq6] {
    padding: 0.25rem 0.55rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.12s ease;
}

.lir-dl__btn:disabled[b-86atvcadq6] {
    opacity: 0.55;
    cursor: default;
}

/* hover via filter zodat de per-formaat-tint behouden blijft */
.lir-dl__btn:not(:disabled):hover[b-86atvcadq6] {
    filter: brightness(0.95);
}

.lir-empty[b-86atvcadq6] {
    margin: 0;
    padding: 1rem 1.35rem;
    color: #64748b;
    font-size: 0.9rem;
}

/* Per-formaat kleuren voor de download-knoppen (onderscheid bestandstypen, echo van de Manager).
   Zachte tint + gekleurde tekst/rand i.p.v. de felle vlakken van de Manager, past bij het ronde thema.
   Werkt op zowel de per-profiel-knoppen (.lir-dl__btn) als de bulk-ZIP-knoppen (.lir-btn--soft);
   staan ná de basisklassen zodat ze de neutrale achtergrond overschrijven. */
.lir-fmt--pdf[b-86atvcadq6]  { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.lir-fmt--txt[b-86atvcadq6]  { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.lir-fmt--xlsx[b-86atvcadq6] { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.lir-fmt--csv[b-86atvcadq6]  { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.lir-fmt--fhir[b-86atvcadq6] { background: #f3e8ff; border-color: #e9d5ff; color: #7c3aed; }
.lir-fmt--edi[b-86atvcadq6]  { background: #cffafe; border-color: #a5f0fa; color: #0e7490; }
.lir-fmt--all[b-86atvcadq6]  { background: #1e293b; border-color: #1e293b; color: #ffffff; }

/* ================================================================
   Handmatige invoer (bron kiezen, gegevens invullen per batch)
   ================================================================ */

/* ---- bronkeuze ---- */
.lir-sources[b-86atvcadq6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.lir-source[b-86atvcadq6] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* de globale knopstijl centreert */
    gap: 0.7rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.lir-source:hover[b-86atvcadq6] {
    border-color: #c7d2fe;
}

.lir-source--active[b-86atvcadq6] {
    border-color: #4338ca;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
    background: #fafaff;
}

.lir-source__dot[b-86atvcadq6] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    background: #fff;
}

.lir-source--active .lir-source__dot[b-86atvcadq6] {
    border-color: #4338ca;
    box-shadow: inset 0 0 0 3px #fff;
    background: #4338ca;
}

.lir-source__body[b-86atvcadq6] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lir-source__title[b-86atvcadq6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
}

.lir-source__text[b-86atvcadq6] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

/* ---- batch kiezen ---- */
.lir-batch[b-86atvcadq6] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 34rem;
}

.lir-batch__label[b-86atvcadq6],
.lir-field__label[b-86atvcadq6] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.lir-batch__hint[b-86atvcadq6] {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.lir-select[b-86atvcadq6] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #d7dbe3;
    border-radius: 10px;
    background: #fff;
    font-size: 0.85rem;
    color: #0f172a;
}

.lir-select--sm[b-86atvcadq6] {
    width: auto;
    min-width: 11rem;
    max-width: 16rem;
    padding: 0.35rem 0.5rem;
}

.lir-select--empty[b-86atvcadq6] {
    border-color: #f59e0b;
    color: #92400e;
}

/* ---- samenvattingsbalk ---- */
.lir-bar[b-86atvcadq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.15rem;
    padding: 0.7rem 1.15rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    font-size: 0.85rem;
    color: #312e81;
}

.lir-bar__sep[b-86atvcadq6] {
    margin: 0 0.35rem;
    color: #818cf8;
}

.lir-link[b-86atvcadq6] {
    border: none;
    background: transparent;
    padding: 0;
    color: #4338ca;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.lir-link:hover[b-86atvcadq6] {
    text-decoration: underline;
}

/* ---- invulkaart ---- */
.lir-card__head--split[b-86atvcadq6] {
    justify-content: space-between;
    flex-wrap: wrap;
}

.lir-ready[b-86atvcadq6] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

/* ---- artsen ---- */
.lir-doctors[b-86atvcadq6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.4rem 0 1.1rem;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
}

.lir-doctors__head[b-86atvcadq6] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.lir-doctors__title[b-86atvcadq6] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
}

.lir-doctors__hint[b-86atvcadq6] {
    font-size: 0.78rem;
    color: #64748b;
}

.lir-doctor-row[b-86atvcadq6] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lir-field[b-86atvcadq6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 14rem;
}

.lir-field--agb[b-86atvcadq6] {
    min-width: 8rem;
}

.lir-tag[b-86atvcadq6] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.68rem;
    font-weight: 600;
}

.lir-input--error[b-86atvcadq6] {
    border-color: #f87171;
    background: #fff7f7;
}

/* ---- filter + plakken ---- */
.lir-toolbar[b-86atvcadq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
}

.lir-pills[b-86atvcadq6] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.lir-pill[b-86atvcadq6] {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.lir-pill--active[b-86atvcadq6] {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.lir-paste[b-86atvcadq6] {
    margin: 0 0 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px dashed #c7d2fe;
    border-radius: 16px;
    background: #fafaff;
}

.lir-textarea[b-86atvcadq6] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d7dbe3;
    border-radius: 12px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
    color: #0f172a;
    resize: vertical;
}

.lir-paste__actions[b-86atvcadq6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.lir-paste__spacer[b-86atvcadq6] {
    flex: 1;
}

.lir-selbar[b-86atvcadq6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.9rem;
    border-radius: 14px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    font-size: 0.82rem;
    color: #312e81;
}

.lir-selbar__count[b-86atvcadq6] {
    font-weight: 700;
}

/* ---- invultabel ---- */
.lir-table--fill td[b-86atvcadq6] {
    vertical-align: top;
}

.lir-col-select[b-86atvcadq6] {
    width: 2rem;
}

.lir-row--selected td[b-86atvcadq6] {
    background: #f5f7ff;
}

.lir-status[b-86atvcadq6] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: default;
}

.lir-status--complete[b-86atvcadq6]   { background: #dcfce7; color: #15803d; }
.lir-status--check[b-86atvcadq6]      { background: #fef3c7; color: #b45309; }
.lir-status--incomplete[b-86atvcadq6] { background: #f1f5f9; color: #475569; }
.lir-status--invalid[b-86atvcadq6]    { background: #fee2e2; color: #b91c1c; }

.lir-profile[b-86atvcadq6] {
    white-space: nowrap;
}

.lir-profile__id[b-86atvcadq6] {
    display: block;
    font-weight: 600;
    color: #0f172a;
}

.lir-profile__tube[b-86atvcadq6] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.74rem;
    color: #64748b;
}

.lir-note[b-86atvcadq6] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
}

.lir-note--warn[b-86atvcadq6] {
    color: #b45309;
}

/* ---- acties onder de tabel ---- */
.lir-fill-actions[b-86atvcadq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 0;
}

.lir-fill-actions__save[b-86atvcadq6],
.lir-fill-actions__process[b-86atvcadq6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lir-fill-actions__hint[b-86atvcadq6] {
    margin: 0;
}

/* ---- niet verwerkt ---- */
.lir-skipped[b-86atvcadq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fffbeb;
    border-color: #fde68a;
}

.lir-skipped__body .lir-card__hint[b-86atvcadq6] {
    margin: 0.35rem 0 0;
}
/* /Pages/Messages/Index.razor.rz.scp.css */
/* Praktijkbreed berichtenoverzicht (PORTALMESSAGES): rond thema, in lijn met /batches en
   /limsreport. Scoped CSS. */

.pmo-page[b-b7j0prl1b1] {
    padding-top: 1.35rem;
    padding-bottom: 2.5rem;
}

/* ---- header ---- */
.pmo-header[b-b7j0prl1b1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.35rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pmo-header__title[b-b7j0prl1b1] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.pmo-header__subtitle[b-b7j0prl1b1] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

/* ---- besturing ---- */
.pmo-toggle[b-b7j0prl1b1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.5rem;
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
}

/* Afkap-melding: liever een zichtbare regel dan stil een deel weglaten. */
.pmo-notice[b-b7j0prl1b1] {
    margin: 0 0 0.85rem;
    padding: 0.7rem 1.1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 0.82rem;
    color: #92400e;
}

/* ---- tabel ---- */
.pmo-title[b-b7j0prl1b1] {
    display: block;
    font-weight: 600;
    color: #0f172a;
}

.pmo-snippet[b-b7j0prl1b1] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #64748b;
}

.pmo-link[b-b7j0prl1b1] {
    text-decoration: none;
}

.pmo-muted[b-b7j0prl1b1] {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Alias naast de referentie: ondergeschikt, mag wrappen op smalle schermen. */
.pmo-alias[b-b7j0prl1b1] {
    display: inline-block;
    margin-left: 0.5rem;
    color: #64748b;
    font-size: 0.85rem;
    word-break: break-word;
}

.pmo-state[b-b7j0prl1b1] {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pmo-state--ok[b-b7j0prl1b1] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.pmo-state--error[b-b7j0prl1b1] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
    cursor: help;
}

.pmo-state--deleted[b-b7j0prl1b1] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.pmo-empty[b-b7j0prl1b1] {
    margin: 0;
    padding: 1.25rem 1.35rem;
    color: #64748b;
    font-size: 0.9rem;
}
/* /Pages/NewOrder.razor.rz.scp.css */
/* Nieuwe bestelling (2026). Werkblad-indeling: formulier links, vaste samenvatting rechts.

   Deze pagina hanteert bewust het "rond thema" (grotere radii, pill-vormige controls) dat ook
   /batches gebruikt en dat NIET globaal geldt. Scoped CSS, dus dit raakt alleen deze pagina en
   staat los van de Less-lagen in wwwroot/css: style.css wordt door Web Compiler gegenereerd uit
   style.less (zie compilerconfig.json) en mag niet met de hand aangepast worden.

   Waar het kan gebruiken we de custom properties uit 2-design-tokens/_ui-theme.less, zodat de
   dormante dark-theme deze pagina later niet sloopt. De ronde specifics (radii, statuskleuren)
   hebben geen token en staan daarom als vaste waarde, net als in /batches. */

/* Verticaal symmetrische sectie, zelfde correctie als /batches: de globale padding-top van 2rem
   terug naar de ondermarge van de kop. */
.section[b-tegvchqlxb] {
    padding-top: 1.35rem;
}

/* ---- kop: terugweg naar Bestellingen + titel ---- */
.no-header[b-tegvchqlxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0 0 1.1rem;
    padding: 1.05rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.no-header__back[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt-shade-3, #64748b);
    text-decoration: none;
}

.no-header__back:hover[b-tegvchqlxb] {
    text-decoration: underline;
}

.no-header__back svg[b-tegvchqlxb] {
    width: 13px;
    height: 13px;
}

.no-header__title[b-tegvchqlxb] {
    margin: 0.15rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

/* Kanaal alleen benoemen als er meer dan een kanaal is; anders zegt de chip elke keer hetzelfde. */
.no-header__channel[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--txt-shade-3, #64748b);
}

/* ---- twee kolommen ---- */
.no-layout[b-tegvchqlxb] {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.no-main[b-tegvchqlxb] {
    flex: 1 1 640px;
    min-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.no-side[b-tegvchqlxb] {
    flex: 0 0 330px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ---- kaarten ---- */
.no-card[b-tegvchqlxb] {
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.no-card__head[b-tegvchqlxb] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.3rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
}

.no-card__icon[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #eef2f7;
    border-radius: 8px;
}

.no-card__icon svg[b-tegvchqlxb] {
    width: 14px;
    height: 14px;
}

.no-count[b-tegvchqlxb] {
    padding: 0.1rem 0.55rem;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.no-hint[b-tegvchqlxb] {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--txt-shade-3, #64748b);
}

.no-hint--source[b-tegvchqlxb] {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.no-hint--source svg[b-tegvchqlxb] {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

/* ---- velden ---- */
.no-field[b-tegvchqlxb] {
    min-width: 0;
}

.no-field__label[b-tegvchqlxb] {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

.no-field__label-note[b-tegvchqlxb] {
    font-weight: 500;
    color: #94a3b8;
}

/* De invoervelden op deze pagina zijn Blazor-COMPONENTEN (InputText,
   InputNumber, InputSelect) en geen platte HTML. Scoped CSS herschrijft
   `.no-input` naar `.no-input[b-<hash>]`, en dat scope-attribuut landt NIET op
   het element dat zo'n child-component rendert. De regel matchte daardoor
   nooit: de velden kregen nul styling en vielen weg tegen de achtergrond,
   terwijl de labels en de wrappers (platte HTML uit deze .razor) er wel goed
   uitzagen.

   `::deep` compileert naar `[b-<hash>] .no-input` en matcht wel, want elk
   element uit deze .razor draagt het scope-attribuut. Zelfde reden als de
   validation-message-regel onderaan dit bestand.

   Let op: dit geldt voor ELKE regel die een van die velden raakt, dus ook de
   :focus-, :disabled- en --auto-varianten hieronder. */
/* Een veld is GEVULD en niet wit. Wit-op-wit gaf een kaart met alleen dunne
   lijntjes erin: waar je kon typen was pas te zien als je de rand vond. Dat is
   ook de applicatiestandaard (`.dip-text-input` in style.css vult met
   `--ui-light-3`), maar met meer contrast dan die variabelen geven: die zetten
   de vulling op L=97% en de rand op L=88%, en juist op een witte kaart is dat
   te weinig verschil.

   De vulling loopt mee met hoe bewerkbaar het veld is: normaal het lichtst,
   automatisch gevuld een tint dieper, uitgeschakeld het donkerst. Bij focus
   wordt het veld wit, zodat waar je typt het helderste vlak op het scherm is. */
[b-tegvchqlxb] .no-input,
[b-tegvchqlxb] .no-select {
    width: 100%;
    padding: 0.6rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f3f6fb;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

[b-tegvchqlxb] .no-input::placeholder {
    color: #8794a5;
}

[b-tegvchqlxb] .no-input:focus,
[b-tegvchqlxb] .no-select:focus {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[b-tegvchqlxb] .no-input:disabled {
    background: #e5eaf1;
    border-color: #cbd3dd;
    color: #64748b;
}

/* Automatisch gevulde velden blijven bewerkbaar maar zien er rustiger uit. Een
   tint dieper dan een gewoon veld, want de waarde komt uit de postcodecheck. */
[b-tegvchqlxb] .no-input--auto {
    background: #e9eff7;
}

.no-selectwrap[b-tegvchqlxb] {
    position: relative;
}

[b-tegvchqlxb] .no-select {
    appearance: none;
    padding-right: 2.2rem;
}

.no-selectwrap__chevron[b-tegvchqlxb] {
    position: absolute;
    right: 12px;
    top: 13px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    color: #94a3b8;
}

/* ---- adresraster ---- */
.no-grid--zip[b-tegvchqlxb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.no-grid--street[b-tegvchqlxb] {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr;
    gap: 0.75rem;
}

.no-lookup[b-tegvchqlxb] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.15rem;
}

.no-lookup__badge[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #065f46;
}

.no-lookup__badge svg[b-tegvchqlxb] {
    width: 12px;
    height: 12px;
}

/* ---- clientregels ---- */
.no-row[b-tegvchqlxb] {
    display: grid;
    grid-template-columns: 26px 1fr 118px 200px 34px;
    gap: 0.5rem;
    align-items: center;
}

/* Een orderregel heeft drie kolommen die altijd hetzelfde betekenen: nummer, artikel en
   "wat dit artikel vraagt". Dat laatste blok verschilt per regel, dus het krijgt een eigen
   flex-indeling in plaats van vaste tabelkolommen. */
.no-row--line3[b-tegvchqlxb] {
    grid-template-columns: 26px 1fr 1.35fr 34px;
}

/* Elke kolom van een regel is een label boven een veld, dus alle invoervelden staan op
   dezelfde hoogte zonder dat er iets genudged hoeft te worden. Het regelnummer en de
   verwijderknop hebben geen label en krijgen daarom de labelhoogte als padding; die staat
   een keer in een variabele zodat die drie niet uit elkaar kunnen lopen. */
.no-row--line3[b-tegvchqlxb] {
    align-items: start;
    --no-label-offset: 1.15rem;
}

.no-row--line3 > .no-row__nr[b-tegvchqlxb],
.no-row--line3 > .no-iconbtn[b-tegvchqlxb],
.no-row--line3 > span:last-child[b-tegvchqlxb] {
    padding-top: var(--no-label-offset);
}

.no-linefields[b-tegvchqlxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    align-items: start;
}

.no-linefields__wait[b-tegvchqlxb] {
    font-size: 0.8rem;
    font-style: italic;
    color: #94a3b8;
    padding-top: var(--no-label-offset);
}

.no-subfield[b-tegvchqlxb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 130px;
}

/* Een geboortejaar en een aantal hebben een vaste maat; die horen niet mee te rekken met
   de breedte van de kaart. */
.no-subfield--fixed[b-tegvchqlxb] {
    flex: 0 0 116px;
}

.no-subfield__label[b-tegvchqlxb] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* De keuze bij een artikel dat beide wijzen toestaat. Twee knoppen en geen dropdown: het is
   een beslissing van twee, en een dropdown zou een klik extra kosten om te zien wat er te
   kiezen valt. */
.no-choice[b-tegvchqlxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    padding-top: var(--no-label-offset);
}

.no-choice__ask[b-tegvchqlxb] {
    font-size: 0.78rem;
    color: #5b6b80;
}

.no-choice__btn[b-tegvchqlxb] {
    padding: 0.35rem 0.8rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    border: 1px solid #b6c2d1;
    border-radius: 999px;
    cursor: pointer;
}

.no-choice__btn:hover[b-tegvchqlxb] {
    border-color: hsl(209, 100%, 50%);
    background: #f5faff;
}

/* Terug naar de keuze. Klein en tekstueel: het is een correctie, geen hoofdactie. */
.no-switch[b-tegvchqlxb] {
    padding: 0.2rem 0;
    font-family: inherit;
    font-size: 0.73rem;
    color: #5b6b80;
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
    align-self: start;
    margin-top: var(--no-label-offset);
}

.no-switch:hover[b-tegvchqlxb] {
    color: #0f172a;
}

/* ::deep verplicht: InputNumber is een child-component, dus het scope-attribuut landt niet
   op de <input> die deze klasse draagt. Zonder ::deep matcht de regel nooit en rekt het
   veld mee - precies wat er gebeurde. Zie de uitleg boven .no-input in dit bestand. */
[b-tegvchqlxb] .no-input--narrow {
    max-width: 116px;
}

.no-row--line[b-tegvchqlxb] {
    padding: 0.35rem 0;
}

.no-row__nr[b-tegvchqlxb] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
    text-align: right;
}

/* Precies een artikel: geen dropdown met een optie, maar een vaste vermelding. */
.no-article-fixed[b-tegvchqlxb] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--txt-shade-3, #64748b);
}

.no-article-fixed__code[b-tegvchqlxb] {
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
    color: #0f172a;
}

.no-iconbtn[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    color: #94a3b8;
    cursor: pointer;
}

.no-iconbtn:hover[b-tegvchqlxb] {
    color: #dc2626;
    border-color: #fca5a5;
}

.no-iconbtn svg[b-tegvchqlxb] {
    width: 15px;
    height: 15px;
}

.no-addline[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.8rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: hsl(209, 100%, 50%);
    background: #fff;
    border: 1px dashed #cbd3dd;
    border-radius: 999px;
    cursor: pointer;
}

.no-addline:hover[b-tegvchqlxb] {
    border-color: hsl(209, 100%, 50%);
}

.no-addline svg[b-tegvchqlxb] {
    width: 14px;
    height: 14px;
}

/* ---- meldingen ---- */
.no-notice[b-tegvchqlxb] {
    display: flex;
    gap: 0.6rem;
    padding: 0.9rem 1.05rem;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.no-notice svg[b-tegvchqlxb] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.no-notice--warn[b-tegvchqlxb] {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.no-notice--info[b-tegvchqlxb] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 0.78rem;
    border-radius: 16px;
}

/* ---- samenvatting ---- */
.no-summary__rule[b-tegvchqlxb] {
    height: 1px;
    background: #eef2f7;
    margin: 0.9rem 0;
}

.no-summary__row[b-tegvchqlxb] {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

.no-summary__key[b-tegvchqlxb] {
    color: var(--txt-shade-3, #64748b);
}

.no-summary__val[b-tegvchqlxb] {
    font-weight: 600;
    text-align: right;
    color: #0f172a;
}

.no-summary__val--strong[b-tegvchqlxb] {
    font-weight: 700;
}

.no-summary__sub[b-tegvchqlxb] {
    display: block;
    font-weight: 500;
    font-size: 0.78rem;
    color: #94a3b8;
}

.no-submit[b-tegvchqlxb] {
    width: 100%;
    padding: 0.72rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: hsl(209, 100%, 50%);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.no-submit:hover:not(:disabled)[b-tegvchqlxb] {
    background: hsl(209, 100%, 45%);
}

.no-submit:disabled[b-tegvchqlxb] {
    background: #cbd5e1;
    cursor: default;
}

.no-clear[b-tegvchqlxb] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--txt-shade-3, #64748b);
    background: transparent;
    border: none;
    cursor: pointer;
}

.no-clear:hover[b-tegvchqlxb] {
    color: #0f172a;
}

/* De validatiemeldingen van FluentValidation komen als losse elementen; hier alleen leesbaar maken. */
.no-card[b-tegvchqlxb]  .validation-message {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #dc2626;
}

/* ---- voor wie bestelt u? ---- */

/* De kaart die alleen verschijnt als de sessie zelf geen zorgbehandelaar heeft. Een blauwe zweem
   in plaats van een luide kleur: het is het eerste dat gevraagd wordt, geen waarschuwing. */
.no-card--scope[b-tegvchqlxb] {
    border-color: #bfdbfe;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 0 0 3px rgba(37, 99, 235, 0.06);
}

.no-required[b-tegvchqlxb] {
    padding: 0.1rem 0.55rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
}

.no-hint--scope[b-tegvchqlxb] {
    margin-bottom: 0.85rem;
}

/* Twee benoemde helften in een omrande pil, exact het keuzeblok van de instellingenpagina
   (.st-seg). Beide woorden blijven leesbaar, en dat is precies wat een kale schakelaar niet doet:
   de les van het oude "Alle tags" op de profielenlijst. */
.no-seg[b-tegvchqlxb] {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: 3px;
    background: #f3f6fb;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

.no-seg__opt[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.no-seg__opt:hover[b-tegvchqlxb] {
    color: #0f172a;
}

.no-seg__opt:focus-visible[b-tegvchqlxb] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.no-seg__opt--on[b-tegvchqlxb] {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    color: #0f172a;
}

.no-field--scope[b-tegvchqlxb] {
    margin-top: 0.9rem;
}

/* Zoekveld. Dit is een PLATTE input uit deze .razor en geen Blazor-component, dus hij draagt het
   scope-attribuut zelf en ::deep is hier niet nodig (anders dan bij .no-input, zie de uitleg
   daarboven). Wit in plaats van gevuld: waar je typt hoort het helderste vlak te zijn. */
.no-search[b-tegvchqlxb] {
    position: relative;
}

.no-search svg[b-tegvchqlxb] {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 15px;
    height: 15px;
    color: #94a3b8;
    pointer-events: none;
}

.no-search__input[b-tegvchqlxb] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.95rem 0.6rem 2.4rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
}

.no-search__input[b-tegvchqlxb]::placeholder {
    color: #8794a5;
}

.no-search__input:focus[b-tegvchqlxb] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* De trefferlijst staat INLINE onder het zoekveld en is geen uitklappaneel: zolang er niets
   gekozen is hoeft er niets overheen te liggen. Wel de vorm van een paneel, zodat de rijen
   zichtbaar bij het zoekveld horen. */
.no-prolist[b-tegvchqlxb] {
    margin-top: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
}

.no-prorow[b-tegvchqlxb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.no-prorow + .no-prorow[b-tegvchqlxb] {
    margin-top: 2px;
}

.no-prorow:hover[b-tegvchqlxb] {
    background: #f4f6f8;
}

.no-prorow:focus-visible[b-tegvchqlxb] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: -2px;
}

.no-prorow__body[b-tegvchqlxb] {
    flex: 1 1 auto;
    min-width: 0;
}

.no-prorow__name[b-tegvchqlxb] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
}

.no-prorow__meta[b-tegvchqlxb] {
    display: block;
    font-size: 0.76rem;
    color: #64748b;
}

.no-prolist__empty[b-tegvchqlxb] {
    margin: 0;
    padding: 0.6rem 0.65rem;
    font-size: 0.82rem;
    font-style: italic;
    color: #94a3b8;
}

.no-prolist__count[b-tegvchqlxb] {
    margin: 0;
    padding: 0.45rem 0.65rem 0.2rem;
    font-size: 0.74rem;
    color: #94a3b8;
}

/* De gekozen praktijk. Geen keuzelijst die een waarde toont maar de rij zelf, met het AFGELEIDE
   kanaal erbij: het kanaal is hier geen vraag meer maar een gevolg. Zelfde vorm als
   .no-article-fixed, dat om dezelfde reden bestaat. */
.no-picked[b-tegvchqlxb] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
}

.no-picked__tick[b-tegvchqlxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: hsl(209, 100%, 50%);
    color: #fff;
}

.no-picked__tick svg[b-tegvchqlxb] {
    width: 12px;
    height: 12px;
}

.no-picked__body[b-tegvchqlxb] {
    flex: 1 1 auto;
    min-width: 0;
}

.no-picked__name[b-tegvchqlxb] {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0f172a;
}

.no-picked__meta[b-tegvchqlxb] {
    display: block;
    font-size: 0.76rem;
    color: #64748b;
}

.no-picked__meta strong[b-tegvchqlxb] {
    font-weight: 600;
    color: #475569;
}

.no-picked__code[b-tegvchqlxb] {
    flex: 0 0 auto;
    padding: 0.1rem 0.4rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: #475569;
}

/* Wijzigen is een uitweg, geen tweede hoofdactie: geen kader, geen vlak. */
.no-picked__change[b-tegvchqlxb] {
    flex: 0 0 auto;
    padding: 0.2rem 0;
    border: 0;
    background: transparent;
    color: hsl(209, 100%, 50%);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.no-picked__change:hover[b-tegvchqlxb] {
    text-decoration: underline;
}

/* Zelfde vorm als de validatiemeldingen van FluentValidation elders op deze pagina. Die komen uit
   een component en hebben ::deep nodig; deze staat hier als platte span en dus niet. */
.no-scope-error[b-tegvchqlxb] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #dc2626;
}

.no-notice--scope[b-tegvchqlxb] {
    margin-top: 0.9rem;
}

.no-hint--scopefoot[b-tegvchqlxb] {
    margin: 0.75rem 0 0;
}

/* ---- kop-chip ---- */

.no-header__channel-sep[b-tegvchqlxb] {
    color: #cbd5e1;
}

/* Het kanaal in de samenvatting is een GEVOLG van de praktijkkeuze en geen keuze; het staat er dus
   rustiger bij dan de regels die de besteller zelf invult. */
.no-summary__val--soft[b-tegvchqlxb] {
    font-weight: 500;
    color: var(--txt-shade-3, #64748b);
}

/* ---- geboortejaar ---- */

/* Een geboortejaar is geen aantal: je klikt het niet omhoog en per ongeluk scrollen mag de waarde
   niet veranderen. De spinner gaat er daarom af in beide engines. `::deep` is verplicht, want
   InputNumber is een CHILD-COMPONENT en draagt het scope-attribuut niet (zie de uitleg boven
   .no-input); dat geldt ook voor de pseudo-elementen hieronder.

   Iets breder dan .no-input--narrow: vier cijfers plus de padding vielen krap uit zodra de
   spinner-ruimte verdween. */
[b-tegvchqlxb] .no-input--year {
    max-width: 116px;
    -moz-appearance: textfield;
    appearance: textfield;
}

[b-tegvchqlxb] .no-input--year::-webkit-outer-spin-button,
[b-tegvchqlxb] .no-input--year::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

@media (max-width: 1080px) {
    .no-main[b-tegvchqlxb] {
        min-width: 0;
        flex-basis: 100%;
    }

    .no-side[b-tegvchqlxb] {
        flex: 1 1 100%;
    }

    .no-row[b-tegvchqlxb] {
        grid-template-columns: 26px 1fr 100px 160px 34px;
    }

    /* Zelfde correctie als .st-seg op de instellingenpagina: twee helften naast elkaar over de
       volle breedte, want "Voor een zorgbehandelaar" wrapt anders midden in de pil. */
    .no-seg[b-tegvchqlxb] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .no-seg__opt[b-tegvchqlxb] {
        height: 40px;
        padding: 0 0.5rem;
        white-space: normal;
        text-align: center;
    }
}
/* /Pages/OrderDetail.razor.rz.scp.css */
/* Orderdetail (2026). Werkblad-indeling: hoofdkolom links, zijkolom rechts, gelijk aan
   /orders/new. Wat je LEEST staat links (artikelen, memo's), wat je DOET staat rechts (status,
   adres, printen).

   Deze pagina hanteert het "rond thema" dat ook /orders, /orders/new en /batches gebruiken en dat
   NIET globaal geldt. Scoped CSS, dus dit raakt alleen deze pagina en staat los van de Less-lagen
   in wwwroot/css: style.css wordt door Web Compiler gegenereerd uit style.less en mag niet met de
   hand aangepast worden.

   VALKUIL, drie keer eerder in dit project misgegaan: elk element hieronder is platte HTML uit
   deze .razor en draagt dus het scope-attribuut. Zou je een klasse op een CHILD-COMPONENT zetten
   (EditForm, InputText, Mud*, OrderStatusBadge), dan compileert `.x` naar `.x[b-hash]` en matcht
   die NOOIT; daar is `::deep` voor nodig. Het palet van de statusbadges staat daarom bij het
   component zelf (Shared/OrderStatusBadge.razor.css) en wordt hier niet aangeraakt. */

/* Verticaal symmetrische sectie, zelfde correctie als /orders en /batches. */
.section[b-ngw0c424zf] {
    padding-top: 1.35rem;
}

/* ------------------------------------------------------------------
   Kopkaart
   ------------------------------------------------------------------ */

.od-header[b-ngw0c424zf] {
    margin: 0 0 1.25rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.od-header__back[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt-shade-3, #64748b);
    text-decoration: none;
}

.od-header__back:hover[b-ngw0c424zf] {
    text-decoration: underline;
}

.od-header__back svg[b-ngw0c424zf] {
    width: 13px;
    height: 13px;
}

.od-header__top[b-ngw0c424zf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin-top: 0.4rem;
}

.od-header__intro[b-ngw0c424zf] {
    min-width: 0;
}

.od-header__eyebrow[b-ngw0c424zf] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.od-header__title[b-ngw0c424zf] {
    margin: 0.1rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.od-header__badges[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    flex: 0 0 auto;
    padding-top: 0.9rem;
}

/* De metaregel: alles wat de kop eerst als vijf gelijkwaardige kolommen toonde, nu als een fijne
   regel. Fijn en niet weg: het is context, geen kerngegeven. */
.od-header__meta[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid #eef1f4;
    font-size: 0.8rem;
    color: var(--txt-shade-3, #64748b);
}

.od-header__meta strong[b-ngw0c424zf] {
    font-weight: 600;
    color: #0f172a;
}

.od-header__dot[b-ngw0c424zf] {
    color: #cbd5e1;
}

.od-header__spacer[b-ngw0c424zf] {
    flex: 1 1 auto;
}

/* Order-ID als kopieerbaar chipje. Geen recht-gate: kopieren is lezen, en juist iemand die niets
   mag muteren moet het nummer kunnen doorgeven aan support. */
.od-idchip[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 30px;
    padding: 0.25rem 0.6rem 0.25rem 0.7rem;
    border: 1px solid #e6e8ec;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--txt-shade-3, #64748b);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.od-idchip:hover[b-ngw0c424zf] {
    background: #f1f5f9;
    border-color: #d3d7de;
}

.od-idchip:focus-visible[b-ngw0c424zf] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.od-idchip__value[b-ngw0c424zf] {
    font-family: Consolas, "Courier New", monospace;
}

.od-idchip svg[b-ngw0c424zf] {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Twee kolommen
   ------------------------------------------------------------------ */

.od-layout[b-ngw0c424zf] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.od-main[b-ngw0c424zf] {
    flex: 1 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.od-side[b-ngw0c424zf] {
    flex: 0 0 348px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ------------------------------------------------------------------
   Kaart
   ------------------------------------------------------------------ */

.od-card[b-ngw0c424zf] {
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.od-card__head[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
}

.od-card__title[b-ngw0c424zf] {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
}

.od-card__icon[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.od-card__icon svg[b-ngw0c424zf] {
    width: 14px;
    height: 14px;
}

.od-card__spacer[b-ngw0c424zf] {
    flex: 1 1 auto;
}

.od-count[b-ngw0c424zf] {
    padding: 0.1rem 0.55rem;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

/* Lege staat met een reden, niet een lege tabel met vijf kolomkoppen. */
.od-empty[b-ngw0c424zf] {
    padding: 1.1rem;
    border: 1px dashed #dbe2ea;
    border-radius: 14px;
    text-align: center;
    font-size: 0.84rem;
    color: #94a3b8;
}

.od-hint[b-ngw0c424zf] {
    font-size: 0.74rem;
    line-height: 1.5;
    color: #94a3b8;
}

/* ------------------------------------------------------------------
   Orderregel als kaartje
   ------------------------------------------------------------------ */

.od-line[b-ngw0c424zf] {
    border: 1px solid #eef1f4;
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

.od-line + .od-line[b-ngw0c424zf] {
    margin-top: 0.7rem;
}

.od-line__top[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.od-line__code[b-ngw0c424zf] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

/* De code op het fysieke kitje. Naast de artikelcode maar duidelijk ondergeschikt: de artikelcode
   is waarmee besteld wordt, dit is waarmee het doosje in de hand geidentificeerd wordt. Het
   voorvoegsel staat in het chipje zelf, zodat er geen los labeltje boven hoeft. */
.od-line__kit[b-ngw0c424zf] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #334155;
}

.od-line__kit-label[b-ngw0c424zf] {
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.od-line__amount[b-ngw0c424zf] {
    padding: 0.1rem 0.45rem;
    border: 1px solid #e6e8ec;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--txt-shade-3, #64748b);
}

.od-line__spacer[b-ngw0c424zf] {
    flex: 1 1 auto;
}

.od-line__fields[b-ngw0c424zf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1.6rem;
    margin-top: 0.8rem;
}

.od-line__action[b-ngw0c424zf] {
    align-self: flex-end;
}

.od-line__note[b-ngw0c424zf] {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #94a3b8;
}

/* Een feit is een label boven een waarde. Zelfde labelvorm als de orderregels op /orders/new. */
.od-fact[b-ngw0c424zf] {
    min-width: 0;
}

.od-fact__label[b-ngw0c424zf] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

.od-fact__value[b-ngw0c424zf] {
    margin-top: 0.25rem;
    font-size: 0.86rem;
    color: #0f172a;
}

/* Buiscode in monospace met streepje, gelijk aan /batches en de LIMS-rapportage. */
.od-fact__tube[b-ngw0c424zf] {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.1rem 0.4rem;
    background: #f3f6fb;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
}

/* ------------------------------------------------------------------
   Memo's als feed
   ------------------------------------------------------------------ */

.od-memo[b-ngw0c424zf] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-top: 1px solid #eef1f4;
}

.od-memo__type[b-ngw0c424zf] {
    flex: 0 0 auto;
    padding: 0.15rem 0.55rem;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
}

.od-memo__body[b-ngw0c424zf] {
    flex: 1 1 auto;
    min-width: 0;
}

/* De inhoud van een memo is vaak een code (een PostNL-volgnummer), dus monospace; en hij mag
   afbreken, want een lange code hoort de kaart niet op te rekken. */
.od-memo__content[b-ngw0c424zf] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #0f172a;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.od-memo__file[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.od-memo__file:hover[b-ngw0c424zf] {
    background: #f1f5f9;
    border-color: #d3d7de;
}

.od-memo__file svg[b-ngw0c424zf] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: #dc2626;
}

.od-memo__meta[b-ngw0c424zf] {
    margin-top: 0.5rem;
    font-size: 0.76rem;
    color: #94a3b8;
}

/* ------------------------------------------------------------------
   Status
   ------------------------------------------------------------------ */

.od-statusrow[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
}

.od-statusrow--divided[b-ngw0c424zf] {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid #eef1f4;
}

.od-statusrow__label[b-ngw0c424zf] {
    font-size: 0.86rem;
    font-weight: 600;
    color: #344054;
}

.od-statusrow__control[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Schakelaar. Eigen vorm en niet de globale .checkbox--toggle: die hoort bij het oude
   .field__inline-elements-idioom dat hier weg is. */
.od-switch[b-ngw0c424zf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.od-switch input[b-ngw0c424zf] {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.od-switch__track[b-ngw0c424zf] {
    position: relative;
    width: 40px;
    height: 22px;
    background: #e2e8f0;
    border-radius: 999px;
    transition: background-color 0.15s ease;
    pointer-events: none;
}

.od-switch__track[b-ngw0c424zf]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
    transition: transform 0.15s ease;
}

.od-switch input:checked + .od-switch__track[b-ngw0c424zf] {
    background: hsl(209, 100%, 50%);
}

.od-switch input:checked + .od-switch__track[b-ngw0c424zf]::after {
    transform: translateX(18px);
}

.od-switch input:focus-visible + .od-switch__track[b-ngw0c424zf] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.od-field[b-ngw0c424zf] {
    margin-top: 1rem;
}

.od-field__label[b-ngw0c424zf] {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

/* ------------------------------------------------------------------
   Afleveradres
   ------------------------------------------------------------------ */

.od-address[b-ngw0c424zf] {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #0f172a;
}

.od-address__name[b-ngw0c424zf] {
    font-weight: 600;
}

.od-address__country[b-ngw0c424zf] {
    color: var(--txt-shade-3, #64748b);
}

/* ------------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------------ */

/* Omrande pil, zelfde vorm als "Lijst printen" op /orders en de PGx-PDF-knop elders. */
.od-btn[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.4rem 0.95rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.od-btn:hover:not(:disabled)[b-ngw0c424zf] {
    background: #f4f6f8;
    border-color: #b9bfc9;
}

.od-btn:focus-visible[b-ngw0c424zf] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.od-btn:disabled[b-ngw0c424zf] {
    opacity: 0.55;
    cursor: default;
}

.od-btn svg[b-ngw0c424zf] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* Kleinere variant voor in een orderregel: daar staat de knop naast tekst en mag hij niet
   domineren. */
.od-btn--sm[b-ngw0c424zf] {
    min-height: 32px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
}

.od-btn--sm svg[b-ngw0c424zf] {
    width: 14px;
    height: 14px;
}

.od-btn--block[b-ngw0c424zf] {
    width: 100%;
}

.od-printlist[b-ngw0c424zf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tekstknop voor een bijzaak naast een kaartkop. */
.od-textbtn[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--link-color, hsl(209, 100%, 42%));
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.od-textbtn:hover[b-ngw0c424zf] {
    text-decoration: underline;
}

.od-textbtn svg[b-ngw0c424zf] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.od-iconbtn[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    color: #94a3b8;
    cursor: pointer;
}

.od-iconbtn svg[b-ngw0c424zf] {
    width: 15px;
    height: 15px;
}

.od-iconbtn--danger:hover[b-ngw0c424zf] {
    color: #dc2626;
    border-color: #fca5a5;
}

.od-iconbtn:focus-visible[b-ngw0c424zf] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Annuleren
   ------------------------------------------------------------------ */

/* Rustig en tekstueel. Het was een rood blok en daarmee het luidste element op de pagina, terwijl
   het het gevaarlijkste is: luid en gevaarlijk horen niet samen. De bevestigingsdialoog doet het
   werk, niet de kleur. */
.od-danger[b-ngw0c424zf] {
    padding: 0 1.3rem;
}

.od-danger__btn[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b42318;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.od-danger__btn:hover[b-ngw0c424zf] {
    text-decoration: underline;
}

.od-danger__btn:focus-visible[b-ngw0c424zf] {
    outline: 2px solid #b42318;
    outline-offset: 2px;
}

.od-danger__btn svg[b-ngw0c424zf] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.od-danger__hint[b-ngw0c424zf] {
    margin-top: 0.15rem;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #94a3b8;
}

/* ------------------------------------------------------------------
   Smal scherm
   ------------------------------------------------------------------ */

/* Onder de 900px past de zijkolom van 348px niet meer naast de hoofdkolom; flex-wrap doet dat al,
   maar dan moet de zijkolom wel de volle breedte pakken in plaats van 348px te blijven. */
@media (max-width: 900px) {
    .od-side[b-ngw0c424zf] {
        flex: 1 1 100%;
    }
}

/* Op een aanraakscherm haalt elk raakvlak de 44px. Op het bureaublad zijn die 30 tot 38px
   bewust kleiner: daar is de aanwijzer nauwkeurig en kosten grote knoppen alleen ruimte. */
@media (max-width: 640px) {
    .od-header__back[b-ngw0c424zf],
    .od-idchip[b-ngw0c424zf],
    .od-textbtn[b-ngw0c424zf],
    .od-memo__file[b-ngw0c424zf] {
        min-height: 44px;
    }

    .od-btn[b-ngw0c424zf] {
        min-height: 44px;
    }

    .od-btn--sm[b-ngw0c424zf] {
        min-height: 44px;
        padding: 0.3rem 0.9rem;
    }

    .od-iconbtn[b-ngw0c424zf] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .od-switch[b-ngw0c424zf],
    .od-switch__track[b-ngw0c424zf] {
        width: 44px;
        height: 26px;
    }

    .od-switch__track[b-ngw0c424zf]::after {
        width: 20px;
        height: 20px;
    }

    .od-switch input:checked + .od-switch__track[b-ngw0c424zf]::after {
        transform: translateX(18px);
    }

    .od-danger[b-ngw0c424zf] {
        padding: 0;
    }

    .od-danger__btn[b-ngw0c424zf] {
        min-height: 44px;
    }
}

/* ==================================================================
   Dialogen (afleveradres wijzigen, nieuwe memo)
   ==================================================================

   Waren MudBlazor-overlays met kale MudCard/MudTextField-opmaak. Nu platte HTML in de vormtaal van
   de pagina, met dezelfde EditForm + FluentValidation-validators als eerst.

   ::deep IS HIER VERPLICHT voor de invoervelden: `.od-input` staat op InputText / InputTextArea /
   InputFile, en dat zijn COMPONENTEN. Het scope-attribuut landt niet op het element dat zo'n
   component rendert, dus `.od-input[b-hash]` matcht nooit en het veld zou volledig ongestyled
   blijven. Hetzelfde geldt voor de melding die ValidationMessage rendert. Vierde keer in dit
   project; zie ook `.no-input` op NewOrder en `.ord-search` op Orders. */

/* Verduisterde laag. Klikken sluit de dialoog, net als de sluitknop. */
.od-scrim[b-ngw0c424zf] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, 0.45);
}

.od-dialog[b-ngw0c424zf] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1301;
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.22), 0 4px 10px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.od-dialog__head[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    padding: 1.05rem 1.3rem;
    border-bottom: 1px solid #eef1f4;
}

.od-dialog__icon[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.od-dialog__icon svg[b-ngw0c424zf] {
    width: 15px;
    height: 15px;
}

.od-dialog__title[b-ngw0c424zf] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.od-dialog__close[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.od-dialog__close:hover[b-ngw0c424zf] {
    background: #f1f5f9;
    color: #0f172a;
}

.od-dialog__close svg[b-ngw0c424zf] {
    width: 16px;
    height: 16px;
}

/* Het middendeel scrollt, kop en voet blijven staan: een adresformulier op een laag scherm is
   anders niet af te maken zonder de knoppen kwijt te raken. */
.od-dialog__body[b-ngw0c424zf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem 1.3rem;
}

.od-dialog__foot[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.9rem 1.3rem;
    border-top: 1px solid #eef1f4;
    background: #fbfcfd;
}

/* ---- formulier ---- */

.od-formgrid[b-ngw0c424zf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.od-formfield[b-ngw0c424zf] {
    min-width: 0;
}

.od-formfield--wide[b-ngw0c424zf] {
    grid-column: 1 / -1;
}

.od-formfield__label[b-ngw0c424zf] {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

/* Een veld is GEVULD en niet wit: op een witte kaart is een wit veld met een dun randje pas te
   vinden als je de rand ziet. Zelfde keuze en dezelfde waarden als op /orders/new. */
[b-ngw0c424zf] .od-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f3f6fb;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

[b-ngw0c424zf] .od-input:focus {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[b-ngw0c424zf] .od-input--area {
    min-height: 8rem;
    resize: vertical;
    line-height: 1.5;
}

/* De melding van ValidationMessage. Stond er eerst niet: MudTextField liet een fout alleen als
   rode rand zien, dus je zag DAT er iets mis was en niet WAT. */
[b-ngw0c424zf] .validation-message {
    margin-top: 0.25rem;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #b42318;
}

/* ---- bijlage ---- */

.od-upload[b-ngw0c424zf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

/* De echte bestandskiezer is onzichtbaar maar WEL bereikbaar (niet display:none): het label
   ervoor is de knop, en met display:none zou toetsenbordfocus verdwijnen. */
[b-ngw0c424zf] .od-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.od-upload__file[b-ngw0c424zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.8rem;
    color: #344054;
    overflow-wrap: anywhere;
}

.od-upload__file svg[b-ngw0c424zf] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: #dc2626;
}

.od-upload__size[b-ngw0c424zf] {
    color: #94a3b8;
}

/* De bevestigende knop van een dialoog. Enige gevulde knop op dit scherm; de rest is omrand. */
.od-btn--primary[b-ngw0c424zf] {
    border-color: transparent;
    background: hsl(209, 100%, 50%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 128, 255, 0.35);
}

.od-btn--primary:hover:not(:disabled)[b-ngw0c424zf] {
    background: hsl(209, 100%, 45%);
    border-color: transparent;
}

/* Een <label> als knop moet ook de knopmaten pakken. */
.od-upload label.od-btn[b-ngw0c424zf] {
    cursor: pointer;
}

@media (max-width: 640px) {
    .od-formgrid[b-ngw0c424zf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .od-dialog[b-ngw0c424zf] {
        width: calc(100vw - 1rem);
    }
}
/* /Pages/Orders.razor.rz.scp.css */
/* Bestellingen: alleen de paginakop, in het "rond thema" van /batches. Scoped CSS, dus dit raakt
   alleen deze pagina en staat los van de Less-lagen in wwwroot/css (style.css wordt door Web
   Compiler gegenereerd uit style.less en mag niet met de hand aangepast worden).

   De tabel eronder blijft voorlopig de globale .dip-data-table gebruiken; die is gedeeld met andere
   pagina's en hoort niet vanuit hier omgebouwd te worden. */

/* Verticaal symmetrische sectie, zelfde correctie als /batches. */
.section[b-z3fwbdd5vs] {
    padding-top: 1.35rem;
}

.orders-header[b-z3fwbdd5vs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0 0 1.35rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.orders-header__intro[b-z3fwbdd5vs] {
    min-width: 0;
}

.orders-header__title[b-z3fwbdd5vs] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.orders-header__subtitle[b-z3fwbdd5vs] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--txt-shade-3, #64748b);
}

/* De primaire actie van deze pagina. Pill-vorm zoals de rest van het ronde thema; merkblauw uit
   2-design-tokens (hsl 209 100% 50%), gelijk aan .dip-button. */
.orders-header__new[b-z3fwbdd5vs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.62rem 1.15rem;
    background: hsl(209, 100%, 50%);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1rem;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 128, 255, 0.35);
    transition: background-color 0.15s ease;
}

.orders-header__new:hover[b-z3fwbdd5vs] {
    background: hsl(209, 100%, 45%);
    color: #fff;
}

.orders-header__new:focus-visible[b-z3fwbdd5vs] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.orders-header__new svg[b-z3fwbdd5vs] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Kop-acties
   ------------------------------------------------------------------ */

/* De twee knoppen in één wrapper: los in een space-between-kop landt de eerste midden in de
   balk. Zo blijven ze als groep rechts staan en houden ze onderling hun eigen afstand. */
.orders-header__actions[b-z3fwbdd5vs] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.orders-header__print[b-z3fwbdd5vs] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.orders-header__print:hover[b-z3fwbdd5vs] {
    background: #f4f6f8;
    border-color: #b9bfc9;
}

.orders-header__print:focus-visible[b-z3fwbdd5vs] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.orders-header__print svg[b-z3fwbdd5vs] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Filterbalk: zoeken, periode, verversen - alle drie op één lijn
   ------------------------------------------------------------------ */

/* Eén hoogte voor alle drie de bedieningselementen. Expliciet en niet uit padding + regelhoogte
   laten volgen: dan verschilt de hoogte per element (een select rekent anders dan een input) en
   dat zie je meteen omdat ze naast elkaar staan. */
.control-nav[b-z3fwbdd5vs] {
    --ord-control-h: 44px;
    align-items: center;
    gap: 0.6rem;
}

/* ::deep is hier VERPLICHT. `.ord-search` staat op een EditForm, en dat is een component: het
   scope-attribuut landt niet op het <form> dat het rendert, dus `.ord-search[b-hash]` matcht
   nooit. Gevolg zonder ::deep: geen position:relative, waardoor de zoekknop zich niet meer aan
   de pil ankert maar aan de pagina en helemaal rechts belandt. Zie ook .no-input--narrow op
   NewOrder - zelfde val, derde keer in dit project. */
[b-z3fwbdd5vs] .ord-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 340px;
    min-width: 220px;
    max-width: 560px;
    height: var(--ord-control-h);
}

.ord-search__icon[b-z3fwbdd5vs] {
    position: absolute;
    left: 0.95rem;
    display: inline-flex;
    color: #98a2b3;
    pointer-events: none;
}

.ord-search__icon svg[b-z3fwbdd5vs] {
    width: 17px;
    height: 17px;
}

[b-z3fwbdd5vs] .ord-search__input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 2.85rem 0 2.65rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    font-size: 0.92rem;
    color: #101828;
}

[b-z3fwbdd5vs] .ord-search__input::placeholder {
    color: #98a2b3;
}

[b-z3fwbdd5vs] .ord-search__input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Verticaal gecentreerd via top/translate en niet via een vaste top-waarde: de pil kan van
   hoogte veranderen en dan blijft de knop staan waar hij stond. */
[b-z3fwbdd5vs] .ord-search__submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
}

[b-z3fwbdd5vs] .ord-search__submit svg {
    width: 15px;
    height: 15px;
}

/* De datumvelden bij een aangepast bereik: MudBlazor rendert zijn eigen hoogte, dus die kan niet
   op --ord-control-h gedwongen worden zonder de component te vechten. Ze staan wel gecentreerd
   mee in de rij. */
[b-z3fwbdd5vs] .mud-input-control {
    align-self: center;
}

.ord-refresh[b-z3fwbdd5vs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ord-control-h);
    height: var(--ord-control-h);
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid #d3d7de;
    border-radius: 50%;
    background: #fff;
    color: #475467;
    cursor: pointer;
}

.ord-refresh:hover[b-z3fwbdd5vs] {
    background: #f4f6f8;
}

.ord-refresh:focus-visible[b-z3fwbdd5vs] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.ord-refresh svg[b-z3fwbdd5vs] {
    width: 17px;
    height: 17px;
}

/* Zegt dat de zoekopdracht buiten de gekozen periode kijkt. Een mededeling en geen waarschuwing,
   dus blauw en niet amber. */
.ord-scope-note[b-z3fwbdd5vs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.15rem 0 0.6rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
}

.ord-scope-note svg[b-z3fwbdd5vs] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Cellen van de lijst
   ------------------------------------------------------------------ */

/* Volgnummer: smal en rechts uitgelijnd, want het zijn getallen die je onder elkaar leest.
   `.ord-col-nr[b-hash]` (0-2-0) verslaat de globale `.dip-data-table td` (0-1-1). */
.ord-col-nr[b-z3fwbdd5vs] {
    width: 1px;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ord-col-date[b-z3fwbdd5vs] {
    white-space: nowrap;
}

/* Adres als EEN cel: vlag links, twee regels ernaast. Straat, postcode, woonplaats en de vlag
   waren vier kolommen voor een adres, dat daarmee in stukken over de tabel lag. */
.ord-addr[b-z3fwbdd5vs] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.ord-addr__flag[b-z3fwbdd5vs] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.ord-addr__lines[b-z3fwbdd5vs] {
    min-width: 0;
}

.ord-addr__street[b-z3fwbdd5vs] {
    display: block;
}

/* De plaatsregel is ondergeschikt: je zoekt op straat, de plaats bevestigt. */
.ord-addr__place[b-z3fwbdd5vs] {
    display: block;
    font-size: 0.8rem;
    color: var(--txt-shade-3, #64748b);
}

/* Inhoud: artikelcodes als chipjes, zodat een bestelling met twee artikelen niet als een
   doorlopende zin leest. Monospace omdat het codes zijn. */
.ord-contents[b-z3fwbdd5vs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ord-contents__item[b-z3fwbdd5vs] {
    padding: 0.1rem 0.4rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

/* Afwezigheid ziet er anders uit dan een waarde: anders lijkt "geen" een naam. */
.ord-none[b-z3fwbdd5vs] {
    color: #94a3b8;
    font-style: italic;
}

/* ------------------------------------------------------------------
   Aanklikbare rij
   ------------------------------------------------------------------ */

/* De oplichtende rij bestond al (`.dip-data-table tbody tr:hover td`); alleen de cursor komt erbij.
   Zelfde regels als op /profiles. */
.dip-data-table tbody tr[data-rownav]:hover td[b-z3fwbdd5vs] {
    cursor: pointer;
}

/* Smalle actiekolom, rechts uitgelijnd. `.ord-go-col[b-hash]` (0-2-0) verslaat de globale
   `.dip-data-table td` (0-1-1), dus de padding hieronder wint. */
.ord-go-col[b-z3fwbdd5vs] {
    width: 1px;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
    text-align: right;
}

.ord-go[b-z3fwbdd5vs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: hsl(0, 0%, 55%);
}

.ord-go svg[b-z3fwbdd5vs] {
    width: 17px;
    height: 17px;
}

.dip-data-table tbody tr:hover .ord-go[b-z3fwbdd5vs] {
    color: hsl(209, 100%, 50%);
}
/* /Pages/PgxImport/Index.razor.rz.scp.css */
/* SOPHiA PGx-import (PORTALPGXIMPORT): rond thema in lijn met /batches en /pgxmatrix. Scoped CSS. */

.pgi-page[b-ao7uefmejk] {
    padding-top: 1.35rem;
    padding-bottom: 2.5rem;
}

/* ---- header ---- */
.pgi-header[b-ao7uefmejk] {
    margin: 0 0 1.35rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pgi-header__title[b-ao7uefmejk] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.pgi-header__subtitle[b-ao7uefmejk] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

/* ---- kaart ---- */
.pgi-card[b-ao7uefmejk] {
    margin: 0 0 1.15rem;
    padding: 1.15rem 1.35rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pgi-card__head[b-ao7uefmejk] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
}

.pgi-card__title[b-ao7uefmejk] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.pgi-card__action[b-ao7uefmejk] {
    margin-left: auto;
}

.pgi-card__hint[b-ao7uefmejk] {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: #64748b;
}

.pgi-step[b-ao7uefmejk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.pgi-subhead[b-ao7uefmejk] {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}

/* ---- upload ---- */
.pgi-upload[b-ao7uefmejk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.pgi-filebtn[b-ao7uefmejk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    background: #eef2f7;
    border: 1px solid #b8c2cf;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pgi-filebtn:hover[b-ao7uefmejk] {
    background: #e2e8f0;
}

/* de echte InputFile onzichtbaar over de knop leggen */
.pgi-filebtn[b-ao7uefmejk]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pgi-prefix[b-ao7uefmejk] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pgi-field__label[b-ao7uefmejk] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    padding-left: 0.2rem;
}

.pgi-input[b-ao7uefmejk] {
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pgi-input:focus[b-ao7uefmejk] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ---- gekozen bestanden ---- */
.pgi-filelist[b-ao7uefmejk] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pgi-filelist__item[b-ao7uefmejk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
}

.pgi-filelist__name[b-ao7uefmejk] {
    font-size: 0.88rem;
    color: #0f172a;
    word-break: break-all;
}

.pgi-filelist__size[b-ao7uefmejk] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
}

.pgi-filelist__remove[b-ao7uefmejk] {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
    transition: color 0.15s ease;
}

.pgi-filelist__remove:hover[b-ao7uefmejk] {
    color: #dc2626;
}

/* ---- knoppen ---- */
.pgi-actions[b-ao7uefmejk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin: 1.2rem 0 0;
}

.pgi-btn[b-ao7uefmejk] {
    padding: 0.55rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.pgi-btn:disabled[b-ao7uefmejk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pgi-btn--primary[b-ao7uefmejk] {
    background: #2563eb;
    color: #fff;
}

.pgi-btn--primary:not(:disabled):hover[b-ao7uefmejk] {
    background: #1d4ed8;
}

.pgi-btn--secondary[b-ao7uefmejk] {
    background: #eef2f7;
    color: #0f172a;
    border-color: #cbd5e1;
}

.pgi-btn--secondary:not(:disabled):hover[b-ao7uefmejk] {
    background: #e2e8f0;
}

.pgi-btn--ghost[b-ao7uefmejk] {
    background: transparent;
    color: #2563eb;
    border-color: transparent;
}

.pgi-btn--ghost:not(:disabled):hover[b-ao7uefmejk] {
    background: #eff6ff;
}

/* ---- validatie-samenvatting ---- */
.pgi-summary[b-ao7uefmejk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 0.25rem;
}

.pgi-summary__item[b-ao7uefmejk] {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    text-align: center;
}

.pgi-summary__value[b-ao7uefmejk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.pgi-summary__label[b-ao7uefmejk] {
    font-size: 0.75rem;
    color: #64748b;
}

.pgi-samples[b-ao7uefmejk] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}

.pgi-samples summary[b-ao7uefmejk] {
    cursor: pointer;
    color: #2563eb;
    font-weight: 600;
}

.pgi-samples__list[b-ao7uefmejk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.pgi-chip[b-ao7uefmejk] {
    padding: 0.2rem 0.65rem;
    background: #eef2f7;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #334155;
}

/* ---- meldingen ---- */
.pgi-warnings[b-ao7uefmejk],
.pgi-errors[b-ao7uefmejk] {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
}

.pgi-warnings[b-ao7uefmejk] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.pgi-errors[b-ao7uefmejk] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.pgi-warnings li[b-ao7uefmejk],
.pgi-errors li[b-ao7uefmejk] {
    margin: 0.15rem 0;
}

/* ---- batchkeuze ---- */
.pgi-batch[b-ao7uefmejk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
}

.pgi-batch__name[b-ao7uefmejk] {
    flex: 1 1 240px;
    min-width: 200px;
}

.pgi-radio[b-ao7uefmejk],
.pgi-check[b-ao7uefmejk] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #0f172a;
    cursor: pointer;
}

.pgi-check--danger[b-ao7uefmejk] {
    color: #b91c1c;
    font-weight: 600;
}

.pgi-options[b-ao7uefmejk] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pgi-danger-note[b-ao7uefmejk] {
    margin: 0.1rem 0 0 1.7rem;
    padding: 0.6rem 0.85rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    font-size: 0.82rem;
    color: #991b1b;
}

/* pill-select met eigen chevron */
.pgi-select-wrap[b-ao7uefmejk] {
    position: relative;
    display: inline-block;
}

.pgi-select[b-ao7uefmejk] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 240px;
    padding: 0.5rem 2.4rem 0.5rem 1.1rem;
    font-size: 0.9rem;
    color: #0f172a;
    background: #eef2f7;
    border: 1px solid #b8c2cf;
    border-radius: 999px;
    cursor: pointer;
}

.pgi-select:focus[b-ao7uefmejk] {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.pgi-select-wrap__chevron[b-ao7uefmejk] {
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    pointer-events: none;
    color: #64748b;
}

/* ---- historie ---- */
.pgi-history__num[b-ao7uefmejk] {
    text-align: right;
    white-space: nowrap;
}

.pgi-status[b-ao7uefmejk] {
    display: inline-block;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.pgi-status--queued[b-ao7uefmejk] {
    background: #e2e8f0;
    color: #475569;
}

.pgi-status--running[b-ao7uefmejk] {
    background: #dbeafe;
    color: #1e40af;
}

.pgi-status--processing[b-ao7uefmejk] {
    background: #fef3c7;
    color: #92400e;
}

.pgi-status--done[b-ao7uefmejk] {
    background: #dcfce7;
    color: #166534;
}

.pgi-status--failed[b-ao7uefmejk] {
    background: #fee2e2;
    color: #991b1b;
}

.pgi-log summary[b-ao7uefmejk] {
    cursor: pointer;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 600;
}

.pgi-log__text[b-ao7uefmejk] {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.85rem;
    max-height: 260px;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.pgi-empty[b-ao7uefmejk] {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.pgi-muted[b-ao7uefmejk] {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .pgi-select[b-ao7uefmejk],
    .pgi-select-wrap[b-ao7uefmejk],
    .pgi-batch__name[b-ao7uefmejk] {
        width: 100%;
    }
}

/* ---- standaardwaarden voor nieuwe profielen ----
   Stond eerder hardgecodeerd op nl / NL / EUR en was nergens zichtbaar. Per veld staat de herkomst
   erbij, zodat duidelijk is of de gebruiker het zelf kan veranderen (portaaltaal), de beheerder
   (kanaalinstelling) of niemand (standaardwaarde). */
.pgi-defaults[b-ao7uefmejk] {
    margin: 0 0 0.85rem;
    padding: 0.9rem 1.1rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
}

.pgi-defaults__head[b-ao7uefmejk] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.pgi-defaults__grid[b-ao7uefmejk] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0.6rem 0 0;
}

.pgi-defaults__item[b-ao7uefmejk] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pgi-defaults__label[b-ao7uefmejk] {
    font-size: 0.75rem;
    color: #64748b;
}

.pgi-defaults__value[b-ao7uefmejk] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.pgi-defaults__source[b-ao7uefmejk] {
    font-size: 0.72rem;
    font-style: italic;
    color: #94a3b8;
}

.pgi-defaults__note[b-ao7uefmejk] {
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}
/* /Pages/PgxMatrix/EditEnzymeDialog.razor.rz.scp.css */
/* Celbewerking PGx-matrix (2026-10-15). Alles hangt aan eigen markup (ced-*), dus het scope-attribuut
   staat overal op; geen ::deep nodig. Knoppen en velden zetten elke eigenschap zelf, want de globale
   stijl mag hier niets bepalen. Kleuren van de fenotypes zijn die van de matrix (PM rood, IM oranje,
   NM groen, RM/UM blauw), zodat een keuze hier eruitziet als de cel straks. */

/* ---- kop ---- */
.ced-head[b-skqz0st6h3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ced-head__gene[b-skqz0st6h3] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 0.8rem;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.ced-head__text[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ced-head__title[b-skqz0st6h3] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.ced-head__profile[b-skqz0st6h3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    font-size: 0.8rem;
    color: #64748b;
}

.ced-mono[b-skqz0st6h3] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- inhoud ---- */
.ced[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    color: #0f172a;
}

.ced-note[b-skqz0st6h3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.ced-note svg[b-skqz0st6h3] {
    flex: 0 0 auto;
    margin-top: 1px;
}

.ced-note--warn[b-skqz0st6h3] {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.ced-note--error[b-skqz0st6h3] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* laden */
.ced-skel[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ced-skel__bar[b-skqz0st6h3],
.ced-skel__block[b-skqz0st6h3] {
    border-radius: 10px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: ced-shimmer-b-skqz0st6h3 1.2s ease-in-out infinite;
}

.ced-skel__bar[b-skqz0st6h3] {
    height: 14px;
}

.ced-skel__bar--short[b-skqz0st6h3] {
    width: 40%;
}

.ced-skel__bar--mid[b-skqz0st6h3] {
    width: 70%;
}

.ced-skel__block[b-skqz0st6h3] {
    height: 120px;
    border-radius: 16px;
}

@keyframes ced-shimmer-b-skqz0st6h3 {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ---- huidig en extern ter vergelijking ---- */
.ced-compare[b-skqz0st6h3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
}

.ced-compare__item[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    background: #f8fafc;
}

/* Geen hoofdletters: het label kan een merknaam zijn ("SOPHiA") en die moet blijven zoals hij is. */
.ced-compare__label[b-skqz0st6h3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.ced-compare__value[b-skqz0st6h3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
}

.ced-compare__value--empty[b-skqz0st6h3] {
    color: #94a3b8;
}

.ced-compare__metab[b-skqz0st6h3] {
    font-weight: 700;
}

.ced-compare__as[b-skqz0st6h3] {
    color: #475569;
    font-size: 0.8rem;
}

.ced-link[b-skqz0st6h3] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    height: auto;
    min-width: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #2563eb;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.ced-link:hover[b-skqz0st6h3] {
    text-decoration: underline;
}

/* ---- een of twee uitkomsten ---- */
.ced-seg[b-skqz0st6h3] {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px;
    background: #f3f6fb;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

.ced-seg__opt[b-skqz0st6h3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 0;
    margin: 0;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.ced-seg__opt:hover[b-skqz0st6h3] {
    color: #0f172a;
}

.ced-seg__opt:focus-visible[b-skqz0st6h3],
.ced-chip:focus-visible[b-skqz0st6h3],
.ced-btn:focus-visible[b-skqz0st6h3],
.ced-link:focus-visible[b-skqz0st6h3] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.ced-seg__opt--on[b-skqz0st6h3] {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    color: #0f172a;
}

.ced-hint[b-skqz0st6h3] {
    margin: -0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #64748b;
}

/* ---- een uitkomst ---- */
.ced-outcome[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.ced-outcome__head[b-skqz0st6h3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.ced-outcome__num[b-skqz0st6h3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 0.72rem;
}

.ced-outcome__desc[b-skqz0st6h3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    margin-top: -0.15rem;
    font-size: 0.78rem;
    color: #64748b;
}

.ced-outcome__partonly[b-skqz0st6h3] {
    color: #9a3412;
}

.ced-label[b-skqz0st6h3] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}

.ced-chips[b-skqz0st6h3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ced-chip[b-skqz0st6h3] {
    --tone: #475569;
    --tone-soft: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 52px;
    margin: 0;
    padding: 0 0.85rem;
    border: 1.5px solid color-mix(in srgb, var(--tone) 35%, #fff);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--tone);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.ced-chip:hover[b-skqz0st6h3] {
    background: var(--tone-soft);
}

.ced-chip--on[b-skqz0st6h3],
.ced-chip--on:hover[b-skqz0st6h3] {
    border-color: var(--tone);
    background: var(--tone);
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tone) 35%, transparent);
}

.ced-chip--partonly[b-skqz0st6h3] {
    border-style: dashed;
}

/* fenotype-tonen, gelijk aan de matrix */
.ced-tone--pm[b-skqz0st6h3] { --tone: #c62828; --tone-soft: #fdecea; }
.ced-tone--im[b-skqz0st6h3] { --tone: #ef6c00; --tone-soft: #fff3e0; }
.ced-tone--nm[b-skqz0st6h3] { --tone: #2e7d32; --tone-soft: #e8f5e9; }
.ced-tone--rm[b-skqz0st6h3] { --tone: #1565c0; --tone-soft: #e3f2fd; }
.ced-tone--neutral[b-skqz0st6h3] { --tone: #475569; --tone-soft: #f1f5f9; }

.ced-compare__metab.ced-tone--pm[b-skqz0st6h3],
.ced-compare__metab.ced-tone--im[b-skqz0st6h3],
.ced-compare__metab.ced-tone--nm[b-skqz0st6h3],
.ced-compare__metab.ced-tone--rm[b-skqz0st6h3] {
    color: var(--tone);
}

.ced-fields[b-skqz0st6h3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.15rem;
}

.ced-field[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    margin: 0;
}

.ced-field--grow[b-skqz0st6h3] {
    flex: 1 1 220px;
}

.ced-field--score[b-skqz0st6h3] {
    flex: 0 0 140px;
}

.ced-input[b-skqz0st6h3] {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
    color: #0f172a;
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
}

.ced-input--mono[b-skqz0st6h3] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ced-input[b-skqz0st6h3]::placeholder {
    color: #94a3b8;
}

.ced-input:focus[b-skqz0st6h3] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ---- wat er wordt opgeslagen ---- */
.ced-result[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.8rem 1rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.ced-result--ok[b-skqz0st6h3] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.ced-result--error[b-skqz0st6h3] {
    border-color: #fecaca;
    background: #fef2f2;
}

.ced-result__label[b-skqz0st6h3] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.ced-result__value[b-skqz0st6h3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.ced-pill[b-skqz0st6h3] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: var(--tone);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.ced-result__or[b-skqz0st6h3] {
    color: #475569;
    font-size: 0.82rem;
}

.ced-result__details[b-skqz0st6h3] {
    margin-left: 0.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: #334155;
}

.ced-result__desc[b-skqz0st6h3],
.ced-result__empty[b-skqz0st6h3],
.ced-result__hint[b-skqz0st6h3] {
    font-size: 0.8rem;
    color: #64748b;
}

.ced-result__error[b-skqz0st6h3] {
    font-weight: 600;
    color: #991b1b;
}

/* ---- alert en vergrendeld ---- */
.ced-flags[b-skqz0st6h3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.ced-flag[b-skqz0st6h3] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.ced-flag:hover[b-skqz0st6h3] {
    border-color: #cbd5e1;
}

/* De echte checkbox blijft bestaan (toetsenbord, schermlezer); de schakelaar is de weergave. */
.ced-flag__input[b-skqz0st6h3] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.ced-switch[b-skqz0st6h3] {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color 0.15s ease;
}

.ced-switch[b-skqz0st6h3]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
    transition: transform 0.15s ease;
}

.ced-flag__input:checked + .ced-switch[b-skqz0st6h3] {
    background: #2563eb;
}

.ced-flag__input:checked + .ced-switch[b-skqz0st6h3]::after {
    transform: translateX(14px);
}

.ced-flag__input:focus-visible + .ced-switch[b-skqz0st6h3] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 2px;
}

.ced-flag__text[b-skqz0st6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ced-flag__title[b-skqz0st6h3] {
    font-weight: 600;
    font-size: 0.85rem;
}

.ced-flag__hint[b-skqz0st6h3] {
    font-size: 0.76rem;
    line-height: 1.4;
    color: #64748b;
}

/* ---- knoppen ---- */
.ced-actions[b-skqz0st6h3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.5rem 0.5rem;
}

.ced-btn[b-skqz0st6h3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 38px;
    min-width: 0;
    margin: 0;
    padding: 0 1.1rem;
    border-radius: 999px;
    box-shadow: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.ced-btn--ghost[b-skqz0st6h3] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
}

.ced-btn--ghost:hover[b-skqz0st6h3] {
    background: #f8fafc;
}

.ced-btn--primary[b-skqz0st6h3] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.ced-btn--primary:hover[b-skqz0st6h3] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.ced-btn--primary:disabled[b-skqz0st6h3] {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.ced-spinner[b-skqz0st6h3] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 999px;
    animation: ced-spin-b-skqz0st6h3 0.7s linear infinite;
}

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

@media (max-width: 520px) {
    .ced-field--score[b-skqz0st6h3] {
        flex: 1 1 100%;
    }

    .ced-seg[b-skqz0st6h3] {
        align-self: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ced-seg__opt[b-skqz0st6h3] {
        white-space: normal;
        height: auto;
        min-height: 36px;
        padding: 0.3rem 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ced-skel__bar[b-skqz0st6h3],
    .ced-skel__block[b-skqz0st6h3],
    .ced-spinner[b-skqz0st6h3] {
        animation: none;
    }

    .ced-chip[b-skqz0st6h3],
    .ced-switch[b-skqz0st6h3],
    .ced-switch[b-skqz0st6h3]::after {
        transition: none;
    }
}
/* /Pages/PgxMatrix/Index.razor.rz.scp.css */
/* PGx-matrix: admin-achtige styling. Groen iGene-blok / lavendel SOPHiA-blok, klikbare iGene-uitkomst
   (opent de bewerk-dialog), klikbaar SOPHiA-blok (toggelt de apply-selectie). Scoped CSS. */

/* De pagina zit in .dip-content-panel (alleen links/rechts gutters, geen top/bottom). Voeg verticale
   ruimte toe: boven zodat de header niet tegen de menubalk plakt, onder voor lucht na de toelichting.
   .pgx-page is een plain element, dus deze scoped override raakt alleen deze pagina. */
.pgx-page[b-e5s0x4370v] {
    padding-top: 1.35rem;
    padding-bottom: 2.5rem;
}

/* ---- header (rond thema, zoals /batches): titel + uitleg links, batch-selectie rechts ---- */
.pgx-header[b-e5s0x4370v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0 0 1.35rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pgx-header__intro[b-e5s0x4370v] {
    min-width: 0;
}

.pgx-header__title[b-e5s0x4370v] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.pgx-header__subtitle[b-e5s0x4370v] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

/* rechts uitgelijnd: klein label boven de batch-dropdown */
.pgx-header__field[b-e5s0x4370v] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-left: auto;
}

.pgx-header__label[b-e5s0x4370v] {
    padding-left: 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
}

/* pill-select met eigen chevron, in lijn met het ronde zoekveld op /batches */
.pgx-select-wrap[b-e5s0x4370v] {
    position: relative;
    display: inline-block;
}

.pgx-select[b-e5s0x4370v] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 260px;
    padding: 0.5rem 2.4rem 0.5rem 1.1rem;
    font-size: 0.9rem;
    color: #0f172a;
    background: #eef2f7;
    border: 1px solid #b8c2cf;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pgx-select:focus[b-e5s0x4370v] {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.pgx-select-wrap__chevron[b-e5s0x4370v] {
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    pointer-events: none;
    color: #64748b;
}

/* export-acties rechts uitgelijnd, boven de tabel */
.pgx-actions[b-e5s0x4370v] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

@media (max-width: 640px) {
    .pgx-header__field[b-e5s0x4370v] {
        margin-left: 0;
        width: 100%;
    }

    .pgx-select-wrap[b-e5s0x4370v],
    .pgx-select[b-e5s0x4370v] {
        width: 100%;
    }
}

.pgx-btn[b-e5s0x4370v] {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pgx-btn:disabled[b-e5s0x4370v] {
    opacity: 0.6;
    cursor: default;
}

.pgx-btn--pdf[b-e5s0x4370v] {
    background: #2563eb;
}

.pgx-btn--pdf:hover:not(:disabled)[b-e5s0x4370v] {
    background: #1d4ed8;
}

.pgx-btn--excel[b-e5s0x4370v] {
    background: #059669;
}

.pgx-btn--excel:hover:not(:disabled)[b-e5s0x4370v] {
    background: #047857;
}

.pgx-btn--apply[b-e5s0x4370v] {
    background: #d97706;
}

.pgx-btn--apply:hover:not(:disabled)[b-e5s0x4370v] {
    background: #b45309;
}

.pgx-btn--pdfzip[b-e5s0x4370v] {
    background: #7c3aed;
}

.pgx-btn--pdfzip:hover:not(:disabled)[b-e5s0x4370v] {
    background: #6d28d9;
}

.pgx-empty[b-e5s0x4370v] {
    color: #5c6b7a;
    padding: 0.5rem 0;
}

/* ---- table ---- */
.dip-data-table--pgxmatrix[b-e5s0x4370v] {
    font-size: 0.82rem;
    table-layout: fixed;
    border-collapse: collapse;
}

.dip-data-table--pgxmatrix th[b-e5s0x4370v],
.dip-data-table--pgxmatrix td[b-e5s0x4370v] {
    vertical-align: top;
    border: 1px solid #ddd;
    padding: 0;
}

.dip-data-table--pgxmatrix thead th[b-e5s0x4370v] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f4f6f9;
    font-weight: 600;
    padding: 0.4rem 0.5rem;
    text-align: center;
    white-space: nowrap;
    width: 130px;
    min-width: 130px;
}

/* profielkolom vastgezet tijdens horizontaal scrollen */
.pgx-matrix__profile[b-e5s0x4370v],
.pgx-matrix__profile-head[b-e5s0x4370v] {
    position: sticky;
    left: 0;
    width: 150px;
    min-width: 150px;
    text-align: left;
    padding: 0.4rem 0.5rem !important;
}

.pgx-matrix__profile[b-e5s0x4370v] {
    background: #fafafa;
    z-index: 2;
    box-shadow: 1px 0 0 #ddd;
    font-weight: 600;
}

.pgx-matrix__profile-head[b-e5s0x4370v] {
    z-index: 4;
    background: #e8eaee;
}

/* buiscode-badge (monospace, met streepje) — consistent met /batches + LIMS-rapportage */
.pgx-matrix__tube[b-e5s0x4370v] {
    display: inline-block;
    max-width: 100%;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Buiscode en de twee acties op EEN regel. Ze stonden onder elkaar en maakten zo van elke rij een
   stapel van vier besturingselementen, die bovendien de rijhoogte mede bepaalde. */
.pgx-matrix__profile-row[b-e5s0x4370v] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

/* Alleen een pictogram: de naam staat in title en aria-label, want in een kolom van 150px vertellen
   tien keer "Bekijk profiel" onder elkaar niets nieuws. */
.pgx-matrix__icon-btn[b-e5s0x4370v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
}

.pgx-matrix__icon-btn:first-of-type[b-e5s0x4370v] {
    margin-left: auto;
}

.pgx-matrix__icon-btn:hover[b-e5s0x4370v] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.pgx-matrix__icon-btn:disabled[b-e5s0x4370v] {
    opacity: 0.55;
    cursor: default;
}

.pgx-matrix__icon-btn svg[b-e5s0x4370v] {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
}

/* ---- balk boven de tabel ---- */

/* De bron van de batch en het aantal verschillen staan hier EEN keer. De bronbadge stond eerder op
   elke cel; zie Index.razor.cs::_batchSource. */
.pgx-tablebar[b-e5s0x4370v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    color: #475569;
}

.pgx-tablebar__item[b-e5s0x4370v] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pgx-tablebar__swatch[b-e5s0x4370v] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
    background: #ff6666;
}

.pgx-badge-file[b-e5s0x4370v] {
    display: inline-block;
    padding: 0.02rem 0.3rem;
    border-radius: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #ede9fe;
    color: #6d28d9;
}

.pgx-badge-file--pdf[b-e5s0x4370v] {
    background: #fee2e2;
    color: #b91c1c;
}

/* ---- cellen ---- */

/* Elk profiel is TWEE tabelrijen: .pgx-cell--calc (berekend, groen) en .pgx-cell--sophia (externe bron,
   lavendel). De tabel trekt zo per rij alle groene cellen even hoog en alle lavendel cellen ook. Daarom
   staat de kleur op de cel en niet op een blok erin: een blok vult zijn cel niet, de cel wel.

   Specificiteit: deze regels moeten winnen van twee globale regels uit style.css. .dip-data-table
   td:first-child geeft de eerste cel van een rij extra ruimte links en haalt de linkerrand weg, en in de
   tweede rij van een profiel is dat de eerste GENcel (de profielcel staat er met rowspan boven). En
   .dip-data-table tbody tr:hover td zou bij hover de groene en lavendel kleur vervangen. */
.dip-data-table--pgxmatrix td.pgx-cell[b-e5s0x4370v] {
    position: relative;
    padding: 0;
    border-left: 1px solid #ddd;
}

.dip-data-table--pgxmatrix td.pgx-cell--calc[b-e5s0x4370v] {
    background: #e8f4e8;
    /* Geen lijn tussen de twee interpretaties van hetzelfde gen: bij border-collapse wint een zichtbare
       rand van "none", alleen "hidden" haalt hem weg. De scheiding is de ::before van de onderste cel. */
    border-bottom-style: hidden;
}

.dip-data-table--pgxmatrix td.pgx-cell--calc.pgx-cell--indicative[b-e5s0x4370v] {
    background: #fffacd;
}

.dip-data-table--pgxmatrix td.pgx-cell--sophia[b-e5s0x4370v] {
    background: #e8e8f4;
}

.dip-data-table--pgxmatrix td.pgx-cell--empty[b-e5s0x4370v] {
    background: #fff;
}

.dip-data-table--pgxmatrix td.pgx-cell--clickable[b-e5s0x4370v] {
    cursor: pointer;
}

.dip-data-table--pgxmatrix td.pgx-cell--calc.pgx-cell--clickable:hover[b-e5s0x4370v] {
    background: #c8e4c8;
}

.dip-data-table--pgxmatrix td.pgx-cell--sophia.pgx-cell--clickable:hover[b-e5s0x4370v],
.dip-data-table--pgxmatrix td.pgx-cell--sophia.pgx-cell--selected[b-e5s0x4370v] {
    background: #c8c8e4;
}

/* De dunne lijn tussen de berekende en de externe uitkomst van een gen. */
.pgx-cell--sophia:not(.pgx-cell--empty)[b-e5s0x4370v]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

/* Mismatch + selectie: rand als overlay-pseudo BOVEN de inhoud, een pixel naar binnen (anders tekent hij op
   de tabelrand die twee kolommen delen en lijkt hij in de buurcel door te lopen). Over de twee cellen van
   een gen verdeeld: de bovenste krijgt boven, links en rechts, de onderste onder, links en rechts, dus
   samen een doorlopend kader. pointer-events: none houdt de cellen klikbaar. */
.pgx-cell--mismatch[b-e5s0x4370v]::after,
.pgx-cell--selected[b-e5s0x4370v]::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    z-index: 1;
    pointer-events: none;
}

.pgx-cell--calc.pgx-cell--mismatch[b-e5s0x4370v]::after,
.pgx-cell--calc.pgx-cell--selected[b-e5s0x4370v]::after {
    top: 1px;
    bottom: 0;
}

.pgx-cell--sophia.pgx-cell--mismatch[b-e5s0x4370v]::after,
.pgx-cell--sophia.pgx-cell--selected[b-e5s0x4370v]::after {
    top: 0;
    bottom: 1px;
}

.pgx-cell--calc.pgx-cell--mismatch[b-e5s0x4370v]::after {
    box-shadow: inset 2px 0 0 #ff6666, inset -2px 0 0 #ff6666, inset 0 2px 0 #ff6666;
}

.pgx-cell--sophia.pgx-cell--mismatch[b-e5s0x4370v]::after {
    box-shadow: inset 2px 0 0 #ff6666, inset -2px 0 0 #ff6666, inset 0 -2px 0 #ff6666;
}

.pgx-cell--calc.pgx-cell--selected[b-e5s0x4370v]::after {
    box-shadow: inset 2px 0 0 #2563eb, inset -2px 0 0 #2563eb, inset 0 2px 0 #2563eb;
}

.pgx-cell--sophia.pgx-cell--selected[b-e5s0x4370v]::after {
    box-shadow: inset 2px 0 0 #2563eb, inset -2px 0 0 #2563eb, inset 0 -2px 0 #2563eb;
}

/* Beide tegelijk: blauwe selectie binnen, rode mismatch erbuiten, zodat een geselecteerde mismatch rood
   houdt tijdens het toepassen. */
.pgx-cell--calc.pgx-cell--mismatch.pgx-cell--selected[b-e5s0x4370v]::after {
    box-shadow: inset 2px 0 0 #2563eb, inset -2px 0 0 #2563eb, inset 0 2px 0 #2563eb,
                inset 4px 0 0 #ff6666, inset -4px 0 0 #ff6666, inset 0 4px 0 #ff6666;
}

.pgx-cell--sophia.pgx-cell--mismatch.pgx-cell--selected[b-e5s0x4370v]::after {
    box-shadow: inset 2px 0 0 #2563eb, inset -2px 0 0 #2563eb, inset 0 -2px 0 #2563eb,
                inset 4px 0 0 #ff6666, inset -4px 0 0 #ff6666, inset 0 -4px 0 #ff6666;
}

/* Een blok binnen de cel: alleen de regels, de kleur staat op de cel. */
.pgx-src[b-e5s0x4370v] {
    padding: 0;
}

/* Een blok is twee regels met dezelfde linkerrand. De strook vooraan is VAST en staat er ook als ze
   leeg is: zonder haar schuift het metabolisme op zodra er een vinkje staat, en dat is precies de
   vergelijking die je verticaal wilt maken. Geen scheidingslijnen binnen een blok - de tabel heeft
   al kolommen, en vijf haarlijnen per cel was raster op raster. */
.pgx-src__line[b-e5s0x4370v] {
    display: flex;
    align-items: center;
    /* Liever omslaan dan uit de cel lopen: een samengesteld metabolisme of een lang genotype mag een
       tweede regel pakken. */
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 5px;
}

.pgx-src__line--sub[b-e5s0x4370v] {
    align-items: flex-start;
    padding-top: 0;
}

.pgx-src__gutter[b-e5s0x4370v] {
    display: flex;
    flex: 0 0 13px;
    /* Een flex-item krimpt standaard niet onder zijn inhoud (min-width: auto), en het slot-glyph is
       breder dan 13px. Zonder deze regel duwt juist een vergrendelde cel het metabolisme opzij, en
       dat is precies wat de strook moest voorkomen. */
    min-width: 0;
    align-items: center;
    justify-content: center;
    min-height: 1px;
    overflow: hidden;
}

/* De merktekens op de tweede regel (rs, i, afwijkende bron) staan ALTIJD rechts: margin-left: auto
   duwt ze naar de rand, ook als er geen genotype is of als het genotype omslaat en ze op een eigen
   regel belanden. Zo staan de rondjes van een kolom recht onder elkaar. */
.pgx-src__marks[b-e5s0x4370v] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    margin-left: auto;
}

.pgx-src__marks:empty[b-e5s0x4370v] {
    display: none;
}

/* Grijze N/A: de bron bepaalde geen metabolisme, of alleen de externe bron heeft een uitkomst. */
.pgx-metab--na[b-e5s0x4370v] {
    font-weight: 600;
    color: #94a3b8;
}

/* Metabolisme links in de regel; bij een samengesteld metabolisme slaan de delen om binnen de cel. */
.pgx-src__metab[b-e5s0x4370v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 3px;
    min-width: 0;
}

.pgx-src__label[b-e5s0x4370v] {
    font-size: 0.66rem;
    font-weight: 600;
    color: #5c6b7a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Rechts uitgelijnd: zo staan de scores van een kolom onder elkaar en is die kolom van boven naar
   beneden te lezen. */
.pgx-src__as[b-e5s0x4370v] {
    margin-left: auto;
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #444;
}

.pgx-src__as--cpic[b-e5s0x4370v] {
    color: #7c3aed;
}

/* SOPHiA info-"i" (geen geldig metabolisme, wel context: CNV/status/waarschuwingen).
   Tooltip zelf via MudTooltip zodat 't buiten de horizontaal-scrollende tabel valt. */
.pgx-src__info[b-e5s0x4370v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #6366f1;
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
}

/* Het genotype wordt nooit afgekapt. Het breekt op de streep tussen de allelen: de markup zet daar
   een <wbr> (zie Index.razor.cs::RenderDiplotype). overflow-wrap is het laatste redmiddel voor een
   allel dat in z'n eentje breder is dan de kolom; word-break: break-word stond hier eerder en brak
   overal, waardoor een lang genotype in vijf regels uiteenviel. */
.pgx-src__diplo[b-e5s0x4370v] {
    min-width: 0;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.25;
    color: #333;
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
}

.pgx-src__flag[b-e5s0x4370v] {
    font-size: 0.64rem;
    line-height: 1;
}

.pgx-src__flag--alert[b-e5s0x4370v] {
    color: #f59e0b;
}

/* SOPHiA apply-indicator (puur visueel; het hele blok is klikbaar) */
.pgx-src__check[b-e5s0x4370v] {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 1px solid #8a8ab5;
    border-radius: 2px;
    background: #fff;
}

.pgx-src__check--on[b-e5s0x4370v] {
    background: #4f46e5;
    border-color: #4f46e5;
    position: relative;
}

.pgx-src__check--on[b-e5s0x4370v]::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* metabolisme-kleuren; een samengesteld "NM | IM" wordt per deel gekleurd (zie RenderMetabolism) */
.pgx-metab[b-e5s0x4370v] {
    font-weight: 700;
}

/* neutrale scheiding tussen delen van een samengesteld metabolisme */
.pgx-metab__sep[b-e5s0x4370v] {
    font-weight: 400;
    color: #94a3b8;
}

.pgx-metab--pm[b-e5s0x4370v] { color: #c62828; }
.pgx-metab--im[b-e5s0x4370v] { color: #ef6c00; }
.pgx-metab--nm[b-e5s0x4370v] { color: #2e7d32; }
.pgx-metab--rm[b-e5s0x4370v] { color: #1565c0; }

/* ---- legenda + toelichting ---- */
.pgx-legend[b-e5s0x4370v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin: 1rem 0 0.75rem;
    padding: 0.6rem 0.85rem;
    background: #f9fafb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #334155;
}

.pgx-legend__title[b-e5s0x4370v] {
    font-weight: 700;
}

.pgx-legend__item[b-e5s0x4370v] {
    padding: 2px 8px;
    border-radius: 3px;
}

.pgx-legend__sw--calc[b-e5s0x4370v] { background: #e8f4e8; }
.pgx-legend__sw--indicative[b-e5s0x4370v] { background: #fffacd; }
.pgx-legend__sw--sophia[b-e5s0x4370v] { background: #e8e8f4; }
.pgx-legend__sw--mismatch[b-e5s0x4370v] { box-shadow: inset 0 0 0 2px #ff6666; }

.pgx-legend__cpic[b-e5s0x4370v] {
    color: #7c3aed;
    font-weight: 700;
}

.pgx-legend__group[b-e5s0x4370v] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pgx-legend__group .pgx-metab[b-e5s0x4370v] {
    font-size: 0.8rem;
}

.pgx-help[b-e5s0x4370v] {
    margin: 0 0 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.6;
}

.pgx-help strong[b-e5s0x4370v] {
    color: #1e293b;
}

.pgx-help dl[b-e5s0x4370v] {
    margin: 0.4rem 0 0;
}

.pgx-help dt[b-e5s0x4370v] {
    font-weight: 600;
    color: #334155;
    margin-top: 0.5rem;
}

.pgx-help dt:first-child[b-e5s0x4370v] {
    margin-top: 0;
}

.pgx-help dd[b-e5s0x4370v] {
    margin: 0 0 0 1rem;
}

/* Structurele bevinding uit het SOPHiA-rapport: gendeletie / genduplicatie / incomplete
   genkopie / hybride / onbetrouwbare CNV-call.

   Bewust een ANDERE kleur dan de mismatch-rand. Een mismatch is een meningsverschil tussen twee
   methodes; dit is een geval waarin onze eigen variant-gebaseerde uitkomst de afwijking per
   constructie niet kan zien - de leidende methode heeft geen kans om goed te zijn. */
.pgx-cell--structural[b-e5s0x4370v] {
    box-shadow: inset 4px 0 0 0 #d97706;
}

.pgx-struct[b-e5s0x4370v] {
    display: inline-block;
    margin-left: 3px;
    padding: 0 3px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
    cursor: help;
}

/* rs-calls-badge op het BEREKENDE blok: de markers die de engine voor dit gen beoordeelde.
   Neutraal grijs en een vast label, want dit is informatie en geen aandachtspunt; de alert- en
   structuur-badges moeten de aandacht houden. De popup zelf gaat via MudTooltip (inline stijlen,
   want die inhoud wordt naar de popover-provider geteleporteerd). */
/* Informatief: op CYP2D6 is de SOPHiA-uitkomst per beleid toch al leidend, dus geen
   aandachtskleur - anders licht die kolom structureel op. */
/* Bron van het externe rapport; staat er alleen als het niet SOPHiA is. */
.pgx-src__source[b-e5s0x4370v] {
    display: inline-block;
    padding: 0 3px;
    background: #0e7490;
    color: #fff;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
    cursor: help;
}

.pgx-struct--info[b-e5s0x4370v] {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
    font-weight: 600;
}

.pgx-legend__sw--structural[b-e5s0x4370v] {
    background: #fffbeb;
    box-shadow: inset 4px 0 0 0 #d97706;
}
/* /Pages/PgxMatrix/SnpCallsBadge.razor.rz.scp.css */
/* Het rs-label. Neutrale kleur: dit is informatie, geen aandachtspunt, en het mag niet concurreren met
   de alert- en structuur-badges. */
.pgx-snp__badge[b-1w1nfi1wpd] {
    display: inline-block;
    padding: 1px 4px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.25;
    vertical-align: middle;
    /* Klikbaar: opent het venster met alle rs-varianten (de tooltip toont alleen de samenvatting). */
    cursor: pointer;
}

.pgx-snp__badge:hover[b-1w1nfi1wpd] {
    background: #e2e8f0;
    color: #334155;
}
/* /Pages/PgxMatrix/SnpCallsDialog.razor.rz.scp.css */
.snpd[b-n35zmmh91d] {
    font-size: 0.85rem;
    line-height: 1.4;
}

.snpd__context[b-n35zmmh91d] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 8px;
}

.snpd__tube[b-n35zmmh91d] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #64748b;
}

.snpd__metab[b-n35zmmh91d] {
    font-weight: 700;
}

.snpd__diplo[b-n35zmmh91d] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.snpd__summary[b-n35zmmh91d] {
    margin-bottom: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
}

/* Het venster zelf scrolt niet mee: alleen de tabel, met een kop die blijft staan. */
.snpd__table-wrap[b-n35zmmh91d] {
    max-height: 55vh;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.snpd__table[b-n35zmmh91d] {
    width: 100%;
    border-collapse: collapse;
}

.snpd__table th[b-n35zmmh91d] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
    text-align: left;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}

.snpd__table td[b-n35zmmh91d] {
    padding: 3px 10px;
    white-space: nowrap;
    border-top: 1px solid #f1f5f9;
}

.snpd__id[b-n35zmmh91d] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Sterallel-markers (of, zonder x-vlaggen, alle dragers) vet; referentie-markers gedempt. */
.snpd__row--emph td[b-n35zmmh91d] {
    font-weight: 700;
}

.snpd__row--ref td[b-n35zmmh91d] {
    color: #64748b;
}

/* Een doorgetrokken lijn waar de volgende groep begint (sterallel, achtergrond, referentie). */
.snpd__row--group td[b-n35zmmh91d] {
    border-top: 1px solid #cbd5e1;
}
/* /Pages/ProfessionalManagement/Create.razor.rz.scp.css */
/*
    Nieuwe zorgbehandelaar, in de vormtaal van /orders/new: kopkaart met terugpad, de huidige stap
    als kaart links, de stappenlijst rechts.

    De waarden komen letterlijk uit NewOrder.razor.css, OrderDetail.razor.css en Settings.razor.css
    (`.st-seg`). Ze staan hier over omdat er in dit project geen gedeeld tokenbestand voor deze
    vormtaal is; scoped CSS houdt ze bovendien via specificiteit boven de gedeelde style.css.

    GEEN ::deep in dit bestand, en dat is bewust anders dan op /orders/new en in het bewerkvenster
    hiernaast: die pagina's gebruiken InputText / InputSelect, en dat zijn COMPONENTEN waar het
    scope-attribuut niet op landt. Deze pagina heeft nooit een EditForm of FluentValidation gehad
    (ze valideert per stap in ValidateStep), dus de velden zijn platte `<input @bind>` uit deze
    .razor en dragen het scope-attribuut zelf.
*/

/* Verticaal symmetrische sectie, zelfde correctie als /orders en /orders/new. */
.section[b-iukrp6h83l] {
    padding-top: 1.35rem;
}

/* ------------------------------------------------------------------
   Kopkaart
   ------------------------------------------------------------------ */

.pc-header[b-iukrp6h83l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0 0 1.1rem;
    padding: 1.05rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pc-header__back[b-iukrp6h83l] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt-shade-3, #64748b);
    text-decoration: none;
}

.pc-header__back:hover[b-iukrp6h83l] {
    text-decoration: underline;
}

.pc-header__back svg[b-iukrp6h83l] {
    width: 13px;
    height: 13px;
}

.pc-header__title[b-iukrp6h83l] {
    margin: 0.15rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

/* De teller in de kop en niet in de titel: "Stap 3 van 5" is geen naam. */
.pc-header__count[b-iukrp6h83l] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt-shade-3, #64748b);
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Twee kolommen
   ------------------------------------------------------------------ */

.pc-layout[b-iukrp6h83l] {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.pc-main[b-iukrp6h83l] {
    flex: 1 1 560px;
    min-width: 420px;
}

.pc-side[b-iukrp6h83l] {
    flex: 0 0 270px;
}

/* ------------------------------------------------------------------
   Kaart
   ------------------------------------------------------------------ */

.pc-card[b-iukrp6h83l] {
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pc-card--steps[b-iukrp6h83l] {
    padding: 0.9rem 1rem;
}

.pc-card__head[b-iukrp6h83l] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.3rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
}

.pc-card__icon[b-iukrp6h83l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.pc-card__icon svg[b-iukrp6h83l] {
    width: 14px;
    height: 14px;
}

/* De voet van de kaart hoort bij de stap: de knoppen sturen deze stap, niet de pagina. */
.pc-card__foot[b-iukrp6h83l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.35rem -1.3rem -1.15rem;
    padding: 0.9rem 1.3rem;
    border-top: 1px solid #eef1f4;
    background: #fbfcfd;
    border-radius: 0 0 19px 19px;
}

.pc-card__spacer[b-iukrp6h83l] {
    flex: 1 1 auto;
}

.pc-hint[b-iukrp6h83l] {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--txt-shade-3, #64748b);
}

/* Onder een veld en niet als losse alinea: dit hoort bij het veld erboven. */
.pc-hint--field[b-iukrp6h83l] {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.pc-legend[b-iukrp6h83l] {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #eef1f4;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #94a3b8;
    text-wrap: pretty;
}

/* ------------------------------------------------------------------
   Velden
   ------------------------------------------------------------------ */

.pc-formgrid[b-iukrp6h83l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.pc-field[b-iukrp6h83l] {
    min-width: 0;
}

.pc-field--wide[b-iukrp6h83l] {
    grid-column: 1 / -1;
}

.pc-field__label[b-iukrp6h83l] {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

/* Een veld is GEVULD en niet wit: op een witte kaart is een wit veld met een dun randje pas te
   vinden als je de rand ziet. Zelfde keuze en dezelfde waarden als op /orders/new. */
.pc-input[b-iukrp6h83l] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f3f6fb;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pc-input:focus[b-iukrp6h83l] {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Huisnummer, postcode en landcode hoeven de halve breedte niet te vullen. */
.pc-field--narrow .pc-input[b-iukrp6h83l] {
    max-width: 9rem;
}

/* Een code lees je karakter voor karakter. */
.pc-input--code[b-iukrp6h83l] {
    max-width: 18rem;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pc-field--code[b-iukrp6h83l] {
    margin-top: 1rem;
}

/* ------------------------------------------------------------------
   Keuzeblok van twee
   ------------------------------------------------------------------ */

.pc-seg[b-iukrp6h83l] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    background: #f3f6fb;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

/* De gekozen helft is een wit vlakje met schaduw: je ziet wat gekozen is EN wat het alternatief
   is. Dat is precies wat een kale schakelaar niet doet. */
.pc-seg__opt[b-iukrp6h83l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pc-seg__opt:hover[b-iukrp6h83l] {
    color: #0f172a;
}

.pc-seg__opt:focus-visible[b-iukrp6h83l] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.pc-seg__opt--on[b-iukrp6h83l] {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    color: #0f172a;
}

/* ------------------------------------------------------------------
   Codevoorstellen
   ------------------------------------------------------------------ */

.pc-codes[b-iukrp6h83l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* De code IS het vlak: er staat niets anders in de rij, dus een radiobolletje met een label
   ernaast zou een tweede doel maken voor dezelfde keuze. */
.pc-codes__opt[b-iukrp6h83l] {
    padding: 0.55rem 0.9rem;
    border: 1px solid #d3d7de;
    border-radius: 12px;
    background: #fff;
    color: #475569;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pc-codes__opt:hover[b-iukrp6h83l] {
    border-color: #b9bfc9;
    background: #f8fafc;
}

.pc-codes__opt:focus-visible[b-iukrp6h83l] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.pc-codes__opt--on[b-iukrp6h83l] {
    border-color: hsl(209, 100%, 50%);
    background: #eff6ff;
    color: #0f172a;
    box-shadow: 0 0 0 1px hsl(209, 100%, 50%) inset;
}

/* ------------------------------------------------------------------
   Modulelijst
   ------------------------------------------------------------------ */

.pc-modules[b-iukrp6h83l] {
    display: flex;
    flex-direction: column;
}

.pc-module[b-iukrp6h83l] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.pc-module:last-child[b-iukrp6h83l] {
    border-bottom: 0;
}

.pc-module__name[b-iukrp6h83l] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
}

/* ------------------------------------------------------------------
   Samenvatting
   ------------------------------------------------------------------ */

.pc-summary__head[b-iukrp6h83l] {
    margin: 0 0 0.2rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.pc-summary__rule[b-iukrp6h83l] {
    height: 1px;
    background: #eef2f7;
    margin: 0.9rem 0;
}

.pc-summary__row[b-iukrp6h83l] {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

.pc-summary__key[b-iukrp6h83l] {
    color: var(--txt-shade-3, #64748b);
}

.pc-summary__val[b-iukrp6h83l] {
    font-weight: 600;
    text-align: right;
    color: #0f172a;
}

.pc-summary__val--strong[b-iukrp6h83l] {
    font-weight: 700;
}

.pc-summary__sub[b-iukrp6h83l] {
    display: block;
    font-weight: 500;
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Afwezigheid ziet er anders uit dan een waarde: het adres is optioneel, dus geen adres is geen
   fout, maar het mag ook niet als naam lezen. */
.pc-summary__soft[b-iukrp6h83l] {
    font-weight: 500;
    color: #94a3b8;
}

.pc-code[b-iukrp6h83l] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Stappenlijst
   ------------------------------------------------------------------ */

.pc-steps[b-iukrp6h83l] {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.pc-steps__item[b-iukrp6h83l] {
    position: relative;
}

/* De lijn tussen twee stappen loopt door de nummers heen, zodat het een pad is en geen rij losse
   bolletjes. Niet onder de laatste, want daar gaat het pad niet verder. */
.pc-steps__item:not(:last-child)[b-iukrp6h83l]::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    top: 2.1rem;
    bottom: -0.1rem;
    width: 2px;
    background: #eef2f7;
}

.pc-steps__item--done:not(:last-child)[b-iukrp6h83l]::before {
    background: #bfdbfe;
}

.pc-steps__btn[b-iukrp6h83l] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.45rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    font-size: 0.86rem;
    text-align: left;
    color: var(--txt-shade-3, #64748b);
}

/* Alleen een afgeronde stap is een knop; de rest is een span. Zo is de cursor de waarheid. */
button.pc-steps__btn[b-iukrp6h83l] {
    cursor: pointer;
}

button.pc-steps__btn:hover[b-iukrp6h83l] {
    background: #f4f6f8;
    color: #0f172a;
}

button.pc-steps__btn:focus-visible[b-iukrp6h83l] {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.pc-steps__mark[b-iukrp6h83l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
}

.pc-steps__mark svg[b-iukrp6h83l] {
    width: 13px;
    height: 13px;
}

.pc-steps__label[b-iukrp6h83l] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pc-steps__item--now .pc-steps__btn[b-iukrp6h83l] {
    background: #eff6ff;
    color: #0f172a;
    font-weight: 700;
}

.pc-steps__item--now .pc-steps__mark[b-iukrp6h83l] {
    border-color: hsl(209, 100%, 50%);
    background: hsl(209, 100%, 50%);
    color: #fff;
}

.pc-steps__item--done .pc-steps__mark[b-iukrp6h83l] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: hsl(209, 100%, 42%);
}

/* ------------------------------------------------------------------
   Vinkje, knoppen en meldingen
   ------------------------------------------------------------------ */

/* Een echt aan/uit, anders dan de keuzeblokken hierboven: er is geen tweede stand met een naam,
   je verstuurt de mail of je doet het niet. */
.pc-check[b-iukrp6h83l] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #0f172a;
    cursor: pointer;
}

.pc-check input[b-iukrp6h83l] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.1rem 0 0;
    accent-color: hsl(209, 100%, 50%);
    cursor: pointer;
}

/* Omrande pil, zelfde vorm als op het orderdetail. */
.pc-btn[b-iukrp6h83l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.4rem 1.05rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pc-btn:hover:not(:disabled)[b-iukrp6h83l] {
    background: #f4f6f8;
    border-color: #b9bfc9;
}

.pc-btn:focus-visible[b-iukrp6h83l] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.pc-btn:disabled[b-iukrp6h83l] {
    opacity: 0.55;
    cursor: default;
}

/* De enige gevulde knop op dit scherm; de rest is omrand of tekst. */
.pc-btn--primary[b-iukrp6h83l] {
    border-color: transparent;
    background: hsl(209, 100%, 50%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 128, 255, 0.35);
}

.pc-btn--primary:hover:not(:disabled)[b-iukrp6h83l] {
    background: hsl(209, 100%, 45%);
    border-color: transparent;
}

/* Annuleren is een bijzaak en mag niet met de hoofdactie concurreren. */
.pc-textbtn[b-iukrp6h83l] {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--txt-shade-3, #64748b);
    text-decoration: none;
}

.pc-textbtn:hover[b-iukrp6h83l] {
    color: #0f172a;
    text-decoration: underline;
}

/* Een mededeling en geen waarschuwing, dus blauw en niet amber. */
.pc-notice[b-iukrp6h83l] {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0.9rem 1.05rem;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.pc-notice svg[b-iukrp6h83l] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.pc-notice--info[b-iukrp6h83l] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.pc-error[b-iukrp6h83l] {
    margin: 1rem 0 0;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .pc-main[b-iukrp6h83l] {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* De stappenlijst onder de kaart en niet ernaast: naast een kaart van deze breedte zou hij de
       kaart tot een kolom persen. */
    .pc-side[b-iukrp6h83l] {
        flex: 1 1 100%;
        order: -1;
    }
}

@media (max-width: 640px) {
    .pc-formgrid[b-iukrp6h83l] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pc-field--narrow .pc-input[b-iukrp6h83l] {
        max-width: none;
    }

    .pc-module[b-iukrp6h83l] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Pages/ProfessionalManagement/EditProfessionalDialog.razor.rz.scp.css */
/*
    Bewerkvenster voor een zorgbehandelaar, in dezelfde vorm als "Afleveradres wijzigen" op het
    orderdetail: verduisterde laag, 680px, kop en voet blijven staan terwijl het midden scrollt.

    Alle waarden hieronder komen letterlijk uit OrderDetail.razor.css (.od-dialog e.v.) en het
    keuzeblok uit Settings.razor.css (.st-seg). Ze staan hier over omdat er in dit project geen
    gedeeld tokenbestand voor deze vormtaal is; scoped CSS houdt ze bovendien via specificiteit
    boven de gedeelde style.css.

    ::deep IS HIER VERPLICHT voor de invoervelden: `.pe-input` staat op InputText / InputTextArea,
    en dat zijn COMPONENTEN. Het scope-attribuut landt niet op het element dat zo'n component
    rendert, dus `.pe-input[b-hash]` matcht nooit en het veld zou volledig ongestyled blijven.
    Hetzelfde geldt voor de melding die ValidationMessage rendert. Zesde keer in dit project; zie
    ook `.od-input` op OrderDetail en `.no-input` op NewOrder.
*/

/* Verduisterde laag. Klikken sluit het venster, net als de sluitknop. */
.pe-scrim[b-tbpmvv92uc] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, 0.45);
}

.pe-dialog[b-tbpmvv92uc] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1301;
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.22), 0 4px 10px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.pe-dialog__head[b-tbpmvv92uc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    padding: 1.05rem 1.3rem;
    border-bottom: 1px solid #eef1f4;
}

.pe-dialog__icon[b-tbpmvv92uc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.pe-dialog__icon svg[b-tbpmvv92uc] {
    width: 15px;
    height: 15px;
}

.pe-dialog__title[b-tbpmvv92uc] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.pe-dialog__close[b-tbpmvv92uc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.pe-dialog__close:hover[b-tbpmvv92uc] {
    background: #f1f5f9;
    color: #0f172a;
}

.pe-dialog__close svg[b-tbpmvv92uc] {
    width: 16px;
    height: 16px;
}

/* Het middendeel scrollt, kop en voet blijven staan: een formulier van deze lengte is op een
   laag scherm anders niet af te maken zonder de knoppen kwijt te raken. */
.pe-dialog__body[b-tbpmvv92uc] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem 1.3rem;
}

.pe-dialog__foot[b-tbpmvv92uc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.9rem 1.3rem;
    border-top: 1px solid #eef1f4;
    background: #fbfcfd;
}

/* ------------------------------------------------------------------
   Secties en velden
   ------------------------------------------------------------------ */

.pe-sect[b-tbpmvv92uc] {
    margin: 1.35rem 0 0.7rem;
    padding-top: 1.05rem;
    border-top: 1px solid #eef1f4;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

.pe-sect:first-child[b-tbpmvv92uc] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pe-formgrid[b-tbpmvv92uc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.pe-formfield[b-tbpmvv92uc] {
    min-width: 0;
}

.pe-formfield--wide[b-tbpmvv92uc] {
    grid-column: 1 / -1;
}

.pe-formfield__label[b-tbpmvv92uc] {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

/* Een veld is GEVULD en niet wit: op een witte kaart is een wit veld met een dun randje pas te
   vinden als je de rand ziet. Zelfde keuze en dezelfde waarden als op /orders/new. */
[b-tbpmvv92uc] .pe-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f3f6fb;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

[b-tbpmvv92uc] .pe-input:focus {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[b-tbpmvv92uc] .pe-input--area {
    min-height: 4.5rem;
    resize: vertical;
    line-height: 1.5;
}

/* De code ligt vast na aanmaken: gedempt vlak met de reden eronder, en dus geen uitgeschakeld
   tekstveld waar niet bij staat waarom je er niet in kunt. Monospace omdat het een code is.
   Staat NIET achter ::deep: dit is een gewone div en geen component. */
.pe-input--ro[b-tbpmvv92uc] {
    background: #e5eaf1;
    border-color: #cbd3dd;
    color: #64748b;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
}

/* Smalle velden (huisnummer, postcode, landcode) hoeven de halve breedte niet te vullen. */
.pe-formfield--narrow[b-tbpmvv92uc]  .pe-input {
    max-width: 9rem;
}

.pe-hint[b-tbpmvv92uc] {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* De melding van ValidationMessage. Stond er eerst niet: MudTextField liet een fout alleen als
   rode rand zien, dus je zag DAT er iets mis was en niet WAT. */
[b-tbpmvv92uc] .validation-message {
    margin-top: 0.25rem;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #b42318;
}

.pe-error[b-tbpmvv92uc] {
    margin: 1rem 0 0;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-size: 0.82rem;
}

/* ------------------------------------------------------------------
   Keuzeblok van twee
   ------------------------------------------------------------------ */

.pe-seg[b-tbpmvv92uc] {
    display: inline-flex;
    padding: 3px;
    background: #f3f6fb;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

.pe-seg__opt[b-tbpmvv92uc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pe-seg__opt:hover[b-tbpmvv92uc] {
    color: #0f172a;
}

.pe-seg__opt:focus-visible[b-tbpmvv92uc] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.pe-seg__opt--on[b-tbpmvv92uc] {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    color: #0f172a;
}

/* ------------------------------------------------------------------
   Knoppen en mededelingen
   ------------------------------------------------------------------ */

.pe-mailactions[b-tbpmvv92uc] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Omrande pil, zelfde vorm als op het orderdetail. */
.pe-btn[b-tbpmvv92uc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.4rem 0.95rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pe-btn:hover:not(:disabled)[b-tbpmvv92uc] {
    background: #f4f6f8;
    border-color: #b9bfc9;
}

.pe-btn:focus-visible[b-tbpmvv92uc] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.pe-btn:disabled[b-tbpmvv92uc] {
    opacity: 0.55;
    cursor: default;
}

.pe-btn svg[b-tbpmvv92uc] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.pe-btn--sm[b-tbpmvv92uc] {
    min-height: 32px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
}

.pe-btn--sm svg[b-tbpmvv92uc] {
    width: 14px;
    height: 14px;
}

/* De bevestigende knop. Enige gevulde knop in dit venster; de rest is omrand. */
.pe-btn--primary[b-tbpmvv92uc] {
    border-color: transparent;
    background: hsl(209, 100%, 50%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 128, 255, 0.35);
}

.pe-btn--primary:hover:not(:disabled)[b-tbpmvv92uc] {
    background: hsl(209, 100%, 45%);
    border-color: transparent;
}

/* Een mededeling en geen waarschuwing, dus blauw en niet amber. Zelfde vorm als .ord-scope-note
   op de bestellingenlijst. */
.pe-note[b-tbpmvv92uc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
}

.pe-note svg[b-tbpmvv92uc] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .pe-formgrid[b-tbpmvv92uc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pe-formfield--narrow[b-tbpmvv92uc]  .pe-input {
        max-width: none;
    }
}
/* /Pages/ProfessionalManagement/Index.razor.rz.scp.css */
/*
    Zorgbehandelaarslijst in de vormtaal van /orders en /profiles: witte kopkaart met de
    hoofdactie rechts, zoekpil, en een aanklikbare rij met een pijltje.

    Scoped CSS en niet de globale LESS: style.css wordt door Web Compiler uit style.less
    gegenereerd en mag niet met de hand aangepast worden, en zo komen deze regels via
    specificiteit boven de gedeelde .dip-data-table uit. De waarden hieronder komen letterlijk
    uit Orders.razor.css en OrderDetail.razor.css; ze staan hier over omdat er in dit project
    geen gedeeld tokenbestand voor deze vormtaal is (zelfde afweging als op /orders).
*/

/* Verticaal symmetrische sectie, zelfde correctie als /orders en /batches. */
.section[b-eivnldns3s] {
    padding-top: 1.35rem;
}

/* ------------------------------------------------------------------
   Kopkaart
   ------------------------------------------------------------------ */

.pm-header[b-eivnldns3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0 0 1.35rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pm-header__intro[b-eivnldns3s] {
    min-width: 0;
}

.pm-header__title[b-eivnldns3s] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.pm-header__subtitle[b-eivnldns3s] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--txt-shade-3, #64748b);
}

/* De acties in één wrapper: los in een space-between-kop landt de eerste knop midden in de
   balk in plaats van rechts. Zelfde reden als op /orders, ook al staat er nu één knop. */
.pm-header__actions[b-eivnldns3s] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* De hoofdactie van deze pagina. Een echte <a> en geen knop, dus ctrl-klik en het toetsenbord
   werken van zichzelf; merkblauw uit 2-design-tokens (hsl 209 100% 50%). */
.pm-header__new[b-eivnldns3s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.62rem 1.15rem;
    background: hsl(209, 100%, 50%);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1rem;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 128, 255, 0.35);
    transition: background-color 0.15s ease;
}

.pm-header__new:hover[b-eivnldns3s] {
    background: hsl(209, 100%, 45%);
    color: #fff;
}

.pm-header__new:focus-visible[b-eivnldns3s] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.pm-header__new svg[b-eivnldns3s] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Zoekpil
   ------------------------------------------------------------------ */

.control-nav[b-eivnldns3s] {
    --pm-control-h: 44px;
    align-items: center;
    gap: 0.6rem;
}

/* ::deep is hier VERPLICHT. `.pm-search` staat op een EditForm, en dat is een component: het
   scope-attribuut landt niet op het <form> dat het rendert, dus `.pm-search[b-hash]` matcht
   nooit. Gevolg zonder ::deep: geen position:relative, waardoor de zoekknop zich aan de pagina
   ankert in plaats van aan de pil en helemaal rechts belandt. Zesde keer in dit project; zie
   .ord-search op Orders en .no-input--narrow op NewOrder. Controleer in
   obj/Debug/net10.0/scopedcss/bundle/iGenius.styles.css dat er `[b-hash] .pm-search` staat en
   niet `.pm-search[b-hash]`. */
[b-eivnldns3s] .pm-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 340px;
    min-width: 220px;
    max-width: 560px;
    height: var(--pm-control-h);
}

.pm-search__icon[b-eivnldns3s] {
    position: absolute;
    left: 0.95rem;
    display: inline-flex;
    color: #98a2b3;
    pointer-events: none;
}

.pm-search__icon svg[b-eivnldns3s] {
    width: 17px;
    height: 17px;
}

[b-eivnldns3s] .pm-search__input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 2.85rem 0 2.65rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    font-size: 0.92rem;
    color: #101828;
}

[b-eivnldns3s] .pm-search__input::placeholder {
    color: #98a2b3;
}

[b-eivnldns3s] .pm-search__input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Verticaal gecentreerd via top/translate en niet via een vaste top-waarde: de pil kan van
   hoogte veranderen en dan blijft de knop staan waar hij stond. */
[b-eivnldns3s] .pm-search__submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
}

[b-eivnldns3s] .pm-search__submit svg {
    width: 15px;
    height: 15px;
}

/* ------------------------------------------------------------------
   Cellen van de lijst
   ------------------------------------------------------------------ */

/* Een code scan je karakter voor karakter, dus monospace. Zelfde badge als de referentie op
   de profielenlijst. */
.pm-code[b-eivnldns3s] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

/* De naam is waar het oog op landt. */
.pm-name[b-eivnldns3s] {
    font-weight: 500;
}

/* Een leeg vakje leest als een fout; een streepje zegt dat er niets is ingevuld. */
.pm-empty[b-eivnldns3s] {
    color: #cbd5e1;
}

/* Het adres blijft leesbaar en kapt af als het niet past; voluit staat het in de tooltip.
   vertical-align: bottom houdt de puntjes op de tekstregel in plaats van eronder. */
.pm-mail[b-eivnldns3s] {
    display: inline-block;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Openen-link met extern-icoon in plaats van het volledige webadres op elke rij. */
.pm-open[b-eivnldns3s] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pm-open svg[b-eivnldns3s] {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

/* Tellingen smal en rechts uitgelijnd: het zijn getallen die je onder elkaar leest.
   `.pm-col-count[b-hash]` (0-2-0) verslaat de globale `.dip-data-table td` (0-1-1). */
.pm-col-count[b-eivnldns3s] {
    width: 1px;
    white-space: nowrap;
    text-align: right;
}

/* Telling als pil, en nul gedempt: zo zie je in een oogopslag wie profielen heeft en wie nog
   niet. Zonder achtergrond zou een nul even zwaar wegen als een echt aantal. */
.pm-count[b-eivnldns3s] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #eef2f7;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pm-count--zero[b-eivnldns3s] {
    background: transparent;
    color: #b6c2d1;
    font-weight: 500;
}

/* Read-only apotheekketen-kolom: toewijzen gebeurt in het back-office, deze kolom is puur
   inzicht. */
.pm-chain[b-eivnldns3s] {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    white-space: nowrap;
}

/* Geen keten is geen fout, maar wel gedempt: zodra er ketens gevuld zijn is zo'n
   zorgbehandelaar niet kiesbaar in de consumenten-app. */
.pm-chain--none[b-eivnldns3s] {
    background: transparent;
    color: #cbd5e1;
    font-weight: 400;
}

/* ------------------------------------------------------------------
   Aanklikbare rij
   ------------------------------------------------------------------ */

/* De oplichtende rij bestond al (`.dip-data-table tbody tr:hover td`); alleen de cursor komt
   erbij. Zelfde regels als op /orders en /profiles. */
.dip-data-table tbody tr[data-rownav]:hover td[b-eivnldns3s] {
    cursor: pointer;
}

/* Smalle actiekolom, rechts uitgelijnd. `.pm-go-col[b-hash]` (0-2-0) verslaat de globale
   `.dip-data-table td` (0-1-1), dus de padding hieronder wint. */
.pm-go-col[b-eivnldns3s] {
    width: 1px;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
    text-align: right;
}

/* Anders dan op /orders is dit een echte knop en geen versiering: hier is geen pagina om
   naartoe te gaan, dus dit is de ingang van de rij en het toetsenbordpad. */
.pm-go[b-eivnldns3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: hsl(0, 0%, 55%);
    cursor: pointer;
}

.pm-go:focus-visible[b-eivnldns3s] {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.pm-go svg[b-eivnldns3s] {
    width: 17px;
    height: 17px;
}

.dip-data-table tbody tr:hover .pm-go[b-eivnldns3s] {
    color: hsl(209, 100%, 50%);
}
/* /Pages/Profiles.razor.rz.scp.css */
/* Profielenlijst: de kolom "In de app", het bijbehorende filter en het pijltje van de aanklikbare
   rij. De pagina zelf blijft in zijn eigen vormtaal (dip-data-table, control-nav); dit voegt alleen
   toe wat er nog niet was.

   Scoped CSS, dus dit raakt alleen deze pagina en staat los van de Less-lagen in wwwroot/css:
   style.css wordt door Web Compiler uit style.less gegenereerd en mag niet met de hand aangepast
   worden.

   VALKUIL, meermaals eerder in dit project misgegaan: elk element hieronder is platte HTML uit
   Profiles.razor en draagt dus het scope-attribuut. Zou je een klasse op een CHILD-COMPONENT
   zetten (Tag, IdBadge, Pager, Mud*), dan compileert `.x` naar `.x[b-hash]` en matcht die NOOIT;
   daar is `::deep` voor nodig. De badge van de referentie draagt zijn stijl daarom zelf, in
   Shared/Controls/IdBadge.razor.css. */

/* ------------------------------------------------------------------
   Filter naast het zoekveld
   ------------------------------------------------------------------ */

/* Waarschuwingskleuren uit style.css: --c-warning hsl(36,80%,50%), --c-warning--l hsl(36,99%,96%).
   Hoogte gelijk aan .control-item__input zodat hij naast het zoekveld op zijn plek staat. */
.prof-filter[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid hsl(36, 80%, 62%);
    background: hsl(36, 99%, 96%);
    color: hsl(30, 80%, 28%);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.prof-filter:hover[b-kp2ai8krai] {
    border-color: hsl(36, 80%, 50%);
    background: hsl(36, 99%, 92%);
}

.prof-filter:focus-visible[b-kp2ai8krai] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.prof-filter svg[b-kp2ai8krai] {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

/* Aan: het vlak wordt vol, zodat je van een afstand ziet dat de lijst gefilterd is. */
.prof-filter--on[b-kp2ai8krai] {
    border-color: hsl(36, 80%, 45%);
    background: hsl(36, 80%, 62%);
    color: hsl(30, 90%, 18%);
}

.prof-filter--on:hover[b-kp2ai8krai] {
    background: hsl(36, 80%, 56%);
}

.prof-filter__count[b-kp2ai8krai] {
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: hsl(36, 80%, 62%);
    color: hsl(30, 90%, 18%);
    font-size: 0.75rem;
    font-weight: 700;
}

.prof-filter--on .prof-filter__count[b-kp2ai8krai] {
    background: hsl(30, 90%, 18%);
    color: hsl(36, 99%, 96%);
}

/* ------------------------------------------------------------------
   Kolom "In de app"
   ------------------------------------------------------------------ */

/* Bewust een label met TEKST en geen kaal oog-icoon: de resultaatkaarten op het profiel hebben
   rechtsboven al een oog en een oog-met-streep, en die klappen de kaart alleen in of uit op het
   scherm van de zorgbehandelaar. Nog een oog zou twee verschillende dingen hetzelfde laten lijken. */
.prof-hidden[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    background: hsl(36, 99%, 92%);
    color: hsl(30, 80%, 28%);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.prof-hidden svg[b-kp2ai8krai] {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
}

/* "Alles zichtbaar" is de rusttoestand en hoort niet om aandacht te vragen. */
.prof-visible[b-kp2ai8krai] {
    color: var(--txt-shade-3, #4d4d4d);
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Kolom "Zorgbehandelaar" (kanaaleigenaar)
   ------------------------------------------------------------------ */

/* Een regel per koppeling: een profiel kan er meer dan een hebben. */
.prof-pro[b-kp2ai8krai] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Een openstaand verzoek: de zorgbehandelaar moet het nog accepteren. Grijs en geen waarschuwing,
   want dat is een normale tussenstand. */
.prof-pro__pending[b-kp2ai8krai] {
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    background: #eef2f7;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Toewijzen: omrande pil, zelfde vorm als de knoppen in het venster. Klein, want hij staat per rij. */
.prof-assign[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.2rem 0.65rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.prof-assign:hover[b-kp2ai8krai] {
    background: #eff6ff;
    border-color: #93b4f5;
}

.prof-assign:focus-visible[b-kp2ai8krai] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.prof-assign svg[b-kp2ai8krai] {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

.prof-none[b-kp2ai8krai] {
    color: #94a3b8;
}

/* Ontkoppelen: klein en rustig, naast de naam. Pas het venster vraagt om bevestiging, dus de knop
   hoeft niet te waarschuwen; rood pas bij aanwijzen. De globale knopstijl centreert al. */
.prof-unlink[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.prof-unlink:hover[b-kp2ai8krai] {
    background: #fef3f2;
    color: #b42318;
}

.prof-unlink:focus-visible[b-kp2ai8krai] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.prof-unlink svg[b-kp2ai8krai] {
    width: 12px;
    height: 12px;
}

/* ------------------------------------------------------------------
   Aanklikbare rij
   ------------------------------------------------------------------ */

/* De oplichtende rij bestond al (`.dip-data-table tbody tr:hover td`); alleen de cursor komt erbij,
   en alleen op rijen die echt ergens naartoe gaan. */
.dip-data-table tbody tr[data-rownav]:hover td[b-kp2ai8krai] {
    cursor: pointer;
}

/* Smalle actiekolom, rechts uitgelijnd. `.prof-go-col[b-hash]` (0-2-0) verslaat de globale
   `.dip-data-table td` (0-1-1), dus de padding hieronder wint. */
.prof-go-col[b-kp2ai8krai] {
    width: 1px;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
    text-align: right;
}

.prof-go[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: hsl(0, 0%, 55%);
}

.prof-go svg[b-kp2ai8krai] {
    width: 17px;
    height: 17px;
}

.dip-data-table tbody tr:hover .prof-go[b-kp2ai8krai] {
    color: hsl(209, 100%, 50%);
}

/* ------------------------------------------------------------------
   Filterbalk: alles op ooghoogte
   ------------------------------------------------------------------ */

/* `.control-nav` staat globaal op `align-items: flex-start`. Dat werkte zolang elk kind een
   .control-item met een label erboven was; het tag-blok was echter een los inline-block van twee
   regels hoog (checkboxes plus de schakelaar), waardoor de rij meegroeide en alles wat GEEN label
   heeft - de nieuwe filterpil - naar de onderkant van dat blok zakte. De chips zijn nu gewone
   kinderen van deze rij en de rij centreert. `.control-nav[b-hash]` (0-2-0) verslaat de globale
   `.control-nav` (0-1-0), dus dit wint. */
.control-nav[b-kp2ai8krai] {
    align-items: center;
}

/* Scheidt de tags van zoeken en filteren zonder er een kop bij te zetten. */
.prof-tagsep[b-kp2ai8krai] {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    margin: 0 0.25rem;
    background: hsl(180, 10%, 84%);
}

/* ------------------------------------------------------------------
   Tag als schakelaar
   ------------------------------------------------------------------ */

/* De tagkleur komt uit de data en staat inline als --prof-tag / --prof-tag-fg op de knop.
   UIT: witte vulling met die kleur als rand en tekst, zodat de tag herkenbaar blijft.
   AAN: de volle tagkleur met een vinkje, precies zoals de tag in de tabel eruitziet.

   De tekstkleur in de UIT-stand loopt via color-mix omdat de praktijk zijn eigen tagkleuren kiest:
   een lichte kleur zou als tekst op wit onleesbaar zijn. De regel ervoor (#333) is de terugval
   voor een browser zonder color-mix, dus de tekst is nooit slecht leesbaar. */
.prof-tag[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    height: 1.75rem;
    padding: 0 0.6rem;
    border: 1px solid var(--prof-tag, hsl(180, 10%, 80%));
    border-radius: 999px;
    background: var(--ui-light-4, #fff);
    color: var(--txt-shade-2, #333);
    color: color-mix(in oklab, var(--prof-tag, #333) 72%, #1a1a1a);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.prof-tag:hover[b-kp2ai8krai] {
    background: hsl(180, 10%, 97%);
}

.prof-tag:focus-visible[b-kp2ai8krai] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.prof-tag svg[b-kp2ai8krai] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}

.prof-tag--on[b-kp2ai8krai] {
    background: var(--prof-tag, hsl(209, 100%, 50%));
    color: var(--prof-tag-fg, #fff);
}

.prof-tag--on:hover[b-kp2ai8krai] {
    background: var(--prof-tag, hsl(209, 100%, 50%));
    filter: brightness(0.94);
}

/* ------------------------------------------------------------------
   Combineren: alle gekozen tags, of minstens een
   ------------------------------------------------------------------ */

/* Eigen regel onder de filterbalk, zodat de balk zelf niet nog hoger wordt. */
.prof-tagmode[b-kp2ai8krai] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.prof-tagmode__label[b-kp2ai8krai] {
    font-size: 0.8rem;
    color: var(--txt-shade-2, #333);
}

/* Zelfde keuzeblok als op de instellingenpagina: twee helften in een omrande pil, de gekozen
   helft wit met schaduw. Beide woorden blijven leesbaar, en dat is precies wat de oude
   schakelaar niet deed. */
.prof-seg[b-kp2ai8krai] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    background: hsl(180, 10%, 94%);
    border: 1px solid hsl(180, 10%, 86%);
    border-radius: 999px;
}

.prof-seg__opt[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 0.6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--txt-shade-3, #4d4d4d);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.prof-seg__opt:hover[b-kp2ai8krai] {
    color: var(--txt-shade-1, #1a1a1a);
}

.prof-seg__opt:focus-visible[b-kp2ai8krai] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

.prof-seg__opt--on[b-kp2ai8krai] {
    background: var(--ui-light-4, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    color: var(--txt-shade-1, #1a1a1a);
}

/* Wissen is een uitweg, geen tweede hoofdactie: geen kader, geen vlak. */
.prof-tagclear[b-kp2ai8krai] {
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: hsl(209, 100%, 50%);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.prof-tagclear:hover[b-kp2ai8krai] {
    color: hsl(209, 100%, 40%);
    text-decoration: underline;
}

.prof-tagclear:focus-visible[b-kp2ai8krai] {
    outline: 2px solid hsl(209, 100%, 50%);
    outline-offset: 1px;
}

/* Nog geen uitslag: dan zegt de vrijgave-stand niets, dus ook geen kleur die om aandacht vraagt.
   Zelfde rusttoon als .prof-visible, maar cursief zodat je ziet dat het een toestand is en geen
   telling. */
.prof-noresult[b-kp2ai8krai] {
    color: var(--txt-shade-3, #4d4d4d);
    font-style: italic;
    white-space: nowrap;
}

/* Opgeleverd maar leeg. Zelfde vorm als .prof-hidden (een melding naast een waarde) maar in een
   andere kleur, want het is een ander soort bericht: daar houdt iemand iets tegen, hier ontbreekt
   er iets. */
/* Voorbeeldprofiel (in beheer: kanaaldemo): een eigen blok onder de lijst en de paginering, en de
   badge naast de naam. Een kaart en geen tabelrij: de kolommen van de lijst gaan over een koppeling
   en bleven bij een voorbeeld leeg. */
.prof-demo-section[b-kp2ai8krai] {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #d3d8dd;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.prof-demo-section__head[b-kp2ai8krai] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}
.prof-demo-section__title[b-kp2ai8krai] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.prof-demo-section__hint[b-kp2ai8krai] {
    margin: 0;
    font-size: 0.8rem;
    color: #4b5563;
}
.prof-demo-card[b-kp2ai8krai] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2.5rem;
    padding: 0.875rem 1.25rem;
    background: #f3fafb;
    border: 1px solid #b6dde3;
    border-radius: 8px;
}
.prof-demo-card__name[b-kp2ai8krai] {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
}
.prof-demo-card__name .prof-demo[b-kp2ai8krai] {
    margin-left: 0;
}
.prof-demo-card__field[b-kp2ai8krai] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}
.prof-demo-card__label[b-kp2ai8krai] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #5b6570;
}
.prof-demo-card__go[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #9fcfd6;
    color: #0b5a6e;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.prof-demo-card__go:hover[b-kp2ai8krai] {
    background: #e6f5f7;
    color: #08485a;
}
.prof-demo-card__go:focus-visible[b-kp2ai8krai] {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}
.prof-demo-card__go svg[b-kp2ai8krai] {
    width: 16px;
    height: 16px;
}
.prof-demo[b-kp2ai8krai] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #0e7490;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}

.prof-empty[b-kp2ai8krai] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: hsl(0, 85%, 95%);
    color: hsl(0, 65%, 35%);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}
/* /Pages/Profile/Analysedetails.razor.rz.scp.css */
/* ============================================================================
   Pagina Analysedetails (PORTALANALYSISDETAILS). Ronde stijl zoals /batches en
   Genotypen: panelen wit met rand #e6e8ec en radius 20px, pills 999px.

   Een faseringszekerheid heeft bewust geen groen/oranje/rood: er is geen
   afgesproken grens. Alleen de laagste waarde krijgt oranje als merkteken.

   Geen ::deep nodig: alle opmaak landt op gewone elementen in de eigen markup.
   ============================================================================ */

.anl-head[b-4xesso015c] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.anl-head__intro[b-4xesso015c] { min-width: 0; }

.anl-head__title[b-4xesso015c] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0f172a;
}

.anl-head__sub[b-4xesso015c] {
    margin: 6px 0 0;
    max-width: 780px;
    font-size: .875rem;
    line-height: 1.5;
    color: #475569;
}

.anl-pill[b-4xesso015c] {
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dde3ea;
    color: #475569;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.anl-panel[b-4xesso015c] {
    margin: 0 0 16px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.anl-note[b-4xesso015c] { color: #475569; }
.anl-error[b-4xesso015c] { color: #a8201a; background: #fffafa; border-color: #f6d4d1; }
.anl-blocked[b-4xesso015c] { color: #334155; }

/* ---- lege stand en "nog in analyse" -------------------------------------- */

.anl-state[b-4xesso015c] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
}

.anl-state__icon[b-4xesso015c] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #f1f5fb;
    color: #1e3a6b;
}

.anl-state__title[b-4xesso015c] { margin: 0; font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.anl-state__text[b-4xesso015c] { margin: 6px 0 0; max-width: 680px; font-size: .875rem; line-height: 1.55; color: #475569; }

/* ---- bronkaarten ----------------------------------------------------------- */

.anl-sources[b-4xesso015c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

.anl-source[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-height: 168px;
    padding: 18px 20px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid #e6e8ec;
    color: #0f172a;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    justify-content: flex-start;
}

.anl-source:hover[b-4xesso015c] { border-color: #c9d6ea; }
.anl-source--active[b-4xesso015c], .anl-source--active:hover[b-4xesso015c] { border-color: #0080ff; }

.anl-source__kicker[b-4xesso015c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.anl-source__big[b-4xesso015c] { display: flex; align-items: baseline; gap: 10px; }
.anl-source__num[b-4xesso015c] { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; }
.anl-source__unit[b-4xesso015c] { font-size: .8rem; color: #475569; }
.anl-source__line[b-4xesso015c] { font-size: .8rem; }

.anl-source__foot[b-4xesso015c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.anl-source__meta[b-4xesso015c] { font-size: .75rem; color: #64748b; }

.anl-chip[b-4xesso015c] {
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f4f8;
    color: #475569;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.anl-chip--blue[b-4xesso015c] { background: #e6f0ff; color: #0b4fa0; }

/* ---- weergave (fasering of rapport) ---------------------------------------- */

.anl-view[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 26px 28px 28px;
}

.anl-view__top[b-4xesso015c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.anl-view__heading[b-4xesso015c] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.anl-view__titlerow[b-4xesso015c] { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.anl-view__title[b-4xesso015c] { margin: 0; font-size: 1.25rem; font-weight: 700; color: #0f172a; }
.anl-view__text[b-4xesso015c] { margin: 0; max-width: 820px; font-size: .875rem; line-height: 1.55; color: #475569; }
.anl-view__line[b-4xesso015c] { font-size: .8rem; color: #475569; }

.anl-view__meta[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: .75rem;
    color: #64748b;
    white-space: nowrap;
}

.anl-view__actions[b-4xesso015c] { display: flex; flex-wrap: wrap; gap: 10px; }

.anl-btn[b-4xesso015c] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #d3d7de;
    background: #fff;
    color: #334155;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.anl-btn:hover[b-4xesso015c] { background: #f6f8fb; }
.anl-btn:disabled[b-4xesso015c] { opacity: .55; cursor: default; }
.anl-rot[b-4xesso015c] { transform: rotate(180deg); }

.anl-versions[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f6f8fb;
    font-size: .78rem;
    overflow-x: auto;
}

/* keuzeblok van twee of meer, zoals .st-seg op de instellingenpagina */
.anl-seg[b-4xesso015c] {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px;
    border-radius: 999px;
    background: #eef1f4;
}

.anl-seg__btn[b-4xesso015c] {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.anl-seg__btn--on[b-4xesso015c] {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

/* ---- fasering: kengetallen, tegels, tabel ----------------------------------- */

.anl-stats[b-4xesso015c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.anl-stat[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f6f8fb;
}

.anl-stat__label[b-4xesso015c] { font-size: .75rem; color: #64748b; }
.anl-stat__value[b-4xesso015c] { font-size: 1.5rem; font-weight: 700; color: #0f172a; }
.anl-stat__sub[b-4xesso015c] { font-size: .875rem; font-weight: 500; color: #475569; }

.anl-tiles[b-4xesso015c] {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 16px 18px 12px;
    border-radius: 16px;
    border: 1px solid #eef1f4;
    overflow-x: auto;
}

.anl-tile[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 36px;
}

.anl-tile__nr[b-4xesso015c] { font-size: .75rem; font-weight: 600; color: #475569; }

.anl-tile__bar[b-4xesso015c] {
    position: relative;
    width: 36px;
    height: 72px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #e8eef7;
    overflow: hidden;
}

.anl-tile__bar--lowest[b-4xesso015c] { outline: 2px solid #c2410c; outline-offset: 2px; }

.anl-tile__fill[b-4xesso015c] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3b7ddd;
}

.anl-tile__bar--lowest .anl-tile__fill[b-4xesso015c] { background: #c2410c; }

.anl-tile__bar--na[b-4xesso015c] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f4;
    font-size: .62rem;
    font-weight: 700;
    color: #475569;
}

.anl-tile__bar--absent[b-4xesso015c] { border: 1.5px dashed #c5ceda; background: #fbfcfd; }

.anl-tile__val[b-4xesso015c] { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; color: #0f172a; }
.anl-tile__muted[b-4xesso015c] { font-size: .75rem; color: #64748b; }

.anl-lowest[b-4xesso015c] {
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdeee4;
    color: #9a3412;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}

.anl-callout[b-4xesso015c] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f1f5fb;
    border: 1px solid #dbe5f3;
    color: #1e3a6b;
    font-size: .875rem;
    line-height: 1.5;
}

.anl-callout svg[b-4xesso015c] { flex-shrink: 0; margin-top: 2px; }
.anl-callout__text[b-4xesso015c] { flex-grow: 1; }

.anl-link[b-4xesso015c] {
    padding: 0;
    border: 0;
    background: none;
    color: #0b63c5;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.anl-link:hover[b-4xesso015c] { color: #084a94; text-decoration: underline; }

.anl-table-wrap[b-4xesso015c] {
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    overflow-x: auto;
}

.anl-table[b-4xesso015c] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.anl-table th[b-4xesso015c] {
    padding: 9px 14px;
    background: #f6f8fb;
    border-bottom: 1px solid #e6e8ec;
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.anl-table td[b-4xesso015c] {
    padding: 9px 14px;
    border-bottom: 1px solid #eef1f4;
    color: #0f172a;
    vertical-align: middle;
}

.anl-table tbody tr:last-child td[b-4xesso015c] { border-bottom: 0; }

.anl-table__group th[b-4xesso015c] { padding-top: 12px; padding-bottom: 12px; vertical-align: top; white-space: normal; }
.anl-table__grouptitle[b-4xesso015c] { display: block; font-size: .8rem; font-weight: 700; color: #0f172a; }
.anl-table__groupsub[b-4xesso015c] { display: block; margin-top: 2px; font-size: .75rem; font-weight: 400; color: #64748b; }
.anl-table__sep[b-4xesso015c] { border-left: 1px solid #dde3ea; }

.anl-row--absent td[b-4xesso015c] { background: #fbfcfd; }
.anl-row--lowest td[b-4xesso015c] { background: #fff8f1; }
.anl-row--focus td[b-4xesso015c] { background: #eef5ff; }
.anl-row--marked td[b-4xesso015c] { background: #f5f9ff; }

.anl-num[b-4xesso015c] { text-align: right; }
.anl-strong[b-4xesso015c] { font-weight: 700; }
.anl-muted[b-4xesso015c] { color: #64748b; }
.anl-mono[b-4xesso015c] { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.anl-genes[b-4xesso015c] { color: #334155; }

.anl-conf[b-4xesso015c] { display: flex; align-items: center; gap: 12px; }

.anl-bar[b-4xesso015c] {
    display: block;
    flex-shrink: 0;
    width: 140px;
    height: 8px;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
}

.anl-bar--small[b-4xesso015c] { width: 110px; }
.anl-bar__fill[b-4xesso015c] { display: block; height: 8px; border-radius: 999px; background: #3b7ddd; }
.anl-bar__fill--lowest[b-4xesso015c] { background: #c2410c; }

.anl-warn[b-4xesso015c] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff4e0;
    color: #8a4b00;
    font-size: .75rem;
    font-weight: 600;
}

.anl-legend[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .8rem;
    line-height: 1.5;
    color: #475569;
}

.anl-legend strong[b-4xesso015c] { color: #0f172a; }

/* ---- rapport: genenlijst en detail ------------------------------------------ */

.anl-split[b-4xesso015c] {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 960px) {
    .anl-split[b-4xesso015c] { grid-template-columns: minmax(0, 1fr); }
}

.anl-genelist[b-4xesso015c] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.anl-filters[b-4xesso015c] { display: flex; flex-wrap: wrap; gap: 8px; }

.anl-filter[b-4xesso015c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #d3d7de;
    background: #fff;
    color: #334155;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.anl-filter--on[b-4xesso015c] { border-color: #0f172a; background: #0f172a; color: #fff; }
.anl-filter__count[b-4xesso015c] { opacity: .7; }

.anl-genes-col[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 1100px;
    overflow-y: auto;
}

.anl-gene[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #eef1f4;
    background: #fff;
    color: #0f172a;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    justify-content: flex-start;
}

.anl-gene:hover[b-4xesso015c] { border-color: #d3dff0; }
.anl-gene--current[b-4xesso015c], .anl-gene--current:hover[b-4xesso015c] { background: #eef5ff; border-color: #bcd6fb; }
.anl-gene--nocall:not(.anl-gene--current)[b-4xesso015c] { border-color: #f6d4d1; background: #fffafa; }

.anl-gene__top[b-4xesso015c] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.anl-gene__name[b-4xesso015c] { font-size: .95rem; font-weight: 700; }
.anl-gene__q[b-4xesso015c] { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .72rem; color: #64748b; }

.anl-gene__summary[b-4xesso015c] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .75rem;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anl-gene__chips[b-4xesso015c] { display: flex; flex-wrap: wrap; gap: 6px; }

.anl-flag[b-4xesso015c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.anl-flag--amber[b-4xesso015c] { color: #8a4b00; }
.anl-flag--red[b-4xesso015c] { color: #a8201a; }
.anl-flag--blue[b-4xesso015c] { color: #0b4fa0; }

.anl-box__chips .anl-flag[b-4xesso015c] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e6f0ff;
}

.anl-ph[b-4xesso015c] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}

.anl-ph--nm[b-4xesso015c] { background: #e6f4ea; color: #1e6b3a; }
.anl-ph--im[b-4xesso015c] { background: #fff1db; color: #8a4b00; }
.anl-ph--pm[b-4xesso015c] { background: #fde8e8; color: #a8201a; }
.anl-ph--um[b-4xesso015c] { background: #ede9fe; color: #5b3ec8; }
.anl-ph--na[b-4xesso015c] { background: #eef2f7; color: #475569; }

.anl-hint[b-4xesso015c] { font-size: .75rem; line-height: 1.5; color: #475569; }

.anl-detail[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 22px 24px 24px;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
}

.anl-detail__titlerow[b-4xesso015c] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.anl-detail__title[b-4xesso015c] { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: #0f172a; }

.anl-status[b-4xesso015c] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.anl-status--ok[b-4xesso015c] { background: #e6f4ea; color: #1e6b3a; }
.anl-status--okish[b-4xesso015c] { background: #eef7f1; color: #1e6b3a; }
.anl-status--bad[b-4xesso015c] { background: #fde8e8; color: #a8201a; }
.anl-status--warn[b-4xesso015c] { background: #fff4e0; color: #8a4b00; }
.anl-status--na[b-4xesso015c] { background: #f1f4f8; color: #334155; }

.anl-boxes[b-4xesso015c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.anl-box[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f6f8fb;
    border: 0;
    color: #0f172a;
    font-family: inherit;
    text-align: left;
    min-width: 0;
    justify-content: flex-start;
}

.anl-box--bad[b-4xesso015c] { background: #fffafa; border: 1px solid #f6d4d1; }
.anl-box--link[b-4xesso015c] { cursor: pointer; }
.anl-box--link:hover[b-4xesso015c] { background: #eef3fa; }

.anl-box__label[b-4xesso015c] { font-size: .75rem; color: #64748b; }
.anl-box__value[b-4xesso015c] { font-size: 1rem; font-weight: 600; }
.anl-box__unit[b-4xesso015c] { font-weight: 500; color: #475569; }
.anl-box__mono[b-4xesso015c] { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.anl-box__or[b-4xesso015c] { font-size: .75rem; color: #64748b; }
.anl-box__note[b-4xesso015c] { font-size: .75rem; line-height: 1.45; color: #475569; }
.anl-box__note--bad[b-4xesso015c] { color: #7a1d17; }
.anl-box__chips[b-4xesso015c] { display: flex; flex-wrap: wrap; gap: 6px; }
.anl-box__go[b-4xesso015c] { font-size: .75rem; font-weight: 600; color: #0b63c5; }

.anl-block[b-4xesso015c] { display: flex; flex-direction: column; gap: 10px; }
.anl-block__head[b-4xesso015c] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.anl-block__title[b-4xesso015c] { margin: 0; font-size: .875rem; font-weight: 700; color: #0f172a; }
.anl-block__sub[b-4xesso015c] { display: block; margin-top: 3px; font-size: .8rem; color: #475569; }

.anl-list[b-4xesso015c] { border: 1px solid #eef1f4; border-radius: 12px; overflow: hidden; }

.anl-list__row[b-4xesso015c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef1f4;
    font-size: .875rem;
}

.anl-list__row:last-child[b-4xesso015c] { border-bottom: 0; }

.anl-options[b-4xesso015c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.anl-option[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e6e8ec;
    background: #fff;
    color: #0f172a;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    justify-content: flex-start;
}

.anl-option--on[b-4xesso015c] { border: 2px solid #0080ff; background: #f5f9ff; padding: 13px 15px; }
.anl-option__title[b-4xesso015c] { font-size: .75rem; font-weight: 700; color: #475569; }
.anl-option--on .anl-option__title[b-4xesso015c] { color: #0b4fa0; }
.anl-option__row[b-4xesso015c] { display: flex; align-items: baseline; gap: 10px; }
.anl-option__allele[b-4xesso015c] { min-width: 48px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .875rem; font-weight: 600; }
.anl-option__vars[b-4xesso015c] { font-size: .8rem; color: #475569; }

.anl-copies[b-4xesso015c] { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.anl-dots[b-4xesso015c] { display: flex; gap: 3px; }

.anl-dot[b-4xesso015c] {
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #3b7ddd;
    background: #fff;
}

.anl-dot--on[b-4xesso015c] { background: #3b7ddd; }

.anl-code[b-4xesso015c] {
    padding: 1px 7px;
    border-radius: 6px;
    background: #f1f4f8;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .75rem;
    color: #334155;
}

.anl-code--lg[b-4xesso015c] { padding: 4px 10px; border-radius: 8px; font-size: .8rem; }
.anl-codes[b-4xesso015c] { display: flex; flex-wrap: wrap; gap: 8px; }

.anl-cdna[b-4xesso015c] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.anl-rs[b-4xesso015c] { font-size: .75rem; color: #0b63c5; }
.anl-optcol[b-4xesso015c] { font-weight: 600; color: #0b4fa0; }

.anl-remarks[b-4xesso015c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff8eb;
    border: 1px solid #f5dcae;
    color: #6b3500;
    font-size: .8rem;
    line-height: 1.5;
}

.anl-remarks--none[b-4xesso015c] { background: #f6f8fb; border-color: #eef1f4; color: #475569; }
.anl-remarks__title[b-4xesso015c] { font-weight: 700; }
/* /Pages/Profile/AssignProfessionalDialog.razor.rz.scp.css */
/*
    Venster "Toewijzen aan zorgbehandelaar". Waarden letterlijk uit EditProfessionalDialog.razor.css
    (dat ze weer uit OrderDetail.razor.css heeft): in dit project is geen gedeeld tokenbestand voor
    deze vormtaal, dus ze staan hier over. Alles is platte HTML in dit component, dus geen ::deep.
    Alleen IdBadge is een component; die stijlt zichzelf.
*/

.pa-scrim[b-1zo6t73tcy] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, 0.45);
}

.pa-dialog[b-1zo6t73tcy] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1301;
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.22), 0 4px 10px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.pa-dialog__head[b-1zo6t73tcy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    padding: 1.05rem 1.3rem;
    border-bottom: 1px solid #eef1f4;
}

.pa-dialog__icon[b-1zo6t73tcy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.pa-dialog__icon svg[b-1zo6t73tcy] {
    width: 15px;
    height: 15px;
}

.pa-dialog__title[b-1zo6t73tcy] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.pa-dialog__close[b-1zo6t73tcy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.pa-dialog__close:hover[b-1zo6t73tcy] {
    background: #f1f5f9;
    color: #0f172a;
}

.pa-dialog__close svg[b-1zo6t73tcy] {
    width: 16px;
    height: 16px;
}

.pa-dialog__body[b-1zo6t73tcy] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.pa-dialog__foot[b-1zo6t73tcy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.9rem 1.3rem;
    border-top: 1px solid #eef1f4;
    background: #fbfcfd;
}

/* Om welk profiel het gaat, bovenaan: een verkeerde regel aanklikken is anders pas te zien als
   het al gebeurd is. */
.pa-profile[b-1zo6t73tcy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: #475569;
}

.pa-profile__label[b-1zo6t73tcy] {
    font-weight: 600;
    color: #0f172a;
}

.pa-profile__meta[b-1zo6t73tcy] {
    color: #64748b;
}

.pa-field__label[b-1zo6t73tcy] {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

/* Gevuld en niet wit, zoals op /orders/new en in het bewerkvenster. */
.pa-input[b-1zo6t73tcy] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f3f6fb;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pa-input:focus[b-1zo6t73tcy] {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.pa-hint[b-1zo6t73tcy] {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.pa-note[b-1zo6t73tcy] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    line-height: 1.45;
}

.pa-note svg[b-1zo6t73tcy] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.pa-error[b-1zo6t73tcy] {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-size: 0.82rem;
    line-height: 1.45;
}

.pa-btn[b-1zo6t73tcy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.4rem 0.95rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pa-btn:hover:not(:disabled)[b-1zo6t73tcy] {
    background: #f4f6f8;
    border-color: #b9bfc9;
}

.pa-btn:focus-visible[b-1zo6t73tcy] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.pa-btn:disabled[b-1zo6t73tcy] {
    opacity: 0.55;
    cursor: default;
}

.pa-btn--primary[b-1zo6t73tcy] {
    border-color: transparent;
    background: hsl(209, 100%, 50%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 128, 255, 0.35);
}

.pa-btn--primary:hover:not(:disabled)[b-1zo6t73tcy] {
    background: hsl(209, 100%, 45%);
    border-color: transparent;
}
/* /Pages/Profile/Berichten.razor.rz.scp.css */
/* Berichten aan een gekoppeld profiel (PORTALMESSAGES): rond thema, in lijn met /batches en
   /limsreport. Scoped CSS. */

.pmsg-page[b-h1l0qtkvrq] {
    padding-bottom: 1.5rem;
}

.pmsg-intro[b-h1l0qtkvrq] {
    margin: 0 0 1.15rem;
    font-size: 0.9rem;
    color: #475569;
}

/* ---- randvoorwaarden: afzender, taal, bereik ---- */
.pmsg-context[b-h1l0qtkvrq] {
    margin: 0 0 1.15rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
}

.pmsg-context__row[b-h1l0qtkvrq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.pmsg-context__label[b-h1l0qtkvrq] {
    flex: 0 0 9.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.pmsg-context__value[b-h1l0qtkvrq] {
    font-size: 0.9rem;
    color: #0f172a;
}

.pmsg-context__note[b-h1l0qtkvrq] {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    color: #92400e;
}

.pmsg-pill[b-h1l0qtkvrq] {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.pmsg-pill--on[b-h1l0qtkvrq] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.pmsg-pill--off[b-h1l0qtkvrq] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    text-decoration: line-through;
}

/* ---- geblokkeerd: wel lezen, niet versturen ---- */
.pmsg-blocked[b-h1l0qtkvrq] {
    margin: 0 0 1.15rem;
    padding: 0.9rem 1.25rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 20px;
    font-size: 0.88rem;
    color: #92400e;
}

/* ---- twee kolommen: typen links, verstuurd rechts ---- */
.pmsg-columns[b-h1l0qtkvrq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.pmsg-compose[b-h1l0qtkvrq] {
    flex: 1 1 22rem;
    min-width: 18rem;
}

.pmsg-list[b-h1l0qtkvrq] {
    flex: 1 1 24rem;
    min-width: 18rem;
}

.pmsg-list__head[b-h1l0qtkvrq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
}

.pmsg-toggle[b-h1l0qtkvrq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
}

/* ---- voorvertoning van de titel en de tekstteller ---- */
.pmsg-counter[b-h1l0qtkvrq] {
    margin: 0.35rem 0 0;
    text-align: right;
    font-size: 0.75rem;
    color: #94a3b8;
}

.pmsg-closing[b-h1l0qtkvrq] {
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.9rem;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.5;
}

.pmsg-closing__label[b-h1l0qtkvrq] {
    display: block;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: #64748b;
}

.pmsg-closing__value[b-h1l0qtkvrq] {
    color: #475569;
    font-style: italic;
}

/* ---- verstuurde berichten ---- */
.pmsg-item[b-h1l0qtkvrq] {
    margin: 0 0 0.85rem;
    padding: 0.95rem 1.15rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pmsg-item--deleted[b-h1l0qtkvrq] {
    background: #f8fafc;
    border-style: dashed;
}

.pmsg-item__head[b-h1l0qtkvrq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
}

.pmsg-item__title[b-h1l0qtkvrq] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

.pmsg-item__body[b-h1l0qtkvrq] {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}

.pmsg-item--deleted .pmsg-item__body[b-h1l0qtkvrq] {
    color: #94a3b8;
}

.pmsg-item__error[b-h1l0qtkvrq] {
    margin: 0.55rem 0 0;
    padding: 0.5rem 0.7rem;
    background: #fef2f2;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #b91c1c;
    word-break: break-word;
}

.pmsg-item__footer[b-h1l0qtkvrq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.7rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f5f9;
}

.pmsg-item__controls[b-h1l0qtkvrq] {
    display: flex;
    gap: 0.25rem;
}

.pmsg-state[b-h1l0qtkvrq] {
    flex-shrink: 0;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.pmsg-state--ok[b-h1l0qtkvrq] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.pmsg-state--error[b-h1l0qtkvrq] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.pmsg-state--deleted[b-h1l0qtkvrq] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.pmsg-empty[b-h1l0qtkvrq] {
    margin: 0;
    padding: 1rem 0;
    font-size: 0.9rem;
    color: #64748b;
}
/* /Pages/Profile/Components/DoseringsAdvies.razor.rz.scp.css */
/* Each advice card is one subgrid row: its cells align to the column tracks defined on
   .dip-card-wrapper-doseringadvies (see DoseringAdviezen.razor.css), so every row lines up.
   Columns: chevron | drug | advice | genotype (enzyme + phenotype + allele) | source.
   Rows of the same drug (its bundled DPWG/CPIC lines) sit together; a light rule separates drugs. */
.dip-card-doseringadvies[b-hzw3i65xvi] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    gap: 0;
    padding: 0;
    background: #fff;
}

/* Whitespace gap only AFTER the last line of a drug, so a medicine's own lines (e.g. its DPWG + CPIC rows
   when the advice differs) stay together as one block; different drugs are separated by 10px. No divider line. */
.dip-card-doseringadvies.is-drug-end[b-hzw3i65xvi] {
    margin-bottom: 10px;
}

.dip-card-doseringadvies:last-child[b-hzw3i65xvi] {
    margin-bottom: 0;
}

.dip-card-doseringadvies:hover[b-hzw3i65xvi] {
    background: hsl(0, 0%, 98.5%);
}

/* Chevron is nu een span BINNEN de advies-knop (was zelf een button); alleen kleur + niet-krimpen.
   De doos is exact één tekstregel hoog (`line-height:1.35` uit .dip-da-cell) en centreert het icoon
   daarin, zodat pijltje en tekst hetzelfde midden hebben. Zonder die hoogte is de doos 24px (de SVG),
   top-aligned tegen een ~19px regel → de tekst lijkt te hoog te staan. Een wrappende adviestekst houdt
   het pijltje zo netjes op de EERSTE regel (i.p.v. gecentreerd over het hele tekstblok). */
.dip-da-chevron[b-hzw3i65xvi] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.35em;
    padding: 0;
    color: hsl(0, 0%, 55%);
    flex-shrink: 0;
}

/* De hele adviescel (pijltje + groene tekst) is één klikbare knop: knop-eigen styling volledig
   platgeslagen zodat 'ie exact als de oude tekst oogt, maar wel als knop werkt. */
.dip-da-advice-toggle[b-hzw3i65xvi] {
    display: flex;
    align-items: flex-start;
    /* MudBlazor zet een GLOBALE `button { justify-content: center; ... }`-reset; zonder deze regel
       centreert die de pijl+tekst in de adviescel (regressie 2026-07). Expliciet links houden. */
    justify-content: flex-start;
    gap: 0.3rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.dip-da-advice-toggle:hover .dip-da-advice-text[b-hzw3i65xvi] {
    text-decoration: underline;
}

.dip-da-advice-toggle:hover .dip-da-chevron[b-hzw3i65xvi] {
    color: inherit;
}

.dip-da-advice-toggle:focus-visible[b-hzw3i65xvi] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 3px;
}

.dip-da-cell[b-hzw3i65xvi] {
    padding: 0.6rem;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Visual hierarchy: drug = primary (identity), advice = the key action, genotype = supporting evidence. */
.dip-da-cell--drug[b-hzw3i65xvi] {
    font-weight: 600;
    color: hsl(0, 0%, 13%);
    /* Extra left margin now that the chevron no longer occupies its own first column. */
    padding-left: 1.1rem;
}

/* Advice cell carries the expand chevron (left of the text) so the control always sits next to
   content — never orphaned in an empty column on a drug's continuation rows. */
.dip-da-cell--advice[b-hzw3i65xvi] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-weight: 500;
    color: hsl(159, 77%, 35%);
}

.dip-da-advice-text[b-hzw3i65xvi] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Genotype block: enzyme + phenotype on one line, the (possibly long) star-allele typing wrapping
   on the line below so it never overruns the advice column. */
.dip-da-cell--gene[b-hzw3i65xvi] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dip-da-gene__line[b-hzw3i65xvi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dip-da-gene__enzyme[b-hzw3i65xvi] {
    font-weight: 500;
    color: hsl(0, 0%, 22%);
}

.dip-da-gene__allele[b-hzw3i65xvi] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.82rem;
    color: hsl(0, 0%, 42%);
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* Phenotype as a single bordered block (e.g. "NM | IM"), styled like the PGx-details table. */
.dip-da-chip[b-hzw3i65xvi] {
    display: inline-block;
    border: 1px solid hsl(0, 0%, 75%);
    border-radius: 0.25rem;
    padding: 0.05rem 0.4rem;
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    line-height: 1.4;
    color: hsl(0, 0%, 15%);
    background: #fff;
    white-space: nowrap;
}

/* Source labels: right-aligned, equal-width DPWG/CPIC chips (min-width set inline on each chip),
   a small gap between them when a drug carries both. */
.dip-da-cell--source[b-hzw3i65xvi] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* CPIC gradation as a signal-bar meter inside the CPIC chip (1 bar = Low ... 4 = Strong). */
.dip-da-guideline-label[b-hzw3i65xvi] {
    vertical-align: middle;
}

.dip-da-grade-bars[b-hzw3i65xvi] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.dip-da-grade-bars svg[b-hzw3i65xvi] {
    display: block;
}

/* Expanded detail spans the full row width below the cells. Overrides the legacy global 5-column grid
   (style.css .dip-doseringadvies__content) — we stack one block PER guideline instead, which scales to a
   bundled row's two guidelines. The attribute-scoped selector outweighs the single-class global rule. */
.dip-doseringadvies__content[b-hzw3i65xvi] {
    display: block;
    grid-column: 1 / -1;
    padding: 0.2rem 0.6rem 0.6rem 1.1rem;
}

/* One recommendation block per guideline: coloured left accent + pill in the guideline colour
   (DPWG donkerblauw, CPIC crimson — inline per row), so the origin is unmistakable. */
.dip-da-rec[b-hzw3i65xvi] {
    border-left: 3px solid hsl(0, 0%, 80%);
    border-radius: 0;
    background: hsl(0, 0%, 97.5%);
    padding: 0.6rem 0.85rem;
    margin-top: 0.6rem;
}

.dip-da-rec:first-child[b-hzw3i65xvi] {
    margin-top: 0;
}

.dip-da-rec__head[b-hzw3i65xvi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.dip-da-rec__pill[b-hzw3i65xvi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    border-radius: 999px;
}

.dip-da-rec__grade[b-hzw3i65xvi] {
    font-size: 0.8rem;
    color: hsl(0, 0%, 40%);
}

.dip-da-rec__date[b-hzw3i65xvi] {
    font-size: 0.82rem;
    color: hsl(0, 0%, 45%);
}

/* Clear external-link button: it must read as "opens a website". Bordered pill + link-blue + arrow icon. */
.dip-da-rec__link[b-hzw3i65xvi] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: #185FA5;
    text-decoration: none;
    border: 1px solid hsl(210, 45%, 78%);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    background: #fff;
    white-space: nowrap;
}

.dip-da-rec__link:hover[b-hzw3i65xvi] {
    background: hsl(210, 60%, 97%);
    border-color: #185FA5;
    text-decoration: underline;
}

.dip-da-rec__link-icon[b-hzw3i65xvi] {
    flex-shrink: 0;
}

.dip-da-rec__ref[b-hzw3i65xvi] {
    margin-left: auto;
    font-size: 0.82rem;
    color: hsl(0, 0%, 50%);
}

/* Each block has up to two labelled sections (summary/description + recommendation) so it is clear which
   text is which — they no longer run together. */
.dip-da-rec__section[b-hzw3i65xvi] {
    margin-top: 0.6rem;
}

.dip-da-rec__section:first-child[b-hzw3i65xvi] {
    margin-top: 0.1rem;
}

.dip-da-rec__label[b-hzw3i65xvi] {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(0, 0%, 50%);
    margin-bottom: 0.12rem;
}

/* Prefixed with .dip-doseringadvies__content (+ inner p) to outweigh the legacy `> div:first-child p`
   muting in style.css that would otherwise shrink + grey the FIRST guideline block's text. */
.dip-doseringadvies__content .dip-da-rec__summary[b-hzw3i65xvi],
.dip-doseringadvies__content .dip-da-rec__summary p[b-hzw3i65xvi] {
    font-size: 0.92rem;
    color: hsl(0, 0%, 36%);
    margin: 0;
    line-height: 1.5;
}

.dip-doseringadvies__content .dip-da-rec__body[b-hzw3i65xvi],
.dip-doseringadvies__content .dip-da-rec__body p[b-hzw3i65xvi],
.dip-doseringadvies__content .dip-da-rec__body li[b-hzw3i65xvi] {
    font-size: 1rem;
    color: hsl(0, 0%, 13%);
    line-height: 1.5;
}

.dip-doseringadvies__content .dip-da-rec__notice[b-hzw3i65xvi] {
    font-size: 0.85rem;
    color: hsl(0, 0%, 50%);
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* Small screens: drop the grid, let the cells flow. The header row is hidden (parent CSS). */
@media screen and (max-width: 767px) {
    .dip-card-doseringadvies[b-hzw3i65xvi] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 0.6rem;
        padding: 0.7rem 0.25rem;
    }

    .dip-da-cell[b-hzw3i65xvi] {
        padding: 0;
    }

    .dip-da-cell--drug[b-hzw3i65xvi] {
        flex-basis: 100%;
    }

    .dip-da-cell--advice[b-hzw3i65xvi] {
        flex-basis: 100%;
    }

    .dip-da-cell--source[b-hzw3i65xvi] {
        margin-left: auto;
        flex-wrap: nowrap;
    }

    .dip-doseringadvies__content[b-hzw3i65xvi] {
        padding: 0.5rem 0 0;
    }
}
/* /Pages/Profile/Components/GenotypeMeasurements.razor.rz.scp.css */
/* Metingentabel. Verhuisd uit Genotypen.razor.css toen de tabel een eigen component werd: scoped CSS
   hangt aan het component waar de markup staat, dus de regels moeten mee. De buitenmarge zit bewust NIET
   hier maar bij de aanroeper, want een rij in de zoekresultaten staat ingesprongen en een gepinde regel
   niet. */

.gm[b-apbhuukiqw] {
    border: 1px solid #eef1f5;
    border-radius: 14px;
    overflow: hidden;
}

.gm__head[b-apbhuukiqw],
.gm__row[b-apbhuukiqw] {
    display: grid;
    grid-template-columns: 34px 128px 92px 92px 74px 150px minmax(0, 1fr);
    align-items: center;
    gap: 0;
}

.gm__head[b-apbhuukiqw] {
    padding: 9px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef1f5;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.gm__row[b-apbhuukiqw] {
    padding: 11px 16px;
    border-bottom: 1px solid #f4f6f9;
    font-size: .8rem;
    color: #334155;
}

.gm__row:last-child[b-apbhuukiqw] { border-bottom: 0; }
.gm__row--leading[b-apbhuukiqw] { background: #f7fbf8; }
.gm__row--ignored[b-apbhuukiqw] { background: #fcfcfd; color: #94a3b8; }

.gm__index[b-apbhuukiqw] { color: #94a3b8; }
.gm__refalt[b-apbhuukiqw] { color: #64748b; }
.gm__subs[b-apbhuukiqw] { color: #64748b; }
.gm__num[b-apbhuukiqw] { font-variant-numeric: tabular-nums; }

.gm__verdict[b-apbhuukiqw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.gm__ok[b-apbhuukiqw] { color: #047857; font-weight: 600; }
.gm__warn[b-apbhuukiqw] { color: #b45309; font-weight: 600; }

.gm__lead[b-apbhuukiqw] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* Eigen kopie van de zachte badge: gt-tag staat in de pagina en die scope reikt hier niet. */
.gm__tag[b-apbhuukiqw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Smal scherm: de kop valt weg en elke meting wordt een blok van twee kolommen. Verhuisd uit
   Genotypen.razor.css, want die scope raakt deze markup niet meer. */
@media (max-width: 900px) {
    .gm__head[b-apbhuukiqw] { display: none; }

    .gm__row[b-apbhuukiqw] {
        grid-template-columns: 34px minmax(0, 1fr);
        row-gap: 4px;
    }
}
/* /Pages/Profile/Components/GenotypePinCard.razor.rz.scp.css */
/* Notitiekaart bij een gepinde SNP of een gepind gen. Blauwe linkerrand zoals het ontwerp. */

.gpc[b-dhqp5s0eo2] {
    padding: 11px 15px;
    background: #f8faff;
    border: 1px solid #e4ebff;
    border-left: 3px solid #2563eb;
    border-radius: 12px;
}

.gpc__head[b-dhqp5s0eo2] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

.gpc__rs[b-dhqp5s0eo2] {
    font-size: .95rem;
    font-weight: 700;
    color: #0f172a;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.gpc__rs--link[b-dhqp5s0eo2] {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.gpc__rs--link:hover[b-dhqp5s0eo2] { color: #1d4ed8; text-decoration: underline; }

.gpc__gene[b-dhqp5s0eo2],
.gpc__method[b-dhqp5s0eo2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.gpc__method[b-dhqp5s0eo2] { background: #eef2f7; font-weight: 500; }

.gpc__gene--link[b-dhqp5s0eo2] {
    border: 1px solid #dbe1ea;
    cursor: pointer;
    font-family: inherit;
}

.gpc__gene--link:hover[b-dhqp5s0eo2] {
    background: #eff4ff;
    border-color: #c7d2fe;
    color: #1d4ed8;
}

.gpc__note[b-dhqp5s0eo2] {
    font-size: .82rem;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
}

.gpc__meta[b-dhqp5s0eo2] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: .7rem;
    color: #94a3b8;
}

.gpc__action[b-dhqp5s0eo2] {
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: .7rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.gpc__action:hover[b-dhqp5s0eo2] { text-decoration: underline; }
.gpc__action--danger[b-dhqp5s0eo2] { color: #b91c1c; }

/* De waarde van het profiel dat nu open staat, met zijn label ervoor zodat hij niet voor de
   waarde van de pin zelf aangezien wordt. */
.gpc__live[b-dhqp5s0eo2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 9px 2px 8px;
    border: 1px dashed #c7d2fe;
    border-radius: 999px;
    background: #fbfcff;
}

.gpc__live-label[b-dhqp5s0eo2] {
    font-size: .66rem;
    font-weight: 600;
    color: #64748b;
    text-transform: lowercase;
    white-space: nowrap;
}

.gpc__live-none[b-dhqp5s0eo2] {
    font-size: .7rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* De Helix-actie draagt het helix-icoon zodat hij herkenbaar hetzelfde is als de knop op een SNP-rij. */
.gpc__action--ask[b-dhqp5s0eo2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* De metingentabel onder de notitie. De tabel brengt zijn eigen kader mee; hier alleen de ruimte, en
   ruimte om horizontaal te schuiven want het raster is breder dan een smalle kaart. */
.gpc__measures[b-dhqp5s0eo2] {
    margin-top: 10px;
    overflow-x: auto;
}
/* /Pages/Profile/Components/GenotypePinDialog.razor.rz.scp.css */
/* Pindialoog. Verhuisd uit Genotypen.razor.css toen de dialoog een eigen component werd (gedeeld met het
   Helix-paneel): scoped CSS hangt aan het component waar de markup staat, dus de regels moeten mee.
   De knoppen zijn een kopie van .gt-btn op de pagina; de rest van de pagina gebruikt die klasse ook, dus
   die kon niet mee zonder de pagina te raken. */

.gpd-overlay[b-lewz89caxb] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .35);
}

.gpd[b-lewz89caxb] {
    width: 100%;
    max-width: 520px;
    padding: 22px 24px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .18);
}

.gpd__title[b-lewz89caxb] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.gpd__target[b-lewz89caxb] {
    margin: 4px 0 16px;
    font-size: .82rem;
    color: #64748b;
}

/* De huidige meting van het profiel, ter controle voordat je pint (alleen vanuit Helix). */
.gpd__value[b-lewz89caxb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 16px;
    padding: 9px 14px;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    background: #f8fafc;
    font-size: .82rem;
}

.gpd__value-label[b-lewz89caxb] { color: #64748b; }
.gpd__value-none[b-lewz89caxb] { color: #94a3b8; }
.gpd__value-error[b-lewz89caxb] { color: #b45309; }

.gpd__method[b-lewz89caxb] {
    font-size: .72rem;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e6e8ec;
}

.gpd__scopes[b-lewz89caxb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.gpd-radio[b-lewz89caxb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    cursor: pointer;
}

.gpd-radio:hover[b-lewz89caxb] { border-color: #c7d2fe; }

.gpd-radio strong[b-lewz89caxb] {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: #0f172a;
}

.gpd-radio em[b-lewz89caxb] {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    font-style: normal;
    color: #64748b;
}

.gpd__note[b-lewz89caxb] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #dbe1ea;
    border-radius: 14px;
    font-family: inherit;
    font-size: .85rem;
    color: #0f172a;
    resize: vertical;
    outline: none;
}

.gpd__note:focus[b-lewz89caxb] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.gpd__count[b-lewz89caxb] {
    margin-top: 4px;
    text-align: right;
    font-size: .7rem;
    color: #94a3b8;
}

.gpd__error[b-lewz89caxb] {
    margin: 8px 0 0;
    font-size: .78rem;
    color: #b91c1c;
}

.gpd__hint[b-lewz89caxb] {
    margin: 10px 0 0;
    font-size: .76rem;
    color: #64748b;
}

.gpd__actions[b-lewz89caxb] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.gpd__btn[b-lewz89caxb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #dbe1ea;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.gpd__btn:hover[b-lewz89caxb] { background: #f1f5ff; border-color: #c7d2fe; color: #1d4ed8; }
.gpd__btn:disabled[b-lewz89caxb] { color: #cbd5e1; border-color: #eef1f5; background: #fff; cursor: default; }

.gpd__btn--primary[b-lewz89caxb] {
    background: #0080ff;
    border-color: #0080ff;
    color: #fff;
}

.gpd__btn--primary:hover[b-lewz89caxb] { background: #0069d1; border-color: #0069d1; color: #fff; }
.gpd__btn--primary:disabled[b-lewz89caxb] { background: #cbd5e1; border-color: #cbd5e1; color: #fff; }
/* /Pages/Profile/Components/GenotypeText.razor.rz.scp.css */
/* Allelkleuren, dezelfde tokens als het Helix-paneel en de SNP-matrix. */

.gtx[b-hsc9rl8pej] {
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.gtx--dim[b-hsc9rl8pej] { opacity: .45; }

.gtx__sep[b-hsc9rl8pej] {
    color: #94a3b8;
    font-weight: 400;
    margin: 0 1px;
}

.gtx__al--a[b-hsc9rl8pej] { color: hsl(155, 100%, 39%); }
.gtx__al--c[b-hsc9rl8pej] { color: hsl(200, 100%, 55%); }
.gtx__al--g[b-hsc9rl8pej] { color: hsl(34, 98%, 52%); }
.gtx__al--t[b-hsc9rl8pej] { color: hsl(351, 73%, 58%); }

/* Niet bepaald (-), het sterretje en de indel-letters blijven grijs: dat zijn geen basen. Een sequentie
   (T/CCCCT) krijgt per base zijn eigen kleur via de regels hierboven. */
.gtx__al--none[b-hsc9rl8pej],
.gtx__al--star[b-hsc9rl8pej],
.gtx__al--x[b-hsc9rl8pej],
.gtx__al--d[b-hsc9rl8pej],
.gtx__al--i[b-hsc9rl8pej],
.gtx__al--w[b-hsc9rl8pej] { color: #64748b; }

.gtx--none[b-hsc9rl8pej] { color: #cbd5e1; font-weight: 400; }
/* /Pages/Profile/Components/ReportMailDialog.razor.rz.scp.css */
/*
    Het venster Rapport mailen. Zelfde taal als de werkbalk op PGx-details en Resultaten: omrande blauwe
    knoppen, het PDF-blaadje, en voor de keuzes kaarten die blauw oplichten als ze aan staan. Het
    ontwerp met de varianten staat op https://claude.ai/artifact/HFv74rAvQwxhHqXUzYLxX4.
*/

.rmd-overlay[b-ooiw372gte] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 36px 16px;
    overflow-y: auto;
    background: rgba(29, 33, 36, 0.5);
}

.rmd[b-ooiw372gte] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    outline: none;
}

/* ------------------------------------------------------------------ kop */

.rmd__head[b-ooiw372gte] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px 24px;
}

.rmd__head-icon[b-ooiw372gte] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e6f1fc;
    color: var(--link-color, #0069cc);
}

.rmd__head-icon svg[b-ooiw372gte] {
    width: 18px;
    height: 18px;
}

.rmd__title[b-ooiw372gte] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--txt-shade-1);
}

.rmd__close[b-ooiw372gte] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--txt-shade-3);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.rmd__close:hover[b-ooiw372gte],
.rmd__close:focus-visible[b-ooiw372gte] {
    background: #f2f5f5;
}

.rmd__close svg[b-ooiw372gte] {
    width: 18px;
    height: 18px;
}

/* ----------------------------------------------------------------- inhoud */

.rmd__body[b-ooiw372gte] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 24px 20px;
}

.rmd__facts[b-ooiw372gte] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    row-gap: 6px;
    padding: 12px 16px;
    font-size: 0.875rem;
    background: #f3f5f5;
    border-radius: 8px;
}

.rmd__facts-key[b-ooiw372gte] {
    color: var(--txt-shade-3);
}

.rmd__facts-val[b-ooiw372gte] {
    font-weight: 500;
    color: var(--txt-shade-1);
    overflow-wrap: anywhere;
}

.rmd__group[b-ooiw372gte] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rmd__legend[b-ooiw372gte] {
    padding: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--txt-shade-3);
}

/* Een keuze als kaart: de hele kaart is het label, dus overal klikken zet hem aan. */
.rmd-option[b-ooiw372gte] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid #d3d9d9;
    border-radius: 8px;
    cursor: pointer;
}

.rmd-option:hover[b-ooiw372gte] {
    border-color: #9fcff7;
}

.rmd-option--on[b-ooiw372gte] {
    background: #f2f8fe;
    border-color: var(--color-digi-blue);
}

.rmd-option--off[b-ooiw372gte] {
    background: #f6f7f7;
    border-style: dashed;
    cursor: not-allowed;
}

.rmd-option--off:hover[b-ooiw372gte] {
    border-color: #d3d9d9;
}

.rmd-option__input[b-ooiw372gte] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--link-color, #0069cc);
}

.rmd-option__input:focus-visible[b-ooiw372gte] {
    outline: 2px solid var(--color-digi-blue);
    outline-offset: 2px;
}

.rmd-option__text[b-ooiw372gte] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.rmd-option__title[b-ooiw372gte] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--txt-shade-1);
}

.rmd-option__detail[b-ooiw372gte] {
    font-size: 0.8125rem;
    color: #3c4346;
    overflow-wrap: anywhere;
}

.rmd-option__desc[b-ooiw372gte] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--txt-shade-3);
}

/* PDF-blaadje, zelfde als in het downloadmenu op Resultaten. */
.rmd-pdf[b-ooiw372gte] {
    flex: 0 0 auto;
    width: 26px;
    min-width: 26px;
    height: 26px;
}

.rmd-pdf__page[b-ooiw372gte] { fill: #c8322a; }
.rmd-pdf__fold[b-ooiw372gte] { fill: #e8a29b; }
.rmd-pdf__strip[b-ooiw372gte] { fill: #fff; }
.rmd-pdf__label[b-ooiw372gte] { fill: #c8322a; font-family: inherit; }

.rmd__error[b-ooiw372gte] {
    margin: 0;
    padding: 10px 14px;
    font-size: 0.8125rem;
    color: #8a2a1f;
    background: #fdf1ef;
    border: 1px solid #f1c3bc;
    border-radius: 8px;
}

.rmd__hint[b-ooiw372gte] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--txt-shade-3);
}

/* ---------------------------------------------------------- na versturen */

.rmd__sent[b-ooiw372gte] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 40px 40px;
    text-align: center;
}

.rmd__sent-icon[b-ooiw372gte] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: #e3f4e8;
    color: #1e7b34;
}

.rmd__sent-icon svg[b-ooiw372gte] {
    width: 28px;
    height: 28px;
}

.rmd__sent-title[b-ooiw372gte] {
    margin: 4px 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--txt-shade-1);
}

.rmd__sent-text[b-ooiw372gte] {
    max-width: 420px;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #3c4346;
    overflow-wrap: anywhere;
}

.rmd__sent-log[b-ooiw372gte] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--txt-shade-3);
}

/* ---------------------------------------------------------------- voet */

.rmd__foot[b-ooiw372gte] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e1e6e6;
}

.rmd-btn[b-ooiw372gte] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--link-color, #0069cc);
    background: #fff;
    border: 1px solid var(--color-digi-blue);
    border-radius: 2px;
    cursor: pointer;
}

.rmd-btn:hover:not(:disabled)[b-ooiw372gte] {
    color: #fff;
    background: var(--color-digi-blue-light);
}

.rmd-btn:focus-visible[b-ooiw372gte] {
    outline: 2px solid var(--color-digi-blue);
    outline-offset: 2px;
}

.rmd-btn:disabled[b-ooiw372gte] {
    opacity: 0.55;
    cursor: default;
}

/* De enige gevulde knop: donkerder blauw dan de rand, anders haalt witte tekst het contrast niet. */
.rmd-btn--primary[b-ooiw372gte] {
    font-weight: 600;
    color: #fff;
    background: #0069cc;
    border-color: #0069cc;
}

.rmd-btn--primary:hover:not(:disabled)[b-ooiw372gte] {
    background: #00539f;
    border-color: #00539f;
}

.rmd-btn svg[b-ooiw372gte] {
    width: 16px;
    height: 16px;
}

@media (max-width: 560px) {
    .rmd__facts[b-ooiw372gte] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rmd__facts-val + .rmd__facts-key[b-ooiw372gte] {
        margin-top: 6px;
    }
}
/* /Pages/Profile/DoseringAdviezen.razor.rz.scp.css */
/* One shared column template for the whole list. Each row (.dip-card-doseringadvies, styled in
   DoseringsAdvies.razor.css) is a subgrid that snaps to these tracks, so all columns line up.
   Overrides the legacy global rule (grid 1fr + max-width:220ch) via scoped specificity. */
.dip-card-wrapper-doseringadvies[b-s8eh1os94t] {
    display: grid;
    grid-template-columns:
        minmax(8rem, 1.3fr)
        minmax(10rem, 2fr)
        minmax(8rem, 1.1fr)
        auto;
    gap: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-top: 1px solid hsl(0, 0%, 92%);
}

@media screen and (max-width: 767px) {
    .dip-card-wrapper-doseringadvies[b-s8eh1os94t] {
        display: block;
        border-top: none;
    }
}
/* /Pages/Profile/Genotypen.razor.rz.scp.css */
/* ============================================================================
   Pagina Genotypen (PORTALGENOTYPES). Volgt het ronde thema van /batches:
   radii 20px, pills 999px, wit paneel met een zwevend label op het zoekveld.

   De allelkleuren zijn dezelfde tokens die de portal elders gebruikt, zodat een
   G op deze pagina dezelfde kleur heeft als in het Helix-paneel.
   ============================================================================ */

.gt-panel[b-yfi4jgou70] {
    margin: 0 0 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---- kop met zoekveld ---------------------------------------------------- */

.gt-head[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-bottom: 18px;
}

.gt-head__intro[b-yfi4jgou70] { min-width: 0; }

.gt-head__title[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.gt-head__sub[b-yfi4jgou70] {
    margin: 3px 0 0;
    font-size: .85rem;
    color: #64748b;
}

.gt-beta[b-yfi4jgou70] {
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gt-search[b-yfi4jgou70] {
    position: relative;
    flex: 0 1 380px;
    min-width: 260px;
    margin-left: auto;
}

.gt-search__input[b-yfi4jgou70] {
    width: 100%;
    padding: 9px 44px 9px 18px;
    background: #fff;
    border: 1px solid #dbe1ea;
    border-radius: 999px;
    font-size: .9rem;
    color: #0f172a;
    outline: none;
}

.gt-search__input:focus[b-yfi4jgou70] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Zwevend label: verschijnt zodra er iets staat of het veld focus heeft. */
.gt-search__label[b-yfi4jgou70] {
    position: absolute;
    left: 14px;
    top: 0;
    transform: translateY(-52%);
    padding: 1px 8px;
    background: #fff;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    color: #2563eb;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.gt-search__input:focus + .gt-search__label[b-yfi4jgou70],
.gt-search__input:not(:placeholder-shown) + .gt-search__label[b-yfi4jgou70] { opacity: 1; }

.gt-search__go[b-yfi4jgou70] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
}

.gt-search__go:hover[b-yfi4jgou70] { background: #eff4ff; }
.gt-search__go:disabled[b-yfi4jgou70] { color: #cbd5e1; cursor: default; background: transparent; }

/* ---- meldingen ----------------------------------------------------------- */

.gt-note[b-yfi4jgou70], .gt-blocked[b-yfi4jgou70], .gt-error[b-yfi4jgou70] {
    font-size: .875rem;
    color: #475569;
}

.gt-blocked[b-yfi4jgou70] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.gt-error[b-yfi4jgou70] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

/* ---- startscherm --------------------------------------------------------- */

.gt-start__hint[b-yfi4jgou70] {
    margin: 0 0 14px;
    font-size: .875rem;
    color: #64748b;
}

.gt-start__empty[b-yfi4jgou70] {
    margin: 0;
    font-size: .85rem;
    color: #94a3b8;
}

.gt-start__head[b-yfi4jgou70] {
    margin: 18px 0 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.gt-start__head:first-of-type[b-yfi4jgou70] { margin-top: 0; }

.gt-pinlist[b-yfi4jgou70] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gt-pinlist--gene[b-yfi4jgou70] { margin-top: 14px; }

/* ---- gen-kaart ----------------------------------------------------------- */

.gt-gene[b-yfi4jgou70] {
    position: relative;
    overflow: hidden;
}

.gt-gene__rail[b-yfi4jgou70] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #2563eb;
}

.gt-gene--raw .gt-gene__rail[b-yfi4jgou70] { background: #f59e0b; }

.gt-gene__top[b-yfi4jgou70] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.gt-gene__id[b-yfi4jgou70] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.gt-gene__name[b-yfi4jgou70] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.gt-gene__long[b-yfi4jgou70] {
    font-size: .875rem;
    color: #64748b;
}

.gt-gene__foot[b-yfi4jgou70] {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: .74rem;
    color: #94a3b8;
}

.gt-chips[b-yfi4jgou70] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.gt-chip[b-yfi4jgou70] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    font-size: .8rem;
    color: #334155;
}

.gt-chip strong[b-yfi4jgou70] { color: #0f172a; font-weight: 700; }

.gt-chip--ok[b-yfi4jgou70] {
    background: #ecfdf3;
    border-color: #d1fadf;
    color: #047857;
}

.gt-chip--ok strong[b-yfi4jgou70] { color: #047857; }

.gt-chip--soft[b-yfi4jgou70] { color: #94a3b8; }

.gt-warnings[b-yfi4jgou70] {
    margin: 12px 0 0;
    padding: 10px 14px 10px 30px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    font-size: .8rem;
    color: #92400e;
}

.gt-warnings li[b-yfi4jgou70] { margin: 2px 0; }

/* ---- filterbalk ---------------------------------------------------------- */

.gt-filters[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.gt-pill[b-yfi4jgou70] {
    padding: 7px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dbe1ea;
    color: #334155;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.gt-pill:hover[b-yfi4jgou70] { border-color: #c7d2fe; }

.gt-pill--on[b-yfi4jgou70] {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.gt-pill__count[b-yfi4jgou70] { color: #94a3b8; font-weight: 500; }
.gt-pill--on .gt-pill__count[b-yfi4jgou70] { color: rgba(255, 255, 255, .6); }

/* ---- SNP-lijst ----------------------------------------------------------- */

.gt-list[b-yfi4jgou70] {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.gt-list__empty[b-yfi4jgou70] {
    margin: 0;
    padding: 22px;
    font-size: .85rem;
    color: #94a3b8;
}

.gt-row-wrap[b-yfi4jgou70] { border-bottom: 1px solid #f1f5f9; }
.gt-row-wrap:last-child[b-yfi4jgou70] { border-bottom: 0; }

.gt-row[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
}

.gt-row:hover[b-yfi4jgou70] { background: #fafbfc; }
.gt-row--pinned[b-yfi4jgou70] { background: #fafbff; }

.gt-row__toggle[b-yfi4jgou70] {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.gt-row__id[b-yfi4jgou70] { flex: 1 1 auto; min-width: 0; }

.gt-row__idline[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.gt-row__pos[b-yfi4jgou70] {
    font-size: .78rem;
    color: #64748b;
    margin-top: 3px;
}

.gt-row__call[b-yfi4jgou70] { flex: 0 0 320px; }

.gt-row__callline[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gt-row__why[b-yfi4jgou70] {
    font-size: .74rem;
    color: #94a3b8;
    margin-top: 4px;
}

.gt-row__actions[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.gt-rs[b-yfi4jgou70] {
    font-size: .97rem;
    font-weight: 700;
    color: #0f172a;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.gt-nodata[b-yfi4jgou70] {
    font-size: .82rem;
    color: #94a3b8;
}

/* ---- labels -------------------------------------------------------------- */

.gt-tag[b-yfi4jgou70] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.gt-tag--ok[b-yfi4jgou70] { background: #ecfdf3; color: #047857; }
.gt-tag--warn[b-yfi4jgou70] { background: #fffbeb; color: #b45309; }
.gt-tag--soft[b-yfi4jgou70] { background: #f8fafc; color: #94a3b8; }
.gt-tag--pin[b-yfi4jgou70] { background: #eff4ff; color: #1d4ed8; }
.gt-tag--raw[b-yfi4jgou70] { background: #fff7ed; color: #c2410c; }

/* Klikbaar gen-label: zoekt het hele gen op. Knop-reset, want een <button> brengt
   zijn eigen lettertype en randen mee. */
.gt-tag--link[b-yfi4jgou70] {
    border: 1px solid #dbe1ea;
    font-family: inherit;
    cursor: pointer;
}

.gt-tag--link:hover[b-yfi4jgou70] {
    background: #eff4ff;
    border-color: #c7d2fe;
    color: #1d4ed8;
}

/* ---- knoppen ------------------------------------------------------------- */

.gt-btn[b-yfi4jgou70] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #dbe1ea;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.gt-btn:hover[b-yfi4jgou70] { background: #f1f5ff; border-color: #c7d2fe; color: #1d4ed8; }
.gt-btn:disabled[b-yfi4jgou70] { color: #cbd5e1; border-color: #eef1f5; background: #fff; cursor: default; }

.gt-btn--small[b-yfi4jgou70] { padding: 6px 13px; font-size: .75rem; }

.gt-btn--on[b-yfi4jgou70] {
    background: #f1f5ff;
    border-color: #c7d2fe;
    color: #1d4ed8;
}

.gt-btn--primary[b-yfi4jgou70] {
    background: #0080ff;
    border-color: #0080ff;
    color: #fff;
}

.gt-btn--primary:hover[b-yfi4jgou70] { background: #0069d1; border-color: #0069d1; color: #fff; }
.gt-btn--primary:disabled[b-yfi4jgou70] { background: #cbd5e1; border-color: #cbd5e1; color: #fff; }

.gt-linkbtn[b-yfi4jgou70] {
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
}

.gt-linkbtn:hover[b-yfi4jgou70] { text-decoration: underline; }
.gt-linkbtn--danger[b-yfi4jgou70] { color: #b91c1c; }

/* ---- metingentabel ------------------------------------------------------- */

/* De tabel zelf staat in GenotypeMeasurements.razor(.css); hier alleen de insprong die hem onder de
   SNP-rij uitlijnt. */
.gt-measurewrap[b-yfi4jgou70] { margin: 0 22px 18px 57px; }

/* ---- losse SNP in beeld -------------------------------------------------- */

.gt-focus[b-yfi4jgou70] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    font-size: .8rem;
    color: #64748b;
}

/* De notitie onder een rij houdt de inspringing van de uitgeklapte metingen aan. */
.gt-rownote[b-yfi4jgou70] {
    margin: 0 22px 14px 57px;
}

/* Het pin-icoon staat in knoppen en labels; het erft de kleur van zijn omhulsel. */
.gt-pinicon[b-yfi4jgou70] {
    flex: 0 0 auto;
}

/* De pindialoog staat in Components/GenotypePinDialog.razor(.css), gedeeld met het Helix-paneel. */

/* ---- smal scherm --------------------------------------------------------- */

@media (max-width: 900px) {
    .gt-row[b-yfi4jgou70] { flex-wrap: wrap; }
    .gt-row__call[b-yfi4jgou70] { flex: 1 1 100%; }
    .gt-rownote[b-yfi4jgou70], .gt-measurewrap[b-yfi4jgou70] { margin-left: 22px; }
}
/* /Pages/Profile/PharmacoProfiel.razor.rz.scp.css */
/*
    De werkbalk boven de PGx-tabel: downloaden, mailen en kopieren.

    De regels voor de knoppen, het PDF-blaadje en het downloadmenu zijn een KOPIE van
    Resultaten.razor.css, want scoped CSS hangt aan de pagina waar de markup staat en beide werkbalken
    horen er hetzelfde uit te zien. Pas je daar iets aan, doe het hier ook.
*/

.rp-actions[b-dcdcjyb5x6] {
    align-items: center;
}

/* Documenten links, schermacties rechts. */
.rp-divider[b-dcdcjyb5x6] {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    background-color: var(--ui-med);
    margin-inline: 0.5rem;
}

/* ------------------------------------------------------------------ PDF-icoon */

.rp-pdf[b-dcdcjyb5x6],
.rp-spinner[b-dcdcjyb5x6] {
    flex: 0 0 auto;
    width: 16px;
    min-width: 16px;
    height: 16px;
}

.rp-pdf__page[b-dcdcjyb5x6] {
    fill: #c8322a;
}

.rp-pdf__fold[b-dcdcjyb5x6] {
    fill: #e8a29b;
}

.rp-pdf__strip[b-dcdcjyb5x6] {
    fill: #fff;
}

.rp-pdf__label[b-dcdcjyb5x6] {
    fill: #c8322a;
    font-family: inherit;
}

/*
    Op hover wordt de knop zelf blauw met witte tekst, en dan wordt rood op blauw modder. Het
    blaadje keert daarom om: wit vel met een blauwe labelstrip.
*/
.dip-button:hover .rp-pdf__page[b-dcdcjyb5x6] {
    fill: #fff;
}

.dip-button:hover .rp-pdf__fold[b-dcdcjyb5x6] {
    fill: rgba(255, 255, 255, 0.45);
}

.dip-button:hover .rp-pdf__strip[b-dcdcjyb5x6] {
    fill: var(--color-digi-blue-light);
}

/* -------------------------------------------------------------------- spinner */

.rp-spinner[b-dcdcjyb5x6] {
    animation: rp-spin-b-dcdcjyb5x6 0.8s linear infinite;
}

.rp-spinner__track[b-dcdcjyb5x6] {
    opacity: 0.25;
}

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

/*
    De basisknop zet bij :disabled grijs af, en doet dat met !important. Dat is hier niet wat we
    bedoelen: de knop is niet uitgeschakeld maar even bezig, en hij hoort rustig te blijven staan.
    Daarom moet !important hier terug; anders wint de grijze regel uit style.css.
*/
.rp-busy:disabled[b-dcdcjyb5x6] {
    background-color: #f2f8fe !important;
    border-color: #9fcff7 !important;
    color: #5b7e99 !important;
}

/* --------------------------------------------------------- de knop met menu */

.rp-download[b-dcdcjyb5x6] {
    position: relative;
    display: inline-flex;
}

.rp-download__count[b-dcdcjyb5x6] {
    margin-inline-start: 0.375rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.rp-download__chevron[b-dcdcjyb5x6] {
    width: 13px;
    min-width: 13px;
    height: 13px;
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
    opacity: 0.75;
}

/* Een doorzichtig vlak over de pagina: klikken naast het menu sluit het. */
.rp-scrim[b-dcdcjyb5x6] {
    position: fixed;
    inset: 0;
    z-index: 55;
}

.rp-menu[b-dcdcjyb5x6] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 360px;
    /* Rechts uitgelijnd, zodat het menu bij een smal scherm niet buiten de balk steekt. */
    max-width: calc(100vw - 2rem);
    padding-block: 0.375rem;
    text-align: left;
    background-color: #fff;
    border: 1px solid var(--ui-med);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.05);
}

.rp-menu__head[b-dcdcjyb5x6] {
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-shade-3);
}

.rp-menu__item[b-dcdcjyb5x6] {
    display: flex;
    /* Een knop centreert zijn inhoud, ook als hij display:flex is. Zonder deze regel begint
       elke regel op een andere x: hoe breder de tekst, hoe verder naar links. */
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6875rem 0.875rem;
    font-family: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.rp-menu__item:hover[b-dcdcjyb5x6],
.rp-menu__item:focus-visible[b-dcdcjyb5x6] {
    background-color: #f2f8fe;
}

.rp-menu__item:disabled[b-dcdcjyb5x6] {
    cursor: default;
}

.rp-menu__item .rp-pdf[b-dcdcjyb5x6],
.rp-menu__item .rp-spinner[b-dcdcjyb5x6] {
    width: 26px;
    min-width: 26px;
    height: 26px;
}

.rp-menu__item .rp-spinner[b-dcdcjyb5x6] {
    stroke: #5b7e99;
}

.rp-menu__text[b-dcdcjyb5x6] {
    /* Vult de rij, zodat een lange ondertitel binnen het menu afbreekt in plaats van het
       tekstblok breder te maken. min-width: 0 laat dat afbreken ook echt toe. */
    flex: 1 1 auto;
    min-width: 0;
}

.rp-menu__title[b-dcdcjyb5x6] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--txt-shade-1);
}

.rp-menu__desc[b-dcdcjyb5x6] {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--txt-shade-3);
}

.rp-menu__desc--busy[b-dcdcjyb5x6] {
    color: #5b7e99;
}

/* --------------------------------------------------------------- kopieren */

/* Twee seconden na het kopieren: groen vinkje op de knop zelf, naast de melding onderin. */
.pp-copy--done[b-dcdcjyb5x6],
.pp-copy--done:hover[b-dcdcjyb5x6] {
    color: #1e7b34;
}

/* ------------------------------------------------------ mailen tijdens meekijken */

/* Zichtbaar maar niet te gebruiken; de reden staat in de title. Geen hoverkleur, anders nodigt hij uit. */
.pp-mail--blocked[b-dcdcjyb5x6],
.pp-mail--blocked:hover[b-dcdcjyb5x6] {
    color: var(--txt-shade-3);
    background-color: transparent;
    border-color: var(--ui-med);
    cursor: not-allowed;
}
/* /Pages/Profile/Resultaten.razor.rz.scp.css */
/*
    De knoppenbalk boven de resultaten van een profiel.

    Waarom scoped en niet in style.css: dit is opmaak van deze ene pagina, en de hover-omkleuring
    van het PDF-blaadje moet aan de knoppen van DEZE pagina hangen. Let wel op dat het
    scope-attribuut van Blazor niet op de wortel van een child-component landt; alle markup
    hieronder staat daarom voluit in Resultaten.razor en niet in een RenderFragment.
*/

.rp-actions[b-zvixk3j075] {
    align-items: center;
}

/* Documenten links, schermacties rechts. */
.rp-divider[b-zvixk3j075] {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    background-color: var(--ui-med);
    margin-inline: 0.5rem;
}

/* ------------------------------------------------------------------ PDF-icoon */

.rp-pdf[b-zvixk3j075],
.rp-spinner[b-zvixk3j075] {
    flex: 0 0 auto;
    width: 16px;
    min-width: 16px;
    height: 16px;
}

.rp-pdf__page[b-zvixk3j075] {
    fill: #c8322a;
}

.rp-pdf__fold[b-zvixk3j075] {
    fill: #e8a29b;
}

.rp-pdf__strip[b-zvixk3j075] {
    fill: #fff;
}

.rp-pdf__label[b-zvixk3j075] {
    fill: #c8322a;
    font-family: inherit;
}

/*
    Op hover wordt de knop zelf blauw met witte tekst, en dan wordt rood op blauw modder. Het
    blaadje keert daarom om: wit vel met een blauwe labelstrip.
*/
.dip-button:hover .rp-pdf__page[b-zvixk3j075] {
    fill: #fff;
}

.dip-button:hover .rp-pdf__fold[b-zvixk3j075] {
    fill: rgba(255, 255, 255, 0.45);
}

.dip-button:hover .rp-pdf__strip[b-zvixk3j075] {
    fill: var(--color-digi-blue-light);
}

/* -------------------------------------------------------------------- spinner */

.rp-spinner[b-zvixk3j075] {
    animation: rp-spin-b-zvixk3j075 0.8s linear infinite;
}

.rp-spinner__track[b-zvixk3j075] {
    opacity: 0.25;
}

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

/*
    De basisknop zet bij :disabled grijs af, en doet dat met !important. Dat is hier niet wat we
    bedoelen: de knop is niet uitgeschakeld maar even bezig, en hij hoort rustig te blijven staan.
    Daarom moet !important hier terug; anders wint de grijze regel uit style.css.
*/
.rp-busy:disabled[b-zvixk3j075] {
    background-color: #f2f8fe !important;
    border-color: #9fcff7 !important;
    color: #5b7e99 !important;
}

/* --------------------------------------------------------- de knop met menu */

.rp-download[b-zvixk3j075] {
    position: relative;
    display: inline-flex;
}

.rp-download__count[b-zvixk3j075] {
    margin-inline-start: 0.375rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.rp-download__chevron[b-zvixk3j075] {
    width: 13px;
    min-width: 13px;
    height: 13px;
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
    opacity: 0.75;
}

/* Een doorzichtig vlak over de pagina: klikken naast het menu sluit het. */
.rp-scrim[b-zvixk3j075] {
    position: fixed;
    inset: 0;
    z-index: 55;
}

.rp-menu[b-zvixk3j075] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 360px;
    /* Rechts uitgelijnd, zodat het menu bij een smal scherm niet buiten de balk steekt. */
    max-width: calc(100vw - 2rem);
    padding-block: 0.375rem;
    text-align: left;
    background-color: #fff;
    border: 1px solid var(--ui-med);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.05);
}

.rp-menu__head[b-zvixk3j075] {
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-shade-3);
}

.rp-menu__item[b-zvixk3j075] {
    display: flex;
    /* Een knop centreert zijn inhoud, ook als hij display:flex is. Zonder deze regel begint
       elke regel op een andere x: hoe breder de tekst, hoe verder naar links. */
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6875rem 0.875rem;
    font-family: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.rp-menu__item:hover[b-zvixk3j075],
.rp-menu__item:focus-visible[b-zvixk3j075] {
    background-color: #f2f8fe;
}

.rp-menu__item:disabled[b-zvixk3j075] {
    cursor: default;
}

.rp-menu__item .rp-pdf[b-zvixk3j075],
.rp-menu__item .rp-spinner[b-zvixk3j075] {
    width: 26px;
    min-width: 26px;
    height: 26px;
}

.rp-menu__item .rp-spinner[b-zvixk3j075] {
    stroke: #5b7e99;
}

.rp-menu__text[b-zvixk3j075] {
    /* Vult de rij, zodat een lange ondertitel binnen het menu afbreekt in plaats van het
       tekstblok breder te maken. min-width: 0 laat dat afbreken ook echt toe. */
    flex: 1 1 auto;
    min-width: 0;
}

.rp-menu__title[b-zvixk3j075] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--txt-shade-1);
}

.rp-menu__desc[b-zvixk3j075] {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--txt-shade-3);
}

.rp-menu__desc--busy[b-zvixk3j075] {
    color: #5b7e99;
}

/* ---------------------------------------------------------- privacyscherm */

.rp-privacy[b-zvixk3j075] {
    padding-inline: 0.75rem;
}

/*
    De enige gevulde knop op de balk, zodat je in een oogopslag ziet dat er een stand aan staat.
    Stond eerder als inline style in de markup, en daar kon geen hover bij.
*/
.rp-privacy--on[b-zvixk3j075] {
    background-color: #334155;
    color: #fff;
}

.rp-privacy--on:hover[b-zvixk3j075] {
    background-color: #1f2a37;
    color: #fff;
}
/* /Pages/Profile/UnassignProfessionalDialog.razor.rz.scp.css */
/*
    Venster "Koppeling beeindigen". Vorm letterlijk uit AssignProfessionalDialog.razor.css (in dit
    project is geen gedeeld tokenbestand voor deze vormtaal, dus ze staan hier over). Alles is
    platte HTML in dit component, dus geen ::deep. Alleen IdBadge is een component; die stijlt
    zichzelf.
*/

.pu-scrim[b-vqbzx48p0b] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, 0.45);
}

.pu-dialog[b-vqbzx48p0b] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1301;
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.22), 0 4px 10px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.pu-dialog__head[b-vqbzx48p0b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    padding: 1.05rem 1.3rem;
    border-bottom: 1px solid #eef1f4;
}

.pu-dialog__icon[b-vqbzx48p0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: #fdf2e9;
    border-radius: 8px;
    color: #b54708;
}

.pu-dialog__icon svg[b-vqbzx48p0b] {
    width: 15px;
    height: 15px;
}

.pu-dialog__title[b-vqbzx48p0b] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.pu-dialog__close[b-vqbzx48p0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.pu-dialog__close:hover[b-vqbzx48p0b] {
    background: #f1f5f9;
    color: #0f172a;
}

.pu-dialog__close svg[b-vqbzx48p0b] {
    width: 16px;
    height: 16px;
}

.pu-dialog__body[b-vqbzx48p0b] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.pu-dialog__foot[b-vqbzx48p0b] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.9rem 1.3rem;
    border-top: 1px solid #eef1f4;
    background: #fbfcfd;
}

/* Om welk profiel en welke zorgbehandelaar het gaat, bovenaan: een verkeerde regel aanklikken is
   anders pas te zien als het al gebeurd is. */
.pu-row[b-vqbzx48p0b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: #475569;
}

.pu-row__label[b-vqbzx48p0b] {
    min-width: 8.5rem;
    font-weight: 600;
    color: #0f172a;
}

.pu-row__meta[b-vqbzx48p0b] {
    color: #64748b;
}

/* Zelfde grijze pil als in de kolom: een openstaand verzoek is een normale tussenstand. */
.pu-pending[b-vqbzx48p0b] {
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    background: #eef2f7;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
}

.pu-note[b-vqbzx48p0b] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: #fffaeb;
    color: #93370d;
    font-size: 0.82rem;
    line-height: 1.45;
}

.pu-note svg[b-vqbzx48p0b] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.pu-note__intro[b-vqbzx48p0b] {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

/* De globale stijl zet list-style op none; hier zijn de punten juist de structuur. */
.pu-note__list[b-vqbzx48p0b] {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.pu-note__list li[b-vqbzx48p0b] {
    list-style: inherit;
}

.pu-note__list li + li[b-vqbzx48p0b] {
    margin-top: 0.15rem;
}

.pu-error[b-vqbzx48p0b] {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-size: 0.82rem;
    line-height: 1.45;
}

.pu-btn[b-vqbzx48p0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.4rem 0.95rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pu-btn:hover:not(:disabled)[b-vqbzx48p0b] {
    background: #f4f6f8;
    border-color: #b9bfc9;
}

.pu-btn:focus-visible[b-vqbzx48p0b] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.pu-btn:disabled[b-vqbzx48p0b] {
    opacity: 0.55;
    cursor: default;
}

.pu-btn--danger[b-vqbzx48p0b] {
    border-color: transparent;
    background: #d92d20;
    color: #fff;
    box-shadow: 0 1px 2px rgba(217, 45, 32, 0.35);
}

.pu-btn--danger:hover:not(:disabled)[b-vqbzx48p0b] {
    background: #b42318;
    border-color: transparent;
}
/* /Pages/Register/Index.razor.rz.scp.css */
/* Test registreren (2026). Werkblad-indeling zoals /orders/new: invullen links, samenvatting met
   de hoofdknop rechts, en daaronder wat deze sessie al opleverde.

   Deze pagina hanteert het "rond thema" (grotere radii, pill-vormige knoppen) dat /orders/new en
   /batches ook gebruiken en dat NIET globaal geldt. Scoped CSS, dus dit raakt alleen deze pagina;
   style.css wordt door Web Compiler uit style.less gegenereerd en mag niet met de hand aangepast
   worden.

   ::deep-regel: de invoervelden zijn Blazor-COMPONENTEN (InputText, InputNumber, InputSelect) en
   het scope-attribuut landt niet op het element dat zo'n component rendert. Zonder ::deep matcht
   de regel nooit en staat er een ongestyled veld. Zelfde valkuil als in NewOrder.razor.css. */

/* Verticaal symmetrische sectie, zelfde correctie als /batches en /orders/new. */
.section[b-cje4foi49g] {
    padding-top: 1.35rem;
}

/* ---- kop ---- */
.rg-header[b-cje4foi49g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin: 0 0 1.1rem;
    padding: 1.05rem 1.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.rg-header__title[b-cje4foi49g] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.rg-header__sub[b-cje4foi49g] {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--txt-shade-3, #4d4d4d);
}

/* De praktijk is een FEIT en geen keuze: hij staat er als chip bij, niet als veld. */
.rg-chip[b-cje4foi49g] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #475569;
}

.rg-chip svg[b-cje4foi49g] {
    width: 15px;
    height: 15px;
    color: #64748b;
}

.rg-chip__code[b-cje4foi49g] {
    padding: 0.1rem 0.4rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
}

/* ---- twee kolommen ---- */
.rg-layout[b-cje4foi49g] {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.rg-main[b-cje4foi49g] {
    flex: 1 1 620px;
    min-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.rg-side[b-cje4foi49g] {
    flex: 0 0 330px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ---- kaarten ---- */
.rg-card[b-cje4foi49g] {
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.rg-card__head[b-cje4foi49g] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.3rem;
}

.rg-card__icon[b-cje4foi49g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.rg-card__icon svg[b-cje4foi49g] {
    width: 14px;
    height: 14px;
}

.rg-card__title[b-cje4foi49g] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
}

.rg-hint[b-cje4foi49g] {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--txt-shade-3, #4d4d4d);
}

/* ---- velden ---- */
.rg-field[b-cje4foi49g] {
    min-width: 0;
    margin-bottom: 0.95rem;
}

.rg-field:last-child[b-cje4foi49g] {
    margin-bottom: 0;
}

.rg-fieldrow[b-cje4foi49g] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.rg-field--year[b-cje4foi49g] {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.rg-field--grow[b-cje4foi49g] {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.rg-label[b-cje4foi49g] {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

.rg-fieldhint[b-cje4foi49g] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: #64748b;
}

/* Een veld is GEVULD en niet wit, net als op /orders/new: op een witte kaart is wit-op-wit alleen
   aan de rand te zien. Bij focus wordt het veld wit, zodat waar je typt het helderste vlak is. */
[b-cje4foi49g] .rg-input,
[b-cje4foi49g] .rg-select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f3f6fb;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

[b-cje4foi49g] .rg-input::placeholder {
    color: #64748b;
}

[b-cje4foi49g] .rg-input:focus,
[b-cje4foi49g] .rg-select:focus {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Een geboortejaar is geen aantal: je klikt het niet omhoog en per ongeluk scrollen mag de waarde
   niet veranderen. Zelfde ingreep als op /orders/new. */
[b-cje4foi49g] .rg-input--year {
    width: 116px;
    -moz-appearance: textfield;
    appearance: textfield;
}

[b-cje4foi49g] .rg-input--year::-webkit-outer-spin-button,
[b-cje4foi49g] .rg-input--year::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.rg-selectwrap[b-cje4foi49g] {
    display: block;
    position: relative;
}

[b-cje4foi49g] .rg-select {
    appearance: none;
    padding-right: 2.2rem;
}

.rg-selectwrap__chevron[b-cje4foi49g] {
    position: absolute;
    right: 12px;
    top: 13px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    color: #64748b;
}

/* De validatiemeldingen van FluentValidation komen uit een component, dus ::deep. */
.rg-card[b-cje4foi49g]  .validation-message {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #dc2626;
}

/* ---- samenvatting ---- */
.rg-sum[b-cje4foi49g] {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

.rg-sum--last[b-cje4foi49g] {
    padding-bottom: 0.9rem;
}

.rg-sum__key[b-cje4foi49g] {
    color: var(--txt-shade-3, #4d4d4d);
}

.rg-sum__val[b-cje4foi49g] {
    font-weight: 600;
    text-align: right;
    color: #0f172a;
}

/* Nog niets ingevuld: wel leesbaar, maar duidelijk nog geen waarde. */
.rg-sum__val--empty[b-cje4foi49g] {
    font-weight: 500;
    font-style: italic;
    color: #64748b;
}

/* De praktijk volgt uit de sessie en is geen invoer, dus rustiger dan wat je zelf typt. */
.rg-sum__val--soft[b-cje4foi49g] {
    font-weight: 500;
    color: var(--txt-shade-3, #4d4d4d);
}

.rg-rule[b-cje4foi49g] {
    height: 1px;
    background: #eef2f7;
    margin: 0.9rem 0;
}

/* ---- knoppen ---- */

/* hsl(209,100%,45%) en niet de 50% uit de app: wit op 50% haalt 3,8:1 en dat is onder de 4,5 die
   knoptekst van deze maat nodig heeft. 45% is de tint die de app al als hover gebruikt. */
.rg-submit[b-cje4foi49g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.72rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: hsl(209, 100%, 45%);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rg-submit:hover:not(:disabled)[b-cje4foi49g] {
    background: hsl(209, 100%, 38%);
}

.rg-submit:disabled[b-cje4foi49g] {
    background: #cbd5e1;
    color: #475569;
    cursor: default;
}

.rg-submit svg[b-cje4foi49g] {
    width: 17px;
    height: 17px;
}

/* De enige actie op het distributiecentrum-scherm mag groter. */
.rg-submit--big[b-cje4foi49g] {
    padding: 0.95rem 1rem;
    font-size: 0.95rem;
}

/* Leegmaken is een correctie, geen tweede hoofdactie: geen kader, geen vlak. */
.rg-clear[b-cje4foi49g] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--txt-shade-3, #4d4d4d);
    background: transparent;
    border: none;
    cursor: pointer;
}

.rg-clear:hover[b-cje4foi49g] {
    color: #0f172a;
}

/* ---- meldingen ---- */
.rg-notice[b-cje4foi49g] {
    display: flex;
    gap: 0.6rem;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    font-size: 0.8rem;
    line-height: 1.5;
}

.rg-notice svg[b-cje4foi49g] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.rg-notice--info[b-cje4foi49g] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.rg-notice--warn[b-cje4foi49g] {
    margin: 0.9rem 0;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

@media (max-width: 1080px) {
    .rg-main[b-cje4foi49g] {
        min-width: 0;
        flex-basis: 100%;
    }

    .rg-side[b-cje4foi49g] {
        flex: 1 1 100%;
    }
}
/* /Pages/Register/Result.razor.rz.scp.css */
/* Bevestigingskaart na een registratie. Rond thema, zelfde maten als /orders/new.

   Geen ::deep: alles hier is platte HTML uit de eigen .razor. De knop naar het briefpaneel is een
   component met zijn eigen scoped CSS; die wordt hier alleen geplaatst, niet gestyled. */

.rr-card[b-x18b0zzvqw] {
    padding: 1.15rem 1.3rem;
    background: #fff;
    /* Groene rand in plaats van de gewone: de kaart bevestigt iets dat gelukt is, en dat mag de
       kaart zelf zeggen zonder er een gekleurd vlak van te maken. */
    border: 1px solid #a7f3d0;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.rr-head[b-x18b0zzvqw] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.3rem;
}

.rr-head__tick[b-x18b0zzvqw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #059669;
    border-radius: 999px;
    color: #fff;
}

.rr-head__tick svg[b-x18b0zzvqw] {
    width: 13px;
    height: 13px;
}

.rr-head__title[b-x18b0zzvqw] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
}

.rr-intro[b-x18b0zzvqw] {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--txt-shade-3, #4d4d4d);
}

/* ---- de buiscode ---- */
.rr-tube[b-x18b0zzvqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
}

.rr-tube__label[b-x18b0zzvqw] {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}

.rr-tube__code[b-x18b0zzvqw] {
    display: block;
    margin-top: 0.15rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.15;
    color: #0f172a;
}

.rr-copy[b-x18b0zzvqw] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 44px;
    padding: 0 1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    border: 1px solid #b6c2d1;
    border-radius: 999px;
    cursor: pointer;
}

.rr-copy:hover[b-x18b0zzvqw] {
    background: #f5faff;
    border-color: hsl(209, 100%, 45%);
}

.rr-copy svg[b-x18b0zzvqw] {
    width: 15px;
    height: 15px;
    color: #475569;
}

/* ---- de gegevens eronder ---- */
.rr-facts[b-x18b0zzvqw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
    margin-top: 1rem;
}

.rr-facts__label[b-x18b0zzvqw] {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}

.rr-facts__val[b-x18b0zzvqw] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.9rem;
    color: #0f172a;
}

.rr-rule[b-x18b0zzvqw] {
    height: 1px;
    background: #eef2f7;
    margin: 1.15rem 0 1rem;
}

.rr-subhead[b-x18b0zzvqw] {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.rr-hint[b-x18b0zzvqw] {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--txt-shade-3, #4d4d4d);
}

.rr-actions[b-x18b0zzvqw] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
/* /Pages/Register/SessionList.razor.rz.scp.css */
/* Wat deze sessie opleverde. Rond thema; de kaartregels staan hier opnieuw omdat scoped CSS per
   component geldt en de regels uit Index.razor.css dit component niet bereiken. Dat is in dit
   project de gewone gang van zaken: /orders, /orders/new en het orderdetail hebben elk hun eigen
   kaartdefinitie.

   Geen ::deep: alles hier is platte HTML uit de eigen .razor. De knop per regel is een component
   met eigen scoped CSS en wordt hier alleen geplaatst. */

.sl-card[b-gejs5vv031] {
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.sl-card__head[b-gejs5vv031] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.3rem;
}

.sl-card__icon[b-gejs5vv031] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.sl-card__icon svg[b-gejs5vv031] {
    width: 14px;
    height: 14px;
}

.sl-card__title[b-gejs5vv031] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
}

.sl-count[b-gejs5vv031] {
    flex: 0 0 auto;
    padding: 0.1rem 0.55rem;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.sl-hint[b-gejs5vv031] {
    margin: 0 0 0.8rem;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #64748b;
}

.sl-row[b-gejs5vv031] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
}

.sl-row + .sl-row[b-gejs5vv031] {
    margin-top: 0.25rem;
}

/* De regel die er zojuist bij kwam. */
.sl-row--latest[b-gejs5vv031] {
    background: #f8fafc;
}

.sl-row__body[b-gejs5vv031] {
    flex: 1 1 auto;
    min-width: 0;
}

.sl-row__code[b-gejs5vv031] {
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
}

.sl-row__meta[b-gejs5vv031] {
    display: block;
    font-size: 0.74rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Support/Index.razor.rz.scp.css */
/* Page container: centered with symmetric left/right breathing room and a width cap on very wide
   screens (replaces the MudGrid/MudItem lg=11 xl=10 wrapper, whose negative margins pulled the
   content flush to the viewport edges once the inner grid gutter was removed). */
.support-page[b-pl3xucfz27] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Height-balanced card masonry: one column on mobile, two on desktop (>=960px, MudBlazor's md
   breakpoint). The browser balances the cards across the two columns by height, so the layout stays
   even no matter which optional cards (video / manual / downloads) are present for the channel.
   Each card wrapper must not split across a column. */
.support-cards[b-pl3xucfz27] {
    column-gap: 2rem;
}

.support-card[b-pl3xucfz27] {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 1.5rem 0;
}

@media (min-width: 960px) {
    .support-cards[b-pl3xucfz27] {
        column-count: 2;
    }
}

.support-video-wrapper[b-pl3xucfz27] {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.support-video-wrapper iframe[b-pl3xucfz27] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* /Shared/ClientShareBand.razor.rz.scp.css */
/* Band boven een onderdeelpagina: delen met de client. Zelfde kleuren als het vak in de
   profielkop (ProfileClientInfoHeader.razor.css): amber = nog niet in de app, blauw = bevestigen,
   neutraal met een groen oog = staat in de app. Rond thema (radius 16px, 1px rand).

   De knop is een gevulde knop en staat rechts in de band; op een smal scherm loopt hij onder de
   tekst door. Blauw hsl(209, 100%, 40%): witte tekst haalt daar 4,5:1. */
.csb[b-92lpum336q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.15rem;
    border-radius: 16px;
    border: 1px solid #f0d6a8;
    background: #fff7e8;
}

.csb--confirm[b-92lpum336q] {
    border-color: #b9d3f1;
    background: #f2f7fd;
}

.csb--visible[b-92lpum336q] {
    border-color: #dfe5ea;
    background: #fff;
}

.csb__icon[b-92lpum336q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: hsl(36, 99%, 90%);
    color: hsl(30, 80%, 28%);
}

.csb__icon--visible[b-92lpum336q] {
    background: #e3f4ea;
    color: #1b6b45;
}

.csb__icon svg[b-92lpum336q] {
    width: 17px;
    height: 17px;
}

.csb__body[b-92lpum336q] {
    flex: 999 1 22rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.csb__title[b-92lpum336q] {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}

.csb__text[b-92lpum336q] {
    font-size: 0.86rem;
    line-height: 1.45;
    color: #475569;
}

.csb__error[b-92lpum336q] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #b42318;
}

.csb__actions[b-92lpum336q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.csb__btn[b-92lpum336q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 1.2rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.csb__btn:disabled[b-92lpum336q] {
    cursor: default;
    opacity: 0.7;
}

.csb__btn:focus-visible[b-92lpum336q] {
    outline: 2px solid hsl(209, 100%, 45%);
    outline-offset: 2px;
}

.csb__btn svg[b-92lpum336q] {
    width: 16px;
    height: 16px;
}

.csb__btn--primary[b-92lpum336q] {
    background: hsl(209, 100%, 40%);
    color: #fff;
}

.csb__btn--primary:hover:not(:disabled)[b-92lpum336q] {
    background: hsl(209, 100%, 34%);
}

.csb__btn--ghost[b-92lpum336q] {
    border-color: #cbd5e1;
    background: #fff;
    color: #334155;
    font-weight: 500;
}

.csb__btn--ghost:hover:not(:disabled)[b-92lpum336q] {
    background: #f1f5f9;
}

.csb__btn--outline[b-92lpum336q] {
    border-color: hsl(209, 100%, 40%);
    background: #fff;
    color: hsl(209, 100%, 36%);
}

.csb__btn--outline:hover[b-92lpum336q] {
    background: #f3f8fe;
    color: hsl(209, 100%, 30%);
}

.csb__btn--link[b-92lpum336q] {
    padding: 0 0.5rem;
    color: #475569;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.csb__btn--link:hover:not(:disabled)[b-92lpum336q] {
    color: #0f172a;
}

@media (max-width: 640px) {
    .csb__btn[b-92lpum336q] {
        flex: 1 1 auto;
    }
}
/* /Shared/Controls/IdBadge.razor.rz.scp.css */
/* Letterlijk de waarden uit de twee oude .tube-badge-definities (BatchManagement/Detail.razor.css
   en LimsReport/Index.razor.css), zodat er visueel niets verandert op de plekken die de badge al
   hadden. De span staat in dit component, dus `.id-badge` compileert naar `.id-badge[b-hash]` en
   matcht; dat is precies waarom deze stijl hier hoort en niet in een pagina-CSS. */

.id-badge[b-nl1dckeytw] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* /Shared/CookieConsent.razor.rz.scp.css */
.gdpr-banner[b-yt3dbp9ghi] {
    font-size: medium;
    font-weight: 500;
    padding: 16px 0;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*border: 1px solid #e0e0e0;*/
}
/* /Shared/DisplayFileSpinner.razor.rz.scp.css */
.container[b-fm3v9sw1fh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
}

.container[b-fm3v9sw1fh]:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.loader[b-fm3v9sw1fh] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation-b-fm3v9sw1fh 1s linear infinite;
    top: 50%;
    left: 48%;
    position: absolute;
}

.loader[b-fm3v9sw1fh]::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-left: 4px solid #FF3D00;
    border-bottom: 4px solid transparent;
    animation: rotation-b-fm3v9sw1fh 0.5s linear infinite reverse;
}

@keyframes rotation-b-fm3v9sw1fh {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
} 

/*.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 45%;
    left: 45%;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}*/

/*.loader {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: #fff;
    top: 45%;
    left: 45%;
    position: absolute;
}

.loader:before,
.loader:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spin linear infinite;
}

.loader:after {
    color: #FF3D00;
    transform: rotateY(70deg);
    animation-delay: .4s;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}

@keyframes rotateccw {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes spin {
    0%, 100% {
        box-shadow: .2em 0px 0 0px currentcolor;
    }

    12% {
        box-shadow: .2em .2em 0 0 currentcolor;
    }

    25% {
        box-shadow: 0 .2em 0 0px currentcolor;
    }

    37% {
        box-shadow: -.2em .2em 0 0 currentcolor;
    }

    50% {
        box-shadow: -.2em 0 0 0 currentcolor;
    }

    62% {
        box-shadow: -.2em -.2em 0 0 currentcolor;
    }

    75% {
        box-shadow: 0px -.2em 0 0 currentcolor;
    }

    87% {
        box-shadow: .2em -.2em 0 0 currentcolor;
    }
}
*/
/* /Shared/DisplaySpinner.razor.rz.scp.css */
*[b-7vm1rupmyo] {
    margin: 0;
    padding: 0;
}

body[b-7vm1rupmyo] {
    background: #292b37;
    font-family: arial;
}

.dna[b-7vm1rupmyo] {
    width: 360px;
    margin: 100px auto;
    perspective: 270px;
    transform-style: preserve-3d;
    letter-spacing: -5px;
}

    .dna[b-7vm1rupmyo]:after {
        letter-spacing: 5px;
        display: block;
        padding-top: 50px;
        color: #aaa;
        text-align: center;
        content: "loading...";
    }

.ele[b-7vm1rupmyo] {
    width: 6px;
    height: 6px;
    display: inline-block;
    animation: rotate-b-7vm1rupmyo 3s linear infinite;
    transform: rotateX(-360deg) translateZ(0);
    transform-style: preserve-3d;
    margin-left: 0;
}

    .ele:nth-of-type(2n) .dot[b-7vm1rupmyo]:before {
        background: deepskyblue;
    }

.dot[b-7vm1rupmyo] {
    width: inherit;
    height: inherit;
    transform: translateZ(-20px);
    transform-style: preserve-3d;
}

    .dot[b-7vm1rupmyo]:before {
        content: "";
        width: inherit;
        height: inherit;
        display: block;
        background: #aaa;
        border-radius: 50%;
        animation: rotate-b-7vm1rupmyo 3s linear infinite reverse;
        transform: rotateX(-360deg) translateZ(0);
    }

.ele:nth-of-type(1)[b-7vm1rupmyo],
.ele:nth-of-type(1) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.1s;
}

    .ele:nth-of-type(1):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -1.6s;
    }

.ele:nth-of-type(2)[b-7vm1rupmyo],
.ele:nth-of-type(2) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.2s;
}

    .ele:nth-of-type(2):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -1.7s;
    }

.ele:nth-of-type(3)[b-7vm1rupmyo],
.ele:nth-of-type(3) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.3s;
}

    .ele:nth-of-type(3):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -1.8s;
    }

.ele:nth-of-type(4)[b-7vm1rupmyo],
.ele:nth-of-type(4) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.4s;
}

    .ele:nth-of-type(4):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -1.9s;
    }

.ele:nth-of-type(5)[b-7vm1rupmyo],
.ele:nth-of-type(5) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.5s;
}

    .ele:nth-of-type(5):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2s;
    }

.ele:nth-of-type(6)[b-7vm1rupmyo],
.ele:nth-of-type(6) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.6s;
}

    .ele:nth-of-type(6):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.1s;
    }

.ele:nth-of-type(7)[b-7vm1rupmyo],
.ele:nth-of-type(7) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.7s;
}

    .ele:nth-of-type(7):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.2s;
    }

.ele:nth-of-type(8)[b-7vm1rupmyo],
.ele:nth-of-type(8) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.8s;
}

    .ele:nth-of-type(8):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.3s;
    }

.ele:nth-of-type(9)[b-7vm1rupmyo],
.ele:nth-of-type(9) .dot[b-7vm1rupmyo]:before {
    animation-delay: -0.9s;
}

    .ele:nth-of-type(9):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.4s;
    }

.ele:nth-of-type(10)[b-7vm1rupmyo],
.ele:nth-of-type(10) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1s;
}

    .ele:nth-of-type(10):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.5s;
    }

.ele:nth-of-type(11)[b-7vm1rupmyo],
.ele:nth-of-type(11) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.1s;
}

    .ele:nth-of-type(11):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.6s;
    }

.ele:nth-of-type(12)[b-7vm1rupmyo],
.ele:nth-of-type(12) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.2s;
}

    .ele:nth-of-type(12):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.7s;
    }

.ele:nth-of-type(13)[b-7vm1rupmyo],
.ele:nth-of-type(13) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.3s;
}

    .ele:nth-of-type(13):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.8s;
    }

.ele:nth-of-type(14)[b-7vm1rupmyo],
.ele:nth-of-type(14) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.4s;
}

    .ele:nth-of-type(14):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -2.9s;
    }

.ele:nth-of-type(15)[b-7vm1rupmyo],
.ele:nth-of-type(15) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.5s;
}

    .ele:nth-of-type(15):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3s;
    }

.ele:nth-of-type(16)[b-7vm1rupmyo],
.ele:nth-of-type(16) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.6s;
}

    .ele:nth-of-type(16):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.1s;
    }

.ele:nth-of-type(17)[b-7vm1rupmyo],
.ele:nth-of-type(17) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.7s;
}

    .ele:nth-of-type(17):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.2s;
    }

.ele:nth-of-type(18)[b-7vm1rupmyo],
.ele:nth-of-type(18) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.8s;
}

    .ele:nth-of-type(18):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.3s;
    }

.ele:nth-of-type(19)[b-7vm1rupmyo],
.ele:nth-of-type(19) .dot[b-7vm1rupmyo]:before {
    animation-delay: -1.9s;
}

    .ele:nth-of-type(19):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.4s;
    }

.ele:nth-of-type(20)[b-7vm1rupmyo],
.ele:nth-of-type(20) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2s;
}

    .ele:nth-of-type(20):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.5s;
    }

.ele:nth-of-type(21)[b-7vm1rupmyo],
.ele:nth-of-type(21) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.1s;
}

    .ele:nth-of-type(21):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.6s;
    }

.ele:nth-of-type(22)[b-7vm1rupmyo],
.ele:nth-of-type(22) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.2s;
}

    .ele:nth-of-type(22):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.7s;
    }

.ele:nth-of-type(23)[b-7vm1rupmyo],
.ele:nth-of-type(23) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.3s;
}

    .ele:nth-of-type(23):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.8s;
    }

.ele:nth-of-type(24)[b-7vm1rupmyo],
.ele:nth-of-type(24) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.4s;
}

    .ele:nth-of-type(24):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -3.9s;
    }

.ele:nth-of-type(25)[b-7vm1rupmyo],
.ele:nth-of-type(25) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.5s;
}

    .ele:nth-of-type(25):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4s;
    }

.ele:nth-of-type(26)[b-7vm1rupmyo],
.ele:nth-of-type(26) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.6s;
}

    .ele:nth-of-type(26):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.1s;
    }

.ele:nth-of-type(27)[b-7vm1rupmyo],
.ele:nth-of-type(27) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.7s;
}

    .ele:nth-of-type(27):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.2s;
    }

.ele:nth-of-type(28)[b-7vm1rupmyo],
.ele:nth-of-type(28) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.8s;
}

    .ele:nth-of-type(28):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.3s;
    }

.ele:nth-of-type(29)[b-7vm1rupmyo],
.ele:nth-of-type(29) .dot[b-7vm1rupmyo]:before {
    animation-delay: -2.9s;
}

    .ele:nth-of-type(29):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.4s;
    }

.ele:nth-of-type(30)[b-7vm1rupmyo],
.ele:nth-of-type(30) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3s;
}

    .ele:nth-of-type(30):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.5s;
    }

.ele:nth-of-type(31)[b-7vm1rupmyo],
.ele:nth-of-type(31) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.1s;
}

    .ele:nth-of-type(31):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.6s;
    }

.ele:nth-of-type(32)[b-7vm1rupmyo],
.ele:nth-of-type(32) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.2s;
}

    .ele:nth-of-type(32):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.7s;
    }

.ele:nth-of-type(33)[b-7vm1rupmyo],
.ele:nth-of-type(33) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.3s;
}

    .ele:nth-of-type(33):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.8s;
    }

.ele:nth-of-type(34)[b-7vm1rupmyo],
.ele:nth-of-type(34) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.4s;
}

    .ele:nth-of-type(34):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -4.9s;
    }

.ele:nth-of-type(35)[b-7vm1rupmyo],
.ele:nth-of-type(35) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.5s;
}

    .ele:nth-of-type(35):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5s;
    }

.ele:nth-of-type(36)[b-7vm1rupmyo],
.ele:nth-of-type(36) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.6s;
}

    .ele:nth-of-type(36):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.1s;
    }

.ele:nth-of-type(37)[b-7vm1rupmyo],
.ele:nth-of-type(37) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.7s;
}

    .ele:nth-of-type(37):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.2s;
    }

.ele:nth-of-type(38)[b-7vm1rupmyo],
.ele:nth-of-type(38) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.8s;
}

    .ele:nth-of-type(38):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.3s;
    }

.ele:nth-of-type(39)[b-7vm1rupmyo],
.ele:nth-of-type(39) .dot[b-7vm1rupmyo]:before {
    animation-delay: -3.9s;
}

    .ele:nth-of-type(39):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.4s;
    }

.ele:nth-of-type(40)[b-7vm1rupmyo],
.ele:nth-of-type(40) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4s;
}

    .ele:nth-of-type(40):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.5s;
    }

.ele:nth-of-type(41)[b-7vm1rupmyo],
.ele:nth-of-type(41) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.1s;
}

    .ele:nth-of-type(41):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.6s;
    }

.ele:nth-of-type(42)[b-7vm1rupmyo],
.ele:nth-of-type(42) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.2s;
}

    .ele:nth-of-type(42):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.7s;
    }

.ele:nth-of-type(43)[b-7vm1rupmyo],
.ele:nth-of-type(43) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.3s;
}

    .ele:nth-of-type(43):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.8s;
    }

.ele:nth-of-type(44)[b-7vm1rupmyo],
.ele:nth-of-type(44) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.4s;
}

    .ele:nth-of-type(44):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -5.9s;
    }

.ele:nth-of-type(45)[b-7vm1rupmyo],
.ele:nth-of-type(45) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.5s;
}

    .ele:nth-of-type(45):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6s;
    }

.ele:nth-of-type(46)[b-7vm1rupmyo],
.ele:nth-of-type(46) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.6s;
}

    .ele:nth-of-type(46):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.1s;
    }

.ele:nth-of-type(47)[b-7vm1rupmyo],
.ele:nth-of-type(47) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.7s;
}

    .ele:nth-of-type(47):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.2s;
    }

.ele:nth-of-type(48)[b-7vm1rupmyo],
.ele:nth-of-type(48) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.8s;
}

    .ele:nth-of-type(48):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.3s;
    }

.ele:nth-of-type(49)[b-7vm1rupmyo],
.ele:nth-of-type(49) .dot[b-7vm1rupmyo]:before {
    animation-delay: -4.9s;
}

    .ele:nth-of-type(49):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.4s;
    }

.ele:nth-of-type(50)[b-7vm1rupmyo],
.ele:nth-of-type(50) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5s;
}

    .ele:nth-of-type(50):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.5s;
    }

.ele:nth-of-type(51)[b-7vm1rupmyo],
.ele:nth-of-type(51) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.1s;
}

    .ele:nth-of-type(51):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.6s;
    }

.ele:nth-of-type(52)[b-7vm1rupmyo],
.ele:nth-of-type(52) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.2s;
}

    .ele:nth-of-type(52):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.7s;
    }

.ele:nth-of-type(53)[b-7vm1rupmyo],
.ele:nth-of-type(53) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.3s;
}

    .ele:nth-of-type(53):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.8s;
    }

.ele:nth-of-type(54)[b-7vm1rupmyo],
.ele:nth-of-type(54) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.4s;
}

    .ele:nth-of-type(54):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -6.9s;
    }

.ele:nth-of-type(55)[b-7vm1rupmyo],
.ele:nth-of-type(55) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.5s;
}

    .ele:nth-of-type(55):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -7s;
    }

.ele:nth-of-type(56)[b-7vm1rupmyo],
.ele:nth-of-type(56) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.6s;
}

    .ele:nth-of-type(56):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -7.1s;
    }

.ele:nth-of-type(57)[b-7vm1rupmyo],
.ele:nth-of-type(57) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.7s;
}

    .ele:nth-of-type(57):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -7.2s;
    }

.ele:nth-of-type(58)[b-7vm1rupmyo],
.ele:nth-of-type(58) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.8s;
}

    .ele:nth-of-type(58):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -7.3s;
    }

.ele:nth-of-type(59)[b-7vm1rupmyo],
.ele:nth-of-type(59) .dot[b-7vm1rupmyo]:before {
    animation-delay: -5.9s;
}

    .ele:nth-of-type(59):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -7.4s;
    }

.ele:nth-of-type(60)[b-7vm1rupmyo],
.ele:nth-of-type(60) .dot[b-7vm1rupmyo]:before {
    animation-delay: -6s;
}

    .ele:nth-of-type(60):nth-of-type(odd)[b-7vm1rupmyo] {
        animation-delay: -7.5s;
    }

@keyframes rotate-b-7vm1rupmyo {
    to {
        transform: none;
    }
}
/* /Shared/DisplaySpinnerAddressLookup.razor.rz.scp.css */
.lds-dual-ring[b-483d27uuqb] {
    display: inline-block;
    width: 30px;
    height: 30px;
}

    .lds-dual-ring[b-483d27uuqb]:after {
        content: " ";
        display: block;
        width: 28px;
        height: 28px;
        margin: 4px;
        border-radius: 50%;
        border: 6px solid #000;
        border-color: #000 transparent #000 transparent;
        animation: lds-dual-ring-b-483d27uuqb 1.2s linear infinite;
    }

@keyframes lds-dual-ring-b-483d27uuqb {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* /Shared/DisplaySpinnerForm.razor.rz.scp.css */
.dots-1[b-g7zm46etf2] {
  width: 40px;
  /*aspect-ratio: 4;*/
  height: 10px;
  background: radial-gradient(circle closest-side,var(--color-brand, black) 90%, transparent) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: d1-b-g7zm46etf2 1s steps(4) infinite;
}
@keyframes d1-b-g7zm46etf2 {to{clip-path: inset(0 -34% 0 0)}}
/* /Shared/DisplaySpinnerHealthCheck.razor.rz.scp.css */
.loader[b-7gd4opeykl] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 32px 0 #fff, -32px 0 #fff;
    position: relative;
    animation: flash-b-7gd4opeykl 0.5s ease-out infinite alternate;
}

@keyframes flash-b-7gd4opeykl {
    0% {
        background-color: #FFF2;
        box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
    }

    50% {
        background-color: #FFF;
        box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
    }

    100% {
        background-color: #FFF2;
        box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
    }
}
/* /Shared/DisplaySpinnerLogin.razor.rz.scp.css */
*[b-npu2dpk102] {
    margin: 0;
    padding: 0;
}

body[b-npu2dpk102] {
    background: #292b37;
    font-family: arial;
}

.dna[b-npu2dpk102] {
    width: 360px;
    margin: 100px auto;
    perspective: 270px;
    transform-style: preserve-3d;
    letter-spacing: -5px;
}

    .dna[b-npu2dpk102]:after {
        letter-spacing: 5px;
        display: block;
        padding-top: 50px;
        color: #aaa;
        text-align: center;
        content: "Connecting...";
    }

.ele[b-npu2dpk102] {
    width: 6px;
    height: 6px;
    display: inline-block;
    animation: rotate-b-npu2dpk102 3s linear infinite;
    transform: rotateX(-360deg) translateZ(0);
    transform-style: preserve-3d;
    margin-left: 0;
}

    .ele:nth-of-type(2n) .dot[b-npu2dpk102]:before {
        background: deepskyblue;
    }

.dot[b-npu2dpk102] {
    width: inherit;
    height: inherit;
    transform: translateZ(-20px);
    transform-style: preserve-3d;
}

    .dot[b-npu2dpk102]:before {
        content: "";
        width: inherit;
        height: inherit;
        display: block;
        background: #aaa;
        border-radius: 50%;
        animation: rotate-b-npu2dpk102 3s linear infinite reverse;
        transform: rotateX(-360deg) translateZ(0);
    }

.ele:nth-of-type(1)[b-npu2dpk102],
.ele:nth-of-type(1) .dot[b-npu2dpk102]:before {
    animation-delay: -0.1s;
}

    .ele:nth-of-type(1):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -1.6s;
    }

.ele:nth-of-type(2)[b-npu2dpk102],
.ele:nth-of-type(2) .dot[b-npu2dpk102]:before {
    animation-delay: -0.2s;
}

    .ele:nth-of-type(2):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -1.7s;
    }

.ele:nth-of-type(3)[b-npu2dpk102],
.ele:nth-of-type(3) .dot[b-npu2dpk102]:before {
    animation-delay: -0.3s;
}

    .ele:nth-of-type(3):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -1.8s;
    }

.ele:nth-of-type(4)[b-npu2dpk102],
.ele:nth-of-type(4) .dot[b-npu2dpk102]:before {
    animation-delay: -0.4s;
}

    .ele:nth-of-type(4):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -1.9s;
    }

.ele:nth-of-type(5)[b-npu2dpk102],
.ele:nth-of-type(5) .dot[b-npu2dpk102]:before {
    animation-delay: -0.5s;
}

    .ele:nth-of-type(5):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2s;
    }

.ele:nth-of-type(6)[b-npu2dpk102],
.ele:nth-of-type(6) .dot[b-npu2dpk102]:before {
    animation-delay: -0.6s;
}

    .ele:nth-of-type(6):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.1s;
    }

.ele:nth-of-type(7)[b-npu2dpk102],
.ele:nth-of-type(7) .dot[b-npu2dpk102]:before {
    animation-delay: -0.7s;
}

    .ele:nth-of-type(7):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.2s;
    }

.ele:nth-of-type(8)[b-npu2dpk102],
.ele:nth-of-type(8) .dot[b-npu2dpk102]:before {
    animation-delay: -0.8s;
}

    .ele:nth-of-type(8):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.3s;
    }

.ele:nth-of-type(9)[b-npu2dpk102],
.ele:nth-of-type(9) .dot[b-npu2dpk102]:before {
    animation-delay: -0.9s;
}

    .ele:nth-of-type(9):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.4s;
    }

.ele:nth-of-type(10)[b-npu2dpk102],
.ele:nth-of-type(10) .dot[b-npu2dpk102]:before {
    animation-delay: -1s;
}

    .ele:nth-of-type(10):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.5s;
    }

.ele:nth-of-type(11)[b-npu2dpk102],
.ele:nth-of-type(11) .dot[b-npu2dpk102]:before {
    animation-delay: -1.1s;
}

    .ele:nth-of-type(11):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.6s;
    }

.ele:nth-of-type(12)[b-npu2dpk102],
.ele:nth-of-type(12) .dot[b-npu2dpk102]:before {
    animation-delay: -1.2s;
}

    .ele:nth-of-type(12):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.7s;
    }

.ele:nth-of-type(13)[b-npu2dpk102],
.ele:nth-of-type(13) .dot[b-npu2dpk102]:before {
    animation-delay: -1.3s;
}

    .ele:nth-of-type(13):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.8s;
    }

.ele:nth-of-type(14)[b-npu2dpk102],
.ele:nth-of-type(14) .dot[b-npu2dpk102]:before {
    animation-delay: -1.4s;
}

    .ele:nth-of-type(14):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -2.9s;
    }

.ele:nth-of-type(15)[b-npu2dpk102],
.ele:nth-of-type(15) .dot[b-npu2dpk102]:before {
    animation-delay: -1.5s;
}

    .ele:nth-of-type(15):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3s;
    }

.ele:nth-of-type(16)[b-npu2dpk102],
.ele:nth-of-type(16) .dot[b-npu2dpk102]:before {
    animation-delay: -1.6s;
}

    .ele:nth-of-type(16):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.1s;
    }

.ele:nth-of-type(17)[b-npu2dpk102],
.ele:nth-of-type(17) .dot[b-npu2dpk102]:before {
    animation-delay: -1.7s;
}

    .ele:nth-of-type(17):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.2s;
    }

.ele:nth-of-type(18)[b-npu2dpk102],
.ele:nth-of-type(18) .dot[b-npu2dpk102]:before {
    animation-delay: -1.8s;
}

    .ele:nth-of-type(18):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.3s;
    }

.ele:nth-of-type(19)[b-npu2dpk102],
.ele:nth-of-type(19) .dot[b-npu2dpk102]:before {
    animation-delay: -1.9s;
}

    .ele:nth-of-type(19):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.4s;
    }

.ele:nth-of-type(20)[b-npu2dpk102],
.ele:nth-of-type(20) .dot[b-npu2dpk102]:before {
    animation-delay: -2s;
}

    .ele:nth-of-type(20):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.5s;
    }

.ele:nth-of-type(21)[b-npu2dpk102],
.ele:nth-of-type(21) .dot[b-npu2dpk102]:before {
    animation-delay: -2.1s;
}

    .ele:nth-of-type(21):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.6s;
    }

.ele:nth-of-type(22)[b-npu2dpk102],
.ele:nth-of-type(22) .dot[b-npu2dpk102]:before {
    animation-delay: -2.2s;
}

    .ele:nth-of-type(22):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.7s;
    }

.ele:nth-of-type(23)[b-npu2dpk102],
.ele:nth-of-type(23) .dot[b-npu2dpk102]:before {
    animation-delay: -2.3s;
}

    .ele:nth-of-type(23):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.8s;
    }

.ele:nth-of-type(24)[b-npu2dpk102],
.ele:nth-of-type(24) .dot[b-npu2dpk102]:before {
    animation-delay: -2.4s;
}

    .ele:nth-of-type(24):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -3.9s;
    }

.ele:nth-of-type(25)[b-npu2dpk102],
.ele:nth-of-type(25) .dot[b-npu2dpk102]:before {
    animation-delay: -2.5s;
}

    .ele:nth-of-type(25):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4s;
    }

.ele:nth-of-type(26)[b-npu2dpk102],
.ele:nth-of-type(26) .dot[b-npu2dpk102]:before {
    animation-delay: -2.6s;
}

    .ele:nth-of-type(26):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.1s;
    }

.ele:nth-of-type(27)[b-npu2dpk102],
.ele:nth-of-type(27) .dot[b-npu2dpk102]:before {
    animation-delay: -2.7s;
}

    .ele:nth-of-type(27):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.2s;
    }

.ele:nth-of-type(28)[b-npu2dpk102],
.ele:nth-of-type(28) .dot[b-npu2dpk102]:before {
    animation-delay: -2.8s;
}

    .ele:nth-of-type(28):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.3s;
    }

.ele:nth-of-type(29)[b-npu2dpk102],
.ele:nth-of-type(29) .dot[b-npu2dpk102]:before {
    animation-delay: -2.9s;
}

    .ele:nth-of-type(29):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.4s;
    }

.ele:nth-of-type(30)[b-npu2dpk102],
.ele:nth-of-type(30) .dot[b-npu2dpk102]:before {
    animation-delay: -3s;
}

    .ele:nth-of-type(30):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.5s;
    }

.ele:nth-of-type(31)[b-npu2dpk102],
.ele:nth-of-type(31) .dot[b-npu2dpk102]:before {
    animation-delay: -3.1s;
}

    .ele:nth-of-type(31):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.6s;
    }

.ele:nth-of-type(32)[b-npu2dpk102],
.ele:nth-of-type(32) .dot[b-npu2dpk102]:before {
    animation-delay: -3.2s;
}

    .ele:nth-of-type(32):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.7s;
    }

.ele:nth-of-type(33)[b-npu2dpk102],
.ele:nth-of-type(33) .dot[b-npu2dpk102]:before {
    animation-delay: -3.3s;
}

    .ele:nth-of-type(33):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.8s;
    }

.ele:nth-of-type(34)[b-npu2dpk102],
.ele:nth-of-type(34) .dot[b-npu2dpk102]:before {
    animation-delay: -3.4s;
}

    .ele:nth-of-type(34):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -4.9s;
    }

.ele:nth-of-type(35)[b-npu2dpk102],
.ele:nth-of-type(35) .dot[b-npu2dpk102]:before {
    animation-delay: -3.5s;
}

    .ele:nth-of-type(35):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5s;
    }

.ele:nth-of-type(36)[b-npu2dpk102],
.ele:nth-of-type(36) .dot[b-npu2dpk102]:before {
    animation-delay: -3.6s;
}

    .ele:nth-of-type(36):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.1s;
    }

.ele:nth-of-type(37)[b-npu2dpk102],
.ele:nth-of-type(37) .dot[b-npu2dpk102]:before {
    animation-delay: -3.7s;
}

    .ele:nth-of-type(37):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.2s;
    }

.ele:nth-of-type(38)[b-npu2dpk102],
.ele:nth-of-type(38) .dot[b-npu2dpk102]:before {
    animation-delay: -3.8s;
}

    .ele:nth-of-type(38):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.3s;
    }

.ele:nth-of-type(39)[b-npu2dpk102],
.ele:nth-of-type(39) .dot[b-npu2dpk102]:before {
    animation-delay: -3.9s;
}

    .ele:nth-of-type(39):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.4s;
    }

.ele:nth-of-type(40)[b-npu2dpk102],
.ele:nth-of-type(40) .dot[b-npu2dpk102]:before {
    animation-delay: -4s;
}

    .ele:nth-of-type(40):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.5s;
    }

.ele:nth-of-type(41)[b-npu2dpk102],
.ele:nth-of-type(41) .dot[b-npu2dpk102]:before {
    animation-delay: -4.1s;
}

    .ele:nth-of-type(41):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.6s;
    }

.ele:nth-of-type(42)[b-npu2dpk102],
.ele:nth-of-type(42) .dot[b-npu2dpk102]:before {
    animation-delay: -4.2s;
}

    .ele:nth-of-type(42):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.7s;
    }

.ele:nth-of-type(43)[b-npu2dpk102],
.ele:nth-of-type(43) .dot[b-npu2dpk102]:before {
    animation-delay: -4.3s;
}

    .ele:nth-of-type(43):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.8s;
    }

.ele:nth-of-type(44)[b-npu2dpk102],
.ele:nth-of-type(44) .dot[b-npu2dpk102]:before {
    animation-delay: -4.4s;
}

    .ele:nth-of-type(44):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -5.9s;
    }

.ele:nth-of-type(45)[b-npu2dpk102],
.ele:nth-of-type(45) .dot[b-npu2dpk102]:before {
    animation-delay: -4.5s;
}

    .ele:nth-of-type(45):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6s;
    }

.ele:nth-of-type(46)[b-npu2dpk102],
.ele:nth-of-type(46) .dot[b-npu2dpk102]:before {
    animation-delay: -4.6s;
}

    .ele:nth-of-type(46):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.1s;
    }

.ele:nth-of-type(47)[b-npu2dpk102],
.ele:nth-of-type(47) .dot[b-npu2dpk102]:before {
    animation-delay: -4.7s;
}

    .ele:nth-of-type(47):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.2s;
    }

.ele:nth-of-type(48)[b-npu2dpk102],
.ele:nth-of-type(48) .dot[b-npu2dpk102]:before {
    animation-delay: -4.8s;
}

    .ele:nth-of-type(48):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.3s;
    }

.ele:nth-of-type(49)[b-npu2dpk102],
.ele:nth-of-type(49) .dot[b-npu2dpk102]:before {
    animation-delay: -4.9s;
}

    .ele:nth-of-type(49):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.4s;
    }

.ele:nth-of-type(50)[b-npu2dpk102],
.ele:nth-of-type(50) .dot[b-npu2dpk102]:before {
    animation-delay: -5s;
}

    .ele:nth-of-type(50):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.5s;
    }

.ele:nth-of-type(51)[b-npu2dpk102],
.ele:nth-of-type(51) .dot[b-npu2dpk102]:before {
    animation-delay: -5.1s;
}

    .ele:nth-of-type(51):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.6s;
    }

.ele:nth-of-type(52)[b-npu2dpk102],
.ele:nth-of-type(52) .dot[b-npu2dpk102]:before {
    animation-delay: -5.2s;
}

    .ele:nth-of-type(52):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.7s;
    }

.ele:nth-of-type(53)[b-npu2dpk102],
.ele:nth-of-type(53) .dot[b-npu2dpk102]:before {
    animation-delay: -5.3s;
}

    .ele:nth-of-type(53):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.8s;
    }

.ele:nth-of-type(54)[b-npu2dpk102],
.ele:nth-of-type(54) .dot[b-npu2dpk102]:before {
    animation-delay: -5.4s;
}

    .ele:nth-of-type(54):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -6.9s;
    }

.ele:nth-of-type(55)[b-npu2dpk102],
.ele:nth-of-type(55) .dot[b-npu2dpk102]:before {
    animation-delay: -5.5s;
}

    .ele:nth-of-type(55):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -7s;
    }

.ele:nth-of-type(56)[b-npu2dpk102],
.ele:nth-of-type(56) .dot[b-npu2dpk102]:before {
    animation-delay: -5.6s;
}

    .ele:nth-of-type(56):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -7.1s;
    }

.ele:nth-of-type(57)[b-npu2dpk102],
.ele:nth-of-type(57) .dot[b-npu2dpk102]:before {
    animation-delay: -5.7s;
}

    .ele:nth-of-type(57):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -7.2s;
    }

.ele:nth-of-type(58)[b-npu2dpk102],
.ele:nth-of-type(58) .dot[b-npu2dpk102]:before {
    animation-delay: -5.8s;
}

    .ele:nth-of-type(58):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -7.3s;
    }

.ele:nth-of-type(59)[b-npu2dpk102],
.ele:nth-of-type(59) .dot[b-npu2dpk102]:before {
    animation-delay: -5.9s;
}

    .ele:nth-of-type(59):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -7.4s;
    }

.ele:nth-of-type(60)[b-npu2dpk102],
.ele:nth-of-type(60) .dot[b-npu2dpk102]:before {
    animation-delay: -6s;
}

    .ele:nth-of-type(60):nth-of-type(odd)[b-npu2dpk102] {
        animation-delay: -7.5s;
    }

@keyframes rotate-b-npu2dpk102 {
    to {
        transform: none;
    }
}
/* /Shared/DisplaySpinnerLogo.razor.rz.scp.css */
.dots-1[b-aq1lqum2i4] {
  width: 40px;
  /*aspect-ratio: 4;*/
  height: 10px;
  background: radial-gradient(circle closest-side,var(--color-brand, salmon) 90%, transparent) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: d1-b-aq1lqum2i4 1s steps(4) infinite;
}
@keyframes d1-b-aq1lqum2i4 {to{clip-path: inset(0 -34% 0 0)}}
/* /Shared/Helix/HelixIntro.razor.rz.scp.css */
/* Welkomstvenster van Helix. Zelfde palet als HelixPanel (--hx = het Helix-blauw, slate voor tekst). */

.hxi[b-h5ub4y62au] {
    --hx: hsl(230, 40%, 32%);
    --hx-10: hsl(230, 40%, 96%);
    --hx-20: hsl(230, 40%, 90%);
    --ok: #15803d;
    --ok-10: #e6f4ee;
    --ok-20: #cfe9db;
    --sl-900: #0f172a;
    --sl-700: #334155;
    --sl-500: #64748b;
    --sl-100: #f1f5f9;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(17, 24, 39, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sl-900);
}

.hxi__dialog[b-h5ub4y62au] {
    width: 640px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow: auto;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .25);
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    outline: none;
}

.hxi__head[b-h5ub4y62au] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hxi__id[b-h5ub4y62au] { display: flex; align-items: center; gap: 14px; }

.hxi__glyph[b-h5ub4y62au] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--hx);
    color: #fff;
    flex-shrink: 0;
}
.hxi__glyph svg[b-h5ub4y62au] { width: 24px; height: 24px; }

.hxi__overline[b-h5ub4y62au] { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hx); }
.hxi__title[b-h5ub4y62au] { margin: 2px 0 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--sl-900); }

.hxi__close[b-h5ub4y62au] {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--sl-100);
    color: var(--sl-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.hxi__close:hover[b-h5ub4y62au] { color: var(--sl-900); }
.hxi__close svg[b-h5ub4y62au] { width: 18px; height: 18px; }

.hxi__lead[b-h5ub4y62au] { margin: 0; color: var(--sl-700); font-size: 15px; }

.hxi__cards[b-h5ub4y62au] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.hxi__card[b-h5ub4y62au] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 14px;
    background: #f8f9fc;
    border: 1px solid #eef0f4;
}

.hxi__icon[b-h5ub4y62au] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fff;
    color: var(--hx);
    border: 1px solid var(--hx-20);
    flex-shrink: 0;
}
.hxi__icon svg[b-h5ub4y62au] { width: 16px; height: 16px; }
.hxi__icon--ok[b-h5ub4y62au] { color: var(--ok); border-color: #fff; }

.hxi__card-title[b-h5ub4y62au] { font-weight: 600; color: var(--sl-900); }
.hxi__card-title--ok[b-h5ub4y62au] { color: #14532d; }
.hxi__card-text[b-h5ub4y62au] { margin: 0; color: var(--sl-700); font-size: 13.5px; }

.hxi__privacy[b-h5ub4y62au] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 14px;
    background: var(--ok-10);
    border: 1px solid var(--ok-20);
}
.hxi__privacy-body[b-h5ub4y62au] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.hxi__list[b-h5ub4y62au] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    color: #1f2937;
    font-size: 13.5px;
}
.hxi__list li[b-h5ub4y62au] { display: flex; gap: 8px; align-items: flex-start; }
.hxi__check[b-h5ub4y62au] { color: var(--ok); flex-shrink: 0; margin-top: 3px; display: inline-flex; }
.hxi__check[b-h5ub4y62au]  svg { width: 13px; height: 13px; }

.hxi__foot[b-h5ub4y62au] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.hxi__foot-text[b-h5ub4y62au] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--sl-500); }
.hxi__disclaimer[b-h5ub4y62au] { font-size: 11.5px; }

.hxi__start[b-h5ub4y62au] {
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--hx);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.hxi__start:hover[b-h5ub4y62au] { background: hsl(230, 40%, 26%); }
.hxi__start:disabled[b-h5ub4y62au] { opacity: .55; cursor: default; }
.hxi__start svg[b-h5ub4y62au] { width: 18px; height: 18px; }

@media (max-width: 640px) {
    .hxi__dialog[b-h5ub4y62au] { padding: 20px 18px 18px; gap: 16px; }
    .hxi__cards[b-h5ub4y62au], .hxi__list[b-h5ub4y62au] { grid-template-columns: minmax(0, 1fr); }
    .hxi__foot[b-h5ub4y62au] { flex-direction: column; align-items: stretch; }
}
/* /Shared/Helix/HelixLauncher.razor.rz.scp.css */
/* Helix-knop in de profiel-tabbalk. Eigen indigo-identiteit, bewust los van de kanaalkleur en van de
   statuskleuren van de resultaten. Zelfde ronde 2026-stijl als het paneel. */

.hx-launch[b-e8rqi1rabk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    border: 1px solid hsl(230, 40%, 90%);
    background: #fff;
    color: hsl(230, 40%, 32%);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.hx-launch:hover[b-e8rqi1rabk],
.hx-launch.is-open[b-e8rqi1rabk] {
    background: hsl(230, 40%, 96%);
}

.hx-glyph[b-e8rqi1rabk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: hsl(230, 40%, 32%);
    color: #fff;
    flex: 0 0 auto;
}

.hx-glyph svg[b-e8rqi1rabk] {
    width: 14px;
    height: 14px;
}

/* Eerste gebruik (intro_seen = false): puls om het glyph, pil Nieuw, ballon eronder. */
.hx-launch-wrap[b-e8rqi1rabk] { position: relative; display: inline-flex; }

.hx-glyph-wrap[b-e8rqi1rabk] { position: relative; display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
.hx-glyph-wrap .hx-glyph[b-e8rqi1rabk] { position: relative; }

@keyframes hx-ping-b-e8rqi1rabk {
    0% { transform: scale(1); opacity: .55; }
    100% { transform: scale(2.1); opacity: 0; }
}

.hx-ping[b-e8rqi1rabk] {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: hsl(230, 40%, 32%);
    animation: hx-ping-b-e8rqi1rabk 3s cubic-bezier(0, 0, .2, 1) infinite;
}

.hx-launch:hover .hx-ping[b-e8rqi1rabk] { animation-play-state: paused; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .hx-ping[b-e8rqi1rabk] { animation: none; opacity: 0; }
}

.hx-launch__new[b-e8rqi1rabk] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* position: fixed en niet absolute: de tabbalk (ul.client-nav--inline) heeft overflow: auto en knipt een
   absoluut geplaatste ballon af. helix.placeCallout zet top en right en laat hem dan zien. */
.hx-callout[b-e8rqi1rabk] {
    position: fixed;
    top: 0;
    right: 0;
    visibility: hidden;
    z-index: 60;
    width: 340px;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 14px;
    background: hsl(230, 40%, 32%);
    color: #fff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .25);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    white-space: normal;
    cursor: default;
}

.hx-callout.is-placed[b-e8rqi1rabk] { visibility: visible; }

.hx-callout__arrow[b-e8rqi1rabk] {
    position: absolute;
    top: -7px;
    right: 44px;
    width: 14px;
    height: 14px;
    background: hsl(230, 40%, 32%);
    transform: rotate(45deg);
    border-radius: 2px;
}

.hx-callout__body[b-e8rqi1rabk] { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hx-callout__title[b-e8rqi1rabk] { font-size: 14px; font-weight: 600; }
.hx-callout__text[b-e8rqi1rabk] { font-size: 13px; font-weight: 400; line-height: 1.4; color: hsl(230, 45%, 90%); }

.hx-callout__close[b-e8rqi1rabk] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.hx-callout__close:hover[b-e8rqi1rabk] { background: rgba(255, 255, 255, .22); }
.hx-callout__close svg[b-e8rqi1rabk] { width: 14px; height: 14px; }

@media (max-width: 520px) {
    .hx-callout[b-e8rqi1rabk] { width: min(340px, calc(100vw - 32px)); }
}

.hx-launch__n[b-e8rqi1rabk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: hsl(230, 40%, 32%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
/* /Shared/Helix/HelixPanel.razor.rz.scp.css */
/* Helix-paneel (PORTALAICHAT). Ronde 2026-stijl zoals /batches en /messages, met een eigen indigo
   identiteit die bewust los staat van de kanaalkleur en van de statuskleuren groen/oranje/rood/blauw
   van de resultaten. Scoped CSS: gerenderde Markdown (MarkupString) krijgt het scope-attribuut niet,
   daarom ::deep op de tekstinhoud. */

.hx[b-awisfsr8ki] {
    --hx: hsl(230, 40%, 32%);
    --hx-60: hsl(230, 40%, 44%);
    --hx-20: hsl(230, 40%, 90%);
    --hx-10: hsl(230, 40%, 96%);
    --line: #e6e8ec;
    --sl-900: #0f172a;
    --sl-700: #334155;
    --sl-600: #475569;
    --sl-500: #64748b;
    --sl-400: #94a3b8;
    --sl-300: #cbd5e1;
    --sl-200: #e2e8f0;
    --sl-100: #f1f5f9;
    --sl-50: #f8fafc;

    position: fixed;
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: 400px;
    background: #fff;
    color: var(--sl-900);
    font-size: 14px;
    box-sizing: border-box;
}

.hx--docked[b-awisfsr8ki] {
    top: 3rem;
    right: 0;
    bottom: 0;
    border-left: 1px solid var(--line);
}

.hx--float[b-awisfsr8ki] {
    top: 7rem;
    right: 1rem;
    bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 24px 60px -16px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .06);
    overflow: hidden;
}

@media (max-width: 1100px) {
    .hx--docked[b-awisfsr8ki] {
        top: 7rem;
        right: 1rem;
        bottom: 1rem;
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: 0 24px 60px -16px rgba(16, 24, 40, .28);
        overflow: hidden;
    }
}

@media (max-width: 520px) {
    .hx[b-awisfsr8ki], .hx--docked[b-awisfsr8ki], .hx--float[b-awisfsr8ki] {
        width: auto;
        left: .5rem;
        right: .5rem;
    }
}

/* Sleepgreep: 8 px op de linkerrand, zichtbaar bij hover of tijdens slepen. */
.hx__resizer[b-awisfsr8ki] {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 6;
    background: transparent;
    transition: background .12s ease;
}

.hx__resizer:hover[b-awisfsr8ki],
.hx__resizer.is-dragging[b-awisfsr8ki] {
    background: var(--hx-20);
}

.hx--float .hx__resizer[b-awisfsr8ki] { left: 0; border-radius: 20px 0 0 20px; }

.hx button[b-awisfsr8ki] { font-family: inherit; cursor: pointer; }
.hx button:disabled[b-awisfsr8ki] { cursor: default; opacity: .55; }

/* ---- kop ---- */
.hx__head[b-awisfsr8ki] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 12px 20px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.hx__id[b-awisfsr8ki] { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }

.hx-glyph[b-awisfsr8ki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--hx);
    color: #fff;
    flex: 0 0 auto;
}

.hx-glyph[b-awisfsr8ki]  svg { width: 20px; height: 20px; }
.hx-glyph--xs[b-awisfsr8ki] { width: 20px; height: 20px; border-radius: 6px; }
.hx-glyph--logo[b-awisfsr8ki] { user-select: none; }
.hx-glyph--xs[b-awisfsr8ki]  svg { width: 12px; height: 12px; }

.hx__name[b-awisfsr8ki] { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.2; }

.hx-beta[b-awisfsr8ki] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
}

.hx__ctx[b-awisfsr8ki] { font-size: 12px; color: var(--sl-500); margin-top: 3px; }
.hx__ctx[b-awisfsr8ki]  b { color: var(--sl-700); font-weight: 600; }

.hx__acts[b-awisfsr8ki] { display: flex; gap: 2px; }

.ibtn[b-awisfsr8ki] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--sl-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ibtn svg[b-awisfsr8ki] { width: 18px; height: 18px; }
.ibtn--sm[b-awisfsr8ki] { width: 28px; height: 28px; }
.ibtn--sm svg[b-awisfsr8ki] { width: 15px; height: 15px; }
.ibtn:hover[b-awisfsr8ki] { background: var(--sl-100); color: var(--sl-900); }
.ibtn.is-on[b-awisfsr8ki] { background: var(--hx-10); color: var(--hx); }

/* De knop "Nieuw gesprek" draagt een woord, de andere kopknoppen alleen een icoon. */
.ibtn--label[b-awisfsr8ki] {
    width: auto;
    padding: 0 10px 0 8px;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hx);
    background: var(--hx-10);
    white-space: nowrap;
}
.ibtn--label svg[b-awisfsr8ki] { width: 15px; height: 15px; }
.ibtn--label:hover[b-awisfsr8ki] { background: var(--hx); color: #fff; }
.ibtn--label:disabled[b-awisfsr8ki] { opacity: .45; background: var(--sl-100); color: var(--sl-500); }

/* Hervat-regel bovenaan een gesprek dat het paneel zelf heeft teruggehaald. */
.hx-resume[b-awisfsr8ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--sl-50);
    border: 1px solid var(--sl-200);
    color: var(--sl-600);
    font-size: 12px;
    line-height: 1.35;
}
.hx-resume svg[b-awisfsr8ki] { width: 15px; height: 15px; flex: 0 0 auto; color: var(--sl-400); }
.hx-resume__text[b-awisfsr8ki] { flex: 1; min-width: 0; }
.hx-resume__new[b-awisfsr8ki] {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hx);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.hx-resume__new:hover[b-awisfsr8ki] { color: var(--sl-900); }

/* ---- tabs ---- */
.hx__tabs[b-awisfsr8ki] {
    display: flex;
    padding: 3px;
    margin: 12px 20px 0;
    background: var(--sl-100);
    border-radius: 999px;
    flex: 0 0 auto;
}

.hx__tab[b-awisfsr8ki] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-500);
    font-size: 13px;
    font-weight: 600;
}

.hx__tab.is-active[b-awisfsr8ki] { background: #fff; color: var(--sl-900); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }

.hx-n[b-awisfsr8ki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--hx-10);
    color: var(--hx);
    font-size: 11px;
    font-weight: 700;
}

/* ---- gesprek ---- */
.hx__thread[b-awisfsr8ki] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 20px;
    overflow-y: auto;
}

.msg[b-awisfsr8ki] { display: flex; flex-direction: column; gap: 6px; }
.msg--user[b-awisfsr8ki] { align-self: flex-end; max-width: 86%; }

.bubble[b-awisfsr8ki] {
    background: #eef2f7;
    color: var(--sl-900);
    border-radius: 16px 16px 4px 16px;
    padding: 10px 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.msg__meta[b-awisfsr8ki] { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--sl-600); }
.msg__meta .pinned[b-awisfsr8ki] { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--hx); font-size: 11.5px; }
.msg__meta .pinned[b-awisfsr8ki]  svg { width: 12px; height: 12px; }

.msg__body[b-awisfsr8ki] { line-height: 1.55; color: #1e293b; word-break: break-word; }

.hx-body[b-awisfsr8ki]  p { margin: 0 0 8px; }
.hx-body[b-awisfsr8ki]  p:last-child { margin-bottom: 0; }
.hx-body[b-awisfsr8ki]  ul, .hx-body[b-awisfsr8ki]  ol { margin: 0 0 8px; padding-left: 18px; }
.hx-body[b-awisfsr8ki]  li { margin: 4px 0; }
.hx-body[b-awisfsr8ki]  strong { font-weight: 600; }
.hx-body[b-awisfsr8ki]  code { font-size: 12.5px; background: var(--sl-100); padding: 0 4px; border-radius: 4px; }
.hx-body[b-awisfsr8ki]  a { color: var(--hx-60); }
.hx-body[b-awisfsr8ki]  hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

.hx-body[b-awisfsr8ki]  .hx-gene {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 7px 0 6px;
    border-radius: 6px;
    background: hsl(180, 10%, 97%);
    border: 1px solid hsl(180, 10%, 91%);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sl-900);
    line-height: 19px;
    vertical-align: 1px;
}

.hx-body[b-awisfsr8ki]  .hx-gene::before { content: ""; width: 6px; height: 9px; border-radius: 3px; background: hsl(180, 10%, 88%); }
.hx-body[b-awisfsr8ki]  .hx-gene--g::before { background: hsl(155, 100%, 39%); }
.hx-body[b-awisfsr8ki]  .hx-gene--o::before { background: hsl(34, 98%, 62%); }
.hx-body[b-awisfsr8ki]  .hx-gene--r::before { background: hsl(351, 73%, 58%); }
.hx-body[b-awisfsr8ki]  .hx-gene--b::before { background: hsl(210, 90%, 60%); }

/* Genotype G|A met de allelkleuren van de resultaattabellen (dezelfde variabelen als .allel--x). */
.hx-body[b-awisfsr8ki]  .hx-gt { white-space: nowrap; font-weight: 600; letter-spacing: .02em; }
.hx-body[b-awisfsr8ki]  .hx-gt__sep { color: var(--sl-400); font-weight: 400; margin: 0 1px; }
/* Dezelfde kleuren als de genotype-tabel van het dashboard (.allel--a = @c-green enzovoort, tokens --c-es-*). */
.hx-body[b-awisfsr8ki]  .hx-al--a { color: var(--c-es-green, hsl(155, 100%, 39%)); }
.hx-body[b-awisfsr8ki]  .hx-al--c { color: var(--c-es-blue, hsl(200, 100%, 70%)); }
.hx-body[b-awisfsr8ki]  .hx-al--g { color: var(--c-es-orange, hsl(34, 98%, 62%)); }
.hx-body[b-awisfsr8ki]  .hx-al--t { color: var(--c-es-red, hsl(351, 73%, 58%)); }
.hx-body[b-awisfsr8ki]  .hx-al--d, .hx-body[b-awisfsr8ki]  .hx-al--i { color: var(--sl-500); }
/* Niet bepaald (-), het sterretje en een onbekende letter zijn geen basen en blijven grijs. */
.hx-body[b-awisfsr8ki]  .hx-al--none, .hx-body[b-awisfsr8ki]  .hx-al--star, .hx-body[b-awisfsr8ki]  .hx-al--x { color: var(--sl-500); }
/* Een sequentie (insertie) blijft een geheel: geen afbreking midden in het allel. */
.hx-body[b-awisfsr8ki]  .hx-al-seq { white-space: nowrap; }

/* SNP-chip: een rs-nummer waarop je kunt klikken om de SNP te pinnen (zie helix.attachSnpChips). */
.hx-body[b-awisfsr8ki]  .hx-rs {
    display: inline;
    padding: 0 2px 0 0;
    border: 0;
    border-bottom: 1px dashed var(--sl-300);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.hx-body[b-awisfsr8ki]  .hx-rs::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 3px;
    vertical-align: -1px;
    background: currentColor;
    opacity: .45;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hx-body[b-awisfsr8ki]  .hx-rs:hover { color: var(--hx); border-bottom-color: var(--hx); }
.hx-body[b-awisfsr8ki]  .hx-rs:hover::after { opacity: 1; }
.hx-body[b-awisfsr8ki]  .hx-rs.is-on { color: var(--hx); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--hx-20); }
.hx-body[b-awisfsr8ki]  .hx-rs.is-on::after { opacity: 1; }

/* Tabellen: het model zet meerdere SNP's in een Markdown-tabel (Markdig UsePipeTables). Compact, want
   het paneel is smal; een te brede tabel scrolt binnen zijn eigen kader en niet de hele pagina. */
.hx-body[b-awisfsr8ki]  table { max-width: 100%; }
.hx-body[b-awisfsr8ki]  table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 6px 0 10px;
    font-size: 12.5px;
}
.hx-body[b-awisfsr8ki]  table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sl-500);
    padding: 4px 10px 6px 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.hx-body[b-awisfsr8ki]  table td {
    padding: 5px 10px 5px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.hx-body[b-awisfsr8ki]  table tbody tr:last-child td { border-bottom: 0; }
.hx-body[b-awisfsr8ki]  table td:last-child, .hx-body[b-awisfsr8ki]  table th:last-child { padding-right: 0; }

/* Effectpijlen zoals de actieve pijlen in de resultaattabel: donker en dicht op elkaar. */
.hx-body[b-awisfsr8ki]  .hx-arr { color: var(--sl-900); font-weight: 700; letter-spacing: -.08em; white-space: nowrap; }

.src[b-awisfsr8ki] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.src__l[b-awisfsr8ki] { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-400); margin-right: 2px; }

.chip[b-awisfsr8ki] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--sl-50);
    border: 1px solid var(--line);
    color: var(--sl-600);
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
}

.chip--web[b-awisfsr8ki] { color: var(--hx-60); border-color: var(--hx-20); }
.chip--web:hover[b-awisfsr8ki] { background: var(--hx-10); }

.acts[b-awisfsr8ki] { display: flex; align-items: center; gap: 4px; margin-top: 2px; }

.act[b-awisfsr8ki] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-500);
    font-size: 12.5px;
    font-weight: 600;
}

.act[b-awisfsr8ki]  svg, .act svg[b-awisfsr8ki] { width: 14px; height: 14px; }
.act:hover[b-awisfsr8ki] { background: var(--sl-100); color: var(--sl-900); }
.act.is-on[b-awisfsr8ki] { background: var(--hx-10); color: var(--hx); }

.starters[b-awisfsr8ki] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.starter[b-awisfsr8ki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    padding: 9px 10px 9px 12px;
    border: 1px solid var(--sl-200);
    border-radius: 12px;
    background: #fff;
    color: var(--sl-700);
    font-size: 13px;
    font-weight: 500;
}

.starter svg[b-awisfsr8ki] { width: 14px; height: 14px; color: var(--sl-400); flex: 0 0 auto; }
.starter:hover[b-awisfsr8ki] { border-color: var(--hx-20); background: var(--hx-10); color: var(--hx); }

.hx-status[b-awisfsr8ki] { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sl-500); }
/* Live-tekst wordt door JavaScript gevuld (helix.livePush); de opmaak komt dus via ::deep. */
.hx-live[b-awisfsr8ki] { min-height: 20px; }
.hx-live[b-awisfsr8ki]  .hx-caret { display: inline-block; width: 2px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--hx); animation: hx-blink-b-awisfsr8ki 1s steps(2) infinite; }
@keyframes hx-blink-b-awisfsr8ki { to { opacity: 0; } }

/* ---- kostenoverzicht (dubbelklik op de sluitknop) ---- */
.hx-cost[b-awisfsr8ki] { width: 280px; padding: 14px 16px 10px; cursor: pointer; }
.hx-cost__title[b-awisfsr8ki] { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-400); }
.hx-cost__total[b-awisfsr8ki] { margin: 6px 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--hx); font-variant-numeric: tabular-nums; }
.hx-cost__table[b-awisfsr8ki] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hx-cost__table td[b-awisfsr8ki] { padding: 3px 0; color: var(--sl-600); border-top: 1px solid var(--sl-100); }
.hx-cost__table td:last-child[b-awisfsr8ki] { text-align: right; font-variant-numeric: tabular-nums; color: var(--sl-900); font-weight: 600; }
.hx-dots[b-awisfsr8ki] { display: inline-flex; gap: 3px; }
.hx-dots i[b-awisfsr8ki] { width: 5px; height: 5px; border-radius: 50%; background: var(--hx-60); animation: hx-bounce-b-awisfsr8ki 1.2s infinite ease-in-out; }
.hx-dots i:nth-child(2)[b-awisfsr8ki] { animation-delay: .15s; }
.hx-dots i:nth-child(3)[b-awisfsr8ki] { animation-delay: .3s; }
@keyframes hx-bounce-b-awisfsr8ki { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.hx-error[b-awisfsr8ki] { color: #b91c1c; font-size: 13px; line-height: 1.5; }
.hx-error--bar[b-awisfsr8ki] { padding: 8px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; }
.msg--error .msg__meta[b-awisfsr8ki] { color: #b91c1c; }

.hx-muted[b-awisfsr8ki] { font-size: 13px; color: var(--sl-400); }
.hx-timing[b-awisfsr8ki] { margin-top: 6px; font-size: 11.5px; }
.hx-readonly[b-awisfsr8ki] { padding: 10px 12px; border-radius: 12px; background: var(--sl-50); border: 1px solid var(--line); text-align: center; }

/* ---- invoer ---- */
.hx__composer[b-awisfsr8ki] { padding: 12px 20px 14px; border-top: 1px solid var(--line); flex: 0 0 auto; }

.input[b-awisfsr8ki] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--sl-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.input:focus-within[b-awisfsr8ki] { border-color: var(--hx-20); box-shadow: 0 0 0 3px var(--hx-10); }

.input__text[b-awisfsr8ki] {
    flex: 1;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--sl-900);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 0;
    min-height: 32px;
    max-height: 140px;
}

.input__text[b-awisfsr8ki]::placeholder { color: var(--sl-400); }

.send[b-awisfsr8ki] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--hx);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.send svg[b-awisfsr8ki] { width: 16px; height: 16px; }
.send:disabled[b-awisfsr8ki] { background: var(--sl-200); color: var(--sl-500); opacity: 1; }

.disclaimer[b-awisfsr8ki] { margin: 8px 4px 0; text-align: center; font-size: 11px; line-height: 1.4; color: var(--sl-400); }

/* ---- pins ---- */
.hx__pins[b-awisfsr8ki] { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; overflow-y: auto; }
.hx-pins__intro[b-awisfsr8ki] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sl-500); padding: 0 2px; }
.hx-pins__intro svg[b-awisfsr8ki] { width: 14px; height: 14px; color: var(--sl-400); flex: 0 0 auto; }

.hx-pin[b-awisfsr8ki] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 14px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.hx-pin__q[b-awisfsr8ki] { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hx-pin__q[b-awisfsr8ki]  svg { width: 14px; height: 14px; color: var(--hx); margin-top: 1px; flex: 0 0 auto; }
.hx-pin__a[b-awisfsr8ki] { font-size: 13px; line-height: 1.5; color: var(--sl-600); max-height: 7.5em; overflow: hidden; position: relative; }
.hx-pin__a[b-awisfsr8ki]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5em; background: linear-gradient(rgba(255,255,255,0), #fff); }
.hx-pin__foot[b-awisfsr8ki] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--sl-400); flex-wrap: wrap; }
.hx-pin__acts[b-awisfsr8ki] { display: flex; gap: 0; margin-right: -8px; }
.hx-pin__acts .act[b-awisfsr8ki] { height: 26px; padding: 0 8px; font-size: 12px; }

.hx-pins__hint[b-awisfsr8ki] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sl-50);
    border: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.45;
    color: var(--sl-500);
}

.hx-pins__hint[b-awisfsr8ki]  svg { width: 16px; height: 16px; color: var(--hx); flex: 0 0 auto; }

/* ---- eerdere gesprekken ---- */
.hx-pop[b-awisfsr8ki] {
    position: absolute;
    top: 58px;
    right: 12px;
    width: 300px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .25), 0 2px 6px rgba(16, 24, 40, .06);
    padding: 8px;
    z-index: 5;
}

.hx-pop__new[b-awisfsr8ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: var(--hx-10);
    color: var(--hx);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.hx-pop__new svg[b-awisfsr8ki] { width: 16px; height: 16px; }
.hx-pop__l[b-awisfsr8ki] { padding: 12px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-400); }
.hx-pop__row[b-awisfsr8ki] { display: flex; align-items: center; gap: 2px; width: 100%; }
.hx-pop__it[b-awisfsr8ki] { flex: 1 1 0; min-width: 0; display: block; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--sl-900); font-size: 13px; font-weight: 600; text-align: left; overflow: hidden; }
.hx-pop__title[b-awisfsr8ki] { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.hx-pop__meta[b-awisfsr8ki] { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--sl-400); text-align: left; }
.hx-pop__row .ibtn--sm[b-awisfsr8ki] { flex: 0 0 auto; }
.hx-pop__it.is-active[b-awisfsr8ki] { background: var(--sl-100); }
.hx-pop__it:hover[b-awisfsr8ki] { background: var(--sl-50); }
.hx-pop__empty[b-awisfsr8ki] { padding: 8px 10px 4px; font-size: 12.5px; color: var(--sl-400); }
.hx-pop__note[b-awisfsr8ki] { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px; font-size: 11px; color: var(--sl-400); }
.hx-pop__note svg[b-awisfsr8ki] { width: 12px; height: 12px; }
/* /Shared/InstructionLetterAction.razor.rz.scp.css */
/* De knop naar het briefpaneel. Rond thema, zelfde maten als de knoppen in het paneel zelf.

   Geen ::deep nodig: beide knoppen staan als platte HTML in de eigen .razor, dus ze dragen het
   scope-attribuut. Het paneel eronder is een component en heeft zijn eigen scoped CSS. */

/* hsl(209,100%,45%) en niet de 50% uit de app: wit op 50% haalt 3,8:1 en dat is te weinig voor
   tekst van deze maat. 45% is de tint die de app al als hover gebruikt. */
.ila-btn[b-9hw523j3zg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1.25rem;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: #fff;
    background: hsl(209, 100%, 45%);
    border: 1px solid hsl(209, 100%, 45%);
    border-radius: 999px;
    cursor: pointer;
}

.ila-btn:hover[b-9hw523j3zg] {
    background: hsl(209, 100%, 38%);
    border-color: hsl(209, 100%, 38%);
}

.ila-btn:focus-visible[b-9hw523j3zg] {
    outline: 2px solid hsl(209, 100%, 30%);
    outline-offset: 2px;
}

.ila-btn svg[b-9hw523j3zg] {
    width: 15px;
    height: 15px;
}

/* Icoonvariant voor een lijstregel. 32px is kleiner dan de 44px-trefmaat, maar deze knop staat
   altijd naast een volwaardige ingang naar dezelfde brief (de regel zelf of de knop erboven), dus
   hij is nooit de enige manier om er te komen. */
.ila-icon[b-9hw523j3zg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    color: #475569;
    cursor: pointer;
}

.ila-icon:hover[b-9hw523j3zg] {
    color: #0f172a;
    border-color: #b6c2d1;
}

.ila-icon:focus-visible[b-9hw523j3zg] {
    outline: 2px solid hsl(209, 100%, 45%);
    outline-offset: 1px;
}

.ila-icon svg[b-9hw523j3zg] {
    width: 15px;
    height: 15px;
}
/* /Shared/InstructionLetterPanel.razor.rz.scp.css */
/* Paneel instructiebrief. Volgt het "rond thema" van /orders/new en /batches: radii 20px,
   pill-vormige knoppen, witte kaart met 1px #e6e8ec.

   Geen ::deep in dit bestand, en dat is geen vergissing: alle markup staat in de eigen .razor en
   is platte HTML (ook het invoerveld), dus elk element draagt het scope-attribuut zelf. Zodra hier
   een Blazor-component als InputText komt, geldt de valkuil uit NewOrder.razor.css weer. */

.ilp-overlay[b-es8i5vj1xj] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem 2rem;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.45);
}

.ilp-panel[b-es8i5vj1xj] {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.24);
    outline: none;
}

/* ---- kop ---- */
.ilp-head[b-es8i5vj1xj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.35rem 0.85rem;
}

.ilp-head__icon[b-es8i5vj1xj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background: #eef2f7;
    border-radius: 9px;
    color: #475569;
}

.ilp-head__icon svg[b-es8i5vj1xj] {
    width: 16px;
    height: 16px;
}

.ilp-head__title[b-es8i5vj1xj] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    color: #0f172a;
}

.ilp-close[b-es8i5vj1xj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    color: #475569;
    cursor: pointer;
}

.ilp-close:hover[b-es8i5vj1xj] {
    background: #f4f6f8;
}

.ilp-close svg[b-es8i5vj1xj] {
    width: 15px;
    height: 15px;
}

.ilp-body[b-es8i5vj1xj] {
    padding: 0 1.35rem 1.25rem;
}

/* ---- wat er op de brief komt ---- */
.ilp-facts[b-es8i5vj1xj] {
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
}

.ilp-facts__row[b-es8i5vj1xj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.18rem 0;
}

.ilp-facts__key[b-es8i5vj1xj] {
    font-size: 0.8rem;
    color: var(--txt-shade-3, #4d4d4d);
}

.ilp-facts__val[b-es8i5vj1xj] {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    color: #0f172a;
}

.ilp-facts__code[b-es8i5vj1xj] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0f172a;
}

/* Bevestiging van een verzending in DEZE sessie. Het paneel weet niet of er eerder gemaild is;
   dat zou een veld uit de SendQueue vragen. Wat het wel weet, zegt het. */
.ilp-sent[b-es8i5vj1xj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: #065f46;
}

.ilp-sent svg[b-es8i5vj1xj] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.ilp-rule[b-es8i5vj1xj] {
    height: 1px;
    background: #eef2f7;
    margin: 1.1rem 0;
}

/* ---- mailen ---- */
.ilp-label[b-es8i5vj1xj] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}

.ilp-mailrow[b-es8i5vj1xj] {
    display: flex;
    gap: 0.55rem;
}

.ilp-input[b-es8i5vj1xj] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.65rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f3f6fb;
    border: 1px solid #b6c2d1;
    border-radius: 12px;
}

.ilp-input[b-es8i5vj1xj]::placeholder {
    color: #64748b;
}

.ilp-input:focus[b-es8i5vj1xj] {
    outline: none;
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ilp-input:disabled[b-es8i5vj1xj] {
    background: #e5eaf1;
    border-color: #cbd3dd;
    color: #64748b;
}

/* ---- knoppen ---- */

/* 44px hoog: dat is de minimale trefmaat, en het is ook precies de hoogte van het invoerveld
   ernaast. hsl(209,100%,45%) en niet de 50% van de app: wit op 50% haalt 3,8:1 en dat is onder de
   4,5 die tekst van deze maat nodig heeft. 45% is de hover-tint die de app al gebruikt. */
.ilp-btn[b-es8i5vj1xj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 1.25rem;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    border: 1px solid #b6c2d1;
    border-radius: 999px;
    cursor: pointer;
}

.ilp-btn:hover:not(:disabled)[b-es8i5vj1xj] {
    background: #f5faff;
    border-color: hsl(209, 100%, 45%);
}

.ilp-btn svg[b-es8i5vj1xj] {
    width: 15px;
    height: 15px;
}

.ilp-btn--primary[b-es8i5vj1xj] {
    color: #fff;
    background: hsl(209, 100%, 45%);
    border-color: hsl(209, 100%, 45%);
}

.ilp-btn--primary:hover:not(:disabled)[b-es8i5vj1xj] {
    background: hsl(209, 100%, 38%);
    border-color: hsl(209, 100%, 38%);
}

.ilp-btn:disabled[b-es8i5vj1xj] {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: #475569;
    cursor: default;
}

.ilp-downloadrow[b-es8i5vj1xj] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* ---- meldingen ---- */
.ilp-hint[b-es8i5vj1xj] {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #64748b;
}

.ilp-hint--inline[b-es8i5vj1xj] {
    margin-top: 0;
    flex: 1 1 auto;
}

.ilp-error[b-es8i5vj1xj] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #dc2626;
}

@media (max-width: 560px) {
    .ilp-mailrow[b-es8i5vj1xj] {
        flex-wrap: wrap;
    }

    .ilp-mailrow .ilp-btn[b-es8i5vj1xj] {
        flex: 1 1 100%;
    }

    .ilp-downloadrow[b-es8i5vj1xj] {
        flex-wrap: wrap;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-fzelmnqjp3] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-fzelmnqjp3] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-fzelmnqjp3] {
    font-size: 1.1rem;
}

.oi[b-fzelmnqjp3] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-fzelmnqjp3] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-fzelmnqjp3] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-fzelmnqjp3] {
        padding-bottom: 1rem;
    }

    .nav-item[b-fzelmnqjp3]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-fzelmnqjp3]  a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item[b-fzelmnqjp3]  a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

@media (min-width: 641px) {
    .navbar-toggler[b-fzelmnqjp3] {
        display: none;
    }

    .collapse[b-fzelmnqjp3] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Shared/NoResultsPanel.razor.rz.scp.css */
/* Lege resultatenlijst. Rond thema, gecentreerde inhoud: het vlak neemt de plek in van een tabel,
   dus het mag dezelfde ruimte vullen, maar het moet als uitleg lezen en niet als een kaart met
   gegevens.

   Geen ::deep: alle markup staat in de eigen .razor en draagt dus het scope-attribuut, de iconen
   inbegrepen. Die staan daar met opzet letterlijk en niet als fragment uit de code-behind. */

.nrp[b-vrhqqpuvff] {
    box-sizing: border-box;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 2.5rem 2.25rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    text-align: center;
}

/* Een stand die om ingrijpen vraagt krijgt een warme rand. Geen gekleurd vlak: het is geen fout van
   de gebruiker en het hoeft niet te schreeuwen. */
.nrp--attention[b-vrhqqpuvff] {
    border-color: #fed7aa;
}

.nrp__icon[b-vrhqqpuvff] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: #f1f5f9;
    border-radius: 999px;
    color: #475569;
}

.nrp__icon--warm[b-vrhqqpuvff] {
    background: #fff7ed;
    color: #9a3412;
}

.nrp__icon svg[b-vrhqqpuvff] {
    width: 26px;
    height: 26px;
}

.nrp__title[b-vrhqqpuvff] {
    margin: 1.1rem 0 0;
    font-size: 1.18rem;
    font-weight: 700;
    color: #0f172a;
}

.nrp__body[b-vrhqqpuvff] {
    max-width: 440px;
    margin: 0.5rem auto 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--txt-shade-3, #4d4d4d);
}

.nrp__status[b-vrhqqpuvff] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.42rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e6e8ec;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #475569;
}

.nrp__dot[b-vrhqqpuvff] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
}

.nrp__dot--idle[b-vrhqqpuvff] {
    background: #94a3b8;
}

.nrp__dot--busy[b-vrhqqpuvff] {
    background: hsl(36, 80%, 50%);
}

/* Donkerder dan --c-error zelf, zodat de stip ook op wit genoeg gewicht heeft. */
.nrp__dot--error[b-vrhqqpuvff] {
    background: hsl(9, 70%, 45%);
}

.nrp__dot--done[b-vrhqqpuvff] {
    background: hsl(125, 90%, 30%);
}

@media (max-width: 560px) {
    .nrp[b-vrhqqpuvff] {
        padding: 1.75rem 1.25rem;
    }
}
/* /Shared/OrderStatusBadge.razor.rz.scp.css */
/* Statusbadge voor bestellingen. Staat bij het component en niet in de scoped CSS van een
   pagina, zodat de lijst en het detail niet elk hun eigen kopie van dit palet krijgen. */

.ord-badge[b-uo5glbngdp] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* Open: er moet nog iets gebeuren. */
.ord-badge--open[b-uo5glbngdp] {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Klaar (afgerond, verzonden). */
.ord-badge--done[b-uo5glbngdp] {
    background: #ecfdf3;
    color: #027a48;
}

/* Geannuleerd of vervallen. */
.ord-badge--cancelled[b-uo5glbngdp] {
    background: #fef3f2;
    color: #b42318;
}

/* Retour: vraagt aandacht, maar is geen fout. */
.ord-badge--returned[b-uo5glbngdp] {
    background: #fff6ed;
    color: #b93815;
}

/* Nog niets gedaan. */
.ord-badge--idle[b-uo5glbngdp] {
    background: #f2f4f7;
    color: #475467;
}

/* Onderweg: ingepakt. */
.ord-badge--packed[b-uo5glbngdp] {
    background: #fffaeb;
    color: #b54708;
}

/* Onderweg: klaar voor verzending. */
.ord-badge--ready[b-uo5glbngdp] {
    background: #eef4ff;
    color: #3538cd;
}

/* Geen profiel aan de regel: een losse kit. Omrand i.p.v. gevuld, zodat 't zichtbaar geen
   status uit de reeks hierboven is maar een mededeling. */
.ord-badge--kit[b-uo5glbngdp] {
    background: #ffffff;
    color: #475467;
    box-shadow: inset 0 0 0 1px #d0d5dd;
}

/* Leeg of een waarde die we niet kennen. */
.ord-badge--unknown[b-uo5glbngdp] {
    background: #f2f4f7;
    color: #98a2b3;
}
/* /Shared/Pager.razor.rz.scp.css */
/*
.sort-link {
    cursor: pointer;
    color: #007bff !important;
}
*/

.noselect[b-n6k1pb7eg0] {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
/* /Shared/ProfileClientInfoHeader.razor.rz.scp.css */
/* Het veld "In de app" in de profielkop. De rest van de kop houdt zijn bestaande opmaak uit
   wwwroot/css/style.css (.dip-profile-info__content is een flexrij met .sup-title-labels);
   .pi-inapp doet niets bijzonders met de plaatsing en schuift dus gewoon mee in die rij.

   Scoped CSS, dus dit raakt alleen dit component. VALKUIL: alles hieronder is platte HTML uit
   ProfileClientInfoHeader.razor en draagt daarom het scope-attribuut; een klasse op een
   child-component (ProfileTags, Tag, Mud*) zou nooit matchen. */

/* Zelfde vorm en kleur als de kolom "In de app" in de profielenlijst (Profiles.razor.css), zodat
   dezelfde mededeling er op beide plekken hetzelfde uitziet. Waarschuwingskleuren komen uit
   style.css: --c-warning hsl(36,80%,50%), --c-warning--l hsl(36,99%,96%). */
.pi-inapp__hidden[b-1e5cd7959a] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    background: hsl(36, 99%, 92%);
    color: hsl(30, 80%, 28%);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.pi-inapp__hidden svg[b-1e5cd7959a] {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
}

/* Nog geen uitslag: rustig, cursief, geen kleur die om aandacht vraagt. */
.pi-inapp__none[b-1e5cd7959a] {
    font-style: italic;
    color: var(--txt-shade-3, #4d4d4d);
}

/* ---- instructiebrief ----

   Het blok vult de rechterhelft van de profielkop, die daar leeg was. Rond thema (radius 20px,
   1px rand) zodat het bij /orders/new en de registratiepagina hoort; een omrand vlak en geen
   gekleurd vlak, want het meldt geen probleem maar biedt een handeling aan.

   Geen ::deep: deze markup staat als platte HTML in de eigen .razor. De knop erin is een component
   met zijn eigen scoped CSS en wordt hier alleen geplaatst. */
.pi-letter[b-1e5cd7959a] {
    width: 330px;
    max-width: 100%;
    padding: 0.9rem 1.05rem;
    background: #fff;
    border: 1px solid #b6c2d1;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pi-letter__head[b-1e5cd7959a] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.25rem;
}

.pi-letter__icon[b-1e5cd7959a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: #eef2f7;
    border-radius: 8px;
    color: #475569;
}

.pi-letter__icon svg[b-1e5cd7959a] {
    width: 14px;
    height: 14px;
}

.pi-letter__title[b-1e5cd7959a] {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
}

.pi-letter__hint[b-1e5cd7959a] {
    margin: 0 0 0.75rem;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #64748b;
}

/* ---- clientcode + bewerkknop ----

   De knop staat naast de code in plaats van rechts in de kop; zie de toelichting in de .razor.
   Alles hier is platte HTML uit de eigen .razor, dus geen ::deep nodig. */
/* Kanaaldemo: badge naast het client-id en banner in de kop */
.pi-demo[b-1e5cd7959a] {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #0e7490;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}

.pi-demo-banner[b-1e5cd7959a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin: 12px 0 4px 0;
    padding: 12px 18px;
    border-radius: 14px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #164e63;
    font-size: 0.9rem;
}

.pi-demo-banner__text[b-1e5cd7959a] {
    flex: 1 1 22rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pi-demo-banner__text > span[b-1e5cd7959a] {
    color: #155e75;
}

.pi-demo-banner__login[b-1e5cd7959a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pi-demo-banner__login-label[b-1e5cd7959a] {
    font-size: 0.8rem;
    font-weight: 600;
}

.pi-demo-banner__chips[b-1e5cd7959a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pi-demo-chip[b-1e5cd7959a] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #a5f3fc;
    border-radius: 6px;
    font-size: 0.875rem;
}

.pi-demo-chip strong[b-1e5cd7959a] {
    font-weight: 700;
    letter-spacing: 0.4px;
}

.pi-demo-chip__copy[b-1e5cd7959a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: -6px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #0e7490;
    cursor: pointer;
}

.pi-demo-chip__copy:hover[b-1e5cd7959a] {
    background: #ecfeff;
}

.pi-demo-chip__copy:focus-visible[b-1e5cd7959a] {
    outline: 2px solid #0e7490;
    outline-offset: 1px;
}

.pi-demo-chip__copy svg[b-1e5cd7959a] {
    width: 16px;
    height: 16px;
}

.pi-id__row[b-1e5cd7959a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* Icoon EN een kort woord: alleen een potlood is te weinig houvast, de hele zin
   ("Pas de clientcode aan") maakt er weer een regel tekst van naast een getal van 2rem. Die zin
   blijft als title en aria-label staan, zodat de tooltip en de schermlezer het volledige verhaal
   krijgen. */
.pi-editcode[b-1e5cd7959a] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 32px;
    padding: 0 0.75rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.pi-editcode:hover[b-1e5cd7959a] {
    color: #0f172a;
    background: #f5faff;
    border-color: hsl(209, 100%, 45%);
}

.pi-editcode:focus-visible[b-1e5cd7959a] {
    outline: 2px solid hsl(209, 100%, 45%);
    outline-offset: 2px;
}

.pi-editcode svg[b-1e5cd7959a] {
    width: 14px;
    height: 14px;
}

/* ---- delen met de client ----

   Zelfde plek en vorm als het briefblok (rond thema, 1px rand), want ook dit biedt een handeling
   aan. De rand is amber zolang de uitslag nog niet in de app staat, blauw tijdens het bevestigen
   en groen na het delen, zodat de stand ook zonder lezen te zien is. De knop is een echte gevulde
   knop: de oude tekstlink rechts in de gele band werd niet gevonden.

   Blauw hsl(209, 100%, 40%) en niet de 50% van de instellingenpagina: witte tekst haalt daar geen
   4,5:1. Platte HTML uit de eigen .razor, dus geen ::deep. */
.pi-share[b-1e5cd7959a] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 420px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid #f0d6a8;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pi-share--confirm[b-1e5cd7959a] {
    border-color: #b9d3f1;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.1);
}

.pi-share--done[b-1e5cd7959a] {
    border-color: #b7dfc6;
}

.pi-share__head[b-1e5cd7959a] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.pi-share__icon[b-1e5cd7959a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: hsl(36, 99%, 92%);
    color: hsl(30, 80%, 28%);
}

.pi-share__icon--done[b-1e5cd7959a] {
    background: #e3f4ea;
    color: #1b6b45;
}

.pi-share__icon svg[b-1e5cd7959a] {
    width: 17px;
    height: 17px;
}

.pi-share__body[b-1e5cd7959a] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pi-share__title[b-1e5cd7959a] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.pi-share__text[b-1e5cd7959a] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #475569;
}

/* De namen bij drie of meer verborgen onderdelen: korte lijst onder de tekst. */
.pi-share__names[b-1e5cd7959a] {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    /* De reset in style.css (reset-a: `ul[class] { list-style: none }`, 0-1-1) haalt de bolletjes
       weg; deze regel wint alleen dankzij het scope-attribuut (0-2-0). Zonder bolletjes lazen de
       namen als losse vette regels. */
    list-style: disc;
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: 600;
    color: #334155;
}

.pi-share__list[b-1e5cd7959a] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pi-share__item[b-1e5cd7959a] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: #f4f7fa;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
}

.pi-share__item svg[b-1e5cd7959a] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: hsl(209, 100%, 40%);
}

.pi-share__note[b-1e5cd7959a] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #5f6b76;
}

.pi-share__error[b-1e5cd7959a] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b42318;
}

.pi-share__actions[b-1e5cd7959a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Onder de tekst en niet onder het icoon, zodat de knop bij de zin hoort die hem uitlegt. */
.pi-share__actions--indent[b-1e5cd7959a] {
    padding-left: calc(36px + 0.8rem);
}

.pi-share__btn[b-1e5cd7959a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 1.15rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pi-share__btn:disabled[b-1e5cd7959a] {
    cursor: default;
    opacity: 0.7;
}

.pi-share__btn:focus-visible[b-1e5cd7959a] {
    outline: 2px solid hsl(209, 100%, 45%);
    outline-offset: 2px;
}

.pi-share__btn svg[b-1e5cd7959a] {
    width: 16px;
    height: 16px;
}

.pi-share__btn--primary[b-1e5cd7959a] {
    background: hsl(209, 100%, 40%);
    color: #fff;
}

.pi-share__btn--primary:hover:not(:disabled)[b-1e5cd7959a] {
    background: hsl(209, 100%, 34%);
}

.pi-share__btn--ghost[b-1e5cd7959a] {
    border-color: #cbd5e1;
    background: #fff;
    color: #334155;
    font-weight: 500;
}

.pi-share__btn--ghost:hover:not(:disabled)[b-1e5cd7959a] {
    background: #f1f5f9;
}

.pi-share__btn--outline[b-1e5cd7959a] {
    border-color: hsl(209, 100%, 40%);
    background: #fff;
    color: hsl(209, 100%, 36%);
}

.pi-share__btn--outline:hover[b-1e5cd7959a] {
    background: #f3f8fe;
    color: hsl(209, 100%, 30%);
}

.pi-share__btn--link[b-1e5cd7959a] {
    padding: 0 0.5rem;
    color: #475569;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pi-share__btn--link:hover:not(:disabled)[b-1e5cd7959a] {
    color: #0f172a;
}

@media (max-width: 640px) {
    .pi-share__actions--indent[b-1e5cd7959a] {
        padding-left: 0;
    }

    .pi-share__btn[b-1e5cd7959a] {
        flex: 1 1 auto;
    }
}

/* De rechterkolom houdt nu alleen het briefblok over. Zonder dit rekt dat blok mee met de hoogte
   van de kop, want .pi-controls erft align-items: stretch. */
.pi-controls[b-1e5cd7959a] {
    align-items: flex-start;
    /* Het deelvak is 420px breed; zonder deze twee groeit de kolom op een telefoon mee tot over
       de rand van de kop in plaats van het vak te laten krimpen. */
    min-width: 0;
    max-width: 100%;
}
/* /Shared/StyledSelect.razor.rz.scp.css */
/* Keuzelijst met eigen uitklaplijst. De CSS staat bij het component en niet bij de pagina's die
   het gebruiken: anders krijgen /orders en het orderdetail elk hun eigen kopie en lopen ze uiteen
   zodra iemand er een kleur bijzet.

   De pil is bewust identiek aan `.ord-filter` op /orders en `.od-select` op het orderdetail:
   44px hoog, volledig rond, 1px #d3d7de. */

.ss[b-45y3bic6ba] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 44px;
    padding: 0 1rem;
    border: 1px solid #d3d7de;
    border-radius: 999px;
    background: #fff;
    flex: 0 0 auto;
    max-width: 100%;
}

.ss--open[b-45y3bic6ba],
.ss:focus-within[b-45y3bic6ba] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ss__label[b-45y3bic6ba] {
    color: #667085;
    font-size: 0.8rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* De knop draagt de hele hoogte zodat het hele oppervlak binnen de pil klikbaar is. */
.ss__button[b-45y3bic6ba] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #101828;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.ss__button:disabled[b-45y3bic6ba] {
    color: #98a2b3;
    cursor: default;
}

.ss__button:focus[b-45y3bic6ba] {
    outline: none;
}

.ss__value[b-45y3bic6ba] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss__chevron[b-45y3bic6ba] {
    display: inline-flex;
    flex: 0 0 auto;
    color: #667085;
    transition: transform 0.15s ease;
}

.ss__chevron svg[b-45y3bic6ba] {
    width: 16px;
    height: 16px;
}

.ss--open .ss__chevron[b-45y3bic6ba] {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------------
   De uitklaplijst
   ------------------------------------------------------------------ */

/* Doorzichtige laag over de rest van de pagina: een klik ernaast sluit de lijst en activeert
   niets anders. Onder het paneel (lagere z-index) zodat de opties wél klikbaar blijven. */
.ss__backdrop[b-45y3bic6ba] {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.ss__panel[b-45y3bic6ba] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1201;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.ss__panel:focus[b-45y3bic6ba] {
    outline: none;
}

/* Dit is waar het om begon: een optie heeft padding, een eigen radius en ruimte om zich heen. */
.ss__option[b-45y3bic6ba] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #344054;
    white-space: nowrap;
    cursor: pointer;
}

.ss__option + .ss__option[b-45y3bic6ba] {
    margin-top: 2px;
}

/* Aanwijzer en toetsenbord delen één markering, zodat er nooit twee "huidige" rijen zijn. */
.ss__option--active[b-45y3bic6ba] {
    background: #f4f6f8;
}

.ss__option--selected[b-45y3bic6ba] {
    color: #0f172a;
    font-weight: 600;
}

.ss__option--selected.ss__option--active[b-45y3bic6ba] {
    background: #eff6ff;
}

/* Vaste breedte, ook als er geen vinkje staat: anders schuiven de labels op zodra de keuze
   verandert. */
.ss__option-check[b-45y3bic6ba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: hsl(209, 100%, 45%);
}

.ss__option-check svg[b-45y3bic6ba] {
    width: 13px;
    height: 13px;
}

.ss__option-label[b-45y3bic6ba] {
    min-width: 0;
}

/* Op smalle schermen mag de pil de volle breedte pakken; de lijst volgt. */
@media (max-width: 640px) {
    .ss[b-45y3bic6ba] {
        width: 100%;
    }

    .ss__button[b-45y3bic6ba] {
        flex: 1 1 auto;
        justify-content: space-between;
    }

    .ss__option[b-45y3bic6ba] {
        padding: 0.7rem 0.65rem;
    }
}