/*
 * ko-ui 1.24.0 —KeurigOnline huisstijl: tokens + basiscomponenten.
 * Bron: skill ko-ui in KeurigOnline/ko-ops-skills (assets/ko-ui.css); deze kopie wordt daarvandaan gesynct.
 *
 * De uitleg, voorbeelden en het waarom staan in de stijlgids in het office: /stijlgids
 * (public_html/template/styleguide.php). Dit bestand is de bron; de stijlgids laadt het zelf,
 * dus wat je daar ziet is precies wat hier staat.
 *
 * Regels voor dit bestand:
 * - Alles heet .ko-* en --ko-*, zodat het naast de oude office-CSS en Bootstrap kan staan.
 * - Geen `transition: all`; noem de eigenschappen.
 * - Hover-stijlen alleen binnen @media (hover: hover) and (pointer: fine).
 * - Beweging alleen met transform/opacity (clip-path voor vasthouden-om-te-bevestigen).
 * - Elke beweging heeft een prefers-reduced-motion-variant: rustiger, niet nul.
 */

:root {
    /* Lettertype */
    --ko-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ko-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Tekst (spec) */
    --ko-text: #333333;
    --ko-text-subtle: #777777;
    --ko-text-inverse: #FFFFFF;

    /* Vlakken en lijnen (afgeleid) */
    --ko-bg: #FFFFFF;
    --ko-bg-subtle: #F8FCF6;
    /* hover van rijen, menu-items en spookknoppen: neutraal grijs, niet de getinte vlakkleur (een groene rij las als "geselecteerd") */
    --ko-bg-hover: #F7F7F7;
    --ko-bg-pressed: #F0F0F0;
    --ko-line: rgba(0, 0, 0, 0.10);
    --ko-line-soft: rgba(0, 0, 0, 0.06);
    --ko-line-strong: rgba(0, 0, 0, 0.16);

    /* Merk en accent */
    --ko-brand: #F26522;          /* primaire actie, huisstijl-oranje */
    --ko-brand-hover: #D95A1D;
    --ko-accent: #0077E6;         /* interactie: switch (spec), links, focus, selectie */
    --ko-accent-soft: #E5F1FC;
    --ko-focus-ring: 0 0 0 2px var(--ko-bg), 0 0 0 4px var(--ko-accent);

    /* Status: lichte vulling + verzadigde tekst. Succes is spec, de rest volgt hetzelfde patroon. */
    --ko-success-bg: #CAFACE;
    --ko-success: #15B042;
    --ko-neutral-bg: #F2F2F2;
    --ko-neutral: #777777;
    --ko-info-bg: #E5F1FC;
    --ko-info: #0077E6;
    --ko-warning-bg: #FEF0C7;
    --ko-warning: #B54708;
    --ko-danger-bg: #FEE4E2;
    --ko-danger: #B42318;
    --ko-danger-solid: #DC2626;
    --ko-danger-solid-hover: #B91C1C;

    /* Maten (spec) */
    --ko-h-control: 32px;         /* knoppen, invoervelden, selects */
    --ko-r-control: 10px;
    --ko-h-row: 40px;             /* datarij in een tabel */
    --ko-h-row-store: 44px;       /* lijstrij van een ding waar je in klikt (klant, dienst, domein) */
    --ko-h-badge: 20px;
    --ko-r-badge: 6px;
    --ko-switch-w: 24px;
    --ko-switch-h: 14px;
    --ko-switch-thumb: 10px;
    --ko-switch-on: #0077E6;
    --ko-switch-off: #949494;     /* afgeleid: 3,03:1 op wit, de grens voor bedieningselementen */

    /* Maten (afgeleid) */
    --ko-r-card: 12px;
    --ko-r-menu: 12px;
    --ko-r-item: 6px;
    --ko-space-1: 4px;
    --ko-space-2: 8px;
    --ko-space-3: 12px;
    --ko-space-4: 16px;
    --ko-space-5: 24px;
    --ko-space-6: 32px;

    /* Schaduw: alleen voor zwevende lagen. Kaarten in de pagina krijgen een ring, geen schaduw. */
    --ko-ring: 0 0 0 1px var(--ko-line);
    --ko-shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    --ko-shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);

    /* Beweging (Emil Kowalski) */
    --ko-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ko-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ko-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --ko-dur-press: 160ms;
    --ko-dur-tooltip: 125ms;
    --ko-dur-menu: 200ms;
    --ko-dur-modal: 250ms;
    --ko-dur-exit: 150ms;
    --ko-dur-toast: 400ms;
}

/* [hidden] wint altijd: een component met display (.ko-btn, .ko-alert-stack, …) blijft anders zichtbaar
   (disclosure-doelen, "Alle pakketten tonen"). Zoals de reboot van Bootstrap. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------------------------
 * Typografie in Geist (Google Fonts, variabel 100–900; heeft tnum, geen opsz-as). Letterafstand per grootte:
 * groot strakker, vanaf 16px licht negatief, body en kleiner op 0.
 * ------------------------------------------------------------------------------------------- */

.ko {
    font-family: var(--ko-font);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--ko-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* Titles Semibold (600) since 1.5.0: Medium read too light next to body text once whole pages render antialiased */
.ko-title-page { font: 600 20px/24px var(--ko-font); letter-spacing: -0.02em; color: var(--ko-text); margin: 0; }
/* Section icon before the page title when the page has no breadcrumbs (the icon appears once at the top): #777,
   8px to the text, centred on the capitals. */
.ko-title-page > .ko-icon { margin-right: 8px; color: var(--ko-text-subtle); vertical-align: -2px; }
.ko-title      { font: 600 16px/20px var(--ko-font); letter-spacing: -0.01em; color: var(--ko-text); margin: 0; }
.ko-label      { font: 500 13px/16px var(--ko-font); letter-spacing: 0; color: var(--ko-text); }
.ko-body       { font: 400 14px/20px var(--ko-font); letter-spacing: 0; color: var(--ko-text); }   /* één regel: rijen, knoppen, velden */
/* Lopende tekst: alles wat over meer regels loopt. 20px is voor compacte interface, alinea's hebben 22px nodig. */
.ko-prose      { font: 400 14px/22px var(--ko-font); letter-spacing: 0; color: var(--ko-text); }
.ko-prose p    { margin: 0 0 12px; }
.ko-prose p:last-child { margin-bottom: 0; }
.ko-prose ul, .ko-prose ol { margin: 0 0 12px; padding-left: 20px; }
.ko-prose li + li { margin-top: 4px; }
.ko-prose code, .ko-body code { font: 12px/1 var(--ko-font-mono); padding: 2px 5px; border-radius: 4px; background: var(--ko-bg-subtle); }
.ko-meta       { font: 400 12px/16px var(--ko-font); letter-spacing: 0; color: var(--ko-text-subtle); }
.ko-subtle     { color: var(--ko-text-subtle); }
.ko-num        { font-variant-numeric: tabular-nums; }
/* Geist Mono for a value read or copied character by character (key, EPP code, DNS value, code snippet): 0/O and
   1/l/I must differ. Not for domains, e-mail addresses or amounts. <code>/<pre>/<kbd> get it too. */
.ko-mono       { font-family: var(--ko-font-mono); }

/* Paginakop: de ene titel van de pagina (h1.ko-title-page), optioneel een regel uitleg, de acties rechts
   (hooguit één primaire). Op een telefoon schuiven de acties onder de tekst en houden ze hun label. */
.ko-page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 24px; }
.ko-page-head-text { flex: 1 1 320px; min-width: 0; }
/* Status of the thing the page is about: a .ko-badge right after the title, outside the h1 (the heading stays the name). */
.ko-page-head-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.ko-page-head-title > .ko-title-page { min-width: 0; overflow-wrap: anywhere; }
.ko-page-head-text p { margin: 4px 0 0; max-width: 72ch; font: 400 14px/22px var(--ko-font); letter-spacing: 0; color: var(--ko-text-subtle); }
.ko-page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) {
    .ko-page-head { margin-bottom: 16px; }
    .ko-page-head-text { flex-basis: 100%; }
}

/* Kruimelpad: compact en vanuit de pagina: {icoon} Categorie / Pagina. Het icoon (Nucleo 18, #777) hoort bij de
   categorie uit het menu; de categorie en tussenstappen #777 (link als het een pagina is), de huidige pagina #333 in
   hetzelfde gewicht (alleen de kleur verschilt) en geen link (aria-current="page"). Scheiding = een "/" als tekst met
   ruim 12px lucht aan elke kant, aria-hidden (schermlezers lezen de lijst). Elke stap 24px hoog. Plaats: 58px onder de
   bovenrand van het inhoudsvlak, 32px boven de paginakop (layout van de app). */
