/* crm-app.css — de schil van de losse CRM-app (zijbalk, topbalk, onderbalk, kale pagina's).
   Alles achter .app-root en met prefix ca-; de schil gebruikt de --crm-*-tokens van het
   designsysteem (Ragently.Crm.UI crm/ontwerp/tokens.css); sinds F6b ook de kale en de
   beheerpagina's (geen basis.css-tokens meer, behalve de statusbalk van F2). */
/* ── Kale pagina's (KaalLayout: inloggen, aanmelden, toetreden, geen toegang, niet gevonden) ──
   Premium schil F6b: één gecentreerde kaart op het canvas van stijl C, het merk erboven. De
   invoervelden krijgen hun maat van .crm-scherm (op .ca-kaal__vak). */
.app-root.ca-kaal { min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center;
    background: var(--crm-canvas); color: var(--crm-ink); font-size: var(--crm-tekst);
    padding: max(10vh, 3rem) 16px 3rem; }
.app-root .ca-kaal__vak { width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: 20px; }
.app-root .ca-merk { display: inline-flex; align-items: center; gap: 10px; align-self: center;
    color: var(--crm-ink); font-weight: 650; font-size: 15px; letter-spacing: -.01em; text-decoration: none; }
.app-root .ca-merk img { border-radius: var(--crm-radius); }
.app-root .ca-merk:focus-visible { outline: 2px solid var(--crm-focus); outline-offset: 3px; border-radius: 6px; }
.app-root .ca-kaart { display: flex; flex-direction: column; gap: 12px; min-width: 0;
    background: var(--crm-surface); border: 1px solid var(--crm-lijn); border-radius: var(--crm-radius-paneel); padding: 24px; }
.app-root .ca-kaal .ca-kaart { padding: 28px 28px 24px; }
.app-root .ca-kaart__titel { margin: 0; font-size: var(--crm-titel); font-weight: var(--crm-titel-gewicht); letter-spacing: -.015em; line-height: 1.25; color: var(--crm-ink); }
.app-root .ca-kaart__titel:focus { outline: none; }
.app-root .ca-kaart__kop { margin: 0; font-size: 15px; font-weight: 600; color: var(--crm-ink); }
.app-root .ca-formulier { display: flex; flex-direction: column; gap: 12px; }
.app-root .ca-veld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 550; color: var(--crm-ink-zacht); }
.app-root .ca-kaal .ca-veld .ds-invoer { font-weight: 400; font-size: 16px; } /* 16px: iOS zoomt anders in */
.app-root .ca-invoer--code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.app-root .ca-formulier > button { width: 100%; }
.app-root .ca-fout { margin: 0; color: var(--crm-fout); font-size: 13px; }
.app-root .ca-fout a { color: inherit; font-weight: 600; }
.app-root .ca-hint { margin: 0; color: var(--crm-gedempt); font-size: 13px; line-height: 1.5; }
.app-root .ca-hint a { color: var(--crm-open); font-weight: 550; }
.app-root .ca-adres { color: var(--crm-ink); font-weight: 600; word-break: break-all; }
/* hoogte van de widget: geen verspringen; hoeken zoals de invoervelden (iframe van Cloudflare) */
.app-root .ca-turnstile { min-height: 65px; margin: 4px 0; border-radius: var(--crm-radius); overflow: hidden; }
.app-root .ca-balk { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; padding: 7px 28px;
    font-size: 13px; border-bottom: 1px solid var(--app-border); }
.app-root .ca-balk--proef { background: var(--app-info-soft, var(--app-primary-soft)); }
.app-root .ca-balk--alleen-lezen { background: var(--app-warning-soft); }
/* ── Beheerpagina's (Team, Abonnement, Gegevens; premium schil F6b) ─────────────────────── */
.app-root .ca-pagina { max-width: 880px; }
.app-root .ca-pagina > .ca-kaart { margin-bottom: 14px; }
.app-root .ca-instellingen__tabs { margin: 4px 0 18px; }
.app-root .ca-waarde { color: var(--crm-ink); font-weight: 600; }
.app-root .ca-melding { margin: 0 0 14px; padding: 10px 14px; border: 1px solid #C7D2FE; border-left: 3px solid var(--crm-open-fel);
    border-radius: 10px; background: var(--crm-open-zacht); color: var(--crm-ink-zacht); font-size: 13.5px; }
