html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 28px;
    height: 24px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}
/* ── PAT colour tokens (icons and colour, approved 23-10) ───────────────────────
   One palette for the whole application. Orange is brand and accent, never text (3.0:1 on white): text in orange
   uses --pat-orange-700. Teal is PAT itself. Per colour a background (50), a stronger tint for icon discs (100), a
   dot or edge colour (500) and a text colour (700). Components use the status, log and lab tokens, not the colours.
   ColorTokenContrastTests reads this block and checks every text pair against WCAG AA. */
:root {
    /* brand */
    --pat-orange: #E87722;      --pat-orange-600: #C25F12; --pat-orange-700: #9A4A0E;
    --pat-orange-50: #FDF1E6;   --pat-orange-100: #FBE2CC;
    --pat-teal: #1D5C52;        --pat-teal-500: #2E8A7A;
    --pat-teal-50: #EDF5F2;     --pat-teal-100: #DCEBE6;
    --pat-teal-nav: #115757;    /* = --sidebar-bg of the menu, kept */

    /* meaning */
    --pat-blue-50: #EAF2FA;    --pat-blue-100: #D7E7F5;  --pat-blue-500: #3B7BC0;  --pat-blue-700: #1F5A8E;
    --pat-green-50: #E6F3E8;   --pat-green-100: #D3EBD8; --pat-green-500: #2F8F4E; --pat-green-700: #1E6B34;
    --pat-amber-50: #FCF1D9;   --pat-amber-100: #F8E4B5; --pat-amber-500: #A8730A; --pat-amber-700: #845407;
    --pat-red-50: #FBEAE6;     --pat-red-100: #F6D9D3;   --pat-red-500: #C8442F;   --pat-red-700: #A33325;
    --pat-neutral-50: #EFEEE9; --pat-neutral-500: #7A8580; --pat-neutral-700: #4F5A55;
    --pat-slate-50: #EEF1F4;   --pat-slate-500: #6A7D90; --pat-slate-700: #3F5366;

    /* ink and surfaces */
    --pat-ink: #1F2933;
    --pat-ink-soft: #5B6570;
    --pat-line: #E0DFDA;
    --pat-surface: #FFFFFF;

    /* status phases (use these in components, not the colours themselves) */
    --pat-status-draft-bg: var(--pat-neutral-50);  --pat-status-draft-fg: var(--pat-neutral-700);  --pat-status-draft-dot: var(--pat-neutral-500);
    --pat-status-busy-bg: var(--pat-teal-50);      --pat-status-busy-fg: var(--pat-teal);           --pat-status-busy-dot: var(--pat-teal-500);
    --pat-status-sent-bg: var(--pat-blue-50);      --pat-status-sent-fg: var(--pat-blue-700);       --pat-status-sent-dot: var(--pat-blue-500);
    --pat-status-done-bg: var(--pat-green-50);     --pat-status-done-fg: var(--pat-green-700);      --pat-status-done-dot: var(--pat-green-500);
    --pat-status-failed-bg: var(--pat-red-50);     --pat-status-failed-fg: var(--pat-red-700);      --pat-status-failed-dot: var(--pat-red-500);
    --pat-status-attn-bg: var(--pat-amber-50);     --pat-status-attn-fg: var(--pat-amber-700);      --pat-status-attn-dot: var(--pat-amber-500);

    /* log levels */
    --pat-log-info-edge: var(--pat-neutral-500);
    --pat-log-warning-edge: var(--pat-amber-500); --pat-log-warning-bg: var(--pat-amber-50);
    --pat-log-error-edge: var(--pat-red-500);     --pat-log-error-bg: var(--pat-red-50);

    /* four lab accents (LabAccent.For picks one per lab code) */
    --pat-lab-a1-bg: var(--pat-teal-100);   --pat-lab-a1-fg: var(--pat-teal);
    --pat-lab-a2-bg: var(--pat-orange-100); --pat-lab-a2-fg: var(--pat-orange-700);
    --pat-lab-a3-bg: var(--pat-blue-100);   --pat-lab-a3-fg: var(--pat-blue-700);
    --pat-lab-a4-bg: var(--pat-slate-50);   --pat-lab-a4-fg: var(--pat-slate-700);
}

/* ── Gedeelde mapping-studio design-tokens (2026-08-27) ─────────────────────────
   Eén autoritatieve definitie. Sinds 2026-09-11 (audit P2.6) dragen de componenten
   geen lokale kopieën meer, alleen nog var(--ms-…)-verwijzingen naar deze set.
   Since 23-10 the colours are aliases of the --pat-* palette above, so every studio component follows it
   without a change of its own. */
:root {
    --ms-teal: var(--pat-teal);
    --ms-teal-dark: #164a42; /* fase 1 (mapping-werkblad-verbetering, spec §3.4): hover-teal, was a literal in MappingWorksheetPanel */
    --ms-teal-soft: var(--pat-teal-50);
    --ms-orange: var(--pat-orange);
    --ms-ok-bg: var(--pat-green-50); --ms-ok-fg: var(--pat-green-700);
    --ms-warn-bg: var(--pat-amber-50); --ms-warn-fg: var(--pat-amber-700);
    --ms-bad-bg: var(--pat-red-50); --ms-bad-fg: var(--pat-red-700);
    --ms-neutral-bg: var(--pat-neutral-50); --ms-neutral-fg: var(--pat-neutral-700);
    --ms-surface: var(--pat-surface);
    --ms-surface-2: #F6F6F3;
    --ms-line: var(--pat-line);
    --ms-ink: #374151;
    --ms-ink-soft: var(--pat-ink-soft);
    --ms-ink-faint: #6b7280; /* 4.8:1 on white; #9aa3ab was ~2.6:1 (aanbevelingen 24-09, 4.7.1) */
}

