/* Ontwerptaal (8 sep 2026): de gedeelde primitieven van het goedgekeurde
   ontwerp (telefonie-ontwerp/Main, Telefonist, Gesprekken; Overzicht en
   Inrichting van Reserveringen). Prefix ds-, gescoped onder .app-root.
   Geladen vóór telefonie2.css en reserveringen2.css (wwwroot/index.html).

   KEUZE (extractie uit telefonie2.css, 8 sep 2026): elke gedeelde regel
   staat hier één keer, met de oude tf-klasse als tweede selector in
   dezelfde lijst (".app-root .ds-knop, .app-root .tf-knop { … }"). Zo
   blijft Pages/Telefonie2/** letterlijk ongewijzigd, blijven de
   Telefonie-tests (die o.a. .tf-status__los en .tf-rij__tijd lezen) groen,
   en is er nergens een gedupliceerde declaratie. De tf-aliassen zijn een
   overgang: zodra de Telefonie-razor op ds- staat, kan per regel de tweede
   selector weg. Nieuwe features gebruiken uitsluitend ds-; telefonie2.css en
   reserveringen2.css houden alleen nog wat écht van die feature is.

   Wat hier staat (alles feature-vrij):
   - typografie: ds-disp (Bricolage Grotesque 600, -0.01em), ds-num;
   - paginakop met statusregel: ds-page, ds-head, ds-status;
   - secties met kop + hint en de meescrollende inhoudsopgave: ds-form,
     ds-toc-nav/ds-toc, ds-secties/ds-anchor, ds-section, ds-sub/ds-subblok,
     ds-hint/ds-tekst/ds-fouttekst/ds-waarschuwing;
   - velden en controls: ds-veld, ds-invoer, ds-knop (+ --primair, --klein,
     --icoon, --gevaar), ds-link, ds-vink, ds-schakelrij, ds-twee-velden;
   - week met zeven kolommen en twee tijdvakken: ds-week, ds-dag;
   - segmentfilter: ds-segment;
   - één lijstoppervlak met kolomkop, rijen als knoppen en een detail onder
     de open rij: ds-tabel, ds-rij, ds-detail (+ __links, __zij);
     de kolombreedtes komen per feature via --ds-kolommen (en de inspringing
     van het detail via --ds-detail-inspring) op het ds-tabel-element;
   - vaste opslaanbalk: ds-opslaanbalk;
   - lege staat, laden, fout: ds-leeg, ds-laden, ds-fout;
   - dagkop boven een lijst: ds-dagkop.

   Ontwerptaal:
   - Alleen thematokens (--app-*), dus licht én donker thema kloppen vanzelf.
     Nergens een hexkleur.
   - Koppen en grote cijfers in 'Bricolage Grotesque' (index.html laadt hem
     al), gewicht 600, letter-spacing -0.01em; lopende tekst blijft de
     app-font. Cijfers altijd tabular-nums, zodat kolommen niet dansen.
   - Goud (--app-primary) alléén voor: actieve/geselecteerde staat, de
     primaire knop, de balk/grafiek en een cijfer dat aandacht vraagt.
   - Hiërarchie door type, witruimte en 1px-lijnen (--app-border), niet
     door geneste kaarten. Eén oppervlak per lijst, verder open secties.
   - Controls: 40px hoog, radius 8px, --app-surface met --app-border.
   prefers-reduced-motion zet de enige animatie (opslaanbalk) stil. */

/* ── Typografische bouwstenen ─────────────────────────────────────────── */
.app-root .ds-disp,
.app-root .tf-disp {
    font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app-root .ds-num,
.app-root .tf-num {
    font-variant-numeric: tabular-nums;
}

/* Machinetekst: een sleutel, een id, een codefragment. Iets kleiner dan de
   lopende tekst en secundair van kleur, zodat het naast een label leest als
   toelichting en niet als tweede titel. (Toegevoegd bij v2c taak 5 -- het
   veldregister toont de sleutel van elk veld; typografie is een gedeelde
   primitief, dus hij hoort hier en niet in crm.css.) */
.app-root .ds-mono {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

/* ── Pagina-skelet ────────────────────────────────────────────────────── */
.app-root .ds-page,
.app-root .tf-page {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 1120px;
    min-width: 0;
}

.app-root .ds-page--form,
.app-root .tf-page--form {
    gap: 2rem;
}

.app-root .ds-page--lijst,
.app-root .tf-page--lijst {
    gap: 1.5rem;
}

.app-root .ds-head,
.app-root .tf-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}

.app-root .ds-head--lijn,
.app-root .tf-head--lijn {
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--app-border);
}

.app-root .ds-head__tekst,
.app-root .tf-head__tekst {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.app-root .ds-head__titel,
.app-root .tf-head__titel {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--app-text-primary);
}

