/* Copyright (c) 2026 Irixs B.V.
 *
 * Irixs huisstijl, vertaald naar de ConneXtorStudio. De tokens en componenten volgen het
 * Irixs UI Brand Book; wat daar niet in staat is layout, geen nieuw componenttype.
 *
 * Indeling:
 *   1  Tokens
 *   2  Basis en typografie
 *   3  Navigatie en paginakop
 *   4  Knoppen
 *   5  Formulieren
 *   6  Tabellen
 *   7  Meldingen, badges en panelen
 *   8  Laden en leegte
 *   9  Modals
 *  10  Mapping-editor (componenten uit Irixs.Mapping.Components)
 *  11  Proefdraai
 */

/* ─────────────────────────────────────────────────────────────── 1  Tokens ── */

:root {
    /* Oppervlakken */
    --paper: #FAF7F2;
    --cream: #F2EBDD;
    --tan: #E5D8C2;
    --white: #FFFFFF;

    /* Tekst */
    --ink: #1A0E22;
    --ink-soft: #3A2E45;
    --muted: #6E6878;

    /* Merk */
    --purple: #340C46;
    --purple-light: #46235A;
    --purple-mid: #7D2776;
    --purple-deep: #1B0626;

    /* Accent */
    --yellow: #FDB940;
    --yellow-soft: #FDE2A8;
    --yellow-deep: #A06200;
    --cyan: #0081BD;
    --orange: #F68C3D;
    --pink: #C64B9B;

    /* Status */
    --success: #1A7F4B;
    --success-soft: #D1FAE5;
    --warning: #A06200;
    --warning-soft: #FDE2A8;
    --danger: #B91C1C;
    --danger-soft: #FEE2E2;
    --info: #0081BD;
    --info-soft: #DBEAFE;

    /* Structuur */
    --rule: rgba(52, 12, 70, .14);
    --rule-soft: rgba(52, 12, 70, .07);
    --rule-focus: rgba(52, 12, 70, .55);

    /* Animatie */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* Schaduw */
    --shadow-sm: 0 1px 3px rgba(52, 12, 70, .08), 0 1px 2px rgba(52, 12, 70, .06);
    --shadow-md: 0 4px 12px rgba(52, 12, 70, .10), 0 2px 6px rgba(52, 12, 70, .07);
    --shadow-lg: 0 12px 32px rgba(52, 12, 70, .14), 0 4px 12px rgba(52, 12, 70, .08);
}

/* ──────────────────────────────────────────────── 2  Basis en typografie ── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
}

:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

h1 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
}

h2 {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
}

h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.01em;
}

p {
    color: var(--ink-soft);
}

p + p,
p + table,
p + .table-wrap,
p + ul {
    margin-top: var(--space-3);
}

strong {
    font-weight: 600;
    color: var(--ink);
}

a {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

code,
pre {
    font-family: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
    font-variant-ligatures: none;
}

code {
    font-size: .875em;
    background: var(--cream);
    color: var(--purple);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

pre {
    font-size: 12.5px;
    line-height: 1.55;
    background: var(--purple-deep);
    color: var(--paper);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    tab-size: 2;
}

pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Hulptekst onder een kop: waarom deze stap er is, of waar een conclusie op steunt. */
.page-subtitle {
    font-size: 15px;
    color: var(--ink-soft);
    max-width: 78ch;
    margin-top: var(--space-2);
}

.text-hint {
    font-size: 13.5px;
    color: var(--muted);
    max-width: 78ch;
}

.text-muted {
    color: var(--muted);
    font-weight: 400;
}

/* Zachte bijschriften naast een kop: aantallen, statussen, herkomst. */
h1 .text-muted,
h2 .text-muted,
h3 .text-muted {
    font-size: 14px;
    letter-spacing: 0;
}

.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--purple);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-2);
}

.eyebrow::before {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--purple);
}

.accent-bar {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--yellow), var(--purple-mid));
    margin: var(--space-3) 0 var(--space-5);
}

/* ────────────────────────────────────────── 3  Navigatie en paginakop ── */

.topnav {
    height: 60px;
    background: var(--purple-deep);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    gap: var(--space-6);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(250, 247, 242, .1);
}