/* ── One shared chip (icons and colour 23-10) ─────────────────────────────────────
   12px, fully rounded, an optional dot (.pat-badge-dot) or 12px icon in front. The phase classes carry the meaning
   of an order status; the older names (success, warning, bad, neutral, teal, plain) stay as aliases so the studio
   markup needs no change. pat-badge-warn is the same as pat-badge-warning. */
.pat-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.5; font-weight: 500; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.pat-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.pat-badge-draft, .pat-badge-neutral { background: var(--pat-status-draft-bg); color: var(--pat-status-draft-fg); }
.pat-badge-draft .pat-badge-dot, .pat-badge-neutral .pat-badge-dot { background: var(--pat-status-draft-dot); }
.pat-badge-busy, .pat-badge-teal { background: var(--pat-status-busy-bg); color: var(--pat-status-busy-fg); }
.pat-badge-busy .pat-badge-dot, .pat-badge-teal .pat-badge-dot { background: var(--pat-status-busy-dot); }
.pat-badge-sent { background: var(--pat-status-sent-bg); color: var(--pat-status-sent-fg); }
.pat-badge-sent .pat-badge-dot { background: var(--pat-status-sent-dot); }
.pat-badge-done, .pat-badge-success { background: var(--pat-status-done-bg); color: var(--pat-status-done-fg); }
.pat-badge-done .pat-badge-dot, .pat-badge-success .pat-badge-dot { background: var(--pat-status-done-dot); }
.pat-badge-failed, .pat-badge-bad { background: var(--pat-status-failed-bg); color: var(--pat-status-failed-fg); }
.pat-badge-failed .pat-badge-dot, .pat-badge-bad .pat-badge-dot { background: var(--pat-status-failed-dot); }
.pat-badge-attn, .pat-badge-warning, .pat-badge-warn { background: var(--pat-status-attn-bg); color: var(--pat-status-attn-fg); }
.pat-badge-attn .pat-badge-dot, .pat-badge-warning .pat-badge-dot, .pat-badge-warn .pat-badge-dot { background: var(--pat-status-attn-dot); }
.pat-badge-plain { background: var(--pat-surface); color: var(--pat-ink-soft); border: 1px solid var(--pat-line); padding: 0 8px; }
.pat-badge-brand { background: var(--pat-orange-50); color: var(--pat-orange-700); }

/* Log levels (Home and service log): a 3px edge on the left and a level icon; the text stays dark ink. */
.pat-log { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 3px 0; border-left: 3px solid var(--pat-log-info-edge); border-radius: 0 6px 6px 0; font-size: 13px; color: var(--pat-ink); }
.pat-log-info { border-left-color: var(--pat-log-info-edge); }
.pat-log-icon { display: inline-flex; flex: none; }
.pat-log-info > svg, .pat-log-info .pat-log-icon { color: var(--pat-neutral-500); }
.pat-log-warning { border-left-color: var(--pat-log-warning-edge); background: var(--pat-log-warning-bg); }
.pat-log-warning > svg, .pat-log-warning .pat-log-icon { color: var(--pat-amber-700); }
.pat-log-error { border-left-color: var(--pat-log-error-edge); background: var(--pat-log-error-bg); }
.pat-log-error > svg, .pat-log-error .pat-log-icon { color: var(--pat-red-700); }

/* The lab code in a fixed accent of four (LabAccent.For): only the small block is coloured. */
.pat-labcode { display: inline-grid; place-items: center; min-width: 38px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; flex: none; }
.pat-lab-a1 { background: var(--pat-lab-a1-bg); color: var(--pat-lab-a1-fg); }
.pat-lab-a2 { background: var(--pat-lab-a2-bg); color: var(--pat-lab-a2-fg); }
.pat-lab-a3 { background: var(--pat-lab-a3-bg); color: var(--pat-lab-a3-fg); }
.pat-lab-a4 { background: var(--pat-lab-a4-bg); color: var(--pat-lab-a4-fg); }

/* ── Gedeelde studio-basisklassen (2026-09-11, audit P2.5) ──────────────────────
   .pat-abtn, .pat-overlay en .pat-dialog waren letterlijk gedupliceerd over 8-10
   panelen. Componenten voegen deze klasse toe naast hun eigen naam
   (bv. class="pat-abtn pat-fl-abtn") en houden alleen genuine component-specifieke
   extra's (bv. :disabled-varianten, primary-kleur) in hun eigen blok.

   Een deel van die eigen namen draagt na de extractie GEEN eigen regel meer
   (pat-cp-abtn, pat-fl-overlay, pat-lf-dialog en een stuk of vijftien andere): ze
   staan alleen nog in de markup. Dat is bewust, ze blijven het aangrijpingspunt
   waarmee een paneel later een uitzondering kan toevoegen zonder de markup te
   hoeven aanpassen, en ze houden de klassenlijsten van alle panelen gelijkvormig.
   Wie er een tegenkomt zonder regel: dat is geen dode verwijzing. */
.pat-abtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid var(--ms-line);
    border-radius: 999px;
    background: var(--ms-surface);
    cursor: pointer;
    color: var(--ms-ink-soft);
    font-family: inherit;
}
/* :where keeps this at (0,2,0) so the panels' own primary:hover rules — same
   specificity, later in the document — still win the tie; :not(:disabled) instead
   of :enabled because the onboarding links carry .pat-abtn on <a> elements, which
   :enabled never matches. */
.pat-abtn:hover:where(:not(:disabled)) { border-color: var(--ms-teal); color: var(--ms-teal); }
.pat-abtn:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 1px; }

