/* ═══════════════════════════════════════════════════════════════════════
   crm.css — de eigen laag van het CRM (v2c, 18 sep 2026)

   Alles hier hoort bij de CRM-schermen en niets anders; de gedeelde
   bouwstenen (tf-*/ds-*: koppen, secties, knoppen, invoervelden, tabellen)
   blijven in ontwerp.css en worden hier alleen samengesteld. Prefix `crm-`,
   zonder uitzondering, en elke regel achter `.app-root` zodat de
   landingspagina's er nooit door geraakt worden.

   Referentiebeeld: docs/superpowers/design/crm-v2/{Main,Contact}.dc.html —
   dossier in twee kolommen (links de velden uit het register, rechts
   deals/contacten/tijdlijn), veldrijen als label/waarde-raster met een
   haarlijn ertussen, koppen in Bricolage (tf-disp), 40px-controls,
   radius 8px, goud (--app-primary) alleen als accent.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tabbalk ──────────────────────────────────────────────────────────────
   Verhuisd uit ontwerp.css (ruling R7, ongewijzigd): terugknop links, tabs
   rechts -- eigen flex-rij i.p.v. de PageTabs-onderlijn (Settings), want die
   tabstrip veronderstelt geen terugknop ernaast. Gebruikt de bestaande
   .page-tab-opmaak (app.css) voor de tabs zelf, alleen het frame is nieuw. */
.app-root .crm-tabbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-root .crm-tabbalk__tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
}

/* ── Dossier: twee kolommen ───────────────────────────────────────────────
   Links de velden uit het register, rechts de lijsten en de tijdlijn die wél
   de breedte nodig hebben. 420px en een sectiegat van 1.75rem komen
   letterlijk uit het artboard (Contact.dc.html: `420px minmax(0, 1fr)` met
   `gap: 28px` tussen de secties) -- bij 360px brak een label als
   "Verwachte sluitdatum" naast zijn waarde. Onder 900px stapelen ze, velden
   eerst. */
.app-root .crm-dossier {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    min-width: 0;
}

