@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
   ------------------------------------------------------------------ */

.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;
    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. */
.st-seg__opt[b-s9lsxwffa3] {
    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;
}

.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--on[b-s9lsxwffa3] {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    color: #0f172a;
}

.st-legend[b-s9lsxwffa3] {
    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;
}

/* ------------------------------------------------------------------
   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;
}

.lir-filebtn input[type="file"][b-86atvcadq6] {
    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; }
/* /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/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: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.2rem;
    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;
}

/* Doorklik-link naar het profiel: visuele tweeling van de PDF-pil eronder (zelfde maten/rand/radius),
   maar in link-blauw op hover zodat 't als navigatie leest i.p.v. als download. */
.pgx-matrix__profile-link[b-e5s0x4370v] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
}

.pgx-matrix__profile-link:hover[b-e5s0x4370v] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.pgx-matrix__profile-link svg[b-e5s0x4370v] {
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
}

.pgx-matrix__pdf-btn[b-e5s0x4370v] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
}

.pgx-matrix__pdf-btn:not(:disabled):hover[b-e5s0x4370v] {
    background: #f3e8ff;
    color: #6d28d9;
}

.pgx-matrix__pdf-btn:disabled[b-e5s0x4370v] {
    opacity: 0.55;
    cursor: default;
}

.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 ---- */
.pgx-cell[b-e5s0x4370v] {
    min-height: 40px;
}

/* mismatch + selectie: rand als overlay-pseudo BOVEN de bron-blokken getekend. Een inset box-shadow
   direct op de <td> wordt door de (gekleurde) .pgx-src-blokken overdekt (kinderen tekenen over de
   inset-schaduw van hun ouder), waardoor de rode rand niet rond de hele cel doorloopt. Het pseudo
   ligt met pointer-events:none over de cel, zodat de klikbare bron-blokken klikbaar blijven. */
.pgx-cell--mismatch[b-e5s0x4370v],
.pgx-cell--selected[b-e5s0x4370v] {
    position: relative;
}

.pgx-cell--mismatch[b-e5s0x4370v]::after,
.pgx-cell--selected[b-e5s0x4370v]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.pgx-cell--mismatch[b-e5s0x4370v]::after {
    box-shadow: inset 0 0 0 2px #ff6666;
}

.pgx-cell--selected[b-e5s0x4370v]::after {
    box-shadow: inset 0 0 0 2px #2563eb;
}

/* Beide cues tegelijk (box-shadow stapelt niet over losse regels): blauwe selectie-rand
   binnen + rode mismatch-rand erbuiten, zodat een geselecteerde mismatch-cel z'n rode
   markering houdt tijdens de SOPHiA-toepassen-flow. */
.pgx-cell--mismatch.pgx-cell--selected[b-e5s0x4370v]::after {
    box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #ff6666;
}

/* bron-blokken: iGene berekend (groen) vs SOPHiA (lavendel) */
.pgx-src[b-e5s0x4370v] {
    padding: 3px 0;
}

.pgx-src--calc[b-e5s0x4370v] {
    background: #e8f4e8;
}

.pgx-src--calc.pgx-src--indicative[b-e5s0x4370v] {
    background: #fffacd;
}

.pgx-src--sophia[b-e5s0x4370v] {
    background: #e8e8f4;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pgx-src--clickable[b-e5s0x4370v] {
    cursor: pointer;
}

.pgx-src--calc.pgx-src--clickable:hover[b-e5s0x4370v] {
    background: #c8e4c8;
}

.pgx-src--sophia.pgx-src--clickable:hover[b-e5s0x4370v] {
    background: #c8c8e4;
}

.pgx-cell--selected .pgx-src--sophia[b-e5s0x4370v] {
    background: #c8c8e4;
}

/* Top row: icoon (20%) | metabolisme (40%) | activity score (40%), uitgelijnd zoals de admin */
.pgx-src__top[b-e5s0x4370v] {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.pgx-src__icon[b-e5s0x4370v] {
    flex: 0 0 20%;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.pgx-src__metab[b-e5s0x4370v] {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 2px 3px;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.pgx-src__label[b-e5s0x4370v] {
    font-size: 0.66rem;
    font-weight: 600;
    color: #5c6b7a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pgx-src__as[b-e5s0x4370v] {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 3px;
    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: 13px;
    height: 13px;
    background: #6366f1;
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
}

.pgx-src__diplo[b-e5s0x4370v] {
    padding: 2px 3px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: #333;
    text-align: center;
    word-break: break-word;
    white-space: normal;
}

.pgx-src__flag[b-e5s0x4370v] {
    font-size: 0.72rem;
}

.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;
    background-color: #fffbeb;
}

.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). */
.pgx-snp__badge[b-e5s0x4370v] {
    display: inline-block;
    margin-left: 3px;
    padding: 0 3px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1.3;
    vertical-align: middle;
    cursor: help;
}

/* Informatief: op CYP2D6 is de SOPHiA-uitkomst per beleid toch al leidend, dus geen
   aandachtskleur - anders licht die kolom structureel op. */
.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/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;
}

/* ------------------------------------------------------------------
   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;
}
/* /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/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/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/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/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;
}

.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); }

/* ---- 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-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/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/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);
}
/* /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;
    }
}