/* Settings cards of the flow studio (Steve, 14-10): one table per repeating list, a two-column grid for
   single settings, foldable sections. No overflow on these containers: it would clip the (i) bubble. */
/* A table wider than its card scrolls inside this box, never the panel or the page (rc.42). While a help bubble is open in the table the box does not clip,
   otherwise the bubble (it opens below the (i) of a header cell) would be cut off. */
.pat-st-scroll { overflow-x: auto; max-width: 100%; }
.pat-st-scroll:has(.pat-help-bubble) { overflow: visible; }
.pat-st { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 4px 0 2px; font-size: 12.5px; }
.pat-st th { text-align: left; font-weight: 600; color: var(--ms-ink-soft); padding: 4px 6px; border-bottom: 1px solid var(--ms-line); }
.pat-st td { padding: 3px 6px; border-bottom: 1px solid var(--ms-line); vertical-align: middle; }
.pat-st input:not([type=checkbox]), .pat-st select { width: 100%; box-sizing: border-box; }
.pat-st-actions { width: 96px; text-align: right; white-space: nowrap; }
.pat-st-actions-col { width: 96px; }
/* Without the move buttons only the remove button is left. */
.pat-st-actions-col.pat-st-actions-narrow, .pat-st-actions.pat-st-actions-narrow { width: 36px; }
/* The buttons of the actions cell are compact: a .pat-abtn is 32px wide (10px padding each side), wider than the 24px of the narrow cell, so it stuck out of the cell
   and made a fitting table scroll sideways inside .pat-st-scroll by about 2px. With 5px padding it is 22px and fits both cells. */