.app-root .ds-head__sub,
.app-root .tf-head__sub {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-head__meta,
.app-root .tf-head__meta {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

/* Statusregel onder de titel: "Neemt op | +31 … | vestiging | bereikbaar". */
.app-root .ds-status,
.app-root .tf-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .625rem;
    font-size: .875rem;
    color: var(--app-text-secondary);
}

.app-root .ds-status__sep,
.app-root .tf-status__sep {
    color: var(--app-border);
    user-select: none;
}

.app-root .ds-status__aan,
.app-root .tf-status__aan {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--app-success);
}

.app-root .ds-status__uit,
.app-root .tf-status__uit {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--app-text-secondary);
}

.app-root .ds-status__fout,
.app-root .tf-status__fout {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--app-danger);
}

.app-root .ds-status__dot,
.app-root .tf-status__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* Een los onderdeel van de statusregel dat zichzelf kan weglaten (de
   verbruikregel uit Telefonist2Verbruik): het scheidingsteken hoort erbij
   en verdwijnt mee. */
.app-root .ds-status__los:empty,
.app-root .tf-status__los:empty {
    display: none;
}

.app-root .ds-status__los::before,
.app-root .tf-status__los::before {
    content: "|";
    margin-right: .625rem;
    color: var(--app-border);
}