.ko-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; list-style: none; font: 400 14px/20px var(--ko-font); letter-spacing: 0; color: var(--ko-text-subtle); }
/* margin/padding on the li itself: legacy pages indent every li (li { margin-left: 30px }) */
.ko-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 24px; margin: 0; padding: 0; } /* 24px = the link height, so the bar does not jump between pages with and without a link */
.ko-breadcrumbs li > .ko-icon { color: var(--ko-text-subtle); flex-shrink: 0; margin-right: 2px; } /* 8px to the category */
.ko-breadcrumbs-sep { margin: 0 6px; color: var(--ko-text-subtle); opacity: 0.6; } /* + the 6px gaps = 12px each side */
.ko-breadcrumbs a { display: inline-flex; align-items: center; min-height: 24px; border-radius: var(--ko-r-item); color: inherit; text-decoration: none; white-space: nowrap; transition: color 150ms ease; }
.ko-breadcrumbs a:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
.ko-breadcrumbs [aria-current="page"] { color: var(--ko-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) {
    .ko-breadcrumbs a:hover { color: var(--ko-text); }
}

/* Tabbladen: naar een andere pagina of een ander deel van één ding (Overzicht · Statistieken · Server). Echte links
   (middelklik werkt), de huidige met aria-current="page": #333 + 2px lijn, de rest #777. Geen animatie (vaak, ook met
   het toetsenbord). Op een telefoon scrolt de rij opzij in zijn eigen vlak. 2–5 weergaven van dezelfde lijst = segmented. */
.ko-tabs { display: flex; align-items: center; gap: 8px 16px; margin: 0 0 16px; border-bottom: 1px solid var(--ko-line); }
.ko-tabs-list { display: flex; align-items: flex-end; gap: 20px; min-width: 0; margin: 0 0 -1px; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ko-tabs-list > li { margin: 0; padding: 0; flex-shrink: 0; }
.ko-tabs .ko-tab, .ko-tabs a.ko-tab:visited, .ko-tabs a.ko-tab:focus, .ko-tabs a.ko-tab:hover { color: var(--ko-text-subtle); text-decoration: none; } /* ko-ui-check-ignore: neutralises legacy a:hover, the hover itself is gated below */
.ko-tab { position: relative; /* keeps a .ko-sr-only child inside the scrolling row */ display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font: 500 14px/20px var(--ko-font); letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: color 150ms ease; }
.ko-tabs .ko-tab[aria-current="page"], .ko-tabs .ko-tab[aria-selected="true"] { color: var(--ko-text); border-bottom-color: var(--ko-text); }
.ko-tab-count { color: var(--ko-text-subtle); font-weight: 400; font-variant-numeric: tabular-nums; }
.ko-tab:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
.ko-tabs-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
    .ko-tabs .ko-tab:hover { color: var(--ko-text); }
}

/* Icoon (Nucleo UI outline, 18px-grid). Op 18px getekend en op 18px getoond: geen schalen, dan blijven
 * de lijnen scherp. Kleur = currentColor; tweede kleur via --ko-icon-2. Zie /stijlgids#iconen. */
.ko-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    stroke-width: 1.5;
    overflow: visible;
}
.ko-icon-12 { width: 12px; height: 12px; vertical-align: -1px; }

.ko-link {
    color: var(--ko-accent);
    text-decoration: underline;
    text-decoration-color: rgba(0, 119, 230, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .ko-link:hover { text-decoration-color: currentColor; }
}
.ko-link:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ko-focus-ring); }

/* ---------------------------------------------------------------------------------------------
 * Knoppen — 32px hoog, 10px radius.
 * ------------------------------------------------------------------------------------------- */

.ko-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ko-h-control);
    padding: 0 12px;
    border: 0;
    border-radius: var(--ko-r-control);
    background: var(--ko-bg);
    color: var(--ko-text);
    box-shadow: inset 0 0 0 1px var(--ko-line-strong);
    font: 500 13px/16px var(--ko-font);
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--ko-dur-press) var(--ko-ease-out),
        background-color 150ms ease,
        color 150ms ease;
}
.ko-btn:active { transform: scale(0.97); }
.ko-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ko-line-strong), var(--ko-focus-ring); }
.ko-btn .ko-icon { margin: 0 -1px; }

.ko-btn-primary { background: var(--ko-brand); color: var(--ko-text-inverse); box-shadow: none; }
.ko-btn-primary:focus-visible { box-shadow: var(--ko-focus-ring); }
.ko-btn-danger { background: var(--ko-danger-solid); color: var(--ko-text-inverse); box-shadow: none; }
.ko-btn-danger:focus-visible { box-shadow: var(--ko-focus-ring); }
.ko-btn-ghost { background: transparent; box-shadow: none; }
.ko-btn-ghost:focus-visible { box-shadow: var(--ko-focus-ring); }
.ko-btn-icon { width: var(--ko-h-control); padding: 0; }
/* A button that is a link stays a button: legacy pages style every a:hover/a:visited (blue, underline) and
   beat .ko-btn on specificity. No hover effect here, it only keeps colour and decoration stable. */
a.ko-btn, a.ko-btn:visited, a.ko-btn:hover, a.ko-btn:focus { color: var(--ko-text); text-decoration: none; } /* ko-ui-check-ignore: neutralises legacy a:hover, no visual hover effect */
a.ko-btn-primary, a.ko-btn-primary:visited, a.ko-btn-primary:hover, a.ko-btn-primary:focus, a.ko-btn-danger, a.ko-btn-danger:visited, a.ko-btn-danger:hover, a.ko-btn-danger:focus { color: var(--ko-text-inverse); } /* ko-ui-check-ignore: same, for the solid variants */

@media (hover: hover) and (pointer: fine) {
    .ko-btn:hover { background: var(--ko-bg-hover); }
    .ko-btn-primary:hover { background: var(--ko-brand-hover); }
    .ko-btn-danger:hover { background: var(--ko-danger-solid-hover); }
    .ko-btn-ghost:hover { background: rgba(0, 0, 0, 0.05); }
}

.ko-btn:disabled, .ko-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ko-btn:disabled:active, .ko-btn[aria-disabled="true"]:active { transform: none; }

/* Bezig: het label blijft staan (geen breedtesprong), de spinner ligt erover. */
.ko-btn[aria-busy="true"] { cursor: progress; }
.ko-btn[aria-busy="true"] > :not(.ko-spinner) { visibility: hidden; }
.ko-btn[aria-busy="true"] > .ko-spinner { position: absolute; inset: 0; margin: auto; }
.ko-btn > .ko-spinner { display: none; }
.ko-btn[aria-busy="true"] > .ko-spinner { display: block; }

/* Vasthouden om te bevestigen. De vulling is een kopie van het label in wit-op-rood, onthuld met
 * clip-path: tekst en achtergrond wisselen samen, op de pixel. De vulling is voortgang, dus linear
 * (2s); loslaten veert snel terug (200ms ease-out). */
.ko-hold { overflow: hidden; }
.ko-hold-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: inherit;
    background: var(--ko-danger-solid);
    color: var(--ko-text-inverse);
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 200ms var(--ko-ease-out);
}
.ko-hold.is-holding { transform: scale(0.97); }
.ko-hold.is-holding .ko-hold-fill,
.ko-hold.is-done .ko-hold-fill { clip-path: inset(0 0 0 0); transition: clip-path 2s linear; }
.ko-hold.is-done .ko-hold-fill { transition: none; }

/* ---------------------------------------------------------------------------------------------
 * Spinner en skeleton
 * ------------------------------------------------------------------------------------------- */

.ko-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: ko-spin 600ms linear infinite;
}
@keyframes ko-spin { to { transform: rotate(360deg); } }

.ko-skeleton {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #EEEEEE 0%, #F6F6F6 50%, #EEEEEE 100%);
    background-size: 200% 100%;
    animation: ko-shimmer 1.4s linear infinite;
}
@keyframes ko-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------------------------------------------------------------------------------------------
 * Badge — 20px hoog, 6px radius, #CAFACE / #15B042.
 * ------------------------------------------------------------------------------------------- */

.ko-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--ko-h-badge);
    padding: 0 6px;
    border-radius: var(--ko-r-badge);
    background: var(--ko-success-bg);
    color: var(--ko-success);
    font: 500 12px/16px var(--ko-font);
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.ko-badge-neutral { background: var(--ko-neutral-bg); color: var(--ko-neutral); }
.ko-badge-info    { background: var(--ko-info-bg);    color: var(--ko-info); }
.ko-badge-warning { background: var(--ko-warning-bg); color: var(--ko-warning); }
.ko-badge-danger  { background: var(--ko-danger-bg);  color: var(--ko-danger); }
.ko-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------------------------------------
 * Switch — 24x14, duim 10px, spoor #0077E6. Een echte checkbox met role="switch".
 * ------------------------------------------------------------------------------------------- */

.ko-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 var(--ko-switch-w);
    width: var(--ko-switch-w);
    height: var(--ko-switch-h);
    margin: 0;
    border-radius: 999px;
    background: var(--ko-switch-off);
    cursor: pointer;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ko-dur-press) ease;
}
.ko-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--ko-switch-thumb);
    height: var(--ko-switch-thumb);
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform var(--ko-dur-press) var(--ko-ease-in-out);
}
.ko-switch:checked { background: var(--ko-switch-on); }
.ko-switch:checked::before { transform: translateX(10px); }
.ko-switch:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
.ko-switch:disabled { opacity: 0.5; cursor: not-allowed; }