/* Het merk van de Studio: beeldmerk plus naam, samen één klikbaar geheel naar je projecten. */
.topnav-lockup {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--paper);
}

.topnav-lockup:hover {
    text-decoration: none;
}

/* De markering neemt currentColor over, dus wit op de donkere balk en paars op papier. */
.mark {
    width: 30px;
    height: 30px;
    display: block;
    flex-shrink: 0;
}

.topnav-names {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.topnav-by {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--yellow);
    opacity: .85;
}

/* Op het aanmeldscherm: het officiële Irixs-logo, diap, op de voorgeschreven hoogte. */
.signin-by {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-12);
    font-size: 13px;
    color: var(--muted);
}

.signin-by img {
    height: 22px;
    width: auto;

    /* Het diap-logo is wit en zou op papier verdwijnen; hier staat het op het merkpaars. */
    background: var(--purple-deep);
    padding: 6px 10px;
    border-radius: var(--radius-md);
}

.topnav-brand {
    font-size: 15px;
    font-weight: 600;
    color: var(--paper);
    letter-spacing: -.01em;
    white-space: nowrap;

}

.topnav-links {
    display: flex;
    gap: var(--space-1);
}

.topnav-link {
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: rgba(250, 247, 242, .75);
    text-decoration: none;
    transition: all .15s var(--ease);
}

.topnav-link:hover {
    color: var(--paper);
    background: rgba(250, 247, 242, .1);
    text-decoration: none;
}

.topnav-link.active {
    color: var(--yellow);
    background: rgba(253, 185, 64, .12);
}

.topnav-link:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

/* Waar je nu bent: wel leesbaar, niet klikbaar. */
.topnav-link.current {
    color: var(--paper);
    cursor: default;
}

/* Scheidingsteken in het kruimelpad. Zachter dan de links zelf: het is leesteken, geen navigatie. */
.topnav-sep {
    color: rgba(250, 247, 242, .35);
    font-size: 13px;
    align-self: center;
}

/* Rechts in de balk: wie er is ingelogd, en of dat een beheerder is. */
.topnav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.topnav-user {
    font-size: 13px;
    font-weight: 500;
    color: rgba(250, 247, 242, .78);
}

/* ── De schil: zijbalk links, inhoud over de rest ────────────────────────────────────────────────── */

.app-shell {
    display: grid;
    grid-template-columns: 224px 1fr;
    align-items: start;
    min-height: calc(100vh - 60px);
}

.app-shell.collapsed {
    grid-template-columns: 60px 1fr;
}

/* De volle breedte, want de mapping-editor is drie kolommen naast elkaar: elke pixel die naar een marge
   gaat, gaat van het voorbeeld af. */
.app-content {
    padding: var(--space-8) var(--space-6) var(--space-16);
    min-width: 0;
}

.sidebar {
    position: sticky;
    top: 60px;
    align-self: stretch;
    height: calc(100vh - 60px);
    background: var(--paper);
    border-right: 1px solid var(--rule);
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    overflow: hidden;
}

.sidebar-toggle {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    display: flex;
}

.sidebar-toggle:hover { background: var(--cream); color: var(--ink); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }

.sidebar-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.sidebar-item:hover { background: var(--cream); color: var(--ink); }

.sidebar-item.active {
    background: rgba(52, 12, 70, .08);
    color: var(--purple);
    font-weight: 600;
}

.sidebar-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--yellow);
    border-radius: 0 2px 2px 0;
}

.sidebar-item:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }

.sidebar-item svg { flex-shrink: 0; }

/* Ingeklapt blijft alleen het icoon over; de tekst verdwijnt in plaats van af te kappen, want een half
   woord leest slechter dan geen woord — de titel op het element vertelt de rest. */
.collapsed .sidebar-label { display: none; }
.collapsed .sidebar-item { justify-content: center; padding-inline: 0; }

/* Op een smal scherm is 224px een kwart van het venster. Daar staat de zijbalk dus altijd ingeklapt,
   wat de gebruiker ook koos. */