/* Lege staat: een uitnodiging in gewone taal, tussen twee lijnen. */
.app-root .ds-leeg,
.app-root .tf-leeg {
    margin: 0;
    padding: 1.25rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    font-size: .875rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-laden,
.app-root .tf-laden {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    color: var(--app-text-secondary);
}

.app-root .ds-fout,
.app-root .tf-fout {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-fout__tekst,
.app-root .tf-fout__tekst {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* ── Secties en inhoudsopgave ─────────────────────────────────────────── */
.app-root .ds-form,
.app-root .tf-form {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}

/* Meescrollende inhoudsopgave; .content-area is de scroller, sticky werkt
   daarbinnen gewoon. Sticky staat op de <nav> (een grid-item, dus zijn
   containing block is de hele rij naast de secties) en niet op de lijst
   erin, die maar zo hoog is als zijn eigen inhoud. */
.app-root .ds-toc-nav,
.app-root .tf-toc-nav {
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

.app-root .ds-toc,
.app-root .tf-toc {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.app-root .ds-toc__link,
.app-root .tf-toc__link {
    display: block;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: var(--app-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}

.app-root .ds-toc__link:hover,
.app-root .tf-toc__link:hover {
    color: var(--app-text-primary);
    text-decoration: none;
}

.app-root .ds-toc__link.is-actief,
.app-root .tf-toc__link.is-actief {
    color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

.app-root .ds-toc__link:focus-visible,
.app-root .tf-toc__link:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .ds-secties,
.app-root .tf-secties {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
}

/* Ankerdoel per sectie; scroll-margin houdt de kop onder de bovenrand. */
.app-root .ds-anchor,
.app-root .tf-anchor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-margin-top: 1.5rem;
    min-width: 0;
}

.app-root .ds-section,
.app-root .tf-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-root .ds-section__kop,
.app-root .tf-section__kop {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.app-root .ds-section__kop--rij,
.app-root .tf-section__kop--rij {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-root .ds-section__titel,
.app-root .tf-section__titel {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--app-text-primary);
}

.app-root .ds-section__hint,
.app-root .tf-section__hint {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-section__teller,
.app-root .tf-section__teller {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .ds-sub,
.app-root .tf-sub {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.app-root .ds-subblok,
.app-root .tf-subblok {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
}

/* Ingeklapte sectie (spec §10, fase 4): een <details> met de sectiekop als
   <summary>. Dicht = alleen de kop; grijs met een tag "Niet ingesteld"
   zolang er niets aanstaat (.is-leeg). Native <details>, dus geen JS; de
   open-stand komt uit Blazor zodat de inhoudsopgave 'm ook kan openen. */
.app-root .ds-inklap,
.app-root .tf-inklap {
    min-width: 0;
}

/* Fixronde 1 (17 sep 2026): de flex-kolom hoort op de inhoud, niet op de
   <details> zelf -- een <details> rendert zijn niet-summary kinderen door
   één slot, dus display:flex op .ds-inklap zelf deed niets voor de
   tussenruimte en verstoorde de normale stroom niet zichtbaar, maar was
   dode CSS die de indruk wekte dat de kinderen een flex-rij waren. */
.app-root .ds-inklap__inhoud,
.app-root .tf-inklap__inhoud {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.app-root .ds-inklap__kop,
.app-root .tf-inklap__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.app-root .ds-inklap__kop::-webkit-details-marker,
.app-root .tf-inklap__kop::-webkit-details-marker {
    display: none;
}

.app-root .ds-inklap__kop:focus-visible,
.app-root .tf-inklap__kop:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
    border-radius: .5rem;
}

.app-root .ds-inklap__pijl,
.app-root .tf-inklap__pijl {
    flex: 0 0 auto;
    margin-top: .375rem;
    color: var(--app-text-secondary);
    transition: transform .15s ease;
}

.app-root .ds-inklap[open] > .ds-inklap__kop .ds-inklap__pijl,
.app-root .tf-inklap[open] > .tf-inklap__kop .tf-inklap__pijl {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .app-root .ds-inklap__pijl,
    .app-root .tf-inklap__pijl { transition: none; }
}

.app-root .ds-section--ingeklapt.is-leeg .ds-section__titel,
.app-root .tf-section--ingeklapt.is-leeg .tf-section__titel {
    color: var(--app-text-secondary);
}

.app-root .ds-section__tag,
.app-root .tf-section__tag {
    display: inline-block;
    margin-left: .5rem;
    padding: .0625rem .5rem;
    border-radius: 999px;
    background-color: var(--app-secondary-soft);
    color: var(--app-text-secondary);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.app-root .ds-tekst,
.app-root .tf-tekst {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-hint,
.app-root .tf-hint {
    margin: 0;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-fouttekst,
.app-root .tf-fouttekst {
    margin: 0;
    font-size: .8125rem;
    color: var(--app-danger);
}

.app-root .ds-waarschuwing,
.app-root .tf-waarschuwing {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--app-warning-text);
}

/* ── Velden en controls ───────────────────────────────────────────────── */
.app-root .ds-veld,
.app-root .tf-veld {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.app-root .ds-veld__label,
.app-root .tf-veld__label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--app-text-secondary);
}

.app-root .ds-veld__hint {
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .ds-twee-velden,
.app-root .tf-twee-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.app-root .ds-invoer,
.app-root .tf-invoer {
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    padding: 0 .75rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
    color: var(--app-text-primary);
    font-size: .875rem;
    font-family: inherit;
}

.app-root textarea.ds-invoer,
.app-root textarea.tf-invoer {
    height: auto;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    resize: vertical;
    line-height: 1.45;
}

.app-root .ds-invoer:focus-visible,
.app-root .tf-invoer:focus-visible {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px var(--app-primary-soft);
}

/* Fout veld (19 sep 2026): aria-invalid werd wel gezet maar was nergens te zien — de fout stond
   alleen in de rode regel eronder. Zelfde token als .ds-fouttekst. Alleen .ds-invoer: de andere
   aria-invalid-velden in de app zijn .form-input en blijven ongemoeid. */
.app-root .ds-invoer[aria-invalid="true"] {
    border-color: var(--app-danger);
}

.app-root .ds-invoer:disabled,
.app-root .tf-invoer:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.app-root .ds-invoer::placeholder,
.app-root .tf-invoer::placeholder {
    color: var(--app-text-secondary);
    opacity: .8;
}

/* Eenheid als suffix ín het veld (spec §7/§10): "120 min", "60 dagen". De
   invoer houdt rechts ruimte vrij; de suffix staat er overheen. */
.app-root .ds-eenheid,
.app-root .tf-eenheid {
    position: relative;
    display: flex;
    align-items: center;
}

.app-root .ds-eenheid .ds-invoer,
.app-root .tf-eenheid .tf-invoer {
    width: 100%;
    /* Fixronde whole-phase review (F5): logical property i.p.v. -right, zodat
       een toekomstige RTL-taal de suffix niet onder de tekst laat vallen. */
    padding-inline-end: var(--ds-eenheid-breedte, 3.25rem);
}

.app-root .ds-eenheid__suffix,
.app-root .tf-eenheid__suffix {
    position: absolute;
    inset-inline-end: .75rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    pointer-events: none;
}

.app-root .ds-teller,
.app-root .tf-teller {
    margin: .25rem 0 0;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

/* Een schakelrij: tekst links, app-toggle rechts, 1px-lijn erboven. */
.app-root .ds-schakelrij,
.app-root .tf-schakelrij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 0;
    border-top: 1px solid var(--app-border);
    cursor: pointer;
}

.app-root .ds-schakelrij--eerste,
.app-root .tf-schakelrij--eerste {
    border-top: 0;
    padding-top: 0;
}

.app-root .ds-schakelrij__tekst,
.app-root .tf-schakelrij__tekst {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.app-root .ds-schakelrij__titel,
.app-root .tf-schakelrij__titel {
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-schakelrij__hint,
.app-root .tf-schakelrij__hint {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .ds-schakelrij .app-toggle:focus-visible,
.app-root .tf-schakelrij .app-toggle:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .ds-vink,
.app-root .tf-vink {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--app-text-primary);
    cursor: pointer;
}

.app-root .ds-vink input,
.app-root .tf-vink input {
    accent-color: var(--app-primary);
}

.app-root .ds-vink input:focus-visible,
.app-root .ds-dag__kop input:focus-visible,
.app-root .tf-vink input:focus-visible,
.app-root .tf-dag__kop input:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .ds-vinken,
.app-root .tf-vinken {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
}

/* Een vinkje met één regel uitleg eronder (NN/g: in een formulier met een
   opslaanknop horen vinkjes, geen schakelaars). Vink bovenaan uitgelijnd,
   tekst en hint als kolom. */
.app-root .ds-vink--uitleg,
.app-root .tf-vink--uitleg {
    align-items: flex-start;
    padding: .625rem 0;
}

.app-root .ds-vink--uitleg input,
.app-root .tf-vink--uitleg input {
    margin-top: .2rem;
    flex: 0 0 auto;
}

.app-root .ds-vink--uitleg > span,
.app-root .tf-vink--uitleg > span {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

/* Meerdere vinkjes onder elkaar: een lijn ertussen, zoals de schakelrijen
   hadden. */
.app-root .ds-vinklijst,
.app-root .tf-vinklijst {
    display: flex;
    flex-direction: column;
}

.app-root .ds-vinklijst > .ds-vink--uitleg,
.app-root .tf-vinklijst > .tf-vink--uitleg {
    border-top: 1px solid var(--app-border);
}

.app-root .ds-vinklijst > .ds-vink--uitleg:first-child,
.app-root .tf-vinklijst > .tf-vink--uitleg:first-child {
    border-top: 0;
}

/* Knoppen: 40px, radius 10px. Goud alleen voor de primaire. */
.app-root .ds-knop,
.app-root .tf-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
    background-color: transparent;
    color: var(--app-text-primary);
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s;
}

.app-root .ds-knop:hover:not(:disabled),
.app-root .tf-knop:hover:not(:disabled) {
    background-color: var(--app-secondary-soft);
}

.app-root .ds-knop--primair,
.app-root .tf-knop--primair {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-surface);
}

.app-root .ds-knop--primair:hover:not(:disabled),
.app-root .tf-knop--primair:hover:not(:disabled) {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}

/* Een gevaarlijke actie (annuleren, verwijderen): rood, zonder rand --
   geen tweede gevulde knop naast de primaire. */
.app-root .ds-knop--gevaar {
    border-color: transparent;
    color: var(--app-danger);
}

.app-root .ds-knop--gevaar:hover:not(:disabled) {
    background-color: var(--app-danger-soft);
}

/* Een tekstknop: geen rand, geen vlak -- het paarse accent alleen. Voor een
   actie die bij een kop hoort en niet naast de primaire knop van het scherm
   mag concurreren (de "Bewerken" van een dossiersectie, artboard
   Contact.dc.html: 12px, #7c3aed, vet). Blijft een <button type="button">,
   dus focusbaar en bedienbaar met het toetsenbord -- een <span> met een
   klikhandler zou dat niet zijn. */
.app-root .ds-knop--tekst {
    height: auto;
    padding: 0;
    border-color: transparent;
    background-color: transparent;
    color: var(--app-primary);
    font-size: .75rem;
}

.app-root .ds-knop--tekst:hover:not(:disabled) {
    background-color: transparent;
    text-decoration: underline;
}

.app-root .ds-knop--klein,
.app-root .tf-knop--klein {
    height: 2.25rem;
    padding: 0 .75rem;
    font-size: .8125rem;
    border-radius: .5rem;
}

.app-root .ds-knop--icoon,
.app-root .tf-knop--icoon {
    width: 2.25rem;
    padding: 0;
}

.app-root .ds-knop:disabled,
.app-root .tf-knop:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.app-root .ds-knop:focus-visible,
.app-root .tf-knop:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* Een tekstknop: geen rand, secundair, onderstreept bij hover/focus. */
.app-root .ds-link,
.app-root .tf-link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-text-secondary);
    font-size: .8125rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
}

/* Een gevaarlijke tekstknop (verwijderen): rood, verder gelijk. */
.app-root .ds-link--gevaar,
.app-root .ds-link--gevaar:hover {
    color: var(--app-danger);
}

.app-root .ds-link:hover,
.app-root .tf-link:hover {
    color: var(--app-text-primary);
}

.app-root .ds-link:focus-visible,
.app-root .tf-link:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
    border-radius: .25rem;
}

/* ── Week: zeven kolommen met twee tijdvakken ─────────────────────────── */
.app-root .ds-week,
.app-root .tf-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .5rem;
}

.app-root .ds-dag,
.app-root .tf-dag {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    align-items: center;
    min-width: 0;
}

.app-root .ds-dag__kop,
.app-root .tf-dag__kop {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    cursor: pointer;
}

.app-root .ds-dag__tijden,
.app-root .tf-dag__tijden {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
}

.app-root .ds-dag__tijd,
.app-root .tf-dag__tijd {
    height: 2.25rem;
    padding: 0 .25rem;
    text-align: center;
    font-size: .8125rem;
}

.app-root .ds-dag__dicht,
.app-root .tf-dag__dicht {
    box-sizing: border-box;
    height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--app-border);
    border-radius: .5rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

/* Meerdere vensters per dag (tickets ronde 1, 18 sep 2026): elk venster een
   eigen kolommetje met twee tijdvakken, extra vensters met een kruisje, en
   "+ venster" eronder. */
.app-root .ds-dag__venster {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
}
.app-root .ds-dag__venster + .ds-dag__venster {
    margin-top: .375rem;
    padding-top: .375rem;
    border-top: 1px dashed var(--app-border);
}
.app-root .ds-dag__weg {
    position: absolute;
    top: .125rem;
    right: -.5rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 9999px;
    background: var(--app-surface);
    color: var(--app-text-secondary);
    font-size: .625rem;
    line-height: 1;
    cursor: pointer;
}
.app-root .ds-dag__weg:hover { color: #dc2626; }
.app-root .ds-dag__meer {
    align-self: center;
    font-size: .75rem;
}
.app-root .ds-dag__fout {
    font-size: .6875rem;
    text-align: center;
}
.app-root .ds-dag.heeft-fout .ds-dag__tijd { border-color: #dc2626; }

/* ── Vaste opslaanbalk ────────────────────────────────────────────────── */
.app-root .ds-opslaanbalk,
.app-root .tf-opslaanbalk {
    position: sticky;
    bottom: .75rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .75rem 1rem .75rem 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    animation: dsOpkomen .25s ease-out;
}

@media (max-width: 767px) {
    .app-root .ds-opslaanbalk,
    .app-root .tf-opslaanbalk {
        bottom: calc(60px + env(safe-area-inset-bottom) + .75rem);
    }
}

.app-root .ds-opslaanbalk__tekst,
.app-root .tf-opslaanbalk__tekst {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--app-text-secondary);
}

.app-root .ds-opslaanbalk__tekst--fout,
.app-root .tf-opslaanbalk__tekst--fout {
    color: var(--app-danger);
}

.app-root .ds-opslaanbalk__tekst--ok,
.app-root .tf-opslaanbalk__tekst--ok {
    color: var(--app-success);
}

.app-root .ds-opslaanbalk__acties,
.app-root .tf-opslaanbalk__acties {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

@keyframes dsOpkomen {
    from { transform: translateY(.5rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ── Segmentfilter en lijst ───────────────────────────────────────────── */
.app-root .ds-segment,
.app-root .tf-segment {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
    font-size: .8125rem;
    font-weight: 500;
}

.app-root .ds-segment__knop,
.app-root .tf-segment__knop {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border: 0;
    border-left: 1px solid var(--app-border);
    background-color: transparent;
    color: var(--app-text-secondary);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

.app-root .ds-segment__knop:first-child,
.app-root .tf-segment__knop:first-child {
    border-left: 0;
}

.app-root .ds-segment__knop.is-actief,
.app-root .tf-segment__knop.is-actief {
    color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

.app-root .ds-segment__knop:focus-visible,
.app-root .tf-segment__knop:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.app-root .ds-segment__teller,
.app-root .tf-segment__teller {
    font-size: .6875rem;
    opacity: .75;
}

/* Scheiding tussen twee groepen knoppen in één segment (fase 3: vandaag |
   archief in het statusfilter van de reserveringen). */
.app-root .ds-segment__scheiding,
.app-root .tf-segment__scheiding {
    align-self: stretch;
    flex: 0 0 1px;
    width: 1px;
    margin: .375rem .25rem;
    background-color: var(--app-border);
}

/* Inline bevestiging (18 sep 2026): het twee-staps-patroon "vraag + Terug +
   rode Ja" (ConfirmInline). De vraag staat op een eigen regel, de twee
   knoppen eronder naast elkaar; in een smalle actiekolom delen ze de
   breedte. */
.app-root .ds-bevestig,
.app-root .tf-bevestig {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
}

.app-root .ds-bevestig__vraag,
.app-root .tf-bevestig__vraag {
    flex: 1 0 100%;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--app-text-secondary);
}

/* Tabs (spec §10, fase 6): een rij tabknoppen met een onderstreping onder
   de actieve tab, daaronder één paneel. Alleen waar een pagina echt twee
   gelijkwaardige gezichten heeft (Widget: Uiterlijk / Op je website zetten);
   instellingen met veel groepen krijgen een inhoudsopgave, geen tabs. */
.app-root .ds-tabs,
.app-root .tf-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--app-border);
    overflow-x: auto;
}

.app-root .ds-tabs__tab,
.app-root .tf-tabs__tab {
    padding: .625rem .875rem;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--app-text-secondary);
    font: inherit;
    font-size: .875rem;
    white-space: nowrap;
    cursor: pointer;
}

.app-root .ds-tabs__tab:hover,
.app-root .tf-tabs__tab:hover {
    color: var(--app-text-primary);
}

.app-root .ds-tabs__tab[aria-selected="true"],
.app-root .tf-tabs__tab[aria-selected="true"] {
    color: var(--app-text-primary);
    border-bottom-color: var(--app-primary);
    font-weight: 600;
}

.app-root .ds-tabs__tab:focus-visible,
.app-root .tf-tabs__tab:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
    border-radius: .375rem;
}

.app-root .ds-tabs__paneel,
.app-root .tf-tabs__paneel {
    padding-top: 1.25rem;
}

/* Keuzekaarten (spec §6): twee of drie grote knoppen met titel en één regel
   uitleg, waarvan er precies één actief is. Voor keuzes die te belangrijk
   zijn voor een klein segment. */
.app-root .ds-keuzekaarten,
.app-root .tf-keuzekaarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .75rem;
}

.app-root .ds-keuzekaart,
.app-root .tf-keuzekaart {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .875rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
    color: var(--app-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.app-root .ds-keuzekaart:hover,
.app-root .tf-keuzekaart:hover {
    background-color: var(--app-secondary-soft);
}

.app-root .ds-keuzekaart[aria-pressed="true"],
.app-root .tf-keuzekaart[aria-pressed="true"] {
    border-color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

.app-root .ds-keuzekaart:focus-visible,
.app-root .tf-keuzekaart:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .ds-keuzekaart__titel,
.app-root .tf-keuzekaart__titel {
    font-size: .875rem;
    font-weight: 600;
}

.app-root .ds-keuzekaart__uitleg,
.app-root .tf-keuzekaart__uitleg {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

/* Eén oppervlak voor de hele lijst. De feature zet op dit element
   --ds-kolommen (de grid-template-columns van kolomkop en rij) en
   --ds-detail-inspring (de breedte van de eerste kolom, zodat het detail
   onder de open rij op de tweede kolom uitlijnt). */
.app-root .ds-tabel,
.app-root .tf-tabel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
    overflow: hidden;
}

.app-root .ds-tabel__kop,
.app-root .ds-rij,
.app-root .tf-tabel__kop,
.app-root .tf-rij {
    display: grid;
    grid-template-columns: var(--ds-kolommen, minmax(0, 1fr) 24px);
    gap: 1rem;
    align-items: center;
    padding: .875rem 1.25rem;
}

.app-root .ds-tabel__kop,
.app-root .tf-tabel__kop {
    padding: .625rem 1.25rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .ds-rij,
.app-root .tf-rij {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--app-border);
    background-color: transparent;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}

.app-root .ds-rij:hover:not(.is-open),
.app-root .tf-rij:hover:not(.is-open) {
    background-color: var(--app-secondary-soft);
}

/* Geopende rij: licht goud getint. */
.app-root .ds-rij.is-open,
.app-root .tf-rij.is-open {
    background-color: var(--app-primary-soft);
}

.app-root .ds-rij:focus-visible,
.app-root .tf-rij:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.app-root .ds-rij__tijd,
.app-root .tf-rij__tijd {
    color: var(--app-text-secondary);
    white-space: nowrap;
}

.app-root .ds-rij.is-open .ds-rij__tijd,
.app-root .tf-rij.is-open .tf-rij__tijd {
    color: var(--app-text-primary);
}

.app-root .ds-rij__titel,
.app-root .tf-rij__titel {
    color: var(--app-text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Beller/duur/status delen op desktop de grid van de rij (display: contents),
   en vouwen op smalle schermen samen tot één metaregel. */
.app-root .ds-rij__meta,
.app-root .tf-rij__meta {
    display: contents;
}

.app-root .ds-rij__status,
.app-root .tf-rij__status {
    min-width: 0;
}

.app-root .ds-rij__chevron,
.app-root .tf-rij__chevron {
    justify-self: end;
    color: var(--app-text-secondary);
}

.app-root .ds-rij.is-open .ds-rij__chevron,
.app-root .tf-rij.is-open .tf-rij__chevron {
    color: var(--app-primary);
}

/* Het detail onder de geopende rij: inhoud links, rechts een open kolom
   (ds-detail__zij) met alleen een linkerlijn. */
.app-root .ds-detail,
.app-root .tf-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    padding: .5rem 1.25rem 1.5rem calc(var(--ds-detail-inspring, 0px) + 1rem + 1.25rem);
    border-top: 1px solid var(--app-border);
}

.app-root .ds-detail__links,
.app-root .tf-detail__links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-root .ds-detail__zij {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-self: start;
    padding-left: 1.25rem;
    border-left: 1px solid var(--app-border);
    min-width: 0;
}

.app-root .ds-detail__samenvatting,
.app-root .tf-detail__samenvatting {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-primary);
    max-width: 60ch;
}

.app-root .ds-meer,
.app-root .tf-meer {
    display: flex;
    justify-content: center;
    padding-top: .5rem;
}

/* Dagkopje boven een lijstoppervlak (fase 2 Gesprekken, extractie
   eindreview 17 sep 2026): één regel tussen de rijen met de dag links en
   het aantal rechts. Geen eigen kaart; de lijn erboven en de gedempte
   tekst maken hem tot kopje. */
.app-root .ds-dagkop,
.app-root .tf-dagkop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .875rem 1.25rem .375rem;
    border-top: 1px solid var(--app-border);
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .ds-tabel__kop + .ds-dagkop,
.app-root .tf-tabel__kop + .tf-dagkop {
    border-top: 0;
    padding-top: .25rem;
}

/* Een dagkop als eerste kind van de lijst (reserveringen, dagweergave):
   de lijstrand is al de bovenlijn. */
.app-root .ds-dagkop:first-child,
.app-root .tf-dagkop:first-child {
    border-top: 0;
}

.app-root .ds-dagkop__dag,
.app-root .tf-dagkop__dag {
    font-weight: 500;
    color: var(--app-text-primary);
}

/* Onder een dagkopje hoort de eerste rij geen eigen lijn te hebben. */
.app-root .ds-dagkop + .ds-rij,
.app-root .tf-dagkop + .tf-rij {
    border-top: 0;
}

/* ── Responsief ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .app-root .ds-form,
    .app-root .tf-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .ds-form,
    .app-root .tf-form {
        gap: 1.5rem;
    }

    /* Inhoudsopgave als horizontale chips boven de inhoud. */
    .app-root .ds-toc-nav,
    .app-root .tf-toc-nav {
        position: static;
    }

    .app-root .ds-toc,
    .app-root .tf-toc {
        flex-direction: row;
        gap: .375rem;
        overflow-x: auto;
        padding-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
    }

    .app-root .ds-toc__link,
    .app-root .tf-toc__link {
        padding: .375rem .875rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
    }

    .app-root .ds-toc__link.is-actief,
    .app-root .tf-toc__link.is-actief {
        border-color: var(--app-primary);
    }

    .app-root .ds-tabel__kop,
    .app-root .tf-tabel__kop {
        display: none;
    }

    .app-root .ds-rij,
    .app-root .tf-rij {
        grid-template-columns: minmax(0, 1fr) 24px;
        grid-template-areas:
        "tijd chevron"
        "titel chevron"
        "meta chevron";
        row-gap: .25rem;
        padding: .875rem 1rem;
    }

    .app-root .ds-rij__tijd,
    .app-root .tf-rij__tijd {
        grid-area: tijd; font-size: .8125rem;
    }

    .app-root .ds-rij__titel,
    .app-root .tf-rij__titel {
        grid-area: titel; white-space: normal;
    }

    .app-root .ds-rij__chevron,
    .app-root .tf-rij__chevron {
        grid-area: chevron;
    }

    .app-root .ds-rij__meta,
    .app-root .tf-rij__meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .375rem .75rem;
        font-size: .8125rem;
    }

    .app-root .ds-detail,
    .app-root .tf-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 1rem 1rem 1.5rem;
    }

    .app-root .ds-detail__zij {
        padding-left: 0;
        padding-top: 1rem;
        border-left: 0;
        border-top: 1px solid var(--app-border);
    }

    /* .ds-rij/.tf-rij valt hier al terug op 1rem zijpadding; het dagkopje
       hoort daarmee gelijk te lopen (fase 2 Gesprekken). */
    .app-root .ds-dagkop,
    .app-root .tf-dagkop {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* De kolomkop is hier display:none (zie hierboven), dus zonder deze
       herstel-regel staat het eerste dagkopje maar 4px van de kaartrand
       (fixronde eindreview fase 2, 17 sep 2026). */
    .app-root .ds-tabel__kop + .ds-dagkop,
    .app-root .tf-tabel__kop + .tf-dagkop {
        padding-top: .875rem;
    }
}

@media (max-width: 720px) {
    .app-root .ds-week,
    .app-root .tf-week {
        grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    }
}

@media (max-width: 600px) {
    .app-root .ds-twee-velden,
    .app-root .tf-twee-velden {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .ds-head__titel,
    .app-root .tf-head__titel {
        font-size: 1.5rem;
    }

    .app-root .ds-opslaanbalk__acties,
    .app-root .tf-opslaanbalk__acties {
        width: 100%;
        margin-left: 0;
    }

    .app-root .ds-opslaanbalk__acties .ds-knop,
    .app-root .tf-opslaanbalk__acties .tf-knop {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-root .ds-opslaanbalk,
    .app-root .tf-opslaanbalk {
        animation: none;
    }

    .app-root .ds-toc__link,
    .app-root .ds-knop,
    .app-root .ds-segment__knop,
    .app-root .ds-rij,
    .app-root .tf-toc__link,
    .app-root .tf-knop,
    .app-root .tf-segment__knop,
    .app-root .tf-rij {
        transition: none;
    }
}

/* ── Plankiezer (/trial-expired, ProductPlanKiezer) ──────────────────────── */
/* Gebouwd 8 sep 2026 als tf-kiezer/tf-plan in telefonie2.css voor de
   Telefonist-bundels; op 9 sep 2026 hierheen verhuisd als ds-primitief toen
   de kiezer generiek werd (Reserveringen-plan). De pagina valt onder
   LandingLayout; de kiezer wikkelt zichzelf in .app-root zodat de tokens en
   de ds-primitieven gelden. Plannen naast elkaar, gescheiden door
   1px-lijnen -- geen geneste kaarten. Eén plan (data-aantal="1") staat in
   één kolom op de volle breedte. */
.app-root.ds-kiezer {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem 4rem;
}

.app-root .ds-kiezer__inhoud {
    width: 100%;
    max-width: 760px;
}

/* E-commerce-kiezer op /trial-expired (14 sep 2026): drie kaarten van de
   facturatie-plankiezer (SubscriptionModal, max-w-4xl) naast elkaar. */
.app-root .ds-kiezer__inhoud--breed {
    max-width: 56rem;
}

.app-root .ds-kiezer__periode {
    margin-bottom: 1rem;
}

.app-root .ds-plannen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.app-root .ds-plannen[data-aantal="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.app-root .ds-plan {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.5rem 0;
    min-width: 0;
}

.app-root .ds-plan + .ds-plan {
    border-left: 1px solid var(--app-border);
    padding-left: 2rem;
}

.app-root .ds-plannen:not([data-aantal="1"]) .ds-plan:first-child {
    padding-right: 2rem;
}

.app-root .ds-plan__naam {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-root .ds-plan__prijs {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.app-root .ds-plan__bedrag {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--app-text-primary);
}

.app-root .ds-plan__periode {
    font-size: .875rem;
    color: var(--app-text-secondary);
}

.app-root .ds-plan__voordeel {
    margin: -.25rem 0 0;
    color: var(--app-primary);
}

.app-root .ds-plan__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-plan__lijst li::before {
    content: "\2013\00a0";
    color: var(--app-text-secondary);
}

.app-root .ds-plan__knop {
    margin-top: auto;
    align-self: flex-start;
}

.app-root .ds-kiezer__reden {
    min-height: 5rem;
    height: auto;
    padding: .625rem .75rem;
    resize: vertical;
}

.app-root .ds-kiezer__acties {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Melding bovenaan een scherm na terugkeer van de Mollie-checkout
   (AbonnementGestartMelding: Telefonie2/Dashboard, Reserveringen-overzicht). */
.app-root .ds-melding {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.app-root .ds-melding i {
    color: var(--app-primary);
}

/* Vestiging waar online reserveren uit staat (VestigingNietGedektMelding):
   bewust opvallend -- een betaalde klant die dit mist, heeft een dode widget. */
.app-root .ds-vestiging-uit {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .875rem 1rem;
    border: 1px solid var(--app-warning);
    border-radius: .625rem;
    background-color: var(--app-warning-soft);
    color: var(--app-warning-text);
}

.app-root .ds-vestiging-uit > i {
    font-size: 1rem;
}

.app-root .ds-vestiging-uit__tekst {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    flex: 1;
    min-width: 14rem;
}

/* Betaalgate (HorecaBetaalBalk, 25 sep 2026): horeca-tenant zonder betaald
   abonnement -- telefoniste neemt niet op, online reserveren staat uit. */
.app-root .ds-betaalbalk {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .875rem 1rem;
    border: 1px solid var(--app-danger);
    border-radius: .625rem;
    background-color: var(--app-danger-soft);
    color: var(--app-text-primary);
}

.app-root .ds-betaalbalk > i {
    font-size: 1rem;
    color: var(--app-danger);
}

.app-root .ds-betaalbalk__tekst {
    flex: 1;
    min-width: 14rem;
    margin: 0;
    font-weight: 600;
}

/* Openstaand bedrag betalen (AchterstandBetalen): in de balk en op /trial-expired. */
.app-root .ds-achterstand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
}

.app-root .ds-achterstand .ds-num {
    margin-left: .25rem;
}

.app-root .ds-achterstand__melding,
.app-root .ds-achterstand__fout {
    margin: 0;
    font-size: .875rem;
}

.app-root .ds-achterstand__fout {
    color: var(--app-danger);
}

.app-root .ds-achterstand__termijnen {
    font-size: .8125rem;
}

/* Melding/betaalblok boven de plankiezer op /trial-expired. */
.app-root.ds-trial-melding {
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem 0;
}

.app-root .ds-trial-melding__inhoud {
    width: 100%;
    max-width: 760px;
}

@media (max-width: 640px) {
    .app-root .ds-plannen {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .ds-plan + .ds-plan {
        border-left: 0;
        border-top: 1px solid var(--app-border);
        padding-left: 0;
    }

    .app-root .ds-plannen:not([data-aantal="1"]) .ds-plan:first-child {
        padding-right: 0;
    }
}

/* Tooltip-icoon bij een veldlabel (19 sep 2026): hover/long-press toont de title. */
.app-root .ds-veld__tip{margin-left:6px;color:var(--app-text-secondary,#6b7280);cursor:help;font-size:.9em}