.ko-switch-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ko-h-control);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------------------------------------------------------------------------------------------
 * Formulieren — zelfde 32px en 10px radius als knoppen.
 * ------------------------------------------------------------------------------------------- */

.ko-field { display: flex; flex-direction: column; gap: 6px; }
.ko-field > label, .ko-field-label { font: 500 13px/16px var(--ko-font); letter-spacing: 0; color: var(--ko-text); }
.ko-field-help { font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }
.ko-field-error { font: 400 13px/18px var(--ko-font); color: var(--ko-danger); }

.ko-input, .ko-select {
    box-sizing: border-box; /* width 100% includes the padding, also in apps without a global reset */
    width: 100%;
    height: var(--ko-h-control);
    padding: 0 10px;
    border: 0;
    border-radius: var(--ko-r-control);
    background: var(--ko-bg);
    color: var(--ko-text);
    box-shadow: inset 0 0 0 1px var(--ko-line-strong);
    font: 400 14px/20px var(--ko-font);
    letter-spacing: 0;
    transition: box-shadow 150ms ease;
}
.ko-input::placeholder { color: var(--ko-text-subtle); opacity: 1; }
.ko-input:focus, .ko-select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ko-accent), 0 0 0 3px rgba(0, 119, 230, 0.18); }
.ko-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--ko-danger-solid); }
.ko-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--ko-danger-solid), 0 0 0 3px rgba(220, 38, 38, 0.16); }
.ko-input:disabled, .ko-select:disabled { background: var(--ko-bg-subtle); color: var(--ko-text-subtle); cursor: not-allowed; }
.ko-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}
/* iOS zoomt in op invoer kleiner dan 16px en zoomt niet terug. Nooit maximum-scale=1 gebruiken. */
@media (pointer: coarse) {
    .ko-input, .ko-select { font-size: 16px; }
}

/* ---------------------------------------------------------------------------------------------
 * Tabel (datarijen 40px) en lijst (store-rijen 44px)
 * ------------------------------------------------------------------------------------------- */

.ko-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ko-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/20px var(--ko-font); letter-spacing: 0; color: var(--ko-text); }
.ko-table th {
    height: var(--ko-h-control);
    padding: 0 12px;
    text-align: left;
    white-space: nowrap;
    font: 500 13px/16px var(--ko-font);
    letter-spacing: 0;
    color: var(--ko-text-subtle);
    border-bottom: 1px solid var(--ko-line);
    vertical-align: middle;
}
/* line-height and vertical-align on the cell itself: legacy pages set th, td { line-height: 1.6; vertical-align: top } */
.ko-table td { height: var(--ko-h-row); padding: 0 12px; border-bottom: 1px solid var(--ko-line-soft); white-space: nowrap; line-height: 20px; vertical-align: middle; }
.ko-table tbody tr:last-child td { border-bottom: 0; }
.ko-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ko-table .is-subtle { color: var(--ko-text-subtle); }
.ko-table .is-actions { width: 1%; text-align: right; }
@media (hover: hover) and (pointer: fine) {
    .ko-table tbody tr:hover td { background: var(--ko-bg-hover); }
}

.ko-list { list-style: none; margin: 0; padding: 4px; }
.ko-list > li { margin: 0; padding: 0; } /* legacy pages indent every li */
/* A heading over a group of rows ("Binnen 7 dagen", "Volgende maand"): a real heading before its own .ko-list,
   lined up with the row text (list padding 4 + row padding 8). */
.ko-list-heading { margin: 0; padding: 12px 12px 4px; color: var(--ko-text-subtle); font: 500 13px/16px var(--ko-font); letter-spacing: 0; }
.ko-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--ko-h-row-store);
    padding: 0 8px;
    border-radius: 8px;
    color: var(--ko-text);
    font: 400 14px/20px var(--ko-font); /* its own role, not the page base (legacy pages: 12px body) */
    letter-spacing: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
a.ko-row, a.ko-row:visited, a.ko-row:hover, a.ko-row:focus { color: var(--ko-text); text-decoration: none; } /* ko-ui-check-ignore: neutralises legacy a:hover (blue + underline); the row's hover is the background, gated below */
.ko-row:active { background: var(--ko-bg-pressed); }
.ko-row:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
@media (hover: hover) and (pointer: fine) {
    .ko-row:hover { background: var(--ko-bg-hover); }
    .ko-row:active { background: var(--ko-bg-pressed); }
}
.ko-row-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ko-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--ko-line-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ko-text-subtle);
    font-size: 13px;
}
.ko-row-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-row-meta { flex: 0 0 auto; color: var(--ko-text-subtle); font-size: 13px; font-variant-numeric: tabular-nums; }
/* The less important half of the meta ("over 36 dagen" + " · 06-11-2026"): gone on a phone, so the name keeps room. */
@media (max-width: 480px) { .ko-row-meta-extra { display: none; } }
.ko-row-chevron { flex: 0 0 auto; color: var(--ko-text-subtle); }

/* ---------------------------------------------------------------------------------------------
 * Kaart — wit, ring in plaats van rand, geen schaduw, geen hover.
 * ------------------------------------------------------------------------------------------- */

/* A card sets the body role for what is inside it: text in a card is 14/20 whatever the page base is. */
.ko-card { background: var(--ko-bg); border-radius: var(--ko-r-card); box-shadow: var(--ko-ring); color: var(--ko-text); font: 400 14px/20px var(--ko-font); letter-spacing: 0; }
.ko-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--ko-line-soft); }
.ko-card-body { padding: 16px; }

/* ---------------------------------------------------------------------------------------------
 * Menu (dropdown) — groeit uit de knop die het opende.
 * ------------------------------------------------------------------------------------------- */

.ko-menu-anchor { position: relative; display: inline-block; }
.ko-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    min-width: 200px;
    padding: 4px;
    border-radius: var(--ko-r-menu);
    background: var(--ko-bg);
    box-shadow: var(--ko-shadow-pop);
    transform-origin: top left;
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
    transition:
        opacity var(--ko-dur-exit) var(--ko-ease-out),
        transform var(--ko-dur-exit) var(--ko-ease-out),
        visibility 0s linear var(--ko-dur-exit);
}
.ko-menu[data-align="end"] { left: auto; right: 0; transform-origin: top right; }
.ko-menu[data-open] {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    transition:
        opacity var(--ko-dur-menu) var(--ko-ease-out),
        transform var(--ko-dur-menu) var(--ko-ease-out),
        visibility 0s;
}
/* Geopend met het toetsenbord: geen animatie. */
.ko-menu[data-instant] { transition-duration: 0s; }
.ko-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--ko-h-control);
    padding: 0 8px;
    border: 0;
    border-radius: var(--ko-r-item);
    background: transparent;
    color: var(--ko-text);
    font: 400 14px/20px var(--ko-font);
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.ko-menu-item .ko-icon { color: var(--ko-text-subtle); }
a.ko-menu-item, a.ko-menu-item:visited, a.ko-menu-item:hover, a.ko-menu-item:focus { color: var(--ko-text); text-decoration: none; } /* ko-ui-check-ignore: neutralises legacy a:hover; the hover background is gated below */
.ko-menu-item:focus-visible, .ko-menu-item:focus { outline: none; background: var(--ko-bg-hover); }
.ko-menu-item.is-danger, a.ko-menu-item.is-danger, .ko-menu-item.is-danger .ko-icon { color: var(--ko-danger); }
.ko-menu-item[role="menuitemradio"]::before, .ko-menu-item[role="menuitemcheckbox"]::before { content: ""; flex: 0 0 16px; text-align: center; font-weight: 600; color: var(--ko-accent); }
.ko-menu-item[aria-checked="true"]::before { content: "✓"; }
.ko-menu-sep { height: 1px; margin: 4px -4px; background: var(--ko-line-soft); }
/* Touch: stacked items get the 44px tap target (32px rows sit too close for a thumb). */
@media (pointer: coarse) { .ko-menu-item { height: var(--ko-h-row-store); } }
@media (hover: hover) and (pointer: fine) {
    .ko-menu-item:hover { background: var(--ko-bg-hover); }
}

/* ---------------------------------------------------------------------------------------------
 * Tooltip — korte vertraging, daarna buren direct.
 * ------------------------------------------------------------------------------------------- */

.ko-tooltip {
    position: fixed;
    z-index: 2000;
    max-width: 260px;
    padding: 4px 8px;
    border-radius: var(--ko-r-item);
    background: var(--ko-text);
    color: var(--ko-text-inverse);
    font: 500 12px/16px var(--ko-font);
    pointer-events: none;
    transform-origin: bottom center;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity var(--ko-dur-tooltip) var(--ko-ease-out), transform var(--ko-dur-tooltip) var(--ko-ease-out);
}
.ko-tooltip[data-open] { opacity: 1; transform: scale(1); }
.ko-tooltip[data-instant] { transition-duration: 0s; }