@media (max-width: 900px) {
    .app-shell,
    .app-shell.collapsed { grid-template-columns: 56px 1fr; }

    .sidebar-label { display: none; }
    .sidebar-item { justify-content: center; padding-inline: 0; }
    .app-content { padding-inline: var(--space-4); }
}

/* Zoeken en filteren boven een lijst: één rij die afbreekt zodra hij niet meer past. */
.filter-bar {
    margin-bottom: var(--space-4);
    align-items: center;
}

.project-meta {
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.project-meta .form-label { margin-bottom: 0; }

.page-header {
    margin-bottom: var(--space-6);
}

/* Tabbladen binnen een pagina: de onderdelen van één project. */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-6);

    /* De y-as expliciet dicht. De tabbladen steken met margin-bottom: -1px één pixel onder de rand uit, en
       bij overflow-x: auto zet de browser de andere as ook op auto — dus tekende hij voor die ene pixel een
       verticale scrollbalk, op Windows met pijltjes en al. */
    overflow-x: auto;
    overflow-y: hidden;
}

.tab {
    padding: 10px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s var(--ease);
}

.tab:hover {
    color: var(--ink);
}

.tab.active {
    color: var(--purple);
    font-weight: 600;
    border-bottom-color: var(--purple);
}

.tab:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: -2px;
}

/* Het aantal naast een tabbladnaam. */
.tab .text-muted {
    margin-left: var(--space-2);
}

/* Compacte variant: twee of drie gelijkwaardige keuzes binnen één paneel. */
.tabs-pill {
    display: inline-flex;
    gap: var(--space-2);
    padding: var(--space-1);
    background: var(--cream);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.tab-pill {
    padding: 7px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s var(--ease);
}

.tab-pill:hover {
    color: var(--ink-soft);
}

.tab-pill.active {
    background: var(--white);
    color: var(--purple);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.tab-pill:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────── 4  Knoppen ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: all .2s var(--ease);
}

.btn-primary {
    background: var(--purple);
    color: var(--paper);
}

.btn-primary:hover {
    background: var(--purple-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-primary:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}

.btn-accent {
    background: var(--yellow);
    color: var(--purple-deep);
}

.btn-accent:hover {
    background: #FFC84A;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-accent:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 3px;
}

.btn-secondary {
    background: transparent;
    color: var(--purple);
    border: 1.5px solid var(--purple);
}

.btn-secondary:hover {
    background: var(--cream);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
}

.btn-ghost:hover {
    background: var(--cream);
    border-color: var(--tan);
    color: var(--ink);
}

.btn-danger {
    background: var(--danger);
    color: var(--paper);
}

.btn-danger:hover {
    background: #991B1B;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
}

.btn-lg {
    padding: 13px 28px;
    font-size: 15px;
}

.btn-icon {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    aspect-ratio: 1;
}

.btn-icon.btn-sm {
    padding: 6px;
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────── 5  Formulieren ── */

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.form-label .required {
    color: var(--danger);
    margin-left: 3px;
}

.form-field + .form-field {
    margin-top: var(--space-4);
}

.form-control {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid var(--tan);
    border-radius: var(--radius-md);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--white);
    line-height: 1.5;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.form-control::placeholder {
    color: var(--muted);
    font-weight: 300;
}

.form-control:hover {
    border-color: var(--purple-mid);
}

.form-control:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(52, 12, 70, .12);
}

.form-control:disabled {
    background: var(--cream);
    color: var(--muted);
    cursor: not-allowed;
    opacity: .7;
}

.form-control.is-error {
    border-color: var(--danger);
}

.form-control.is-valid {
    border-color: var(--success);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
    min-height: 4.5rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    margin-top: var(--space-3);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--purple);
    cursor: pointer;
    flex-shrink: 0;
}

.form-check-label {
    font-size: 14px;
    color: var(--ink-soft);
}

.form-hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
}

.form-error {
    font-size: 12px;
    color: var(--danger);
    margin-top: 5px;
    font-weight: 500;
}

/* Bestandskiezer. Blazor's InputFile is een gewone file-input; de knop erin is niet
   los te stylen, dus het geheel krijgt de vorm van een invoerveld. */
