/*
 * ko-ui 1.27.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;
    /* De focusring is een schaduw. Zet er altijd `outline: 2px solid transparent` bij, nooit `outline: none`: in de
       hoogcontrastmodus van Windows (forced-colors) vallen schaduwen weg en is die doorzichtige outline de ring. */
    --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-check: 18px;             /* vakje van een checkbox of radio: de maat van een icoon */
    --ko-r-check: 5px;
    --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); }
/* Regelafbreking (sinds 1.26.0): een titel van twee regels krijgt twee regels van gelijke lengte, lopende tekst
   eindigt niet op één los woord. Alleen de afbreking verandert; een browser die het niet kent breekt af als voorheen. */
.ko-title-page, .ko-title { text-wrap: balance; }
.ko-prose, .ko-page-head-text p, .ko-dialog-body p, .ko-alert-body, .ko-empty p { text-wrap: pretty; }
.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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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; }
/* De kop breekt af als titel en actie niet naast elkaar passen (een telefoon, een smalle kolom): de actie komt
   dan onder de titel. Daarom 8px boven en onder: zonder die ruimte raakten twee regels de lijnen van de kaart.
   Eén regel blijft 52px hoog (32px knop + 2 × 8px past binnen de min-height). */
.ko-card-header { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--ko-line-soft); }
.ko-card-header > .ko-title { min-width: 0; overflow-wrap: anywhere; }
.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: 2px solid transparent; outline-offset: -2px; 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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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 blijven echte invoervelden, dus toetsenbord, schermlezer, formulier en het klikbare
   label zijn van de browser. Alleen het tekenen is van ons (sinds 1.27.0), zodat het vakje op elk apparaat hetzelfde
   is en bij de velden past: de maat van een icoon, de lijn van een veld, gekozen = blauw (blauw = selectie). Het
   vinkje en het streepje staan op het 12px-raster van de kleine iconen. Alleen de kleur beweegt: in een tabel vink
   je er tientallen achter elkaar aan. */
.ko-check, .ko-radio {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    position: relative;
    flex: 0 0 var(--ko-check);
    width: var(--ko-check);
    height: var(--ko-check);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ko-r-check);
    background: var(--ko-bg);
    box-shadow: inset 0 0 0 1px var(--ko-line-strong);
    cursor: pointer;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ko-dur-press) ease, box-shadow var(--ko-dur-press) ease;
}
.ko-radio { border-radius: 50%; }
.ko-check::before, .ko-radio::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ko-text-inverse);
    opacity: 0;
    transition: opacity var(--ko-dur-press) ease;
}
.ko-check::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.25 6.5 4.75 9.25 9.75 2.75'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.25 6.5 4.75 9.25 9.75 2.75'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* "een deel gekozen" (de kop van een tabel): het streepje van minus-12 */
.ko-check:indeterminate::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='2.75' y1='6' x2='9.25' y2='6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='2.75' y1='6' x2='9.25' y2='6'/%3E%3C/svg%3E");
}
.ko-radio::before { inset: 6px; border-radius: 50%; }
.ko-check:active, .ko-radio:active { background: var(--ko-bg-pressed); }
.ko-check[aria-invalid="true"], .ko-radio[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--ko-danger-solid); }
.ko-check:checked, .ko-check:indeterminate, .ko-radio:checked { background: var(--ko-accent); box-shadow: inset 0 0 0 1px var(--ko-accent); }
.ko-check:checked::before, .ko-check:indeterminate::before, .ko-radio:checked::before { opacity: 1; }
.ko-check:disabled, .ko-radio:disabled { opacity: 0.5; cursor: not-allowed; }
/* Hoogcontrast (forced-colors): achtergronden vallen weg, dus daar tekent de browser het vakje weer zelf. */
@media (forced-colors: active) {
    .ko-check, .ko-radio { -webkit-appearance: auto; appearance: auto; }
    .ko-check::before, .ko-radio::before { display: none; }
}
/* 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; }
/* Op een aanraakscherm is het raakvlak van de regel 44px hoog, zonder dat de regel zelf hoger wordt: het vlak
   steekt onzichtbaar boven en onder de regel uit, de ruimte eromheen blijft die van de pagina. */
@media (pointer: coarse) {
    .ko-choice, .ko-switch-field { position: relative; }
    .ko-choice::after, .ko-switch-field::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--ko-h-row-store); transform: translateY(-50%); }
}
.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: var(--ko-check) 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: 1px; }
.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) { outline: 2px solid transparent; 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: 2px solid transparent; 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; }
/* Smal (sinds 1.26.0): vijf namen naast elkaar lopen onder 560px in elkaar, dus daar staan de stappen onder elkaar,
   de naam naast het bolletje. Op een telefoon vanzelf; in een smalle kolom op een breed scherm (een kaart naast de
   zijbalk) zodra het vak eromheen .ko-container heeft: dan telt de breedte van dat vak, niet die van het scherm. */
.ko-container { container-type: inline-size; }
@media (max-width: 560px) {
    .ko-steps { flex-direction: column; gap: 12px; }
    .ko-steps li { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .ko-steps li::after { display: none; }
}
@container (width <= 560px) {
    .ko-steps { flex-direction: column; gap: 12px; }
    .ko-steps li { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .ko-steps li::after { display: none; }
}

/* ---------------------------------------------------------------------------------------------
 * 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; touch-action: pan-y; }
/* Aflezen (ko-ui.js, sinds 1.25.0): een hulplijn en het punt onder de aanwijzer, en de periode met de waarde erboven.
   Zonder animatie: het volgt de aanwijzer. pan-y hierboven: omhoog en omlaag blijft de pagina schuiven, opzij is
   aflezen. De tekst hangt in de tegel (de ouder van het svg), niet in het svg: hij mag over de regels erboven vallen. */
.ko-spark-guide { stroke: var(--ko-line-strong); stroke-width: 1; }
.ko-spark-at { fill: var(--ko-bg); stroke: var(--ko-series-1); stroke-width: 2; }
.ko-spark-host { position: relative; }
.ko-spark-tip {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    transform: translate(-50%, calc(-100% - 10px));
    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);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}
.ko-spark-tip[hidden] { display: none; }

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: 2px solid transparent; 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: 2px solid transparent; 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: 2px solid transparent; 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; }
    }
}