.pat-st-actions .pat-abtn { padding-left: 5px; padding-right: 5px; }
/* Visually hidden text for a screen reader; the clip is on the span itself, never on a table ancestor. */
.pat-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* The label of a catalogue field (BlockFieldLabel), used by every settings card. */
.pat-ib-label { display: inline-flex; align-items: center; gap: 4px; color: var(--ms-ink-soft); }
.pat-st-add { margin: 2px 6px 8px 0; }
/* The "what the step does" note at the top of a settings card (same look as .pat-ib-note). */
.pat-st-note { font-size: 12px; color: var(--ms-ink-faint); background: var(--ms-surface-2); border: 1px dashed var(--ms-line); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
/* A note that warns (the sender is not allowed): same box, warning colours. */
.pat-st-warn { color: var(--ms-warn-fg); background: var(--ms-warn-bg); border-style: solid; }
/* .pat-abtn sets display: inline-flex, which would beat the browser rule for [hidden]. */
.pat-abtn[hidden] { display: none; }
/* One form grid for every settings form (rc.42): a fixed label column, so every grid in a card and in the panel starts at the same x. */
:root { --pat-label-w: 200px; }
.pat-sg { display: grid; grid-template-columns: var(--pat-label-w, 200px) minmax(0, 1fr); gap: 6px 14px; align-items: start; margin: 6px 0; max-width: 760px; }
.pat-sg-label { color: var(--ms-ink-soft); padding-top: 5px; overflow-wrap: anywhere; }
/* The width scale: long (default), short (one character, numbers), full (paths, messages, editors). */
.pat-sg-value { min-width: 0; max-width: 360px; }
.pat-sg-value.pat-w-short { max-width: 8em; }
.pat-sg-value.pat-w-full { max-width: none; }
.pat-sg-value input:not([type=checkbox]):not([type=radio]):not(:where(.pat-md-editor *)), .pat-sg-value select:not(:where(.pat-md-editor *)), .pat-sg-value textarea:not(:where(.pat-md-editor *)) { width: 100%; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--ms-line); border-radius: 6px; font: inherit; color: var(--ms-ink); background: var(--ms-surface); }
.pat-sg-value input[maxlength="1"], .pat-sg-value input[type=number] { max-width: 8em; }
/* A field that cannot be edited reads as such (the disabled placeholders of a step, a live version). The inputs of the mail text editor (DxHtmlEditor) keep their own look. */
.pat-sg-value input:not([type=checkbox]):not([type=radio]):not(:where(.pat-md-editor *)):disabled, .pat-sg-value select:not(:where(.pat-md-editor *)):disabled, .pat-sg-value textarea:not(:where(.pat-md-editor *)):disabled { background: var(--ms-surface-2); color: var(--ms-ink-soft); }
.pat-sg-value select + input { margin-top: 4px; }
.pat-sg-value > input[type=checkbox] { margin-top: 6px; }
/* A line that only states what PAT does (Klant controleren: the client it compares with, what happens on a mismatch); no control, so no border. */
.pat-sg-readonly { display: inline-block; padding: 5px 0; color: var(--ms-ink); }
.pat-sg-hint { font-size: 12px; color: var(--ms-ink-faint); margin-top: 3px; }
/* A control with a button beside it. */
.pat-sg-inline { display: flex; align-items: center; gap: 6px; }
.pat-sg-inline > input:not([type=checkbox]):not([type=radio]), .pat-sg-inline > select { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .pat-sg { grid-template-columns: minmax(0, 1fr); } .pat-sg-label { padding-top: 0; } }
/* The "Still to fill in" block at the bottom of a settings form (StudioProblems). */
.pat-st-problems { color: var(--ms-warn-fg); background: var(--ms-warn-bg); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.pat-st-problems-head { font-weight: 600; }
/* The styles of the iLES cards and the template card (formerly IlesCardStyles.razor), now in one place. */
.pat-ib { font-size: 12.5px; color: var(--ms-ink); max-width: 1100px; }
.pat-ib-title { font-weight: 600; font-size: 13.5px; margin: 6px 0; }
.pat-ib-head { font-weight: 600; margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; }
.pat-ib-box { border: 1px solid var(--ms-line); border-left: 4px solid var(--ms-teal); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: var(--ms-surface); }
.pat-ib input, .pat-ib select { padding: 4px 8px; border: 1px solid var(--ms-line); border-radius: 6px; font: inherit; color: var(--ms-ink); background: var(--ms-surface); }
.pat-ib input[type=checkbox] { padding: 0; }
.pat-ib-template { font-family: var(--ms-mono, monospace); }
/* The shared value rules set font: inherit with a higher specificity, so a template input needs its own rule after them. */
.pat-sg-value input.pat-ib-template:not([type=checkbox]):not([type=radio]), .pat-st input.pat-ib-template:not([type=checkbox]):not([type=radio]), .pat-ib input.pat-ib-template { font-family: var(--ms-mono, monospace); }
.pat-ib-add { margin: 2px 6px 6px 0; }
.pat-ib-strong { font-weight: 600; }
.pat-ib-faint { color: var(--ms-ink-faint); margin-left: 6px; }
.pat-ib-note { font-size: 12px; color: var(--ms-ink-faint); background: var(--ms-surface-2); border: 1px dashed var(--ms-line); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.pat-ss { border: 1px solid var(--ms-line); border-radius: 8px; background: var(--ms-surface); margin: 8px 0; }
.pat-ss-summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; }
.pat-ss-summary::-webkit-details-marker { display: none; }
/* display: flex hides the native triangle in Chromium and Edge, so the chevron is drawn here. */
/* The chevron is the ChevronRight drawing of StudioIcons as a mask (no Unicode glyph, icons and colour 23-10); open turns it down. */
.pat-ss-summary::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--ms-ink-faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 4 4 4-4 4'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 4 4 4-4 4'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .15s; }
details.pat-ss[open] > .pat-ss-summary::before { transform: rotate(90deg); }
.pat-ss-title { font-weight: 600; }
.pat-ss-meta { color: var(--ms-ink-faint); }
.pat-ss-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.pat-ss-body { padding: 0 10px 8px; }
.pat-ss-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; color: var(--ms-ink-soft); }
/* The inputs of a sentence row read like the inputs of the form grid; a number or a column letter gets a short field, not a fixed pixel width. */
.pat-ss-sentence input:not([type=checkbox]):not([type=radio]), .pat-ss-sentence select { width: auto; padding: 4px 8px; border: 1px solid var(--ms-line); border-radius: 6px; font: inherit; color: var(--ms-ink); background: var(--ms-surface); }
.pat-ss-sentence input:not([type=checkbox]):not([type=radio]):disabled, .pat-ss-sentence select:disabled { background: var(--ms-surface-2); color: var(--ms-ink-soft); }
.pat-ss-sentence input[type=number]:not([type=checkbox]):not([type=radio]) { width: 6em; }
/* The inputs of a list table read like the inputs of the form grid (the tables of the Excel and fixed order data cards have no .pat-ib around them). */
.pat-st input:not([type=checkbox]):not([type=radio]), .pat-st select { padding: 4px 8px; border: 1px solid var(--ms-line); border-radius: 6px; font: inherit; color: var(--ms-ink); background: var(--ms-surface); }
.pat-st input:not([type=checkbox]):not([type=radio]):disabled, .pat-st select:disabled { background: var(--ms-surface-2); color: var(--ms-ink-soft); }
/* The sheet choice of an Excel section: the choice and its field(s) in one cell; in a narrow table cell they stack. */
.pat-xr-sheet { flex-wrap: wrap; }
.pat-sg-value .pat-sg-inline.pat-xr-sheet > select { flex: 0 0 auto; width: auto; }
.pat-sg-value .pat-sg-inline.pat-xr-sheet > select + input { margin-top: 0; }
.pat-xr-sheetcell > * + * { margin-top: 3px; }
/* Excel read and fixed order data cards (formerly their own style blocks). */
.pat-xr, .pat-fd { font-size: 12.5px; color: var(--ms-ink); max-width: 960px; }
.pat-ss.pat-xr-edge0, .pat-ss.pat-xr-edge1, .pat-ss.pat-xr-edge2, .pat-ss.pat-xr-edge3 { border-left-width: 4px; }
.pat-xr-edge0 { border-left-color: var(--ms-teal); }
.pat-xr-edge1 { border-left-color: var(--ms-warn-fg); }
.pat-xr-edge2 { border-left-color: var(--ms-ok-fg); }
.pat-xr-edge3 { border-left-color: var(--ms-ink-faint); }
.pat-xr-part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pat-xr-sub, .pat-fd-sub { color: var(--ms-ink-soft); margin: 6px 0 2px; }
.pat-xr-sample { border: 1px dashed var(--ms-line); border-radius: 6px; padding: 8px 10px; background: var(--ms-surface-2); }
/* The file input of the sample box is not in a form row, so it carries the look of the other inputs itself. */
.pat-xr-sample input[type=file] { padding: 4px 8px; border: 1px solid var(--ms-line); border-radius: 6px; font: inherit; color: var(--ms-ink); background: var(--ms-surface); }
.pat-xr-meta { color: var(--ms-ink-soft); margin: 2px 6px; }
.pat-xr-grid-wrap { overflow: auto; max-height: 360px; margin: 6px 0; }
.pat-xr-grid { border-collapse: collapse; font-size: 11.5px; }
.pat-xr-grid th, .pat-xr-grid td { border: 1px solid var(--ms-line); padding: 1px 4px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.pat-xr-grid th { background: var(--ms-surface-2); color: var(--ms-ink-faint); }
.pat-xr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 2px; }
.pat-xr-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.pat-xr-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ms-line); border-radius: 2px; }
.pat-xr-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pat-xr-tab { padding: 3px 10px; border: 1px solid var(--ms-line); border-radius: 6px; background: var(--ms-surface); color: var(--ms-ink); font: inherit; cursor: pointer; }
.pat-xr-tab-active { background: var(--ms-surface-2); font-weight: 600; border-color: var(--ms-teal); }
.pat-xr-s0 { background: var(--ms-ok-bg); }
.pat-xr-s1 { background: var(--ms-warn-bg); }
.pat-xr-s2 { background: var(--ms-bad-bg); }
.pat-xr-s3 { background: var(--ms-surface-2); }
.pat-xr-xml { max-height: 280px; overflow: auto; background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: 6px; padding: 6px; }
.pat-ss.pat-fd-edge { border-left-width: 4px; border-left-color: var(--ms-teal); }
.pat-fd-ok { color: var(--ms-ok-fg); }
.pat-fd-warn { color: var(--ms-warn-fg); }
.pat-fd-faint { color: var(--ms-ink-faint); }