/* ---------------------------------------------------------------------------------------------
 * Dialoog — native <dialog>: focus, Escape en de bovenste laag komen van de browser.
 * Modals blijven gecentreerd (transform-origin: center); in 250ms, uit in 150ms.
 * ------------------------------------------------------------------------------------------- */

.ko-dialog {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto; /* the browser centres a modal with margin:auto; old resets (dialog { margin: 0 }) put it top left */
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--ko-bg);
    color: var(--ko-text);
    box-shadow: var(--ko-shadow-modal);
    overflow: auto;
    overscroll-behavior: contain;
    transform-origin: center;
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--ko-dur-modal) var(--ko-ease-out), transform var(--ko-dur-modal) var(--ko-ease-out);
}
.ko-dialog::backdrop { background: rgba(0, 0, 0, 0.4); opacity: 1; transition: opacity var(--ko-dur-modal) var(--ko-ease-out); }
@starting-style {
    .ko-dialog[open] { opacity: 0; transform: scale(0.96); }
    .ko-dialog[open]::backdrop { opacity: 0; }
}
.ko-dialog[data-closing] { opacity: 0; transform: scale(0.96); transition-duration: var(--ko-dur-exit); }
.ko-dialog[data-closing]::backdrop { opacity: 0; transition-duration: var(--ko-dur-exit); }
.ko-dialog-body { padding: 24px 24px 20px; }
.ko-dialog-body .ko-title { margin-bottom: 8px; }
.ko-dialog-body p { margin: 0 0 8px; line-height: 22px; }
/* .is-form: a dialog with choices, fields and a summary instead of one paragraph. Blocks 16px apart, the intro
   right under the title; .ko-dialog-section = one step (only the current one is shown, the rest [hidden]). */
.ko-dialog.is-form .ko-dialog-body, .ko-dialog-section { display: flex; flex-direction: column; gap: 16px; }
.ko-dialog.is-form .ko-dialog-body > .ko-title, .ko-dialog.is-form .ko-dialog-body > p { margin: 0; }
.ko-dialog.is-form .ko-dialog-body > .ko-title + p { margin-top: -10px; }
/* The footer stays in view when the content is longer than the screen: the dialog scrolls, the buttons don't. */
.ko-dialog-footer { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 24px; background: var(--ko-bg); }

/* Phone: the dialog sits at the bottom, full width, like a sheet (thumb reach, no 16px strips beside it); the
   buttons share the row and are 44px; it comes up from below instead of scaling. Drag-to-dismiss = .ko-sheet. */
@media (max-width: 560px) {
    .ko-dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 16px 16px 0 0; transform-origin: bottom center; }
    .ko-dialog-body { padding: 20px 16px 16px; }
    .ko-dialog-footer { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--ko-line-soft); }
    .ko-dialog-footer > .ko-btn:not([hidden]) { flex: 1 1 0; min-width: 0; height: var(--ko-h-row-store); }
    @starting-style { .ko-dialog[open] { transform: translateY(24px); } }
    .ko-dialog[data-closing] { transform: translateY(24px); }
}

/* .is-anchored: content that grows while you use it (choose an option → a summary appears). A centred dialog
   would move up under the pointer; this one keeps its top edge (desktop) or opens at full height (phone, footer
   at the bottom), so what you just clicked stays where it was. */
.ko-dialog.is-anchored { margin: 8vh auto auto; max-height: calc(92dvh - 16px); }
@media (max-width: 560px) {
    .ko-dialog.is-anchored { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); margin: auto 0 0; }
    .ko-dialog.is-anchored[open] { display: flex; flex-direction: column; }
    .ko-dialog.is-anchored > form { display: flex; flex-direction: column; flex: 1 0 auto; }
    .ko-dialog.is-anchored .ko-dialog-body { flex: 1 0 auto; }
}

/* ---------------------------------------------------------------------------------------------
 * Toast — Sonner-principes: één toaster, in en uit langs dezelfde rand, transitions (geen
 * keyframes), timer pauzeert bij hover en als het tabblad verborgen is.
 * ------------------------------------------------------------------------------------------- */

.ko-toaster {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
    /* it is a popover (top layer, above dialogs): undo the browser's popover box */
    inset: auto max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
}
.ko-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 12px 12px 14px;
    border-radius: var(--ko-r-card);
    background: var(--ko-bg);
    color: var(--ko-text);
    box-shadow: var(--ko-shadow-pop);
    font: 400 14px/20px var(--ko-font);
    letter-spacing: 0;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--ko-dur-toast) ease, transform var(--ko-dur-toast) ease;
}
@starting-style {
    .ko-toast { opacity: 0; transform: translateY(100%); }
}
.ko-toast[data-leaving] { opacity: 0; transform: translateY(100%); transition-duration: 200ms; }
.ko-toast-icon { margin-top: 1px; color: var(--ko-text-subtle); }
.ko-toast[data-type="success"] .ko-toast-icon { color: var(--ko-success-text); }
.ko-toast[data-type="error"] .ko-toast-icon { color: var(--ko-danger-solid); }
.ko-toast[data-type="warning"] .ko-toast-icon { color: var(--ko-warning); }
.ko-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ko-toast-title { font-weight: 500; }
.ko-toast-actions { display: flex; gap: 8px; margin-top: 8px; }
.ko-toast-desc { color: var(--ko-text-subtle); font-size: 13px; line-height: 18px; }
.ko-toast-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0 !important; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ko-text-subtle); cursor: pointer; font-size: 12px; }
.ko-toast-close:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
@media (hover: hover) and (pointer: fine) {
    .ko-toast-close:hover { background: var(--ko-bg-hover); color: var(--ko-text); }
}

/* ---------------------------------------------------------------------------------------------
 * Lege staat
 * ------------------------------------------------------------------------------------------- */

.ko-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px; }
.ko-empty-icon { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 10px; background: var(--ko-bg-subtle); box-shadow: inset 0 0 0 1px var(--ko-line-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--ko-text-subtle); font-size: 16px; }
.ko-empty p { margin: 0 0 8px; max-width: 46ch; line-height: 22px; color: var(--ko-text-subtle); }

/* =============================================================================================
 * Uitbreiding: volledige componentenset
 * ============================================================================================= */

:root {
    --ko-success-text: #0A7F2E;   /* groen als tekst op wit (5,14:1); #15B042 haalt dat niet */
    --ko-dur-drawer: 500ms;       /* lade/sheet met --ko-ease-drawer (Vaul-recept) */
    --ko-dur-drawer-exit: 250ms;
    /* Grafieken: gevalideerde categorische volgorde (dataviz-validator, wit oppervlak) */
    --ko-series-1: #0077E6;
    --ko-series-2: #F26522;
    --ko-series-3: #1BAF7A;
    --ko-series-4: #EDA100;
    --ko-series-5: #E87BA4;
    --ko-series-6: #008300;
    --ko-series-7: #4A3AA7;
    --ko-series-8: #E34948;
    --ko-chart-grid: #EDEDED;
    --ko-chart-axis: #CCCCCC;
    --ko-status-good: #0CA30C;
    --ko-status-warning: #FAB219;
    --ko-status-critical: #D03B3B;
}

/* Stapel twee inhouden op één plek (label- of icoonwissel zonder breedtesprong) */
.ko-swap { display: inline-grid; }
.ko-swap > * { grid-area: 1 / 1; }

/* ---------------------------------------------------------------------------------------------
 * Kopieerknop — icoon en label wisselen met een crossfade; blur(2px) verbergt de naad.
 * ------------------------------------------------------------------------------------------- */

.ko-copy .ko-swap > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 200ms ease, transform 200ms var(--ko-ease-out), filter 200ms ease;
}
.ko-copy .ko-copy-done { opacity: 0; transform: scale(0.9); filter: blur(2px); color: var(--ko-success-text); }
.ko-copy[data-copied] .ko-copy-idle { opacity: 0; transform: scale(0.9); filter: blur(2px); }
.ko-copy[data-copied] .ko-copy-done { opacity: 1; transform: none; filter: none; }

/* ---------------------------------------------------------------------------------------------
 * Segmented control — één keuze uit 2–5, indicator schuift (200ms), met toetsenbord direct.
 * ------------------------------------------------------------------------------------------- */

.ko-segmented {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--ko-h-control);
    padding: 2px;
    border-radius: var(--ko-r-control);
    background: var(--ko-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--ko-line-soft);
}
.ko-segmented-indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 28px;
    border-radius: 8px;
    background: var(--ko-bg);
    box-shadow: 0 0 0 1px var(--ko-line), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ko-segmented[data-ready] .ko-segmented-indicator {
    transition: transform 200ms var(--ko-ease-in-out), width 200ms var(--ko-ease-in-out);
}
.ko-segmented[data-instant] .ko-segmented-indicator { transition-duration: 0s; }
.ko-segmented button {
    position: relative;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ko-text-subtle);
    font: 500 13px/16px var(--ko-font);
    letter-spacing: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: color 150ms ease;
}
.ko-segmented button[aria-checked="true"] { color: var(--ko-text); }
.ko-segmented button:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
.ko-segmented-count { margin-left: 4px; color: var(--ko-text-subtle); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
    .ko-segmented button:hover { color: var(--ko-text); }
}