input[type="file"] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--ink-soft);
    background: var(--white);
    border: 1.5px dashed var(--tan);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    max-width: 560px;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

input[type="file"]:hover {
    border-color: var(--purple-mid);
    background: var(--cream);
}

input[type="file"]::file-selector-button {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
    background: var(--purple);
    border: none;
    border-radius: var(--radius-md);
    padding: 7px 16px;
    margin-right: var(--space-3);
    cursor: pointer;
    transition: background .15s var(--ease);
}

input[type="file"]::file-selector-button:hover {
    background: var(--purple-light);
}

/* ─────────────────────────────────────────────────────────── 6  Tabellen ── */

.table-wrap {
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Brede voorbeeldtabellen mogen zelf schuiven; de pagina niet. */
.table-wrap.scrollable {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--white);
}

.data-table thead {
    background: var(--cream);
}

.data-table th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

.data-table td {
    padding: 11px 16px;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule-soft);
    line-height: 1.5;
    vertical-align: top;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr {
    transition: background .1s var(--ease);
}

.data-table tbody tr:hover {
    background: var(--cream);
}

.data-table td.num,
.data-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* De type-keuze in een tabelkop. Klein en zonder hoofdletters, want het is een correctie op een
   conclusie en niet de kop zelf. */
.data-table th .column-type {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 2px 6px;
    margin-top: 4px;
    width: auto;
    min-width: 110px;
}

/* Waar een cel de onderbouwing draagt, mag die wijken voor de waarde ernaast. */
.data-table td.text-muted {
    color: var(--muted);
    font-size: 13px;
}

/* ────────────────────────────────── 7  Meldingen, badges en panelen ── */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.5;
}

.alert-info {
    background: var(--info-soft);
    border-color: var(--info);
    color: #1E3A5F;
}

.alert-success {
    background: var(--success-soft);
    border-color: var(--success);
    color: #065F46;
}

.alert-warning {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: #7C4A00;
}

.alert-danger {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: #7F1D1D;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.alert-body {
    font-size: 13.5px;
    opacity: .85;
}

/* Puntenlijst: elk item een plek waar het stil mis kan gaan. Geen bolletjes —
   de rand links draagt de lading, net als bij een alert. */
.notice-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.notice-list li {
    background: var(--warning-soft);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #7C4A00;
}

.notice-list.errors li {
    background: var(--danger-soft);
    border-left-color: var(--danger);
    color: #7F1D1D;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.badge-default {
    background: var(--cream);
    color: var(--ink-soft);
}

.badge-brand {
    background: rgba(52, 12, 70, .1);
    color: var(--purple);
}

.badge-accent {
    background: var(--yellow-soft);
    color: var(--yellow-deep);
}

.badge-success {
    background: var(--success-soft);
    color: var(--success);
}

.badge-warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.badge-info {
    background: var(--info-soft);
    color: var(--info);
}

.badge-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Vrij veld in de doelboom — komt uit Irixs.Mapping.Components. */
.badge-free-field {
    background: var(--yellow-soft);
    color: var(--yellow-deep);
}

/* Gekozen waarden die je stuk voor stuk weer weg kunt halen: sleutelvelden, bijlagen. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.label-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    background: var(--white);
}

.label-pill.selected {
    background: var(--purple);
    color: var(--paper);
    border-color: var(--purple);
}

.chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(250, 247, 242, .18);
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s var(--ease);
}

.chip-remove:hover {
    background: rgba(250, 247, 242, .35);
}

.chip-remove:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.panel {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.panel-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Eén plek voor opslaan: bovenaan, en hij blijft daar staan terwijl je door een lang formulier scrolt.
   De verbindingsformulieren hadden hun knop onderaan het paneel, de stap- en koppelingeditor bovenaan — dat
   verschil kostte iedereen die zo'n formulier invulde een zoektocht. `overflow: hidden` op .panel maakt
   sticky binnen een paneel onmogelijk, dus staat dat hier uit; hierin zit een formulier en geen tabel die
   tegen de afgeronde hoek aanloopt, dus dat kost verder niets. */
.panel.form-panel {
    overflow: visible;
}