.pat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 51, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.pat-dialog {
    background: var(--ms-surface);
    border-radius: 10px;
    max-width: 560px;
    width: calc(100% - 32px);
    padding: 18px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    color: var(--ms-ink);
}

/* rc.30: a dialog with a Footer (StudioDialog) keeps its header and footer in view and scrolls only the body. */
.pat-dialog.pat-dialog-split {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    padding: 0;
}
.pat-dialog-header { flex: 0 0 auto; padding: 18px 20px 0; }
.pat-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px; }
.pat-dialog-footer { flex: 0 0 auto; padding: 12px 20px 16px; border-top: 1px solid var(--ms-line); background: var(--ms-surface); border-radius: 0 0 10px 10px; }

/* The shell of StudioDialog takes focus (tabindex="-1") so Escape works; no focus ring on the box itself. */
.pat-dialog-overlay:focus, .pat-dialog-overlay > .pat-dialog:focus { outline: none; }

/* The red accept button of a destructive window (DestructivePopupController, UX 23-10): also red when the toolbar is plain. */
.pat-accept-danger, .pat-accept-danger .dxbl-btn, button.pat-accept-danger { background-color: #b42318 !important; border-color: #b42318 !important; color: #fff !important; }

/* The (i) at the top right of a block (CardHelp.razor, UX 23-10): the bubble opens to the left so it stays on screen. */
.pat-card-help { display: flex; justify-content: flex-end; margin: -2px 0 2px; }
.pat-card-help .pat-help-bubble { left: auto; right: -10px; }
.pat-card-help .pat-help-bubble::before { left: auto; right: 14px; }
.pat-sg-notice { margin-top: 4px; }

/* ── Field help / teaching bubble (FieldHelp.razor, 2026-09-17) ─────────────────────────────
   Shared here, not in the component, because a form renders many instances. The bubble opens
   under the (i) button; the transparent catcher closes it on any outside click. */
.pat-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.pat-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ms-ink-faint);
    cursor: help;
}
.pat-help-btn:hover,
.pat-help-btn[aria-expanded="true"] {
    color: var(--ms-teal);
    background: var(--ms-teal-soft);
}
.pat-help-btn:focus-visible {
    outline: 2px solid var(--ms-orange);
    outline-offset: 1px;
}
.pat-help-catcher {
    position: fixed;
    inset: 0;
    z-index: 1090;
    cursor: default;
}
.pat-help-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: -10px;
    z-index: 1091;
    display: block;
    width: min(320px, 80vw);
    padding: 10px 12px 11px;
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-teal);
    border-radius: 8px;
    background: var(--ms-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    color: var(--ms-ink);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    cursor: default;
}
/* Small pointer toward the (i) button. */
.pat-help-bubble::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    width: 10px;
    height: 10px;
    background: var(--ms-surface);
    border-left: 1px solid var(--ms-line);
    border-top: 1px solid var(--ms-line);
    transform: rotate(45deg);
}
.pat-help-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.pat-help-title {
    font-weight: 600;
    color: var(--ms-teal);
}
.pat-help-text {
    display: block;
    color: var(--ms-ink-soft);
}
.pat-help-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--ms-ink-faint);
    cursor: pointer;
}
.pat-help-close:hover { color: var(--ms-ink); background: var(--ms-surface-2); }
.pat-help-close:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 1px; }


/* RC2-R4: a read-only text shown as plain, readable text in the font of the page, in short paragraphs:
   the text of the full-reset window was a fixed-width, resizable input field (aanbevelingen 24-09, 5.41 n). */
.pat-plain-text {
    white-space: pre-line;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    color: var(--ms-ink, inherit);
    max-width: 60rem;
}

/* The folder test run (rc.43, M1.1a): the progress banner at the top of the studio, and the few rules of its panel. The rest of the
   panel reuses the pat-fv-trial classes of the version screen and the pat-sg form. */