/* ---------------------------------------------------------------------------------------------
 * Tekstvelden: textarea, iconen, acties, voor-/achtervoegsel, toetsen, teller
 * ------------------------------------------------------------------------------------------- */

.ko-textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 80px;
    max-height: 240px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--ko-r-control);
    background: var(--ko-bg);
    color: var(--ko-text);
    box-shadow: inset 0 0 0 1px var(--ko-line-strong);
    font: 400 14px/20px var(--ko-font);
    letter-spacing: 0;
    resize: vertical;
    field-sizing: content;
    transition: box-shadow 150ms ease;
}
.ko-textarea::placeholder { color: var(--ko-text-subtle); opacity: 1; }
.ko-textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ko-accent), 0 0 0 3px rgba(0, 119, 230, 0.18); }
@media (pointer: coarse) { .ko-textarea { font-size: 16px; } }

.ko-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.ko-input-wrap > .ko-input-icon {
    position: absolute;
    left: 8px;
    color: var(--ko-text-subtle);
    pointer-events: none;
}
.ko-input-wrap > .ko-input-icon ~ .ko-input { padding-left: 32px; }
.ko-input-wrap > .ko-input-end { position: absolute; right: 4px; display: inline-flex; align-items: center; gap: 4px; }
.ko-input-wrap.has-end > .ko-input { padding-right: 36px; }
.ko-input-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ko-text-subtle);
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform var(--ko-dur-press) var(--ko-ease-out);
}
.ko-input-btn:active { transform: scale(0.94); }
.ko-input-btn:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
@media (hover: hover) and (pointer: fine) {
    .ko-input-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--ko-text); }
}
/* Zoekveld: het wisknopje bestaat alleen als er iets staat. */
.ko-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ko-search .ko-input:placeholder-shown ~ .ko-input-end .ko-search-clear { display: none; }

.ko-kbd {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--ko-bg);
    box-shadow: inset 0 0 0 1px var(--ko-line), inset 0 -1px 0 var(--ko-line);
    color: var(--ko-text-subtle);
    font: 500 11px/16px var(--ko-font);
}
.ko-search .ko-input:not(:placeholder-shown) ~ .ko-input-end .ko-kbd,
.ko-search .ko-input:focus ~ .ko-input-end .ko-kbd { display: none; }

.ko-affix {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--ko-h-control);
    border-radius: var(--ko-r-control);
    background: var(--ko-bg);
    overflow: hidden;
    transition: box-shadow 150ms ease;
}
/* The edge sits on top (::after): an inset shadow on .ko-affix itself was painted over by the input and the
   affix span, so the field had no visible edge, focus or error colour. */
.ko-affix::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ko-line-strong); pointer-events: none; transition: box-shadow 150ms ease; }
.ko-affix:focus-within { box-shadow: 0 0 0 3px rgba(0, 119, 230, 0.18); }
.ko-affix:focus-within::after { box-shadow: inset 0 0 0 1px var(--ko-accent); }
.ko-affix:has([aria-invalid="true"])::after { box-shadow: inset 0 0 0 1px var(--ko-danger-solid); }
.ko-affix:has([aria-invalid="true"]):focus-within { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); }
.ko-affix > span { display: flex; align-items: center; padding: 0 10px; background: var(--ko-bg-subtle); color: var(--ko-text-subtle); font-size: 14px; white-space: nowrap; }
.ko-affix > span:first-child { box-shadow: inset -1px 0 0 var(--ko-line-soft); }
.ko-affix > span:last-child { box-shadow: inset 1px 0 0 var(--ko-line-soft); }
.ko-affix > .ko-input { flex: 1; min-width: 0; height: 100%; box-shadow: none; border-radius: 0; }
.ko-affix > .ko-input:focus { box-shadow: none; }

.ko-field-row { display: flex; justify-content: space-between; gap: 8px; }
.ko-field-counter { font: 400 12px/16px var(--ko-font); color: var(--ko-text-subtle); font-variant-numeric: tabular-nums; }
.ko-field-counter.is-over { color: var(--ko-danger); }
.ko-field-warn { display: none; align-items: center; gap: 6px; font: 400 13px/18px var(--ko-font); color: var(--ko-warning); }
.ko-field-warn.is-on { display: inline-flex; }
.ko-input[readonly] { background: var(--ko-bg-subtle); }

/* Keuzes: checkbox en radio zijn native, alleen de kleur en maat zijn van ons. */
.ko-check, .ko-radio { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; accent-color: var(--ko-accent); cursor: pointer; }
/* A click gives no ring (old CSS puts a 2px outline on every input:focus); the keyboard gets the ko-ui ring. */
.ko-check:focus:not(:focus-visible), .ko-radio:focus:not(:focus-visible), .ko-switch:focus:not(:focus-visible) { outline: none; } /* ko-ui-check-ignore: mouse focus only; :focus-visible gets the ring on the next line */
.ko-check:focus-visible, .ko-radio:focus-visible { outline: 2px solid var(--ko-accent); outline-offset: 2px; }
.ko-choice { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ko-h-control); cursor: pointer; user-select: none; -webkit-user-select: none; }
.ko-choice input:disabled, .ko-choice input:disabled + span { cursor: not-allowed; opacity: 0.5; }
.ko-fieldset { min-width: 0; border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* float/width: Bootstrap 5 floats a legend at 1.275rem; ours is a field label */
.ko-fieldset legend { float: none; width: auto; padding: 0; margin-bottom: 2px; color: var(--ko-text); font: 500 13px/16px var(--ko-font); letter-spacing: 0; }

/* Optiekaart — één keuze uit 2–5 die meer nodig heeft dan een label (een pakket met inhoud en prijs, een
   reden met uitleg). Een echte radio (of checkbox) in een <label>: de hele kaart is het klikvlak, toetsenbord
   en formulier werken vanzelf. Gekozen = blauwe rand (blauw = selectie), nooit oranje. Uitgeschakeld (het huidige
   pakket) zegt waarom met een badge in de titel. */
.ko-options { display: flex; flex-direction: column; gap: 8px; }
.ko-fieldset > .ko-options { margin-top: 6px; }
/* Grid: radio | title … value on one line, the description below over the full width (on a phone the value
   never squeezes the text into a narrow column). */
.ko-option {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 2px;
    min-height: var(--ko-h-row-store);
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--ko-r-control);
    background: var(--ko-bg);
    box-shadow: var(--ko-ring);
    color: var(--ko-text);
    font: 400 14px/20px var(--ko-font);
    letter-spacing: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 150ms ease, background-color 150ms ease;
}
.ko-option > input { grid-column: 1; grid-row: 1; margin-top: 2px; }
.ko-option > input:focus, .ko-option > input:focus-visible { outline: none; } /* ko-ui-check-ignore: the card carries the ring (.ko-option:has(input:focus-visible) below) */
.ko-option-text { display: contents; }
.ko-option-title { grid-column: 2; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-weight: 500; }
.ko-option-desc { grid-column: 2 / -1; grid-row: 2; color: var(--ko-text-subtle); font-size: 13px; line-height: 18px; }
.ko-option-end { grid-column: 3; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ko-option-end .ko-subtle { font-size: 13px; }
.ko-option:has(input:checked) { box-shadow: 0 0 0 2px var(--ko-accent); }
.ko-option:has(input[aria-invalid="true"]) { box-shadow: 0 0 0 1px var(--ko-danger); }
.ko-option:has(input:focus-visible) { box-shadow: var(--ko-focus-ring); }
.ko-option:has(input:disabled) { cursor: not-allowed; background: var(--ko-bg-hover); }
.ko-option input:disabled { opacity: 0.5; cursor: not-allowed; }
.ko-option:not(:has(input:disabled)):active { background: var(--ko-bg-pressed); }
@media (hover: hover) and (pointer: fine) {
    .ko-option:not(:has(input:disabled)):hover { background: var(--ko-bg-hover); }
    .ko-option:not(:has(input:disabled)):active { background: var(--ko-bg-pressed); }
}

/* ---------------------------------------------------------------------------------------------
 * Popover (algemeen) — dezelfde beweging als het menu: uit de knop, 200ms in, 150ms uit.
 * ------------------------------------------------------------------------------------------- */

.ko-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    padding: 12px;
    border-radius: var(--ko-r-menu);
    background: var(--ko-bg);
    color: var(--ko-text);
    box-shadow: var(--ko-shadow-pop);
    transform-origin: top left;
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
    transition:
        opacity var(--ko-dur-exit) var(--ko-ease-out),
        transform var(--ko-dur-exit) var(--ko-ease-out),
        visibility 0s linear var(--ko-dur-exit);
}
.ko-popover[data-align="end"] { left: auto; right: 0; transform-origin: top right; }
.ko-popover[data-open] {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    transition:
        opacity var(--ko-dur-menu) var(--ko-ease-out),
        transform var(--ko-dur-menu) var(--ko-ease-out),
        visibility 0s;
}
.ko-popover[data-instant] { transition-duration: 0s; }