.panel.form-panel > .panel-header {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: var(--white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    margin: 0;
}

.panel-body {
    padding: var(--space-5);
}

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.toolbar .badge {
    margin-left: var(--space-2);
}

/* Blijft in beeld terwijl je door een lange stap scrolt: opslaan moet bereikbaar zijn op het moment dat
   je merkt dat er iets mis is, niet pas nadat je terug naar boven bent. */
.toolbar.sticky {
    position: sticky;
    top: 60px;
    z-index: 50;
    padding: var(--space-3) 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-soft);
}

/* ──────────────────────────────────────────────── 8  Laden en leegte ── */

.spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid var(--tan);
    border-top-color: var(--purple);
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 14px;
    color: var(--muted);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--muted);
    font-size: 24px;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.empty-state-body {
    font-size: 14px;
    color: var(--muted);
    max-width: 44ch;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ───────────────────────────────────────────────────────── 9  Modals ── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 6, 38, .55);
    display: grid;
    place-items: center;
    z-index: 8000;
    animation: fade-in .2s var(--ease);
}

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(620px, calc(100vw - 48px));
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    animation: modal-in .25s var(--ease-out);
}

.modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    transition: color .15s var(--ease);
}

.modal-close:hover {
    color: var(--ink);
    background: var(--cream);
}

.modal-body {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(.96) translateY(-8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ────────────────────────────────────────────── 10  Mapping-editor ── */

/* Twee kolommen: links waar naartoe geschreven wordt, rechts hoe die ene waarde
   ontstaat. Ze horen naast elkaar te staan — je leest de mapping van links naar rechts. */
.editor {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 1100px) {
    .editor {
        grid-template-columns: 1fr;
    }
}

.editor > .panel {
    max-height: min(70vh, 720px);
    display: flex;
    flex-direction: column;
}

.editor > .panel > .panel-body {
    overflow-y: auto;
}

/* Drie kolommen in de leesrichting van een mapping: waar het uit komt, wat ermee gebeurt,
   wat er uitkomt. Onder 1200px zijn ze niet meer leesbaar en stapelen ze. */
.editor-grid {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 1.6fr) minmax(280px, 1.1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1200px) {
    .editor-grid {
        grid-template-columns: 1fr;
    }
}

.pane {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pane-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Een tweede kop binnen dezelfde kolom: streep erboven, want er eindigt iets. */
.pane-head-split {
    border-top: 1px solid var(--rule);
}

.pane-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 1;
}

.pane-body {
    padding: var(--space-4);
}

.pane-body-flush {
    padding: 0;
}

.pane-body-tight {
    padding: var(--space-3) var(--space-4);
}

/* Bronkolommen: klikbaar, want een klik zet de kolom op het gekozen doelveld. */
.column-list {
    display: flex;
    flex-direction: column;
    max-height: 44vh;
    overflow-y: auto;
}

.column-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 7px 16px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--ink);
    cursor: grab;
    border-bottom: 1px solid var(--rule-soft);
}

.column-item:hover {
    background: var(--cream);
}

.column-name {
    flex: 1;
    overflow-wrap: anywhere;
}

.column-type {
    font-size: 10.5px;
    color: var(--muted);
}

.column-sample {
    font-size: 11px;
    color: var(--muted);
    overflow-wrap: anywhere;
    max-width: 45%;
    text-align: right;
}

.group-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Laatste kolom van een tabel: de knop hoort aan het eind van de rij, niet ertegenaan. */
.cell-actions {
    text-align: right;
    white-space: nowrap;
}

/* De gekozen rij in een lijst waaruit je er één aanwijst. Een achtergrond en geen rand: een rand
   verspringt de tabel een pixel, en dat leest als beweging waar niets bewoog. */
.data-table tr.row-selected > td {
    background: rgba(52, 12, 70, .06);
}

/* De headers van een ontvangen aanroep. Geen bolletjes: het zijn naam-waardeparen, geen opsomming. */
.header-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.header-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.header-list code {
    min-width: 15rem;
}

/* Een vrij veld herken je aan zijn label, niet aan U001 — maar de code moet er wel bij staan. */
.free-field-note {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: -2px 0 var(--space-3);
}