.pat-ft-banner { background: var(--ms-teal-soft); color: var(--ms-teal); border: 1px solid var(--ms-line); border-radius: 6px; padding: 6px 10px; margin: 0 0 8px; font-size: 12.5px; }
.pat-ft .pat-sg-hint { overflow-wrap: anywhere; }
.pat-ft-preview { display: flex; flex-direction: column; gap: 2px; }
.pat-ft-progress { margin: 8px 0; }
.pat-ft-list { margin-top: 14px; }
.pat-ft-wrap { overflow-wrap: anywhere; }
.pat-in-wrap { overflow-wrap: anywhere; }
.pat-in-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pat-in-pager { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.pat-in-download { display: flex; align-items: center; gap: 10px; margin: 8px 0; }

/* The band that says which database the user works in (plan M1.2, D20, spec 15.1); only with several databases. */
.pat-databank-band { padding: 2px 16px; font-size: 0.85rem; color: #fff; }
.pat-databank-band--local-fixed { background: #4b5563; }
.pat-databank-band--dev-fixed { background: #c2410c; }
.pat-databank-band--production { background: #b91c1c; }
.pat-databank-band--test { background: #1d4ed8; }
/* The same colour as a small block in the table of the screen Databanken. */
.pat-databank-swatch { display: inline-block; width: 28px; height: 14px; padding: 0; border-radius: 3px; vertical-align: middle; }
.pat-databanken-access { margin: 14px 0; }

/* Route editor: steps per environment (M1.4, task 9; M1.4b task 27: the other environments as rows under the designer)
   The designer is the route of the environment of this installation, in colour. Under it, one row per ticked environment with the same
   columns (D21): Same is very faint, Differs has a clear orange edge, Missing and Extra a clear dashed edge, Empty a faint dashed place.
   A cell of another row is disabled (D16). The kind is never told by colour alone: a cell has an icon of StudioIcons and a title.
   Colours come from the --pat-* palette only (ColorTokenContrastTests checks the pairs). */
.pat-re-envbanner { background: var(--pat-status-attn-bg); color: var(--pat-status-attn-fg); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.pat-re-env-setup { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }

.pat-env-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; font-size: 13px; color: var(--pat-ink); }
.pat-env-switch, .pat-env-tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pat-env-switch { font-weight: 600; }
.pat-env-here, .pat-env-row-head { font-size: 12px; font-weight: 600; color: var(--pat-ink-soft); margin: 2px 0 6px; }
.pat-env-row-head { margin-top: 12px; }

/* Without a ticked row the wrapper changes nothing (rc.46); with one, the chain and the rows scroll together and share the column widths. */
.pat-env-plain { display: contents; }
.pat-env-block { --pat-env-cell-w: 180px; --pat-env-link-w: 44px; overflow: auto; max-height: 70vh; background: var(--pat-neutral-50); border: 1px solid var(--pat-line); border-radius: 10px; padding: 14px; }
.pat-env-block > .pat-re-chain { background: transparent; border: 0; padding: 0; overflow: visible; max-height: none; width: max-content; }
.pat-env-aligned .pat-re-node { flex: 0 0 var(--pat-env-cell-w); width: var(--pat-env-cell-w); min-width: 0; max-width: none; box-sizing: border-box; }
.pat-env-aligned .pat-re-connector { flex: 0 0 var(--pat-env-link-w); width: var(--pat-env-link-w); justify-content: center; padding: 0; box-sizing: border-box; }
.pat-env-row-cells { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 6px; width: max-content; }
.pat-env-link { flex: 0 0 var(--pat-env-link-w); }
.pat-env-cell { flex: 0 0 var(--pat-env-cell-w); width: var(--pat-env-cell-w); box-sizing: border-box; min-height: 40px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: not-allowed; overflow: hidden; }
.pat-env-cell-icon { display: inline-flex; flex: none; }
.pat-env-cell-text { min-width: 0; overflow-wrap: anywhere; }
.pat-env-same { background: var(--pat-surface); color: var(--pat-ink-soft); border: 1px solid var(--pat-line); opacity: 0.25; }
.pat-env-differs { background: var(--pat-amber-50); color: var(--pat-ink); border: 2px solid var(--pat-orange-600); }
.pat-env-missing { background: var(--pat-surface); color: var(--pat-ink-soft); border: 2px dashed var(--pat-ink-soft); }
.pat-env-extra { background: var(--pat-teal-50); color: var(--pat-teal); border: 2px dashed var(--pat-teal); }
.pat-env-empty { background: transparent; border: 1px dashed var(--pat-line); opacity: 0.6; }

/* The own row: a step that does not exist here keeps its place, and the marks of what is different here. */
.pat-env-gap-card { cursor: default; background: var(--pat-surface); color: var(--pat-ink-soft); border: 1.5px dashed var(--pat-ink-soft); }
.pat-env-gap-card .pat-re-node-kind, .pat-env-gap-card .pat-re-node-text { color: var(--pat-ink-soft); }
.pat-env-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pat-env-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; line-height: 1.3; padding: 1px 6px; border-radius: 999px; border: 1px solid transparent; }
.pat-env-badge-icon, .pat-env-apart-icon { display: inline-flex; flex: none; }
.pat-env-badge-stop { background: var(--pat-status-failed-bg); color: var(--pat-status-failed-fg); }
.pat-env-badge-skip { background: repeating-linear-gradient(135deg, var(--pat-neutral-50) 0 4px, var(--pat-surface) 4px 8px); color: var(--pat-neutral-700); }
.pat-env-badge-notreached { background: var(--pat-surface); color: var(--pat-ink-soft); border: 1px dashed var(--pat-line); }
.pat-env-badge-apart { background: var(--pat-status-attn-bg); color: var(--pat-status-attn-fg); }
.pat-env-badge-only { background: var(--pat-status-busy-bg); color: var(--pat-status-busy-fg); }

/* The part of the detail panel of a step that sets what is different in this environment. */
.pat-env-settings { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; padding: 10px 12px; max-width: 760px; background: var(--pat-neutral-50); border: 1px solid var(--pat-line); border-radius: 8px; color: var(--pat-ink); font-size: 13px; }
.pat-env-menu { display: flex; flex-direction: column; gap: 6px; }
.pat-env-menu-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pat-env-option { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pat-env-option-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pat-env-option-off, .pat-env-option-off .pat-env-option-label { color: var(--pat-ink-soft); cursor: not-allowed; }
.pat-env-field { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--pat-line); }
.pat-env-field-name { font-weight: 600; }
.pat-env-field-shared, .pat-env-field-apart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pat-env-field-label { color: var(--pat-ink-soft); min-width: 150px; }
.pat-env-field-value { overflow-wrap: anywhere; }
.pat-env-input { flex: 1 1 240px; min-width: 200px; }
.pat-env-btn { padding: 2px 8px; font-size: 12px; }
.pat-env-apart-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--pat-ink-soft); }
.pat-env-unreadable { display: inline-flex; color: var(--pat-red-700); }

/* Non-blocking busy status of the flow studio (StudioBusyButton, StudioBusyNotice): a small spinner inside the button of a running
   action, and the short notice after it. */
.pat-busy-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    box-sizing: border-box;
    border: 2px solid var(--ms-line);
    border-top-color: var(--ms-teal);
    border-radius: 50%;
    animation: pat-busy-spin 0.8s linear infinite;
    flex: none;
}
@keyframes pat-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pat-busy-spinner { animation-duration: 2.4s; } }
.pat-busy-notice { align-self: center; font-size: 13px; color: var(--ms-ink-soft); }

/* The check and the cross in front of an attachment of the report per file, and the repeat mark of a sample line in the
   flow wizard (StudioIcons instead of Unicode glyphs, icons and colour 23-10). */
.pat-fr-match { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.pat-fr-match-ok { color: var(--pat-green-700); }
.pat-fr-match-bad { color: var(--pat-red-700); }
.pat-fw-repeat { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--pat-teal); }

/* The card of "Inhoud controleren", part 1 (snede 2, T15): the reference document and its structure. The document and the structure stand left and the controls
   (T16) right when the panel is wide enough; under about 640px of card they follow below. The place of the controls takes no room while it is empty. */
.pat-cc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 4px 20px; align-items: start; }
.pat-cc-split > * { min-width: 0; }
.pat-cc-controls:empty { display: none; }
/* The drop zone is the file input itself, laid over a dashed box: a click anywhere opens the picker, a dropped file is chosen by the browser, and the keyboard reaches
   the real input. The visible "Kies een bestand" is only the look of it. */