.app-root .crm-dossier__velden {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

@media (max-width: 900px) {
    .app-root .crm-dossier {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

/* ── Pil naast de dossiertitel (type/levenscyclus) ────────────────────────
   Eén zachte accentpil, geen kleur per waarde: het CRM heeft acht
   levenscycli en die zouden als acht kleuren een regenboog opleveren. */
.app-root .crm-pil {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 .625rem;
    border-radius: 999px;
    background-color: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-root .crm-titelrij {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Veldsectie ───────────────────────────────────────────────────────────
   Kop met het opschrift links en de bewerkknop(pen) rechts, daaronder de
   veldrijen. Geen kaart eromheen -- hiërarchie door witruimte en haarlijnen,
   zoals de rest van ontwerp.css. */
.app-root .crm-sectie {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-root .crm-sectie__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--app-border);
}

.app-root .crm-sectie__titel {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.3;
    color: var(--app-text-primary);
}

.app-root .crm-sectie__acties {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.app-root .crm-sectie__fout {
    margin: .75rem 0 0;
    font-size: .875rem;
    color: var(--app-danger);
}

/* ── Veldrijen ────────────────────────────────────────────────────────────
   Label/waarde als raster met een haarlijn eronder. `dl`-semantiek: dit is
   letterlijk een beschrijvingslijst, en een schermlezer koppelt zo label aan
   waarde zonder extra aria. */
.app-root .crm-veldlijst {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.app-root .crm-veldrij {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .5625rem 0;
    /* Lichter dan de sectielijn erboven: veel veldrijen onder elkaar met de
       volle --app-border erin lezen als een tabel met rasterlijnen. */
    border-bottom: 1px solid color-mix(in srgb, var(--app-border) 55%, transparent);
    font-size: .875rem;
    min-width: 0;
}

.app-root .crm-veldrij__label {
    font-size: .8125rem;
    color: var(--app-text-secondary);
    overflow-wrap: anywhere;
}

.app-root .crm-veldrij__waarde {
    margin: 0;
    min-width: 0;
    color: var(--app-text-primary);
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .app-root .crm-veldrij {
        grid-template-columns: minmax(0, 1fr);
        gap: .25rem;
        align-items: start;
    }
}

/* ── Waarden ──────────────────────────────────────────────────────────── */
.app-root .crm-waarde__leeg {
    color: var(--app-text-secondary);
    opacity: .75;
}

/* Een lange omschrijving houdt zijn regelafbrekingen -- die heeft iemand daar
   met opzet in gezet. */
.app-root .crm-waarde__lang {
    display: block;
    white-space: pre-wrap;
}

/* ── Invoer ───────────────────────────────────────────────────────────────
   De eenheid (€, %) staat naast het getalveld, nooit erin: hij hoort bij de
   betekenis, niet bij de opgeslagen waarde. */
.app-root .crm-invoer__getal {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.app-root .crm-invoer__eenheid {
    flex-shrink: 0;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-invoer--vink {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--app-primary);
}

/* ── Lijstbalk ────────────────────────────────────────────────────────────
   v2c taak 3: zoeken, de actieve filters als chips, "+ Filter", de teller en
   de kolomknop op één regel boven de lijst. Wrapt op smal scherm; het
   zoekveld houdt een eigen minimumbreedte zodat het niet tot een vierkantje
   inkrimpt naast vier chips. */
.app-root .crm-lijstbalk {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
}

.app-root .crm-lijstbalk__rij {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.app-root .crm-lijstbalk__zoek {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 15rem;
    min-width: 12rem;
    max-width: 22.5rem;
}

.app-root .crm-lijstbalk__zoekicoon {
    position: absolute;
    left: .75rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    pointer-events: none;
}

.app-root .crm-lijstbalk__zoekveld {
    padding-left: 2.25rem;
}

/* De teller duwt zichzelf naar rechts, de kolomknop volgt erachter. */
.app-root .crm-lijstbalk__teller {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-lijstbalk__hint {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

/* De backend-boodschap van een mislukte lading, naast de chips: hij gaat over
   een filter, een sortering of een kolom -- de dingen die in deze balk staan
   (slotfixgolf, T3-M6). Breekt naar een eigen regel zodra de balk vol is. */
.app-root .crm-lijstbalk__fout {
    flex-basis: 100%;
    font-size: .8125rem;
}

/* ── Filterchip ───────────────────────────────────────────────────────────
   "Label operator waarde ×" -- het label vet, de rest normaal, zodat je in
   één oogopslag ziet wáárop gefilterd wordt. */
.app-root .crm-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2rem;
    padding: 0 .375rem 0 .75rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background-color: var(--app-surface);
    color: var(--app-text-primary);
    font-size: .8125rem;
    font-family: inherit;
    white-space: nowrap;
}

.app-root .crm-chip b {
    font-weight: 600;
    color: var(--app-text-secondary);
}

.app-root .crm-chip--plus {
    padding: 0 .75rem;
    border-style: dashed;
    color: var(--app-primary);
    font-weight: 600;
    cursor: pointer;
}

.app-root .crm-chip__weg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    color: var(--app-text-secondary);
    font-size: .75rem;
    cursor: pointer;
}

.app-root .crm-chip__weg:hover {
    background-color: var(--app-border);
    color: var(--app-text-primary);
}

/* ── Uitklapper (filter- en kolomkiezer) ─────────────────────────────────
   Eén vorm voor beide: een omlijnd blok onder de balk, geen zwevend
   overlay-menu -- dat zou op een smal scherm buiten beeld hangen en een
   tweede positioneringsmechanisme vragen. */
.app-root .crm-kiezer {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
}

.app-root .crm-kiezer__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-root .crm-kiezer__titel {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.app-root .crm-kiezer__sluit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background-color: transparent;
    color: var(--app-text-secondary);
    cursor: pointer;
}

.app-root .crm-kiezer__rij {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
}

.app-root .crm-kiezer__veld {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 11rem;
}

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

/* v2d: één kolom onder elkaar in plaats van een raster -- sinds de volgorde
   instelbaar is, IS de volgorde van deze lijst de kolomvolgorde van de
   tabel, en in een raster dat per rij van links naar rechts leest is
   "omhoog"/"omlaag" niet meer te volgen. */
.app-root .crm-kiezer__kolommen {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    max-width: 28rem;
}

.app-root .crm-kiezer__kolom {
    display: flex;
    align-items: center;
    gap: .125rem;
}

.app-root .crm-kiezer__kolom .crm-kiezer__vink {
    flex: 1;
    min-width: 0;
}

.app-root .crm-kiezer__vink {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    cursor: pointer;
}

.app-root .crm-kiezer__vink input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--app-primary);
}

/* Omhoog/omlaag: hetzelfde 40 x 40-raakvlak als .crm-veldrij-reg__pijl
   (WCAG 2.2-minimum is 24 x 24, de rest van de controls is 40 px hoog). */
.app-root .crm-kiezer__schuif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background-color: transparent;
    color: var(--app-text-secondary);
    font-size: .625rem;
    cursor: pointer;
}

.app-root .crm-kiezer__schuif:hover:not(:disabled) {
    background-color: var(--app-secondary-soft);
    color: var(--app-text-primary);
}

.app-root .crm-kiezer__schuif:disabled {
    opacity: .3;
    cursor: default;
}

.app-root .crm-kiezer__schuif:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* ── Lijst ────────────────────────────────────────────────────────────────
   Hergebruikt ds-tabel/ds-tabel__kop uit ontwerp.css; alleen de RIJ is hier
   eigen: ds-rij is een klikbare knop, en deze rijen zijn dat niet (de links
   zitten in de naamcellen, zie CrmLijstCel). */
.app-root .crm-lijst__rij {
    display: grid;
    grid-template-columns: var(--ds-kolommen, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--app-border);
    font-size: .875rem;
    min-width: 0;
}

.app-root .crm-lijst__rij > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-root .crm-lijst__naam {
    font-weight: 600;
    color: var(--app-text-primary);
}

.app-root .crm-lijst__contact {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--app-text-secondary);
}

/* De sorteerknop ís de kolomkop: geen apart pijltje ernaast dat je moet
   raken, de hele kop is het klikdoel. */
.app-root .crm-lijst__sorteer {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.app-root .crm-lijst__sorteer:hover {
    color: var(--app-text-primary);
}

.app-root .crm-lijst__sorteer-uit {
    opacity: .35;
}

/* Op een smal scherm stapelen de cellen onder elkaar; de kolomkop verdwijnt
   dan (net als bij ds-tabel__kop) en de eerste cel -- de naam -- draagt de
   rij. */
@media (max-width: 760px) {
    .app-root .crm-lijst__rij {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .25rem;
        padding: .875rem 1rem;
    }

    .app-root .crm-lijst__kop {
        display: none;
    }
}

/* ── Paginering ─────────────────────────────────────────────────────────── */
.app-root .crm-paginering {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-paginering__bereik {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.app-root .crm-paginering__acties {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-root .crm-paginering__perpagina {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.app-root .crm-paginering__perpagina select {
    width: auto;
}

/* ── Pijplijn: bord en tabel (v2c taak 4) ─────────────────────────────────
   Referentiebeeld: docs/superpowers/design/crm-v2/{Bord,DealsTabel}.dc.html.
   Het bord is een rij kolommen die horizontaal scrollt -- het aantal fases
   ligt niet vast, dus een grid met een vast aantal kolommen kan hier niet.
   Kolomkop: naam links, aantal + som rechts, met een lijn eronder die het
   kolomgebied afbakent zonder er een kaart van te maken. */
.app-root .crm-pijplijn__acties {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.app-root .crm-bord {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.app-root .crm-bord__kolom {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    flex: 0 0 16.25rem;
    min-width: 16.25rem;
}

.app-root .crm-bord__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding-bottom: .625rem;
    border-bottom: 2px solid var(--app-border);
}

.app-root .crm-bord__naam {
    margin: 0;
    font-size: .9375rem;
    color: var(--app-text-primary);
}

.app-root .crm-bord__telling {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .crm-bord__kaarten {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

/* "Toon meer" onder een lange kolom (26 sep 2026): knop met de telling
   (getoond / totaal) en eronder de uitweg naar de tabel. */
.app-root .crm-bord__meer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .375rem;
}

.app-root .crm-bord__meer .btn {
    justify-content: center;
}

.app-root .crm-bord__meer-telling {
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .crm-bord__tabel-link {
    align-self: center;
    border: 0;
    background: none;
    padding: .25rem;
    font: inherit;
    font-size: .75rem;
    color: var(--app-primary);
    cursor: pointer;
}

.app-root .crm-bord__tabel-link:hover {
    text-decoration: underline;
}

/* ── Dealkaart ────────────────────────────────────────────────────────────
   Titel, bedrijf, dan een voetregel met het bedrag links en de kans rechts;
   sluitdatum en eerstvolgende taak eronder, kleiner. Een gesloten deal
   (gewonnen/verloren) staat gedempt -- hij telt nog mee, maar vraagt geen
   aandacht meer. */
.app-root .crm-kaart {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .75rem .875rem;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
    background-color: var(--app-surface);
}

.app-root .crm-kaart--gesloten {
    opacity: .8;
}

.app-root .crm-kaart__titel {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--app-text-primary);
    overflow-wrap: anywhere;
}

.app-root a.crm-kaart__titel:hover {
    color: var(--app-primary);
}

.app-root .crm-kaart__bedrijf {
    font-size: .75rem;
    color: var(--app-text-secondary);
    overflow-wrap: anywhere;
}

.app-root .crm-kaart__voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .125rem;
}

.app-root .crm-kaart__bedrag {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.app-root .crm-kaart__regel {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .crm-kaart__datum {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
}

.app-root .crm-kaart__datum--verlopen {
    color: var(--app-danger);
    font-weight: 600;
}

.app-root .crm-kaart__taak {
    min-width: 0;
}

.app-root .crm-kaart__taaktekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-root .crm-kaart__select {
    width: 100%;
    margin-top: .375rem;
}

/* ── Kansbalk ─────────────────────────────────────────────────────────────
   Het percentage én een staafje: het getal is exact, het staafje laat een
   kolom in één blik vergelijken. De balk is een role="progressbar" met
   aria-valuenow (zie CrmDealKaart) -- het spoor zelf is aria-hidden. */
.app-root .crm-kansbalk {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

.app-root .crm-kansbalk__spoor {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: .25rem;
    border-radius: 999px;
    background-color: var(--app-border);
    overflow: hidden;
}

.app-root .crm-kansbalk__vulling {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: 999px;
    background-color: var(--app-primary);
}

/* ── Dealtabel ───────────────────────────────────────────────────────────
   Hergebruikt de gedeelde lijst (ds-tabel + crm-lijst__rij); eigen zijn
   alleen het statussegment erboven en de voetregel eronder. Die voet is één
   cel over de volle breedte: de sommen horen bij de héle tabel, niet bij een
   kolom -- en met kiesbare kolommen staat "Bedrag" niet altijd op dezelfde
   plek. */
.app-root .crm-dealtabel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
}

.app-root .crm-dealtabel__cel {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.app-root .crm-dealtabel__kans {
    display: inline-flex;
    align-items: baseline;
    gap: .125rem;
}

.app-root .crm-lijst__datum--verlopen {
    color: var(--app-danger);
    font-weight: 600;
}

.app-root .crm-dealtabel__voet {
    grid-template-columns: minmax(0, 1fr);
    background-color: var(--app-primary-soft);
    font-weight: 600;
}

.app-root .crm-dealtabel__voetcel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
}

.app-root .crm-dealtabel__som {
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
}

.app-root .crm-dealtabel__voethint {
    margin-left: auto;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--app-text-secondary);
}

@media (max-width: 760px) {
    .app-root .crm-dealtabel__voethint {
        margin-left: 0;
    }
}

/* ── Veldenbeheer (/crm/velden, v2c taak 5) ──────────────────────────────
   Referentiebeeld: docs/superpowers/design/crm-v2/Velden.dc.html. Links het
   register per sectie, rechts een meescrollend paneel; onder 980px onder
   elkaar, want twee kolommen van elk minder dan 340px lezen slechter dan
   één. Geen kaarten om de groepen: kop met haarlijn en rijen eronder,
   dezelfde hiërarchie als de veldsecties van het dossier hierboven. */
.app-root .crm-velden {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2.5rem;
    align-items: start;
}

.app-root .crm-velden__lijst {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

.app-root .crm-velden__paneel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    position: sticky;
    top: 1.5rem;
    min-width: 0;
}

@media (max-width: 980px) {
    .app-root .crm-velden {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .app-root .crm-velden__paneel {
        position: static;
    }
}

.app-root .crm-veldgroep {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-root .crm-veldgroep__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--app-border);
}

.app-root .crm-veldgroep__titel {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.3;
    color: var(--app-text-primary);
}

.app-root .crm-veldgroep__telling {
    font-size: .75rem;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

/* Eén registerrij: pijlen, de klikbare kern (label/sleutel/type), de
   herkomstbadge en de zichtbaar-schakelaar. De kern is een knop en geen
   klikbare div -- anders is de rij niet met het toetsenbord te bereiken. */
.app-root .crm-veldrij-reg {
    display: grid;
    /* Eerste kolom 5rem: twee pijlen van 40 px naast elkaar (zie
       __pijl hieronder). Stonden ze onder elkaar, dan werd de rij twee keer
       zo hoog. */
    grid-template-columns: 5rem minmax(0, 1fr) auto 2.5rem;
    gap: .875rem;
    align-items: center;
    padding: .375rem 0;
    border-bottom: 1px solid var(--app-border);
}

.app-root .crm-veldrij-reg.is-actief {
    background-color: var(--app-primary-soft);
    box-shadow: inset 2px 0 0 var(--app-primary);
}

.app-root .crm-veldrij-reg__pijlen {
    display: flex;
    flex-direction: row;
    gap: .125rem;
}

/* 40 x 40 raakvlak: het WCAG 2.2-minimum is 24 x 24 en de rest van de
   controls in dit project is 40 px hoog (ds-knop). De maten stonden in
   taak 5 tijdelijk inline in de markup omdat crm.css toen bij een andere
   taak lag; hier horen ze. */
.app-root .crm-veldrij-reg__pijl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background-color: transparent;
    color: var(--app-text-secondary);
    font-size: .625rem;
    cursor: pointer;
}

.app-root .crm-veldrij-reg__pijl:hover:not(:disabled) {
    background-color: var(--app-secondary-soft);
    color: var(--app-text-primary);
}

.app-root .crm-veldrij-reg__pijl:disabled {
    opacity: .3;
    cursor: default;
}

.app-root .crm-veldrij-reg__kies {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .9fr);
    gap: .875rem;
    align-items: baseline;
    min-width: 0;
    padding: .5rem 0;
    border: 0;
    background-color: transparent;
    font: inherit;
    text-align: left;
    color: var(--app-text-primary);
    cursor: pointer;
}

.app-root .crm-veldrij-reg__label {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-root .crm-veldrij-reg__sleutel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-root .crm-veldrij-reg__type {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

/* De zichtbaar-schakelaar: dezelfde maat en beweging als .app-toggle, maar
   als knop met role="switch" -- het is een directe actie (PATCH), geen
   formulierwaarde. De aan/uit-staat komt uit aria-checked, zodat opmaak en
   toegankelijkheid niet uit elkaar kunnen lopen. */
.app-root .crm-veldrij-reg__schakel {
    width: 2.5rem;
    height: 1.25rem;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--app-border);
    position: relative;
    cursor: pointer;
    transition: background-color .2s;
}

.app-root .crm-veldrij-reg__schakel[aria-checked="true"] {
    background-color: var(--app-success);
}

.app-root .crm-veldrij-reg__knop {
    position: absolute;
    top: 2px;
    left: 2px;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background-color: var(--app-surface);
    transition: transform .2s;
}

.app-root .crm-veldrij-reg__schakel[aria-checked="true"] .crm-veldrij-reg__knop {
    transform: translateX(1.2rem);
}

.app-root .crm-veldrij-reg__schakel:focus-visible,
.app-root .crm-veldrij-reg__kies:focus-visible,
.app-root .crm-veldrij-reg__pijl:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* De herkomstbadge hergebruikt .crm-pil; alleen "eigen" krijgt het goud,
   de rest blijft neutraal -- vier gekleurde pillen naast elkaar zouden een
   lijst opleveren waarin niets meer opvalt. */
.app-root .crm-pil--systeem,
.app-root .crm-pil--hubspot,
.app-root .crm-pil--csv {
    background-color: var(--app-secondary-soft);
    color: var(--app-text-secondary);
}

/* ── Het paneel rechts ─────────────────────────────────────────────────── */
.app-root .crm-veldpaneel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .875rem;
    width: 100%;
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
}

.app-root .crm-veldpaneel__titel {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.3;
    color: var(--app-text-primary);
}

/* <output> is van zichzelf inline: dezelfde 40px-doos als een ds-invoer,
   maar met de tekst verticaal gecentreerd. */
.app-root .crm-veldpaneel__sleutel {
    display: flex;
    align-items: center;
    background-color: var(--app-secondary-soft);
}

.app-root .crm-veldpaneel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.app-root .crm-veldpaneel__keuzerij {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-root .crm-veldpaneel__acties {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.app-root .crm-veldpaneel__onderhoud {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-top: .875rem;
    border-top: 1px solid var(--app-border);
}

.app-root .crm-veldpaneel__bevestig {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Smal scherm: de rij houdt zijn pijlen, badge en schakelaar op hun plek,
   maar label/sleutel/type gaan onder elkaar -- drie kolommen van elk minder
   dan 90px leveren afgebroken woorden op in plaats van een leesbare regel. */
@media (max-width: 720px) {
    .app-root .crm-veldrij-reg__kies {
        grid-template-columns: minmax(0, 1fr);
        gap: .125rem;
    }

    .app-root .crm-veldrij-reg {
        gap: .625rem;
    }

    .app-root .crm-veldpaneel__keuzerij {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CSV-importwizard (v2c taak 6, ruling R32)

   Referentiebeelden: docs/superpowers/design/crm-v2/Import.dc.html (stap 2)
   en Rapport.dc.html (stap 4). Alles hier is `crm-wizard-*` en staat achter
   `.app-root`; de knoppen, invoervelden, tabel en segmentfilter komen
   ongewijzigd uit ontwerp.css (ds-*). Kleuren uitsluitend via tokens, zodat
   de donkere modus meekomt zonder tweede palet.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Stappenbalk ──────────────────────────────────────────────────────── */
.app-root .crm-wizard-stappen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-wizard-stap {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* De verbindingslijn uit het artboard als ::after op de stap zelf: een eigen
   <span> per lijn zou vier lege elementen aan de schermlezer aanbieden. */
.app-root .crm-wizard-stap:not(:last-child)::after {
    content: "";
    width: 2rem;
    height: 1px;
    background-color: var(--app-border);
}

.app-root .crm-wizard-stap__bol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--app-border);
    border-radius: 50%;
    background-color: var(--app-surface);
    font-size: .75rem;
    font-weight: 600;
}

.app-root .crm-wizard-stap.is-klaar .crm-wizard-stap__bol {
    background-color: var(--app-success);
    border-color: var(--app-success);
    color: var(--app-surface);
}

.app-root .crm-wizard-stap.is-actief {
    color: var(--app-text-primary);
    font-weight: 600;
}

.app-root .crm-wizard-stap.is-actief .crm-wizard-stap__bol {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-surface);
}

/* ── Het vak van één stap ─────────────────────────────────────────────── */
.app-root .crm-wizard-vak {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-root .crm-wizard-bestand {
    max-width: 30rem;
}

/* De browser tekent een file-input zelf; alleen de hoogte en de rand komen
   uit ds-invoer, de padding moet weg omdat de knop erin al padding heeft. */
.app-root .crm-wizard-bestand input[type="file"] {
    display: block;
    padding: .5rem .75rem;
    height: auto;
    min-height: 2.5rem;
}

.app-root .crm-wizard-teller {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-wizard-teller strong {
    color: var(--app-text-primary);
}

/* ── Stap 2: koppelen en voorbeeld in ÉÉN tabel ───────────────────────
   Artboard Import.dc.html: per bronkolom draagt de kopcel de bronnaam en de
   keuzelijst, en daaronder staan de voorbeeldwaarden van diezelfde kolom.
   Bij veel kolommen scrollt de tabel horizontaal in plaats van de kolommen
   onleesbaar smal te maken -- vandaar de min-width per cel en de overflow op
   de omhullende doos. */
.app-root .crm-wizard-mapping {
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
}

.app-root .crm-wizard-mapping__tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.app-root .crm-wizard-mapping__kop {
    padding: .625rem 1rem;
    text-align: left;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .crm-wizard-mapping__tabel th,
.app-root .crm-wizard-mapping__tabel td {
    min-width: 11rem;
    max-width: 18rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--app-border);
    border-left: 1px solid var(--app-border);
    text-align: left;
    vertical-align: top;
}

.app-root .crm-wizard-mapping__tabel th:first-child,
.app-root .crm-wizard-mapping__tabel td:first-child {
    border-left: 0;
}

.app-root .crm-wizard-mapping__tabel td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-text-secondary);
}

.app-root .crm-wizard-mapping__kopcel {
    padding: .75rem 1rem;
    font-weight: 400;
}

.app-root .crm-wizard-kolom {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.app-root .crm-wizard-kolom__bron {
    font-size: .75rem;
    color: var(--app-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-root .crm-wizard-kolom__doel {
    font-weight: 600;
}

/* Twee bronkolommen op hetzelfde doel: zichtbaar, niet blokkerend. */
.app-root .crm-wizard-kolom__doel.is-botsing {
    border-color: var(--app-warning);
}

/* Het mini-formulier "+ Nieuw veld" hoort bij de kolom waar het uit komt en
   blijft dus in de kopcel staan. */
.app-root .crm-wizard-nieuw {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--app-border);
}

.app-root .crm-wizard-nieuw__acties {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* ── Waarschuwingen ───────────────────────────────────────────────────── */
.app-root .crm-wizard-melding {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
    padding: .75rem .875rem;
    border: 1px solid var(--app-warning);
    border-radius: .625rem;
    background-color: var(--app-warning-soft);
    color: var(--app-warning-text);
    font-size: .8125rem;
}

/* ── Stap 3: de samenvatting ──────────────────────────────────────────── */
.app-root .crm-wizard-samenvatting {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: .5rem 1.5rem;
    margin: 0;
    font-size: .875rem;
}

.app-root .crm-wizard-samenvatting dt {
    color: var(--app-text-secondary);
}

.app-root .crm-wizard-samenvatting dd {
    margin: 0;
    color: var(--app-text-primary);
}

/* ── Stap 4: de strook en het rapport ─────────────────────────────────── */
.app-root .crm-wizard-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .875rem;
}

.app-root .crm-wizard-strook {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.app-root .crm-wizard-stat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--app-border);
}

.app-root .crm-wizard-stat:first-child {
    padding-left: 0;
}

.app-root .crm-wizard-stat:last-child {
    border-right: 0;
}

/* Alleen de eerste stat krijgt de accentkleur -- goud als accent, niet als
   vlakvulling (dezelfde regel als in de rest van het CRM). */
.app-root .crm-wizard-stat:first-child .crm-wizard-stat__waarde {
    color: var(--app-primary);
}

.app-root .crm-wizard-stat__waarde {
    font-size: 2.5rem;
    line-height: 1;
}

.app-root .crm-wizard-stat__label {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-wizard-fouten {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.app-root .crm-wizard-fouten__titel {
    margin: 0;
    font-size: .9375rem;
}

/* Rijnummer, reden, inhoud: vaste kolommen, dus hier en niet inline in
   CsvImport.razor (v2d). */
.app-root .crm-wizard-fouten__tabel {
    --ds-kolommen: 72px minmax(0, 1.4fr) minmax(0, 2.6fr);
}

/* De rij is hier informatie, geen knop: de cursor/hover van .ds-rij hoort er
   dus niet bij. */
.app-root .crm-wizard-foutrij {
    cursor: default;
}

.app-root .crm-wizard-foutrij__inhoud {
    color: var(--app-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Knoppenrij onderaan elke stap ────────────────────────────────────── */
.app-root .crm-wizard-acties {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .625rem;
}

.app-root .crm-wizard-acties__rechts {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-left: auto;
}

@media (max-width: 720px) {
    .app-root .crm-wizard-samenvatting {
        grid-template-columns: minmax(0, 1fr);
        gap: .125rem 0;
    }

    .app-root .crm-wizard-samenvatting dd {
        margin-bottom: .5rem;
    }

    .app-root .crm-wizard-stat {
        padding: 1rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
    }

    .app-root .crm-wizard-stat:last-child {
        border-bottom: 0;
    }
}

/* ── Schakelaar (generiek) ────────────────────────────────────────────────
   CRM-outreach taak 11: dezelfde maat en beweging als
   .crm-veldrij-reg__schakel (Velden), maar zonder de veldrij-naam, zodat
   Mails (Mijn/Alle) en de mailboxinstellingen (taak 12) hem delen. Knop met
   role="switch"; de aan/uit-staat komt uit aria-checked. De Velden-variant
   blijft ongemoeid -- samenvoegen kan later in één keer. */
.app-root .crm-schakel {
    width: 2.5rem;
    height: 1.25rem;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--app-border);
    position: relative;
    cursor: pointer;
    transition: background-color .2s;
}

.app-root .crm-schakel[aria-checked="true"] {
    background-color: var(--app-success);
}

.app-root .crm-schakel:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.app-root .crm-schakel__knop {
    position: absolute;
    top: 2px;
    left: 2px;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background-color: var(--app-surface);
    transition: transform .2s;
}

.app-root .crm-schakel[aria-checked="true"] .crm-schakel__knop {
    transform: translateX(1.2rem);
}

.app-root .crm-schakel:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* ── Mails: wachtrij ──────────────────────────────────────────────────────
   CRM-outreach taak 11 (/crm/mails). Statusregel (tf-status) onder de kop,
   één banner voor wat nu aandacht vraagt (geen mailbox, pauze, voorstel),
   daarna filters + schakelaar op één regel en de kaarten. Kaarten zijn
   rustig: haarlijn, radius 8px, goud alleen op de stap-pil en de primaire
   knop -- de mailtekst zelf is de inhoud. */
.app-root .crm-mail-status {
    margin-top: -.5rem;
}

.app-root .crm-mail-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .875rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
    font-size: .875rem;
}

.app-root .crm-mail-banner > i {
    color: var(--app-primary);
    font-size: 1rem;
}

.app-root .crm-mail-banner--voorstel {
    border-color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

.app-root .crm-mail-banner--fout {
    border-color: var(--app-danger);
    background-color: var(--app-danger-soft);
}

.app-root .crm-mail-banner--fout > i {
    color: var(--app-danger);
}

.app-root .crm-mail-banner__tekst {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    line-height: 1.45;
}

.app-root .crm-mail-banner--voorstel .crm-mail-banner__tekst {
    display: block;
}

.app-root .crm-mail-banner__titel {
    font-weight: 600;
}

.app-root .crm-mail-banner__detail {
    color: var(--app-text-secondary);
    overflow-wrap: anywhere;
}

.app-root .crm-mail-banner__teller {
    font-weight: 600;
}

.app-root .crm-mail-balk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
}

.app-root .crm-mail-balk__alle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    cursor: pointer;
}

.app-root .crm-mail-lijst {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* ── Mails: kaart ─────────────────────────────────────────────────────── */
.app-root .crm-mail-kaart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
}

.app-root .crm-mail-kaart__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
    flex-wrap: wrap;
}

.app-root .crm-mail-kaart__wie {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

.app-root .crm-mail-kaart__stap {
    flex-shrink: 0;
    margin-top: .0625rem;
}

.app-root .crm-mail-kaart__namen {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.app-root .crm-mail-kaart__bedrijf {
    font-weight: 600;
    color: var(--app-text-primary);
    text-decoration: none;
}

.app-root .crm-mail-kaart__bedrijf:hover,
.app-root .crm-mail-kaart__bedrijf:focus-visible {
    color: var(--app-primary);
    text-decoration: underline;
}

.app-root .crm-mail-kaart__aan {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    min-width: 0;
}

.app-root .crm-mail-kaart__aan-label {
    font-weight: 500;
}

.app-root .crm-mail-kaart__adres {
    overflow-wrap: anywhere;
}

.app-root .crm-mail-kaart__contact {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

.app-root .crm-mail-kaart__contact:hover,
.app-root .crm-mail-kaart__contact:focus-visible {
    color: var(--app-primary);
    text-decoration: underline;
}

.app-root .crm-mail-kaart__meta {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-mail-kaart__status {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 .625rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

.app-root .crm-mail-kaart__status--gereageerd {
    border-color: var(--app-success);
    color: var(--app-success);
}

.app-root .crm-mail-kaart__status--adres_zoeken {
    border-color: var(--app-warning);
    color: var(--app-warning-text);
}

/* Vastgelopen verzending: nooit automatisch opnieuw, dus rood. */
.app-root .crm-mail-kaart__status--verzenden {
    border-color: var(--app-danger);
    color: var(--app-danger);
}

/* Alleen-lezen kaart van een concept dat niet de deur uit ging: geen
   datum, wel dit merkje -- zodat het nooit als verstuurd leest. */
.app-root .crm-mail-kaart__niet-verstuurd {
    font-style: italic;
    white-space: nowrap;
}

.app-root .crm-mail-kaart__velden {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.app-root .crm-mail-kaart__tekstvak {
    min-height: 12rem;
}

.app-root .crm-mail-kaart__lezen {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.app-root .crm-mail-kaart__onderwerp {
    margin: 0;
    font-weight: 600;
}

.app-root .crm-mail-kaart__tekst {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.55;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.app-root .crm-mail-kaart__reden {
    margin: 0;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-mail-kaart__bronnen {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding-top: .75rem;
    border-top: 1px solid var(--app-border);
}

.app-root .crm-mail-kaart__bronnen ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8125rem;
}

.app-root .crm-mail-kaart__bron {
    color: var(--app-text-secondary);
}

.app-root .crm-mail-kaart__afwijzen {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.app-root .crm-mail-kaart__acties {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
}

.app-root .crm-mail-kaart__rechts {
    margin-left: auto;
    display: inline-flex;
    max-width: 100%;
}

.app-root .crm-mail-kaart__vallen {
    border-color: transparent;
    color: var(--app-text-secondary);
}

.app-root .crm-mail-kaart__vallen:hover {
    color: var(--app-danger);
}

@media (max-width: 640px) {
    .app-root .crm-mail-kaart {
        padding: 1rem;
    }

    .app-root .crm-mail-kaart__rechts {
        margin-left: 0;
    }

    .app-root .crm-mail-kaart__acties .btn-primary {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ── Dossier: reeksstatus + Geen interesse (CRM-outreach taak 13) ─────────
   Pages/Crm/Components/OutreachStatus.razor -- klein blok boven de tijdlijn
   in het contactdossier. Statuspil hergebruikt de kleuren van
   .crm-mail-kaart__status hierboven (dezelfde statussleutels), de rest is
   gewone tf-section-inhoud. */
.app-root .crm-outreach-fout {
    margin: 0 0 1rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-outreach-status__label {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 .625rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

.app-root .crm-outreach-status__label--gereageerd,
.app-root .crm-outreach-status__label--afgerond {
    border-color: var(--app-success);
    color: var(--app-success);
}

.app-root .crm-outreach-status__label--adres_zoeken,
.app-root .crm-outreach-status__label--follow_up_nodig {
    border-color: var(--app-warning);
    color: var(--app-warning-text);
}

.app-root .crm-outreach-status__datum {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-outreach-status__acties {
    margin-top: .875rem;
}

/* ── Koppelingen: Mijn mailbox ────────────────────────────────────────────
   CRM-outreach taak 12 (Pages/Crm/Components/MailboxSectie.razor). Eén
   formulier in een rustige kolom; serverinstellingen ingeklapt onder een
   <details>. De statusregel volgt de banner van /crm/mails (haarlijn,
   radius 8px), groen/rood/amber per status. */
.app-root .crm-mailbox-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 44rem;
    margin-top: 1rem;
}

.app-root .crm-mailbox-status {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
    font-size: .875rem;
    max-width: 44rem;
}

.app-root .crm-mailbox-status > i {
    font-size: 1rem;
}

.app-root .crm-mailbox-status--ok > i {
    color: var(--app-success);
}

.app-root .crm-mailbox-status--fout {
    border-color: var(--app-danger);
    background-color: var(--app-danger-soft);
}

.app-root .crm-mailbox-status--fout > i {
    color: var(--app-danger);
}

.app-root .crm-mailbox-status--gepauzeerd {
    border-color: var(--app-warning);
    background-color: var(--app-warning-soft);
}

.app-root .crm-mailbox-status--gepauzeerd > i {
    color: var(--app-warning-text);
}

.app-root .crm-mailbox-status__tekst {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    line-height: 1.45;
}

.app-root .crm-mailbox-status__titel {
    font-weight: 600;
}

.app-root .crm-mailbox-status__detail {
    color: var(--app-text-secondary);
    overflow-wrap: anywhere;
}

.app-root .crm-mailbox-server {
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    padding: .625rem .875rem;
}

.app-root .crm-mailbox-server__kop {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--app-text-secondary);
}

.app-root .crm-mailbox-server[open] .crm-mailbox-server__kop {
    margin-bottom: .5rem;
}

.app-root .crm-mailbox-server__hint {
    margin-bottom: .75rem;
}

.app-root .crm-mailbox-server__rij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: 1rem;
    margin-bottom: .75rem;
}

.app-root .crm-mailbox-getallen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.app-root .crm-mailbox-auto {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.app-root .crm-mailbox-auto .crm-schakel {
    margin-top: .125rem;
}

.app-root .crm-mailbox-auto__tekst {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.app-root .crm-mailbox-auto__label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--app-text-primary);
}

/* Voorbeeld van de opgemaakte handtekening: altijd een wit "mailvlak", ook in
   donker thema -- zo ziet de ontvanger hem in een gewone (lichte) mailbox. */
.app-root .crm-mailbox-voorbeeld {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.app-root .crm-mailbox-voorbeeld__mail {
    padding: 1rem 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: #ffffff;
    overflow-x: auto;
}

.app-root .crm-mailbox-knoppen {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.app-root .crm-mailbox-knoppen__rechts {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.app-root .crm-mailbox-melding {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    color: var(--app-success);
}

.app-root .crm-mailbox-test {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    font-size: .875rem;
}

.app-root .crm-mailbox-test--ok {
    border-color: var(--app-success);
    background-color: var(--app-success-soft);
}

.app-root .crm-mailbox-test--fout {
    border-color: var(--app-warning);
    background-color: var(--app-warning-soft);
}

.app-root .crm-mailbox-test__regel {
    display: flex;
    gap: .75rem;
    overflow-wrap: anywhere;
}

.app-root .crm-mailbox-test__label {
    flex: 0 0 9rem;
    font-weight: 500;
    color: var(--app-text-secondary);
}

/* ── Koppelingen: Feitenblad ──────────────────────────────────────────────
   CRM-outreach taak 12 (Pages/Crm/Components/FeitenbladSectie.razor).
   Rijen met schakelaar links, claim + onderbouwing in het midden, knoppen
   rechts; een uitgezet feit wordt gedimd. Onderaan de toevoegrij. */
.app-root .crm-feit-lijst {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}

.app-root .crm-feit-rij {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
}

/* Fout van een rij-actie op een eigen regel onder de rij (fixronde 1). */
.app-root .crm-feit-rij__fout {
    flex: 1 0 100%;
    margin: 0;
}

.app-root .crm-feit-rij .crm-schakel {
    margin-top: .125rem;
}

.app-root .crm-feit-rij.is-uit .crm-feit-rij__tekst {
    opacity: .55;
}

.app-root .crm-feit-rij__tekst {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    line-height: 1.45;
}

.app-root .crm-feit-rij__claim {
    font-size: .875rem;
    color: var(--app-text-primary);
    overflow-wrap: anywhere;
}

.app-root .crm-feit-rij__toelichting {
    font-size: .8125rem;
    color: var(--app-text-secondary);
    overflow-wrap: anywhere;
}

.app-root .crm-feit-rij__bewerk {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.app-root .crm-feit-rij__knoppen {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.app-root .crm-feit-nieuw {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
    align-items: end;
    gap: .75rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .app-root .crm-mailbox-getallen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-root .crm-mailbox-form .ds-twee-velden {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .crm-mailbox-knoppen__rechts {
        margin-left: 0;
    }

    .app-root .crm-feit-rij__knoppen {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .app-root .crm-feit-nieuw {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Je gegevens (CRM los product §1, 24 sep 2026) ──────────────────────
   Sectie op Koppelingen: export (status, tellers, download) en daaronder,
   met een haarlijn gescheiden, de gevarenzone "alles verwijderen". Rood
   (--app-danger) alleen op de wisknop en het bevestigingsvak. */
.app-root .crm-gegevens__blok {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.app-root .crm-gegevens__blok + .crm-gegevens__blok {
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
}

.app-root .crm-gegevens__tekst {
    font-size: 0.875rem;
    color: var(--app-text-secondary);
}

.app-root .crm-gegevens__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-root .crm-gegevens__fout {
    font-size: 0.875rem;
    color: var(--app-danger);
}

.app-root .crm-gegevens__statusregel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-root .crm-gegevens__tijden {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    font-size: 0.75rem;
    color: var(--app-text-secondary);
}

.app-root .crm-gegevens__tellers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.25rem 1rem;
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.app-root .crm-gegevens__tellers li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Alles verwijderen (crm-los 1 taak 12) */
.app-root .crm-gegevens__wisknop {
    align-self: flex-start;
    color: var(--app-danger);
    border-color: var(--app-danger);
}

.app-root .crm-gegevens__bevestig {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--app-danger);
    border-radius: 8px;
    background-color: var(--app-surface);
}

.app-root .crm-gegevens__vraag {
    font-weight: 600;
    color: var(--app-text-primary);
}

.app-root .crm-gegevens__label {
    font-size: 0.875rem;
    color: var(--app-text-primary);
}

.app-root .crm-gegevens__invoer {
    max-width: 16rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.05em;
}

.app-root .crm-gegevens__resultaat {
    padding: 0.75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

/* ── Koppelingen als inklapbare kaarten (26 sep 2026) ──────────────────
   De pagina was acht secties onder elkaar met 3rem ertussen; nu vier
   kaarten die dicht een regel stand van zaken tonen (CrmInklapKaart). */
.app-root .crm-koppel-kaarten {
    gap: .75rem;
}

.app-root .crm-koppel-verhuisd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-inklap {
    gap: 0;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
}

.app-root .crm-inklap__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    list-style: none;
    cursor: pointer;
    border-radius: .75rem;
}

.app-root .crm-inklap__kop::-webkit-details-marker {
    display: none;
}

.app-root .crm-inklap__kop:hover .crm-inklap__titel {
    color: var(--app-primary);
}

.app-root .crm-inklap__kop:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.app-root .crm-inklap__tekst {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.app-root .crm-inklap__titel {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--app-text-primary);
    transition: color .15s;
}

.app-root .crm-inklap__samenvatting {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .crm-inklap__pijl {
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--app-text-secondary);
    transition: transform .2s;
}

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

.app-root .crm-inklap__inhoud {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    border-top: 1px solid var(--app-border);
}

/* Tussenkopjes in een kaart: onder de kaarttitel, niet erboven. */
.app-root .crm-inklap__inhoud .tf-section__titel {
    font-size: .9375rem;
}

.app-root .crm-inklap__blok {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.app-root .crm-inklap__blok + .crm-inklap__blok {
    padding-top: 1.5rem;
    border-top: 1px dashed var(--app-border);
}

/* Mails: schakelaar Overzicht | Instellingen onder de kop, op eigen breedte. */
.app-root .crm-mail-weergave {
    align-self: flex-start;
    margin-bottom: 1.25rem;
}