.free-field-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.free-field-code {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* Openstaande punten uit het ontwerp: elk een link naar het veld waar de beslissing valt. */
.finding-list {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.finding-list li {
    background: var(--warning-soft);
    border-left: 3px solid var(--warning);
}

.finding-list a,
.finding-list li > span:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    padding: 9px var(--space-4);
    text-decoration: none;
    color: inherit;
}

.finding-list a:hover {
    background: rgba(160, 98, 0, .12);
}

.finding-where {
    font-size: 12px;
    font-weight: 600;
    color: var(--warning);
    min-width: 220px;
}

.finding-what {
    font-size: 13.5px;
    color: var(--ink-soft);
    flex: 1;
}

/* Waar je vandaan gestuurd bent. Kort zichtbaar: een blijvende markering wordt genegeerd. */
.field-pointed {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    animation: pointed 2.4s var(--ease);
}

@keyframes pointed {
    0%, 60% { box-shadow: 0 0 0 6px rgba(253, 185, 64, .35); }
    100% { box-shadow: 0 0 0 0 rgba(253, 185, 64, 0); }
}

/* De gegroepeerde detailrijen zijn een eigen boom: zelfde velden, per rij van de groep. */
.detail-tree {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--tan);
}

.detail-tree-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Een overslaan-regel: zijn naam, zijn keten, en weg ermee. */
.rule-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.rule-row .form-control {
    flex: 1;
    min-width: 120px;
}

/* Het adres boven de payload: bij een PUT is de helft van het verzoek de url. */
.preview-url {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.preview-method {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--purple);
    color: var(--paper);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
}

.preview-json {
    margin: 0;
    padding: var(--space-4);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--paper);
    max-height: 46vh;
    overflow-y: auto;
}

.record-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--muted);
}

.spinner-sm {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

.form-hint-danger {
    color: var(--danger);
}

.form-hint-warning {
    color: var(--warning);
}

/* Uitleg die bij een aanvinkvakje hoort: uitgelijnd met het label, niet met het vinkje. */
.form-hint-indented {
    margin: -4px 0 var(--space-3) 26px;
}

/* ── Doelboom (EntityMapTree) ── */

.entity {
    font-size: 14px;
}

.entity-children {
    margin-left: var(--space-4);
    padding-left: var(--space-3);
    border-left: 1px solid var(--rule-soft);
}

.entity-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .12s var(--ease);
}

.entity-head:hover {
    background: var(--cream);
}

.entity-name {
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.01em;
}

.entity-label {
    color: var(--muted);
    font-size: 13px;
}

/* Een entiteit waarvan elk verplicht veld gedekt is. */
.entity-ok {
    color: var(--success);
}

.field-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 8px;
    border-radius: var(--radius-md);
    transition: background .12s var(--ease);
}

.field-row:hover {
    background: var(--cream);
}

.field-row.is-selected {
    background: rgba(253, 185, 64, .18);
    box-shadow: inset 2px 0 0 var(--yellow);
}

.entity-root > .entity-head {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: var(--space-2);
}

.field-name {
    font-family: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--ink);
}

.field-equals {
    color: var(--muted);
    flex-shrink: 0;
}

.field-chain {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}

/* De keten van operaties achter één doelveld. */
.op-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(52, 12, 70, .09);
    color: var(--purple);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .12s var(--ease);
}

.op-chip:hover {
    background: rgba(52, 12, 70, .16);
    border-color: var(--purple-mid);
}

/* Een bronveld leest anders dan een bewerking; dat verschil is de moeite waard. */
.op-chip-source {
    background: var(--info-soft);
    color: #12557A;
    font-family: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
    font-weight: 500;
}

.op-chip-add {
    background: transparent;
    border: 1px dashed var(--tan);
    color: var(--muted);
    font-weight: 500;
}

.op-chip-add:hover {
    border-color: var(--purple);
    color: var(--purple);
    background: var(--cream);
}

/* ── Zoekbare keuzelijst (SearchableSelect) ── */

.ss {
    position: relative;
}