.pat-cc-drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; border: 1px dashed var(--ms-line); border-radius: 8px; background: var(--ms-surface-2); }
.pat-cc-drop:focus-within { outline: 2px solid var(--ms-orange); outline-offset: 1px; }
.pat-cc-drop-busy { opacity: 0.8; }
.pat-cc-drop-text { color: var(--ms-ink-faint); font-size: 12px; }
.pat-cc-drop .pat-cc-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.pat-cc-drop .pat-cc-drop-input:disabled { cursor: progress; }
.pat-cc-file { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0; overflow-wrap: anywhere; }
.pat-cc-fname { font-family: var(--ms-mono, monospace); font-size: 12px; }
.pat-cc-meta { color: var(--ms-ink-faint); font-size: 12px; }
.pat-cc-missing { color: var(--ms-warn-fg); background: var(--ms-warn-bg); border-radius: 6px; padding: 3px 8px; }
.pat-cc-remove { margin-left: auto; padding-left: 6px; padding-right: 6px; }
.pat-cc-structure-head { flex-wrap: wrap; }
.pat-cc-grow { flex: 1 1 auto; }
.pat-cc-chosen { font-weight: 400; color: var(--ms-ink-soft); font-size: 12px; }
.pat-cc-link { border: 0; background: none; padding: 0; color: var(--pat-teal); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; font-weight: 400; }
.pat-cc-link:focus-visible, .pat-cc-fold:focus-visible, .pat-cc-tree input:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 1px; }
.pat-cc-none, .pat-cc-loading { color: var(--ms-ink-faint); font-size: 12px; padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.pat-cc-tree { max-height: 480px; overflow: auto; border: 1px solid var(--ms-line); border-radius: 8px; padding: 6px 8px; background: var(--ms-surface); }
.pat-cc-tree ul { list-style: none; margin: 0; padding-left: 16px; }
.pat-cc-tree > ul { padding-left: 0; }
.pat-cc-row { display: flex; align-items: center; gap: 5px; padding: 1px 0; min-width: 0; }
.pat-cc-row .pat-cc-name { cursor: pointer; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; font-family: var(--ms-mono, monospace); }
.pat-cc-name-attr { color: var(--pat-orange-700); }
.pat-cc-name-special { font-style: italic; font-family: inherit; color: var(--ms-ink-soft); }
.pat-cc-rep, .pat-cc-count { font-size: 11px; color: var(--ms-ink-faint); white-space: nowrap; }
.pat-cc-fold { border: 0; background: none; width: 16px; height: 16px; padding: 0; cursor: pointer; color: var(--ms-ink-faint); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.pat-cc-fold-none { cursor: default; }
.pat-cc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--pat-neutral-500); }
.pat-cc-dot-ok { background: var(--pat-green-700); }
.pat-cc-dot-bad { background: var(--pat-red-700); }

/* The card of "Inhoud controleren", part 2 (snede 2, T16): the block Nieuwe controle, the table Controles with its outcome, and the test with another file. The controls stand right of the
   document and the structure on a wide screen (twice as wide, the table needs the room) and below them on a narrow one; the table scrolls sideways inside its own box, never the panel. */