/* ---------------------------------------------------------------------------------------------
 * Datumkiezer en kalender
 * ------------------------------------------------------------------------------------------- */

.ko-datepicker { position: relative; display: inline-block; width: 100%; max-width: 200px; }
.ko-calendar { width: 244px; }
.ko-cal-head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 4px; }
.ko-cal-title { font: 500 14px/20px var(--ko-font); text-transform: none; }
.ko-cal-grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
.ko-cal-dow { display: flex; align-items: center; justify-content: center; height: 24px; color: var(--ko-text-subtle); font: 500 12px/16px var(--ko-font); }
.ko-cal-day {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ko-text);
    font: 400 13px/16px var(--ko-font);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ko-cal-day.is-outside { color: var(--ko-text-subtle); }
.ko-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--ko-line-strong); font-weight: 500; }
.ko-cal-day[aria-selected="true"] { background: var(--ko-accent); color: var(--ko-text-inverse); box-shadow: none; font-weight: 500; }
.ko-cal-day.is-in-range { background: var(--ko-accent-soft); border-radius: 0; }
.ko-cal-day:disabled { color: var(--ko-text-subtle); opacity: 0.45; cursor: not-allowed; }
.ko-cal-day:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
@media (hover: hover) and (pointer: fine) {
    .ko-cal-day:not(:disabled):not([aria-selected="true"]):hover { background: var(--ko-bg-hover); }
}
.ko-presets { display: flex; flex-direction: column; min-width: 180px; }

/* ---------------------------------------------------------------------------------------------
 * Lade (rechts) en sheet (onder) — native <dialog>; in 500ms met de iOS-ladecurve, uit in 250ms.
 * ------------------------------------------------------------------------------------------- */

.ko-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(480px, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 16px 0 0 16px;
    background: var(--ko-bg);
    color: var(--ko-text);
    box-shadow: var(--ko-shadow-modal);
    overflow: hidden;
    display: none;
    flex-direction: column;
    transform: translateX(0);
    transition: transform var(--ko-dur-drawer) var(--ko-ease-drawer);
}
.ko-drawer[open] { display: flex; }
.ko-drawer::backdrop { background: rgba(0, 0, 0, 0.4); opacity: 1; transition: opacity var(--ko-dur-modal) var(--ko-ease-out); }
@starting-style {
    .ko-drawer[open] { transform: translateX(100%); }
    .ko-drawer[open]::backdrop { opacity: 0; }
}
.ko-drawer[data-closing] { transform: translateX(100%); transition-duration: var(--ko-dur-drawer-exit); }
.ko-drawer[data-closing]::backdrop { opacity: 0; transition-duration: var(--ko-dur-drawer-exit); }
.ko-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--ko-line-soft); }
.ko-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.ko-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ko-line-soft); }

.ko-drawer.ko-sheet {
    inset: auto 0 0 0;
    width: 100vw;
    height: auto;
    max-height: 85dvh;
    border-radius: 16px 16px 0 0;
    transform: translateY(0);
}
@starting-style {
    .ko-drawer.ko-sheet[open] { transform: translateY(100%); }
}
.ko-drawer.ko-sheet[data-closing] { transform: translateY(100%); }
.ko-sheet-handle {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
    cursor: grab;
    touch-action: none;
}
.ko-sheet-handle::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--ko-line-strong); }
.ko-sheet.is-dragging { transition: none; user-select: none; -webkit-user-select: none; }
.ko-sheet.is-dragging .ko-sheet-handle { cursor: grabbing; }

/* ---------------------------------------------------------------------------------------------
 * Alert — een melding in de pagina die blijft staan tot het opgelost of weggeklikt is.
 * Grote vlakken krijgen een lichtere tint dan de badge; de tekst blijft #333.
 * ------------------------------------------------------------------------------------------- */