.ss-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.ss-input {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid var(--tan);
    border-radius: var(--radius-md);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--white);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.ss-input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(52, 12, 70, .12);
}

.ss-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
}

.ss-popup {
    position: absolute;
    z-index: 501;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
}

.ss-group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    padding: var(--space-3) var(--space-3) var(--space-1);
}

.ss-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 12px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .1s var(--ease);
}

.ss-option:hover,
.ss-option.selected {
    background: var(--cream);
    color: var(--ink);
}

.ss-hint {
    font-size: 12px;
    color: var(--muted);
    margin-left: auto;
    padding-left: var(--space-3);
}

.ss-empty {
    padding: var(--space-4) var(--space-3);
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* ──────────────────────────────────────────────────── 11  Proefdraai ── */

.runs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Elke rij toont de payload die verstuurd zou worden. De statusrand links maakt in één
   oogopslag zichtbaar welke rijen het niet halen. */
.run {
    background: var(--white);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--tan);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.run-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--paper);
}

.run-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.run pre {
    border-radius: 0;
    margin: 0;
    max-height: 340px;
}

.run-reason {
    padding: var(--space-3) var(--space-4);
    font-size: 13.5px;
    color: var(--ink-soft);
}

.run.gebouwd {
    border-left-color: var(--success);
}

.run.overgeslagen {
    border-left-color: var(--muted);
}

.run.mislukt {
    border-left-color: var(--danger);
}

/* ───────────────────────────────────────────── Blazor-foutbalk ── */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    padding: 14px 24px;
    background: var(--danger-soft);
    border-top: 3px solid var(--danger);
    color: #7F1D1D;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
}

#blazor-error-ui .reload {
    color: var(--danger);
    text-decoration: underline;
    margin-left: var(--space-2);
}

#app {
    min-height: 100vh;
}

/* ── De twee uitvoeren van een ontwerp ───────────────────────────────────────────────────────────── */

.document-pane {
    margin-top: var(--space-6);
}

/* De knoppen naar rechts, los van de titel: ze horen bij het document, niet bij de kop. */
.panel-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.document-source {
    margin: 0;
    max-height: 62vh;
    overflow: auto;
}

/* Gekleurde yaml. Donkere ondergrond zoals elk codeblok, met accenten uit het merkpalet in plaats van
   de gebruikelijke editorkleuren — een sleutel is hier geel omdat dat de accentkleur is, niet omdat
   een editor dat toevallig zo doet. */
.yaml .y-key { color: var(--yellow); }
.yaml .y-text { color: #8FD9A8; }
.yaml .y-number { color: #F6A6D2; }
.yaml .y-word { color: var(--orange); font-style: italic; }
.yaml .y-plain { color: var(--paper); }
.yaml .y-dash { color: rgba(250, 247, 242, .45); }
.yaml .y-comment { color: rgba(250, 247, 242, .5); font-style: italic; }

/* ── Gerenderde markdown ─────────────────────────────────────────────────────────────────────────── */

.markdown-body {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.65;
    max-height: 62vh;
    overflow: auto;
}

/* Op de handleiding, de changelog en een oefening ís de tekst de pagina — daar hoort hij mee te schuiven
   met de rest en niet in een eigen venster te zitten. De begrenzing hierboven is bedoeld voor een
   gerenderd document náást het ontwerp, waar hij wél een kader hoort te hebben; zonder deze regel kreeg
   je drie schuifbalken onder elkaar en een ankerlink die naar de verkeerde plek sprong. */
.markdown-body.manual {
    max-height: none;
    overflow: visible;
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.02em;
    margin: var(--space-6) 0 var(--space-3);
}

.markdown-body h1 { font-size: 24px; }
.markdown-body h2 { font-size: 19px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body h4 { font-size: 15px; }

.markdown-body p,
.markdown-body ul,
.markdown-body ol {
    margin: 0 0 var(--space-4);
}

.markdown-body ul,
.markdown-body ol {
    padding-left: var(--space-6);
}

.markdown-body li { margin-bottom: var(--space-1); }

.markdown-body strong { color: var(--ink); font-weight: 600; }

.markdown-body a { color: var(--cyan); }

.markdown-body blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-left: 3px solid var(--tan);
    color: var(--muted);
}

.markdown-body code {
    font-family: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
}

.markdown-body pre {
    margin: 0 0 var(--space-4);
}

/* De veldmapping is het hart van de story en komt als tabel binnen; zonder deze regels valt hij uit
   elkaar zodra er een kolom bijkomt. */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 0 var(--space-4);
    display: block;
    overflow-x: auto;
}

.markdown-body thead {
    background: var(--cream);
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--rule);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
}