@media (min-width: 1100px) { .pat-cc-split { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); } }
.pat-cc-controls { --pat-label-w: 150px; min-width: 0; }
.pat-cc-ctl { min-width: 0; }
/* The visible "Test met een ander bestand" is only the look of the file input laid over it (as for the reference document): a click goes through to the input. */
.pat-cc-drop-btn { pointer-events: none; }
.pat-cc-ctl .pat-st { min-width: 940px; }
.pat-cc-faint { color: var(--ms-ink-faint); font-size: 12px; }
.pat-cc-edit { border: 1px solid var(--ms-line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 4px; background: var(--ms-surface-2); }
.pat-cc-edit-title { font-weight: 600; margin-bottom: 4px; }
.pat-cc-edit .pat-sg { max-width: none; }
.pat-cc-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pat-cc-chip { display: inline-flex; align-items: center; gap: 3px; font-family: var(--ms-mono, monospace); font-size: 11.5px; background: var(--pat-teal-50); color: var(--pat-teal); border-radius: 999px; padding: 1px 3px 1px 8px; overflow-wrap: anywhere; }
.pat-cc-chip-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 3px; display: inline-flex; align-items: center; }
.pat-cc-chip-x:disabled { cursor: default; opacity: 0.5; }
.pat-cc-chip-x:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 1px; border-radius: 50%; }
.pat-cc-mono { font-family: var(--ms-mono, monospace); font-size: 11.5px; color: var(--ms-ink-faint); margin-top: 3px; overflow-wrap: anywhere; }
.pat-cc-vals { display: flex; flex-wrap: wrap; gap: 2px 14px; max-height: 150px; overflow: auto; padding: 4px 6px; border: 1px solid var(--ms-line); border-radius: 6px; background: var(--ms-surface); }
.pat-cc-vals label, .pat-cc-plist label { display: inline-flex; gap: 5px; align-items: baseline; font-size: 12.5px; overflow-wrap: anywhere; }
.pat-cc-vals input:focus-visible, .pat-cc-plist input:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 1px; }
.pat-cc-valbtns { display: flex; gap: 12px; margin-top: 4px; }
.pat-cc-plist { display: grid; gap: 3px; padding-top: 2px; }
.pat-cc-problem { font-size: 12px; color: var(--ms-warn-fg); background: var(--ms-warn-bg); border-radius: 6px; padding: 4px 10px; margin: 6px 0 0; }
.pat-cc-edit-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.pat-cc-primary { background: var(--ms-teal); border-color: var(--ms-teal); color: #fff; }
.pat-cc-primary:hover:where(:not(:disabled)) { color: #fff; border-color: var(--ms-teal); filter: brightness(1.08); }
.pat-cc-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.pat-cc-sumline { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 4px 0; }
.pat-cc-line { font-size: 12.5px; border-radius: 6px; padding: 6px 10px; margin: 4px 0; display: flex; gap: 6px; align-items: flex-start; }
.pat-cc-sumline .pat-cc-line { margin: 0; }
.pat-cc-line-ok { color: var(--ms-ok-fg); background: var(--ms-ok-bg); }
.pat-cc-line-warn { color: var(--ms-warn-fg); background: var(--ms-warn-bg); }
.pat-cc-line-bad { color: var(--ms-bad-fg); background: var(--ms-bad-bg); }
.pat-cc-ctl .pat-st td { vertical-align: top; }
.pat-cc-ctl .pat-st td.pat-st-actions { white-space: nowrap; text-align: right; }
.pat-cc-cell-fields { overflow-wrap: anywhere; }
.pat-cc-editing > td { background: var(--pat-orange-50); }
.pat-cc-det > td { background: var(--ms-surface-2); padding: 4px 8px 6px 28px; }
.pat-cc-fres { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 12px; padding: 2px 0; overflow-wrap: anywhere; }
.pat-cc-fres .pat-cc-dot { align-self: center; }

/* The pattern window of Inhoud controleren (snede 2, T17): the list, the form and the buttons that open it. */
.pat-dialog.pat-pl-dialog { max-width: 760px; }
.pat-pl-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.pat-pl-table .pat-pl-name { overflow-wrap: anywhere; }
.pat-pl-table .pat-pl-expr { font-family: var(--ms-mono, monospace); font-size: 12px; overflow-wrap: anywhere; }
.pat-pl-remove { padding-left: 6px; padding-right: 6px; }
.pat-pl-remove:disabled { opacity: 0.45; cursor: not-allowed; }
.pat-pl-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 6px; margin-top: 10px; align-items: start; }
.pat-pl-add input { width: 100%; box-sizing: border-box; min-width: 0; }
.pat-pl-add .pat-pl-expr-input { font-family: var(--ms-mono, monospace); font-size: 12.5px; }
.pat-pl-add input[aria-invalid="true"] { border-color: var(--pat-red-700); }
.pat-pl-add input:focus-visible, .pat-pl-open:focus-visible, .pat-pl-close:focus-visible, .pat-pl-add-btn:focus-visible, .pat-pl-remove:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 1px; }
.pat-pl-problem { margin-top: 6px; max-width: none; }
.pat-pl-notice { min-height: 22px; margin: 6px 0 8px; }
.pat-pl-actions { display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .pat-pl-add { grid-template-columns: minmax(0, 1fr); } }
.pat-cc-fpath { font-family: var(--ms-mono, monospace); font-size: 11.5px; overflow-wrap: anywhere; }
.pat-cc-okt { color: var(--ms-ok-fg); font-weight: 600; }
.pat-cc-badt { color: var(--ms-bad-fg); font-weight: 600; }
.pat-cc-fails { list-style: none; margin: 0; padding: 0 0 0 4px; flex: 1 1 100%; }
.pat-cc-fails li { padding: 1px 0; overflow-wrap: anywhere; }
.pat-cc-where { color: var(--ms-ink-soft); }
.pat-cc-val { font-family: var(--ms-mono, monospace); }
.pat-cc-reason { color: var(--ms-ink-soft); }
.pat-cc-testhead { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 10px 0 2px; overflow-wrap: anywhere; }
.pat-cc-primary:focus-visible, .pat-cc-ctl button:focus-visible, .pat-cc-ctl select:focus-visible, .pat-cc-ctl input:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .pat-cc-primary:hover:where(:not(:disabled)) { filter: none; } }