.app-root .ca-melding--let-op { margin: 4px 0 0; border-color: #FDE68A; border-left-color: var(--crm-letop-fel); background: var(--crm-letop-zacht); color: var(--crm-letop); }
.app-root .ca-abonnement { gap: 8px; }
.app-root .ca-abonnement p { margin: 0; }
.app-root .ca-bevestig { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px 14px;
    border: 1px solid var(--crm-lijn); border-radius: var(--crm-radius); background: var(--crm-hover); }
.app-root .ca-bevestig p { margin: 0; font-size: 13.5px; color: var(--crm-ink-zacht); }
.app-root .ca-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.app-root .ca-prijzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; margin: 0 0 14px; }
/* Eigenaarfeedback 6 okt 2026: de verleng-/opzegregel onder de prijskaarten, vóór het kiezen. */
.app-root .ca-prijzen__voorwaarden { margin: -4px 0 16px; max-width: 62ch; }
.app-root .ca-prijs { gap: 8px; }
.app-root .ca-prijs__bedrag { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.015em; color: var(--crm-ink); }
.app-root .ca-prijs > button { margin-top: auto; }
.app-root .ca-gebruik { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.app-root .ca-gebruik th, .app-root .ca-gebruik td { text-align: left; padding: 10px 0; border-top: 1px solid var(--crm-lijn); }
.app-root .ca-gebruik tr:first-child th, .app-root .ca-gebruik tr:first-child td { border-top: 0; }
.app-root .ca-gebruik th { font-weight: 500; color: var(--crm-gedempt); }
.app-root .ca-team { gap: 12px; }
.app-root .ca-team__teller { margin: 0 0 12px; }
.app-root .ca-leden { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.app-root .ca-lid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
    padding: 10px 0; border-top: 1px solid var(--crm-lijn); }
.app-root .ca-lid:first-child { border-top: 0; padding-top: 0; }
.app-root .ca-lid__wie { display: flex; flex-direction: column; min-width: 0; word-break: break-all; }
/* CRM-seats (9 okt 2026): de CRM-schakelaar per lid (Ragently.Gedeeld/Components/CrmSeatSchakelaar.razor). */
.app-root .ca-lid__crm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ca-laden { padding: 2rem; font-family: "Ragently Inter", Inter, sans-serif; color: #475569; }

/* ── Schil (premium schil F2, stijl facturatie) ─────────────────────────────────────────────
   CrmAppLayout + CrmZijbalk + CrmOnderbalk. Desktop: donkere zijbalk van 232px (sticky, eigen
   scroll) naast de inhoud met een topbalk (zoekveld, opent het opdrachtpalet). ≤900px: donkere
   topbalk met hamburger, de zijbalk wordt een lade (z 60, onder ZijPaneel 105 en CrmDialoog 110)
   en onderin een vaste balk van 60px + safe-area. De schil zet dan --crm-onderbalk-offset, zodat
   de actiebalk van de kaartenstapel (Mails) erboven staat (crm/kaartenstapel.css). */
.app-root.ca-app {
    --ca-zijbalk-breed: 232px;
    --ca-onderbalk-hoog: 60px;
    /* F6a: wat er boven plakt (de topbalk, 56px + zijn lijn) -- lijstkoppen en het veldpaneel
       blijven daaronder staan in plaats van erachter te verdwijnen (crm/lijst.css). */
    --crm-plakrand: 57px;
    display: grid;
    grid-template-columns: var(--ca-zijbalk-breed) minmax(0, 1fr);
    min-height: 100vh;
    font-size: var(--crm-tekst);
    color: var(--crm-ink);
    /* De zijbalk is sticky en 100vh hoog; op lange pagina's loopt de kolom eronder door in
       dezelfde kleur (zelfde truc als facturatie). */
    background: linear-gradient(to right, var(--crm-zijbalk) var(--ca-zijbalk-breed), var(--crm-canvas) var(--ca-zijbalk-breed));
}

.app-root .ca-zijbalk {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 12px;
    background: var(--crm-zijbalk);
    color: var(--crm-zijbalk-tekst);
    font-size: 13px;
    outline: none;
}

.app-root .ca-merkblok {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #262A33;
    border-radius: 10px;
    background: #1A1D24;
    color: #fff;
}

.app-root .ca-merkblok__logo { flex: none; width: 32px; height: 32px; border-radius: var(--crm-radius); }
.app-root .ca-merkblok__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-root .ca-merkblok__naam { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-root .ca-merkblok__tenant { margin-top: 1px; font-size: 11.5px; color: var(--crm-zijbalk-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-root .ca-lade-sluit {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--crm-radius);
    background: none;
    color: var(--crm-zijbalk-tekst);
    cursor: pointer;
}

.app-root .ca-lade-sluit:hover { background: #262A33; color: #fff; }

.app-root .ca-nav { display: flex; flex-direction: column; min-width: 0; }

.app-root .ca-nav__groep {
    margin: 12px 9px 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--crm-zijbalk-kop);
}

.app-root .ca-nav__groep:first-child { margin-top: 2px; }

.app-root .ca-nav__lijst { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }

.app-root .ca-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px 10px;
    border-radius: var(--crm-radius);
    color: var(--crm-zijbalk-tekst);
    font-size: 13.5px;
    text-decoration: none;
}

.app-root .ca-nav__item:hover { background: #171A20; color: #fff; }

.app-root .ca-nav__item:focus-visible,
.app-root .ca-uitloggen:focus-visible,
.app-root .ca-lade-sluit:focus-visible,
.app-root .ca-topbalk__menu:focus-visible,
.app-root .ca-zoekveld:focus-visible,
.app-root .ca-onderbalk__item:focus-visible,
.app-root .ca-taal:focus-visible,
.app-root .ca-gebruiker .btn.is-compact:focus-visible,
.app-root .ca-gebruiker .ca-hint summary:focus-visible {
    outline: 2px solid var(--crm-focus);
    outline-offset: 1px;
}

.app-root .ca-nav__item.is-actief { background: var(--crm-zijbalk-actief); color: #fff; font-weight: 550; }

.app-root .ca-nav__item.is-actief::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 2px;
    background: var(--crm-focus);
}

.app-root .ca-nav__icoon { flex: none; width: 16px; text-align: center; font-size: 13px; opacity: .8; }
.app-root .ca-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badge "N wacht": amber = wacht op jou (op de donkere balk in een donkere amber). */
.app-root .ca-nav-badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.app-root .ca-nav-badge--letop { background: #3A2A0E; color: #FCD34D; }
.app-root .ca-nav-badge__getal { font-weight: inherit; }

.app-root .ca-gebruiker {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--crm-zijbalk-actief);
    color: #D1D5DB;
}

.app-root .ca-gebruiker__wie { display: flex; flex-direction: column; min-width: 0; padding: 0 2px; }
.app-root .ca-gebruiker__naam { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-root .ca-gebruiker__email { font-size: 12px; color: var(--crm-zijbalk-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-root .ca-gebruiker__acties { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Taalkiezer op de donkere zijbalk. */
.app-root .ca-taal {
    min-width: 0;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #2A2F38;
    border-radius: var(--crm-radius);
    background: transparent;
    color: var(--crm-zijbalk-tekst);
    font: inherit;
    font-size: 12px;
}

.app-root .ca-taal option { color: var(--crm-ink); }

.app-root .ca-uitloggen {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #2A2F38;
    border-radius: var(--crm-radius);
    color: var(--crm-zijbalk-tekst);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.app-root .ca-uitloggen:hover { background: #171A20; color: #fff; }

/* Installeerknop (taak 14): alleen als de browser kan installeren, of uitleg voor Safari/iOS. */
.app-root .ca-gebruiker .btn.is-compact {
    width: 100%;
    justify-content: center;
    padding: .3rem .625rem;
    border-color: #2A2F38;
    background: transparent;
    color: var(--crm-zijbalk-tekst);
    font-size: 12px;
}

.app-root .ca-gebruiker .ca-hint { color: var(--crm-zijbalk-tekst); font-size: 12px; }
.app-root .ca-gebruiker .ca-hint summary { cursor: pointer; }
.app-root .ca-gebruiker .ca-hint p { margin: .25rem 0 0; }

.app-root .ca-hoofd { display: flex; flex-direction: column; min-width: 0; background: var(--crm-canvas); }

.app-root .ca-topbalk {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 28px;
    border-bottom: 1px solid var(--crm-lijn);
    background: rgb(247 248 250 / .92);
}

/* Het vervagende filter staat op een laagje achter de balk, niet op de balk zelf: een element met
   backdrop-filter is het referentievlak van alles wat position:fixed is binnen de balk (de klik-buiten-laag
   en het mobiele paneel van de bel), en dan bestrijkt "het hele scherm" alleen de balk. */
.app-root .ca-topbalk::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: saturate(1.4) blur(8px);
}

.app-root .ca-topbalk__menu,
.app-root .ca-topbalk__merk { display: none; }

.app-root .ca-zoekveld {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(420px, 100%);
    height: 36px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--crm-lijn-sterk);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    color: var(--crm-gedempt);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: text;
}

.app-root .ca-zoekveld:hover { border-color: var(--crm-gedempt); }
.app-root .ca-zoekveld__tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-root .ca-zoekveld__toets {
    padding: 1px 6px;
    border: 1px solid var(--crm-lijn);
    border-radius: 5px;
    background: var(--crm-canvas);
    color: var(--crm-gedempt);
    font-family: inherit;
    font-size: 11px;
}

.app-root .ca-inhoud { min-width: 0; padding: 24px 28px 40px; }

.app-root .ca-lade-scherm,
.app-root .ca-onderbalk { display: none; }

@media (max-width: 900px) {
    .app-root.ca-app {
        /* De actiebalk van de kaartenstapel (Mails) staat boven de onderbalk; die vangt de
           safe-area zelf al op (zelfde afspraak als de portaal-nav, portaal.css). */
        --crm-onderbalk-offset: calc(60px + env(safe-area-inset-bottom, 0px));
        --crm-onderbalk-veilig: 0px;
        grid-template-columns: minmax(0, 1fr);
        background: var(--crm-canvas);
    }

    .app-root .ca-topbalk {
        z-index: 35;
        min-height: 52px;
        padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
        border-bottom: 0;
        background: var(--crm-zijbalk);
        color: #fff;
    }

    .app-root .ca-topbalk::before { display: none; }

    .app-root .ca-topbalk__menu {
        display: grid;
        place-items: center;
        flex: none;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: var(--crm-radius);
        background: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .app-root .ca-topbalk__merk {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .app-root .ca-topbalk__merk img { border-radius: 6px; }
    .app-root .ca-zoekveld { display: none; }

    .app-root .ca-zijbalk {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: 280px;
        max-width: 85vw;
        height: auto;
        padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        transform: translateX(-100%);
        /* Dicht ook onzichtbaar: anders blijven de links met Tab bereikbaar buiten beeld. */
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }

    .app-root .ca-zijbalk.is-open {
        transform: none;
        visibility: visible;
        transition: transform .2s ease;
        box-shadow: var(--crm-schaduw-zwevend);
    }

    .app-root .ca-nav__item { min-height: 40px; }

    .app-root .ca-lade-scherm {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 59;
        background: rgb(0 0 0 / .45);
    }

    .app-root .ca-balk { padding: 7px 16px; }

    .app-root .ca-inhoud { padding: 16px 16px calc(16px + 60px + env(safe-area-inset-bottom, 0px)); }

    .app-root .ca-onderbalk {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        border-top: 1px solid var(--crm-lijn);
        background: var(--crm-surface);
    }

    .app-root .ca-onderbalk__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        border: 0;
        background: none;
        color: var(--crm-gedempt);
        font: inherit;
        font-size: 11px;
        text-decoration: none;
        cursor: pointer;
    }

    .app-root .ca-onderbalk__item i { font-size: 17px; }
    .app-root .ca-onderbalk__item.is-actief { color: var(--crm-ink); font-weight: 600; }
    .app-root .ca-onderbalk__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-root .ca-onderbalk__icoon { position: relative; display: inline-flex; }

    /* In de onderbalk alleen het getal als bolletje op het icoon; de hele zin ("3 wacht")
       blijft voor de schermlezer (font-size 0 i.p.v. verbergen). */
    .app-root .ca-onderbalk .ca-nav-badge {
        position: absolute;
        top: -6px;
        left: 11px;
        margin: 0;
        padding: 0 5px;
        font-size: 0;
        line-height: 16px;
        background: var(--crm-letop-fel);
        color: #111827;
    }

    .app-root .ca-onderbalk .ca-nav-badge__getal { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-root .ca-zijbalk,
    .app-root .ca-zijbalk.is-open { transition: none; }
}

/* ── Dashboard (premium schil F4, stijl facturatie golf 2) ─────────────────────────────────
   Pages/Dashboard.razor. Kop + stand-zin, 4 KPI-tegels (crm-kpis: 2 kolommen tot 640px),
   verdeelbalk, en daaronder "Nu actie nodig" naast "Laatste activiteit" (onder elkaar tot
   1000px). Laden = grijze skeletblokken op de plek van de inhoud. */
.app-root .ca-dash { max-width: 1180px; min-width: 0; }
.app-root .ca-dash__stand { margin: 0; color: var(--crm-gedempt); font-size: 13.5px; }
.app-root .ca-dash__melding { margin: -8px 0 14px; font-size: 13px; color: var(--crm-ok); }
.app-root .ca-dash__fout { margin: 0 0 10px; font-size: 13px; color: var(--crm-fout); }
.app-root .ca-dash__gedempt { margin: 0; font-size: 13px; color: var(--crm-gedempt); }
.app-root .ca-dash__rooster {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.app-root .ca-dash__meer { margin-top: 6px; font-size: 12.5px; }

.app-root .ca-dash-acties,
.app-root .ca-dash-activiteit { list-style: none; margin: 0; padding: 0; }

.app-root .ca-dash-actie {
    padding: 11px 0;
    border-top: 1px solid #F1F2F5;
}
.app-root .ca-dash-actie__rij {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
/* Deel 3: het afvinkrondje staat op de plek van het icoon (32px) en neemt de toon van de taak. */
.app-root .ca-dash-actie__rij .ca-dash-afvink { width: 32px; height: 32px; margin: 0; }
.app-root .ca-dash-actie:first-child { border-top: 0; padding-top: 2px; }
.app-root .ca-dash-actie__icoon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: var(--crm-neutraal-zacht, #F3F4F6);
    color: var(--crm-neutraal, #4B5563);
}
.app-root .ca-dash-actie--ok .ca-dash-actie__icoon { background: var(--crm-ok-zacht); color: var(--crm-ok); }
.app-root .ca-dash-actie--letop .ca-dash-actie__icoon { background: var(--crm-letop-zacht); color: var(--crm-letop); }
.app-root .ca-dash-actie--fout .ca-dash-actie__icoon { background: var(--crm-fout-zacht); color: var(--crm-fout); }
.app-root .ca-dash-actie--auto .ca-dash-actie__icoon { background: var(--crm-auto-zacht, #EDE9FE); color: var(--crm-auto); }
.app-root .ca-dash-actie__tekst {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--crm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-root .ca-dash-actie__tekst b { font-weight: 600; }
.app-root .ca-dash-actie__tekst small {
    display: block;
    font-size: 12px;
    color: var(--crm-gedempt);
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-root .ca-dash-actie__knop { flex: none; height: 32px; padding: 0 12px; font-size: 12.5px; }
.app-root .ca-dash-actie__klaar { flex: none; font-size: 12.5px; color: var(--crm-ok); white-space: nowrap; }
.app-root .ca-dash-actie__fout { flex-basis: 100%; font-size: 12px; color: var(--crm-fout); padding-left: 44px; }

.app-root .ca-dash-activiteit li {
    padding: 7px 0;
    border-top: 1px solid #F1F2F5;
    font-size: 13px;
    min-width: 0;
}
.app-root .ca-dash-activiteit__rij {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}
.app-root .ca-dash-activiteit__afgerond { color: var(--crm-ok); }
.app-root .ca-dash-activiteit li:first-child { border-top: 0; padding-top: 0; }
.app-root .ca-dash-activiteit time { flex: none; width: 84px; color: var(--crm-gedempt); font-size: 12px; }
.app-root .ca-dash-activiteit__wat { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app-root .ca-dash-activiteit__wat small { display: block; font-size: 12px; color: var(--crm-gedempt); }
.app-root .ca-dash-stip { flex: none; width: 7px; height: 7px; border-radius: 50%; align-self: center; margin: 0 3.5px; background: var(--crm-neutraal-fel, #9CA3AF); }
/* Deel 3: de stip krijgt de voetafdruk van het rondje (14px), zodat de tekst op één lijn staat; de prullenbak
   (40px klikdoel) maakt de regel niet hoger dan een regel zonder. */
.app-root .ca-dash-activiteit .crm-verwijderregel__prullenbak { margin-block: -8px; }
.app-root .ca-dash-stip--ok { background: var(--crm-ok-fel); }
.app-root .ca-dash-stip--letop { background: var(--crm-letop-fel); }
.app-root .ca-dash-stip--open { background: var(--crm-open-fel); }
.app-root .ca-dash-stip--auto { background: var(--crm-auto); }
/* Deel 3: afvinkrondje voor een open taak (Laatste activiteit en Nu actie nodig). Het klikdoel is 28px;
   de negatieve marge houdt de regel even hoog als met de stip. */
.app-root .ca-dash-afvink {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -8px -7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    display: grid;
    place-items: center;
    align-self: center;
    cursor: pointer;
}
.app-root .ca-dash-afvink::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--crm-gedempt);
    box-sizing: border-box;
}
/* --fout en --letop moeten NA de basisregel staan (zelfde specificiteit): een te late taak is rood, een taak voor vandaag oranje. */
.app-root .ca-dash-afvink--fout::before { border-color: var(--crm-fout); }
.app-root .ca-dash-afvink--letop::before { border-color: var(--crm-letop-fel); }
.app-root .ca-dash-afvink:hover::before { border-color: var(--crm-ok); background: var(--crm-ok-zacht); }
.app-root .ca-dash-afvink:focus-visible { outline: 2px solid var(--crm-focus); outline-offset: 0; }
.app-root .ca-dash-afvink:disabled { cursor: default; opacity: .6; }
.app-root .ca-dash-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--crm-ink);
    text-align: left;
    cursor: pointer;
}
.app-root .ca-dash-link:hover { text-decoration: underline; }
.app-root .ca-dash-link:focus-visible { outline: 2px solid var(--crm-focus); outline-offset: 2px; border-radius: 4px; }

/* Deel 3: groepen in "Laatste activiteit" en "Nu actie nodig" (DashboardGroepKop). */
.app-root .ca-dash-groepen { list-style: none; margin: 0; padding: 0; }
.app-root .ca-dash-groep + .ca-dash-groep { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E5E7EB; }
.app-root .ca-dash-groep__kop {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-ink);
    min-width: 0;
}
.app-root .ca-dash-groep__naam { font-weight: 600; overflow-wrap: anywhere; }
.app-root .ca-dash-groep__bij,
.app-root .ca-dash-groep__aantal { font-size: 12px; font-weight: 400; color: var(--crm-gedempt); }
.app-root .ca-dash-groep__aantal { margin-left: auto; white-space: nowrap; }

.app-root .ca-dash-skelet {
    border-radius: var(--crm-radius-paneel);
    background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 50%, #EEF0F3 75%);
    background-size: 200% 100%;
    animation: ca-dash-glans 1.4s ease-in-out infinite;
}
.app-root .ca-dash-skelet--kpi { height: 74px; }
.app-root .ca-dash-skelet--balk { height: 88px; margin-bottom: 14px; }
.app-root .ca-dash-skelet--paneel { height: 260px; }
@keyframes ca-dash-glans { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 1000px) {
    .app-root .ca-dash__rooster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .app-root .ca-dash-actie__rij { flex-wrap: wrap; }
    .app-root .ca-dash-actie__tekst { flex-basis: calc(100% - 44px); }
    .app-root .ca-dash-actie__knop,
    .app-root .ca-dash-actie__klaar { margin-left: 44px; }
    .app-root .ca-dash-activiteit time { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-root .ca-dash-skelet { animation: none; }
}

/* Sluitknop van de foutbalk (#blazor-error-ui, index.html). Een echte <button> (toetsenbord), maar
   zonder knopuiterlijk: de plek en de cursor komen uit Gedeeld/basis.css. */
.app-root #blazor-error-ui .dismiss {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0 4px;
}
.app-root #blazor-error-ui .dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Hulp & ideeën (/hulp en /hulp/{id}). Klanttekst als platte tekst met regelafbrekingen. */
.app-root .ca-hulp-lijst { list-style: none; margin: 0; padding: 0; }
.app-root .ca-hulp-rij { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--crm-lijn, #ECEEF2); color: inherit; text-decoration: none; }
.app-root .ca-hulp-rij:hover { background: var(--crm-lijn, #ECEEF2); }
.app-root .ca-hulp-rij__nummer { flex: none; font-variant-numeric: tabular-nums; color: var(--crm-ink-zacht, #374151); }
.app-root .ca-hulp-rij__soort { flex: none; font-size: 12px; color: var(--crm-ink-zacht, #374151); }
.app-root .ca-hulp-rij__titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-root .ca-hulp-rij__datum { flex: none; font-size: 12px; color: var(--crm-ink-zacht, #374151); }
.app-root .ca-hulp-status { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--crm-lijn, #ECEEF2); }
.app-root .ca-hulp-draad { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.app-root .ca-hulp-bericht { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--crm-lijn, #ECEEF2); }
.app-root .ca-hulp-bericht--ragently { border-color: var(--crm-lijn-sterk, #D1D5DB); }
.app-root .ca-hulp-bericht__wie { margin: 0 0 4px; font-size: 12px; font-weight: 600; }
.app-root .ca-hulp-tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.app-root .ca-hulp-form { display: flex; flex-direction: column; gap: 10px; }
.app-root .ca-hulp-keuze { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
@media (max-width: 600px) {
    .app-root .ca-hulp-rij { flex-wrap: wrap; }
    .app-root .ca-hulp-rij__titel { flex-basis: 100%; white-space: normal; }
}

/* ── Verwachte omzet (D4, gewogen forecast) ────────────────────────────────
   Components/Dashboard/DashboardVerwachteOmzet.razor: één tabel, per rij een
   balkje (gewogen tegenover het grootste ongewogen bedrag). Op de telefoon
   vallen de balkjes weg; de bedragen blijven. */
.app-root .ca-omzet__uitleg { margin-bottom: 8px; }
/* Titel voor schermlezers: visueel verborgen, wel voorgelezen. */
.app-root .ca-omzet__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-root .ca-omzet { width: 100%; border-collapse: collapse; font-size: 13px; }
.app-root .ca-omzet th,
.app-root .ca-omzet td { padding: 6px 8px; text-align: right; border-top: 1px solid var(--crm-lijn); white-space: nowrap; }
.app-root .ca-omzet thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--crm-gedempt); }
.app-root .ca-omzet thead th:first-child,
.app-root .ca-omzet th[scope="row"] { text-align: left; font-weight: 500; color: var(--crm-ink); }
.app-root .ca-omzet tfoot th,
.app-root .ca-omzet tfoot td { font-weight: 600; }
.app-root .ca-omzet__balk {
    display: inline-block;
    width: 64px;
    height: 6px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--crm-lijn);
    overflow: hidden;
    vertical-align: middle;
}
.app-root .ca-omzet__balk > i { display: block; height: 100%; background: var(--crm-open-fel); }
@media (max-width: 640px) {
    .app-root .ca-omzet__balk { display: none; }
}
/* Grafiekweergave: de regels onder de kolomgrafiek (ca-dash-emmers); het totaal iets zwaarder. */
.app-root .ca-dash-emmers .ca-omzet__totaalregel { font-weight: 600; color: var(--crm-ink); }

/* D6 (13 okt 2026): dashboardblok Contactnorm. */
.app-root .ca-dash-norm { width: 100%; border-collapse: collapse; }
.app-root .ca-dash-norm th,
.app-root .ca-dash-norm td { padding: 6px 8px; text-align: left; }
/* 19 okt 2026: getallen links, gelijk met hun kopjes (tabular-nums houdt de cijfers onder elkaar). */
.app-root .ca-dash-norm__getal { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-root .ca-dash-norm__kop { margin: 16px 0 8px; font-size: var(--crm-sectielabel); text-transform: uppercase; color: var(--crm-gedempt); }
.app-root .ca-dash-norm__achter { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.app-root .ca-dash-norm__achter li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* De bel in de topbalk (CRM-meldingen D3). Rechts uitgelijnd; het paneel valt eronder, op de telefoon
   nooit breder dan het scherm. De achtergrondlaag vangt een klik buiten het paneel. */
.app-root .ca-bel { position: relative; margin-left: auto; }
.app-root .ca-bel__knop { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--crm-radius); background: none; color: var(--crm-gedempt); cursor: pointer; }
.app-root .ca-bel__knop:hover { color: var(--crm-ink-zacht); }
.app-root .ca-bel__teller { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--crm-fout); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.app-root .ca-bel__scherm { position: fixed; inset: 0; z-index: 40; }
.app-root .ca-bel__paneel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 41; width: 360px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; border: 1px solid var(--crm-lijn); border-radius: var(--crm-radius); background: var(--crm-surface); box-shadow: 0 12px 32px rgb(15 17 21 / .18); color: var(--crm-ink-zacht); }
.app-root .ca-bel__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--crm-lijn); }
.app-root .ca-bel__titel { margin: 0; font-size: 14px; }
.app-root .ca-bel__alles { border: 0; background: none; color: var(--crm-focus); font: inherit; font-size: 12.5px; cursor: pointer; }
.app-root .ca-bel__alles:disabled { color: var(--crm-gedempt); cursor: default; }
.app-root .ca-bel__kop-acties { display: flex; align-items: center; gap: 4px; }
.app-root .ca-bel__tandwiel { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--crm-gedempt); font-size: 13px; }
.app-root .ca-bel__tandwiel:hover, .app-root .ca-bel__tandwiel:focus-visible { color: var(--crm-focus); background: var(--crm-hover); }
.app-root .ca-bel__lijst { margin: 0; padding: 0; list-style: none; }
.app-root .ca-bel__item { display: grid; gap: 2px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--crm-lijn); background: none; text-align: left; font: inherit; cursor: pointer; }
.app-root .ca-bel__item.is-ongelezen { background: var(--crm-canvas); }
.app-root .ca-bel__item.is-ongelezen .ca-bel__item-titel { font-weight: 700; }
.app-root .ca-bel__item-tekst { font-size: 12.5px; color: var(--crm-gedempt); }
.app-root .ca-bel__item-tijd { font-size: 11.5px; color: var(--crm-gedempt); }
.app-root .ca-bel__leeg { margin: 0; padding: 16px 14px; color: var(--crm-gedempt); font-size: 13px; }
.app-root .ca-bel__instellen { display: block; padding: 10px 14px; font-size: 12.5px; color: var(--crm-focus); }

@media (max-width: 900px) {
    .app-root .ca-bel__knop { color: #fff; }
    .app-root .ca-bel__paneel { position: fixed; right: 12px; left: 12px; top: calc(56px + env(safe-area-inset-top, 0px)); width: auto; max-width: none; }
}

/* Alleen voor schermlezers. */
.app-root .ca-bel__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app-root .ca-bel__paneel:focus { outline: none; }
.app-root .ca-bel__actie-fout { margin: 0; padding: 8px 14px; color: var(--crm-fout); font-size: 12.5px; }

/* Dashboard: raster met breedte per blok, tabel- en lijstweergave (spec 2026-10-11 §4.4) */
.app-root .ca-dash__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.app-root .ca-dash__vak { min-width: 0; }
.app-root .ca-dash__vak--vol { grid-column: 1 / -1; }
.app-root .ca-dash__vak > :last-child { margin-bottom: 0; }
@media (max-width: 1000px) {
    .app-root .ca-dash__raster { grid-template-columns: minmax(0, 1fr); }
}
.app-root .ca-dash-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.app-root .ca-dash-tabel th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--crm-gedempt); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--crm-lijn); }
.app-root .ca-dash-tabel td { padding: 7px 8px; border-bottom: 1px solid var(--crm-lijn); }
.app-root .ca-dash-tabel tr:last-child td { border-bottom: 0; }
.app-root .ca-dash-tabel .is-getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-root .ca-dash-tabel__toon--ok { color: var(--crm-ok); }
.app-root .ca-dash-tabel__toon--letop { color: var(--crm-letop); }
.app-root .ca-dash-tabel__toon--fout { color: var(--crm-fout); }
.app-root .ca-dash-tabel small { color: var(--crm-gedempt); font-size: 12px; }
/* KPI-doelen, weergave verloop (plan deel 3): per KPI de tegel links en de kolomgrafiek rechts;
   een tegel zonder grafiek houdt zijn breedte. Smal en in een half vak: tegel boven, grafiek eronder. */
.app-root .ca-kpi-verloop { display: grid; gap: 14px; }
.app-root .ca-kpi-verloop__rij { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.app-root .ca-kpi-verloop__rij--tegel { grid-template-columns: minmax(160px, 220px); }
/* Naast de grafiek begint de tegel op de bovenrand van de plot (crm-grafiek heeft 18px padding-top). */
.app-root .ca-kpi-verloop__tegel { min-width: 0; padding-top: 18px; }
.app-root .ca-kpi-verloop__rij--tegel .ca-kpi-verloop__tegel { padding-top: 0; }
.app-root .ca-dash__vak--half .ca-kpi-verloop__rij { grid-template-columns: minmax(0, 1fr); }
.app-root .ca-dash__vak--half .ca-kpi-verloop__tegel { padding-top: 0; }
@media (max-width: 640px) {
    .app-root .ca-kpi-verloop__rij { grid-template-columns: minmax(0, 1fr); }
    .app-root .ca-kpi-verloop__tegel { padding-top: 0; }
}
/* Verwachte sluiting (deel 3): de emmers zonder maand als regels onder de grafiek. */
.app-root .ca-dash-emmers { list-style: none; display: grid; gap: 4px; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: var(--crm-ink-zacht); }
.app-root .ca-dash-emmers .is-letop { color: var(--crm-letop); font-weight: 600; }
.app-root .ca-dash-lijst { margin: 0; background: var(--crm-surface); border: 1px solid var(--crm-lijn); border-radius: var(--crm-radius-paneel); padding: 4px 14px; }
.app-root .ca-dash-lijst__regel { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--crm-lijn); }
.app-root .ca-dash-lijst__regel:first-child { border-top: 0; }
.app-root .ca-dash-lijst dt a { color: var(--crm-ink-zacht); text-decoration: none; }
.app-root .ca-dash-lijst dd { margin: 0; text-align: right; }
.app-root .ca-dash-lijst dd small { display: block; color: var(--crm-gedempt); font-size: 12px; }

/* ── Dashboard bewerken (deel 2, besluit 9) ─────────────────────────────────────────────── */
.app-root .ca-dash-bewerkbalk {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: var(--crm-open-zacht); border: 1px solid var(--crm-open-fel); border-radius: var(--crm-radius-paneel);
    padding: 8px 12px; margin: 0 0 14px;
}
.app-root .ca-dash-bewerkbalk__uitleg { flex: 1 1 240px; color: var(--crm-open); font-size: 13px; font-weight: 500; }
.app-root .ca-dash-rand { position: relative; border: 1.5px dashed var(--crm-open-fel); border-radius: var(--crm-radius-paneel); padding: 8px; background: var(--crm-canvas); }
.app-root .ca-dash-rand__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.app-root .ca-dash-rand__menuknop { margin-left: auto; min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; }
.app-root .ca-dash-rand__greep { color: var(--crm-open); cursor: grab; }
.app-root .ca-dash-rand__titel { flex: 1; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--crm-gedempt); }
.app-root .ca-dash-menu {
    position: absolute; right: 8px; top: 40px; z-index: 5; width: 220px; display: flex; flex-direction: column; gap: 2px;
    background: var(--crm-surface); border: 1px solid var(--crm-lijn-sterk); border-radius: var(--crm-radius); padding: 6px;
    box-shadow: var(--crm-schaduw-zwevend);
}
.app-root .ca-dash-menu__kop { margin: 6px 6px 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--crm-gedempt); }
.app-root .ca-dash-menu button { text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--crm-ink); cursor: pointer; }
.app-root .ca-dash-menu button:hover:not(:disabled), .app-root .ca-dash-menu button:focus-visible { background: var(--crm-hover); }
.app-root .ca-dash-menu button[aria-pressed="true"] { background: var(--crm-open-zacht); color: var(--crm-open); font-weight: 600; }
.app-root .ca-dash-menu button:disabled { color: var(--crm-gedempt); cursor: default; }
.app-root .ca-dash-menu__gevaar { color: var(--crm-fout) !important; }
.app-root .ca-dash-toevoegen__knop {
    width: 100%; min-height: 64px; border: 1.5px dashed var(--crm-lijn-sterk); border-radius: var(--crm-radius-paneel);
    background: transparent; color: var(--crm-gedempt); font-weight: 600; cursor: pointer;
}
.app-root .ca-dash-toevoegen__lijst { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.app-root .ca-dash-toevoegen__lijst button {
    width: 100%; text-align: left; border: 1px solid var(--crm-lijn); border-radius: var(--crm-radius); background: var(--crm-surface);
    padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column;
}
.app-root .ca-dash-toevoegen__lijst small { color: var(--crm-gedempt); font-size: 11.5px; }

.app-root .ca-dash-rand.is-gesleept { opacity: .4; }
.app-root .ca-dash-rand.is-doel { border-style: solid; box-shadow: 0 0 0 3px var(--crm-open-zacht); }
.app-root .ca-dash-sleepeinde {
    min-height: 64px; display: grid; place-items: center; border: 2px dashed var(--crm-open-fel);
    background: var(--crm-open-zacht); color: var(--crm-open); border-radius: var(--crm-radius-paneel); font-weight: 600;
}

/* Dashboardlogo in de kop (spec 2026-10-14 deel 4, Components/Dashboard/DashboardLogo.razor): hoogstens
   132x52 en nooit uitgerekt; de eigenaar zonder logo ziet een gestippeld vak, met logo een menu eronder. */
.app-root .ca-dash-logo { position: relative; display: flex; align-items: center; }
.app-root .ca-dash-logo__beeld { display: block; width: auto; height: auto; max-width: 132px; max-height: 52px; object-fit: contain; }
.app-root .ca-dash-logo__knop { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 2px; border: 1px solid transparent; border-radius: var(--crm-radius); background: transparent; cursor: pointer; }
.app-root .ca-dash-logo__knop:hover:not(:disabled) { border-color: var(--crm-lijn-sterk); }
.app-root .ca-dash-logo__knop:focus-visible { outline: 2px solid var(--crm-focus); outline-offset: 2px; }
.app-root .ca-dash-logo__leeg {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 132px; height: 52px; border: 1.5px dashed var(--crm-lijn-sterk); border-radius: var(--crm-radius);
    color: var(--crm-gedempt); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.app-root .ca-dash-logo__leeg:hover,
.app-root .ca-dash-logo__leeg:focus-within { border-color: var(--crm-focus); background: var(--crm-hover); color: var(--crm-ink); }
.app-root .ca-dash-logo__leeg:focus-within { outline: 2px solid var(--crm-focus); outline-offset: 2px; }
.app-root .ca-dash-logo__leeg.is-bezig { opacity: .6; cursor: progress; }
/* De echte bestandskiezer ligt onzichtbaar over het vak of het menu-item: klikken opent hem, Tab bereikt hem. */
.app-root .ca-dash-logo__bestand { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.app-root .ca-dash-logo__scherm { position: fixed; inset: 0; z-index: 4; background: transparent; }
.app-root .ca-dash-logo__menu { left: 0; right: auto; top: calc(100% + 4px); }
.app-root .ca-dash-logo__menu button { min-height: 40px; }
.app-root .ca-dash-logo__menuitem { position: relative; display: flex; align-items: center; min-height: 40px; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--crm-ink); cursor: pointer; }
.app-root .ca-dash-logo__menuitem:hover,
.app-root .ca-dash-logo__menuitem:focus-within { background: var(--crm-hover); }

/* Verwijsregel onder het raster (spec 2026-10-14 deel 4, DashboardVerwijsRegel.razor): gecentreerd en gedempt. */
.app-root .ca-dash-verwijs { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--crm-gedempt); }
.app-root .ca-dash-verwijs a,
.app-root .ca-dash-verwijs__knop { color: var(--crm-open); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.app-root .ca-dash-verwijs__knop { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.app-root .ca-dash-verwijs__knop:disabled { color: var(--crm-gedempt); cursor: default; }
.app-root .ca-dash-verwijs a:focus-visible,
.app-root .ca-dash-verwijs__knop:focus-visible { outline: 2px solid var(--crm-focus); outline-offset: 2px; border-radius: 3px; }

/* Touch: geen sleepgreep (slepen werkt er niet), grotere keuzeknoppen in het blokmenu */
@media (pointer: coarse) {
    .app-root .ca-dash-rand__greep { display: none; }
    .app-root .ca-dash-menu button { min-height: 44px; }
    .app-root .ca-dash-logo__menuitem { min-height: 44px; }
}