.markdown-body th {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: var(--space-6) 0;
}

/* Statuspills: aanklikbaar filter, meerdere tegelijk. */
.status-pills {
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.status-pills .label-pill {
    cursor: pointer;
    font-family: inherit;
}

.status-pills .label-pill:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.pill-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    color: var(--muted);
}

.label-pill.selected .pill-count { background: rgba(250, 247, 242, .18); color: var(--paper); }

/* De stories die al op het bord staan, achter elkaar op één regel. */
.story-link {
    display: inline-block;
    margin-right: var(--space-3);
    white-space: nowrap;
}

/* ── Opmerkingen ─────────────────────────────────────────────────────────────────────────────────── */

.comments {
    margin-top: var(--space-8);
    max-width: 78ch;
}

.comments.compact {
    margin-top: var(--space-3);
    max-width: none;
}

.comment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

.comment {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--purple-mid);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--white);
}

/* Afgehandeld blijft staan en wordt gedempt: "we doen het niet" is net zoveel waard als de vraag. */
.comment.resolved {
    border-left-color: var(--success);
    background: var(--paper);
    opacity: .72;
}

.comment-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    margin-bottom: var(--space-1);
}

.comment-body {
    white-space: pre-wrap;
    font-size: 14px;
}

.comment-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.comment-new {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.comment-new textarea { width: 100%; }

.field-comments {
    margin-top: var(--space-4);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
}

.field-comments-head {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-2);
}

/* ── De statussen als weg ────────────────────────────────────────────────────────────────────────── */

.status-track {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
}

.status-step {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 150px;
    min-width: 130px;
    position: relative;
    padding-top: var(--space-5);
}

/* De lijn die de stappen verbindt, zodat het een weg is en geen rij losse knoppen. */
.status-step::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--rule);
}

.status-step:first-child::before { left: 50%; }
.status-step:last-child::before { right: 50%; }
.status-step.passed::before,
.status-step.current::before { background: var(--purple-mid); }

.status-dot {
    position: absolute;
    top: 3px;
    left: calc(50% - 8px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--tan);
    background: var(--paper);
    color: var(--paper);
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.status-dot:disabled { cursor: default; opacity: .55; }
.status-dot:not(:disabled):hover { border-color: var(--purple); transform: scale(1.15); }
.status-dot:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.status-step.passed .status-dot { background: var(--purple-mid); border-color: var(--purple-mid); }

.status-step.current .status-dot {
    background: var(--yellow);
    border-color: var(--yellow-deep);
    box-shadow: 0 0 0 4px rgba(253, 185, 64, .25);
}

.status-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
}

.status-step.current .status-name { color: var(--ink); font-weight: 600; }
.status-step.passed .status-name { color: var(--ink-soft); }

.status-when {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

/* De gevolgzin staat er alleen bij een stap die je nú kunt zetten, en leest daarom als een vooruitblik. */
.status-when.hint { font-style: italic; }

.status-history { margin-bottom: var(--space-4); }

/* De oefeningen op de handleidingpagina. */
.exercise-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
}

.exercise-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.exercise-list li:hover { border-color: var(--purple); box-shadow: var(--shadow-sm); }

.exercise-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    text-decoration: none;
    color: var(--ink);
}

.exercise-list a:hover { text-decoration: none; }
.exercise-list .text-muted { font-size: 13px; }

/* Het versienummer onderaan de zijbalk: aanwezig, niet opdringerig. */
.sidebar-version {
    margin-top: auto;
    padding: var(--space-2);
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    text-decoration: none;
    font-weight: 500;
}

.sidebar-version:hover { color: var(--purple); text-decoration: none; }