.ko-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ko-r-card);
    background: #F2F8FE;
    box-shadow: inset 0 0 0 1px rgba(0, 119, 230, 0.16);
    color: var(--ko-text);
    font: 400 14px/20px var(--ko-font);
    letter-spacing: 0;
}
.ko-alert-icon { margin-top: 1px; color: var(--ko-info); }
.ko-alert-body { flex: 1; min-width: 0; line-height: 22px; overflow-wrap: anywhere; }
.ko-alert-title { font-weight: 500; }
.ko-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ko-alert-success { background: #EEFBF0; box-shadow: inset 0 0 0 1px rgba(21, 176, 66, 0.22); }
.ko-alert-success .ko-alert-icon { color: var(--ko-success-text); }
.ko-alert-warning { background: #FFF8EB; box-shadow: inset 0 0 0 1px rgba(181, 71, 8, 0.18); }
.ko-alert-warning .ko-alert-icon { color: var(--ko-warning); }
.ko-alert-danger { background: #FEF3F2; box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.18); }
.ko-alert-danger .ko-alert-icon { color: var(--ko-danger); }
.ko-alert-neutral { background: var(--ko-bg-subtle); box-shadow: inset 0 0 0 1px var(--ko-line-soft); }
.ko-alert-neutral .ko-alert-icon { color: var(--ko-text-subtle); }
.ko-alert[data-leaving] { opacity: 0; transition: opacity var(--ko-dur-exit) var(--ko-ease-out); }
/* The × of a dismissable alert: a ghost icon button (data-ko-alert-close) that sits in the padding. */
.ko-alert-close { flex: none; margin: -6px -8px -6px 0; }
/* Inline: one sentence with its action on the same row (dashboard notices). The text's first line is centred on
   the 32px button; when narrow the action wraps under the text, still aligned with it. */
.ko-alert.is-inline .ko-alert-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.ko-alert.is-inline .ko-alert-body > :first-child { flex: 1 1 260px; padding: 5px 0; }
.ko-alert.is-inline .ko-alert-actions { margin-top: 0; }
.ko-alert.is-inline .ko-alert-icon { margin-top: 7px; }
.ko-alert.is-inline .ko-alert-close { margin: 0 -8px 0 0; }
/* A column of alerts. */
.ko-alert-stack { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------------------------------------
 * Disclosure — a button that shows or hides a region: "2 meldingen meer tonen", "3 tips voor je account".
 * ko-ui.js: data-ko-disclosure toggles aria-expanded and [hidden] on the aria-controls target.
 * No animation (the region is just there); the chevron turns at once.
 * ------------------------------------------------------------------------------------------- */

.ko-disclosure-chevron { flex: none; }
.ko-disclosure[aria-expanded="true"] .ko-disclosure-chevron { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------------------------
 * Voortgang: balk, onbepaald, meter, verdeling, stappen
 * ------------------------------------------------------------------------------------------- */

.ko-progress { position: relative; height: 6px; border-radius: 999px; background: var(--ko-accent-soft); overflow: hidden; }
.ko-progress-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ko-accent);
    transform: translateX(-100%);
    transition: transform 300ms var(--ko-ease-out);
}
.ko-progress.is-indeterminate .ko-progress-fill { right: auto; width: 40%; animation: ko-indeterminate 1.2s linear infinite; transition: none; }
@keyframes ko-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.ko-progress-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font: 500 13px/16px var(--ko-font); }
.ko-progress-label span:last-child { color: var(--ko-text-subtle); font-weight: 400; font-variant-numeric: tabular-nums; }

.ko-meter { --ko-meter-track: var(--ko-accent-soft); --ko-meter-fill: var(--ko-accent); }
.ko-meter.is-warning { --ko-meter-track: #FEF0C7; --ko-meter-fill: var(--ko-status-warning); }
.ko-meter.is-critical { --ko-meter-track: #FEE4E2; --ko-meter-fill: var(--ko-status-critical); }
.ko-meter .ko-progress { background: var(--ko-meter-track); }
.ko-meter .ko-progress-fill { background: var(--ko-meter-fill); }
/* A row of meters (Schijfruimte · Domeinen · E-mailadressen): as many columns as fit, at least 220px each. */
.ko-meter-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 32px; margin: 0 0 24px; }

.ko-split { display: flex; gap: 2px; height: 8px; }
.ko-split > span { border-radius: 2px; }
.ko-split > span:first-child { border-radius: 4px 2px 2px 4px; }
.ko-split > span:last-child { border-radius: 2px 4px 4px 2px; }
/* The same split repeated in a list (cards): one legend for the page, the value per segment in a tooltip.
   The hit area reaches 8px above and below the 8px bar. */
.ko-split > span[data-ko-tooltip] { position: relative; }
.ko-split > span[data-ko-tooltip]::before { content: ""; position: absolute; inset: -8px 0; }
/* The label also says it ("bijna vol", "vol"); colour is never the only signal. */
.ko-meter-item.is-warning .ko-progress-label span:last-child { color: var(--ko-warning); }
.ko-meter-item.is-critical .ko-progress-label span:last-child { color: var(--ko-danger); }
.ko-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font: 400 13px/16px var(--ko-font); color: var(--ko-text); }
.ko-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ko-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ko-legend .is-line { width: 12px; height: 2px; border-radius: 1px; }
/* The free part of a limit: the light track, with a ring so the swatch shows on a light page too. */
.ko-legend .is-free { background: var(--ko-accent-soft); box-shadow: inset 0 0 0 1px var(--ko-line-strong); }
.ko-legend b { font-weight: 400; color: var(--ko-text-subtle); font-variant-numeric: tabular-nums; }

.ko-steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: ko-step; }
.ko-steps li { margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; position: relative; counter-increment: ko-step; font: 500 13px/16px var(--ko-font); color: var(--ko-text-subtle); }
.ko-steps li::before {
    content: counter(ko-step);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ko-bg);
    box-shadow: inset 0 0 0 1px var(--ko-line-strong);
    font: 500 11px/16px var(--ko-font);
    color: var(--ko-text-subtle);
}
.ko-steps li::after { content: ""; position: absolute; top: 9px; left: 26px; right: 6px; height: 2px; border-radius: 1px; background: var(--ko-line); }
.ko-steps li:last-child::after { display: none; }
.ko-steps li.is-done { color: var(--ko-text); }
.ko-steps li.is-done::before { content: "✓"; background: var(--ko-success); box-shadow: none; color: #FFFFFF; }
.ko-steps li.is-done::after { background: var(--ko-success); }
.ko-steps li[aria-current="step"] { color: var(--ko-text); }
.ko-steps li[aria-current="step"]::before { background: var(--ko-accent); box-shadow: 0 0 0 3px var(--ko-accent-soft); color: #FFFFFF; }
.ko-steps small { font-weight: 400; color: var(--ko-text-subtle); font-size: 12px; }

/* ---------------------------------------------------------------------------------------------
 * Takenlijst — wat de klant nog kan doen om alles op orde te hebben ("3 van 5 op orde").
 * Open taken eerst, elk met één actie; afgeronde taken rustig onderaan met een groen vinkje.
 * Geen afvinken door de klant zelf: een taak is af als de toestand klopt (betaald, ingesteld).
 * ------------------------------------------------------------------------------------------- */

.ko-progress.is-success .ko-progress-fill { background: var(--ko-success); }
.ko-tasks { list-style: none; margin: 0; padding: 0; }
.ko-task { display: flex; align-items: center; gap: 12px; min-height: var(--ko-h-row-store); margin: 0; padding: 8px 16px; border-top: 1px solid var(--ko-line-soft); font: 400 14px/20px var(--ko-font); letter-spacing: 0; } /* margin: legacy pages indent every li */
.ko-task-mark { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ko-line-strong); display: inline-flex; align-items: center; justify-content: center; }
.ko-task.is-done .ko-task-mark { background: var(--ko-success); box-shadow: none; color: var(--ko-text-inverse); }
.ko-task.is-done .ko-task-mark .ko-icon { width: 12px; height: 12px; }
.ko-task-text { flex: 1; min-width: 0; }
.ko-task-text b { display: block; font-weight: 500; }
.ko-task-text span { color: var(--ko-text-subtle); font-size: 13px; line-height: 18px; }
.ko-task.is-done .ko-task-text b { color: var(--ko-text-subtle); font-weight: 400; }
.ko-task.is-done .ko-task-text span { display: none; }
.ko-task > .ko-btn { flex: 0 0 auto; }
/* phone: the action under the text, lined up with it (mark 20 + gap 12) */
@media (max-width: 480px) { .ko-task { flex-wrap: wrap; row-gap: 8px; } .ko-task-text { flex-basis: calc(100% - 32px); } .ko-task > .ko-btn { margin-left: 32px; } }

/* ---------------------------------------------------------------------------------------------
 * Avatar — mensen rond, organisaties en diensten vierkant. Kleur volgt de naam, niet de rij.
 * ------------------------------------------------------------------------------------------- */

.ko-avatar {
    --ko-av: 32px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--ko-av);
    width: var(--ko-av);
    height: var(--ko-av);
    border-radius: 50%;
    background: #E5F1FC;
    color: #005BB0;
    font: 500 13px/1 var(--ko-font);
    letter-spacing: 0;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
}
.ko-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.ko-avatar.has-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.ko-avatar-xs { --ko-av: 20px; font-size: 9px; }
.ko-avatar-sm { --ko-av: 24px; font-size: 10px; }
.ko-avatar-lg { --ko-av: 40px; font-size: 15px; }
.ko-avatar-xl { --ko-av: 56px; font-size: 20px; }
.ko-avatar-square { border-radius: 8px; }
.ko-avatar-xs.ko-avatar-square, .ko-avatar-sm.ko-avatar-square { border-radius: 6px; }
.ko-avatar[data-tint="1"] { background: #E5F1FC; color: #005BB0; }
.ko-avatar[data-tint="2"] { background: #FDEBE1; color: #B4461A; }
.ko-avatar[data-tint="3"] { background: #E3F8E6; color: #127A31; }
.ko-avatar[data-tint="4"] { background: #ECEAFB; color: #4A3AA7; }
.ko-avatar[data-tint="5"] { background: #FCE8EF; color: #B23A68; }
.ko-avatar[data-tint="6"] { background: #E0F6EF; color: #127A5A; }
.ko-avatar-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ko-status-good); box-shadow: 0 0 0 2px var(--ko-bg); }
.ko-avatar-dot.is-away { background: var(--ko-status-warning); }
.ko-avatar-dot.is-off { background: #BDBDBD; }
.ko-avatar-group { display: inline-flex; align-items: center; }
.ko-avatar-group > .ko-avatar { box-shadow: 0 0 0 2px var(--ko-bg); }
.ko-avatar-group > .ko-avatar + .ko-avatar { margin-left: -8px; }
.ko-avatar-more { background: var(--ko-neutral-bg); color: var(--ko-text-subtle); }

/* ---------------------------------------------------------------------------------------------
 * Kaarten: statistiek, link
 * ------------------------------------------------------------------------------------------- */

.ko-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.ko-stat-label { font: 500 13px/16px var(--ko-font); color: var(--ko-text-subtle); }
.ko-stat-value { font: 600 24px/28px var(--ko-font); letter-spacing: -0.02em; color: var(--ko-text); }
.ko-stat-delta { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/16px var(--ko-font); color: var(--ko-text-subtle); }
.ko-stat-delta.is-good { color: var(--ko-success-text); }
.ko-stat-delta.is-bad { color: var(--ko-danger); }
.ko-stat-delta span { color: var(--ko-text-subtle); font-weight: 400; }
/* Alleen de sparkline — niet elk svg in de tegel (het pijltje bij het verschil is ook een svg). */
.ko-spark, .ko-stat > svg[data-ko-spark] { display: block; width: 100%; height: 44px; margin-top: auto; overflow: visible; }

a.ko-card, .ko-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 150ms ease, background-color 150ms ease;
}
a.ko-card:hover, a.ko-card:focus, a.ko-card:visited { color: inherit; text-decoration: none; } /* ko-ui-check-ignore: neutralises legacy a:hover; the card's hover is the ring, gated below */
.ko-card-link:active { background: var(--ko-bg-pressed); }
.ko-card-link:focus-visible { outline: none; box-shadow: var(--ko-ring), var(--ko-focus-ring); }
@media (hover: hover) and (pointer: fine) {
    .ko-card-link:hover { box-shadow: 0 0 0 1px var(--ko-line-strong); }
}

/* ---------------------------------------------------------------------------------------------
 * Grafieken — dunne marks, haarlijn-raster, tekst in teksttokens, nooit in de reekskleur.
 * ------------------------------------------------------------------------------------------- */

.ko-chart { position: relative; width: 100%; }
.ko-chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--ko-font); }
/* Table view (koChartTable): the table lines up with the content around it, the legend before the chart hides. */
.ko-chart.is-table .ko-table th:first-child, .ko-chart.is-table .ko-table td:first-child { padding-left: 0; }
.ko-chart.is-table .ko-table th:last-child, .ko-chart.is-table .ko-table td:last-child { padding-right: 0; }
.ko-chart.is-table .ko-table tr:last-child td { border-bottom: 0; }
.ko-legend:has(+ .ko-chart.is-table) { display: none; }
.ko-chart .ko-chart-grid { stroke: var(--ko-chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ko-chart .ko-chart-base { stroke: var(--ko-chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.ko-chart .ko-chart-tick { fill: var(--ko-text-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.ko-chart .ko-chart-label { fill: var(--ko-text); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ko-chart .ko-chart-cross { stroke: var(--ko-chart-axis); stroke-width: 1; }
.ko-chart-tip {
    position: absolute;
    z-index: 5;
    min-width: 140px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ko-bg);
    box-shadow: var(--ko-shadow-pop);
    font: 400 12px/16px var(--ko-font);
    color: var(--ko-text);
    pointer-events: none;
    opacity: 0;
    transition: opacity 100ms ease;
}
.ko-chart-tip[data-open] { opacity: 1; }
.ko-chart-tip strong { display: block; margin-bottom: 4px; font-weight: 500; }
.ko-chart-tip div { display: flex; align-items: center; gap: 6px; }
.ko-chart-tip div b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.ko-chart-tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------------------------------------------------------------------------------------------
 * Tabel-extra's: sorteren, selecteren, vaste kop, bulkbalk, paginering
 * ------------------------------------------------------------------------------------------- */

.ko-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    margin: 0 -4px;
    padding: 0 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.ko-th-sort .ko-icon { opacity: 0; }
th[aria-sort] .ko-th-sort { color: var(--ko-text); }
th[aria-sort] .ko-th-sort .ko-icon { opacity: 1; }
.ko-th-sort:focus-visible { outline: none; box-shadow: var(--ko-focus-ring); }
@media (hover: hover) and (pointer: fine) {
    .ko-th-sort:hover { color: var(--ko-text); }
    .ko-th-sort:hover .ko-icon { opacity: 0.5; }
    th[aria-sort] .ko-th-sort:hover .ko-icon { opacity: 1; }
}
.ko-table .is-select { width: 40px; padding-right: 0; }
.ko-table tr[aria-selected="true"] td { background: #F2F8FE; }
.ko-table-sticky { max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.ko-table-sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--ko-bg); }
.ko-table td.is-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.ko-bulkbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px 0 12px;
    border-radius: var(--ko-r-control);
    background: var(--ko-text);
    color: var(--ko-text-inverse);
    font: 500 13px/16px var(--ko-font);
}
.ko-bulkbar[hidden] { display: none; }
.ko-bulkbar .ko-btn-ghost { color: var(--ko-text-inverse); }
@media (hover: hover) and (pointer: fine) {
    .ko-bulkbar .ko-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
}
.ko-bulkbar-count { flex: 1; font-variant-numeric: tabular-nums; }

.ko-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--ko-line-soft); color: var(--ko-text-subtle); font: 400 13px/16px var(--ko-font); font-variant-numeric: tabular-nums; }
.ko-pagination-nav { display: flex; align-items: center; gap: 4px; }
.ko-pagination[hidden], .ko-pagination-nav[hidden] { display: none; }
/* "1–10 van 23" + spinner tijdens het laden (koLoading), en optioneel "3 van 10 geselecteerd" */
.ko-pagination-info { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ko-pagination-info .ko-spinner { width: 12px; height: 12px; }
.ko-pagination-info .ko-spinner[hidden] { display: none; }
.ko-pagination-selected { margin-right: auto; }
.ko-pagination-selected:empty { display: none; }
/* Een blok dat ververst (koLoading): de oude inhoud blijft staan, gedimd, zonder blur of beweging */
[aria-busy="true"] > .ko-table-wrap tbody, .ko-table-wrap[aria-busy="true"] tbody { opacity: 0.5; }

/* ---------------------------------------------------------------------------------------------
 * Hulp: tekst alleen voor schermlezers
 * ------------------------------------------------------------------------------------------- */

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

/* Skiplink: eerste focusbare element van elke pagina, zichtbaar zodra hij focus krijgt. */
.ko-skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4000;
    padding: 8px 12px;
    border-radius: var(--ko-r-control);
    background: var(--ko-text);
    color: var(--ko-text-inverse);
    font: 500 13px/16px var(--ko-font);
    text-decoration: none;
    transform: translateY(-150%);
}
.ko-skip-link:focus { transform: none; outline: none; box-shadow: var(--ko-focus-ring); }

/* ---------------------------------------------------------------------------------------------
 * Detaillijst (label/waarde) — rijen van 40px, label #777, waarde #333, leeg = "Niet ingevuld".
 * In een .ko-card-body met padding 4px 16px. Smal scherm: label boven de waarde.
 * ------------------------------------------------------------------------------------------- */

.ko-dl { margin: 0; --ko-dl-label: 140px; }
.ko-dl > div {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--ko-h-row);
    padding: 8px 0;
    border-bottom: 1px solid var(--ko-line-soft);
}
.ko-dl > div:last-child { border-bottom: 0; }
.ko-dl dt { flex: 0 0 var(--ko-dl-label); min-width: 0; margin: 0; color: var(--ko-text-subtle); font: 400 14px/20px var(--ko-font); overflow-wrap: anywhere; } /* a long domain as label wraps instead of pushing the values aside */
.ko-dl dd { flex: 1; min-width: 0; margin: 0; color: var(--ko-text); font: 400 14px/20px var(--ko-font); overflow-wrap: anywhere; }
.ko-dl dd.is-empty { color: var(--ko-text-subtle); }
/* A button or copy button in a value keeps the 40px row (32px control, pulled into the padding). */
.ko-dl dd > .ko-btn { margin-block: -6px; vertical-align: middle; }
.ko-dl dd > .ko-btn:not(:first-child) { margin-left: 8px; }
/* Sub-heading between groups of rows (13/16 #777, no line): never a card in a card. */
.ko-dl > .ko-dl-heading { display: block; min-height: 0; padding: 16px 0 4px; border-bottom: 0; color: var(--ko-text-subtle); font: 500 13px/16px var(--ko-font); }
.ko-dl > .ko-dl-heading:first-child { padding-top: 8px; }
/* Long text (a note, a message): label above, value over the full width, line breaks kept. */
.ko-dl > div.is-block { flex-direction: column; align-items: stretch; gap: 4px; }
.ko-dl > div.is-block dt { flex-basis: auto; }
.ko-dl > div.is-block dd { white-space: pre-wrap; }
@media (max-width: 560px) {
    .ko-dl > div { flex-direction: column; align-items: flex-start; gap: 2px; }
    .ko-dl dt { flex-basis: auto; }
}

/* Rij statistiektegels: 4, 2 of 1 naast elkaar, nooit 3 + 1. De minimale kolombreedte springt mee met de breedte
   van het raster zelf (geen container query nodig): vanaf 796px (4 × 190 + tussenruimte) een kwart → 4 kolommen,
   vanaf 392px de helft → 2, anders de volle breedte → 1. De term (Npx − 100%) × 999 is onder N heel groot en
   erboven negatief, zo kiest clamp() de goede tak. Minder tegels vullen de rij (auto-fit klapt lege kolommen in).
   −0,1px: afronding mag vier precieze kwarten niet net te breed maken (dan toch 3 + 1). */
.ko-stat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 36px) / 4 - 0.1px), calc((796px - 100%) * 999), clamp(calc((100% - 12px) / 2 - 0.1px), calc((392px - 100%) * 999), 100%)), 1fr));
}

/* ---------------------------------------------------------------------------------------------
 * Schuifbalk — .ko-scroll op een vlak dat zelf scrolt (zijbalk, lade, lange lijst): dun en rustig,
 * kleur uit de lijnen (geen eigen grijs), spoor onzichtbaar. Firefox en Chrome: de standaard dunne
 * balk in onze kleur; Safari: een duim van 6px (10px breed met 2px lucht), op hover iets donkerder.
 * Niet verbergen: een schuifbalk vertelt dat er meer is (de tabs-rij is de uitzondering, die scrolt de
 * open tab zelf in beeld).
 * ------------------------------------------------------------------------------------------- */

.ko-scroll { scrollbar-width: thin; scrollbar-color: var(--ko-line-strong) transparent; }
.ko-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.ko-scroll::-webkit-scrollbar-track, .ko-scroll::-webkit-scrollbar-corner { background: transparent; }
.ko-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--ko-r-item); background: var(--ko-line-strong); background-clip: padding-box; }
@media (hover: hover) and (pointer: fine) {
    .ko-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ko-text) 32%, transparent); }
}

/* ---------------------------------------------------------------------------------------------
 * Minder beweging: posities en schaal vallen weg, kleur en doorzichtigheid blijven.
 * ------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ko-btn:active, .ko-hold.is-holding { transform: none; }
    .ko-menu, .ko-menu[data-open], .ko-tooltip, .ko-tooltip[data-open], .ko-dialog, .ko-dialog[data-closing], .ko-toast, .ko-toast[data-leaving] { transform: none; }
    .ko-switch::before { transition-duration: 0s; }
    .ko-skeleton { animation: none; background: #EEEEEE; }
    .ko-copy .ko-swap > * { transform: none !important; filter: none !important; }
    .ko-segmented[data-ready] .ko-segmented-indicator { transition-duration: 0s; }
    .ko-popover, .ko-popover[data-open] { transform: none; }
    .ko-drawer, .ko-drawer[data-closing] { transform: none; transition: opacity var(--ko-dur-modal) ease; }
    .ko-drawer[data-closing] { opacity: 0; }
    .ko-progress.is-indeterminate .ko-progress-fill { animation-duration: 2.4s; }
    .ko-input-btn:active { transform: none; }
    .ko-spinner { animation-duration: 1.2s; }
    @starting-style {
        .ko-dialog[open] { transform: none; }
        .ko-toast { transform: none; }
        .ko-drawer[open], .ko-drawer.ko-sheet[open] { transform: none; opacity: 0; }
    }
}