/* HSG-Events CRM — basisstijl */

:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --border: #e4e7ec;
    --border-zacht: #eef0f4;
    --text: #16202c;
    --muted: #6b7684;
    --accent: #1f4e79;
    --accent-licht: #eaf1f8;
    --danger: #b8362e;
    --ok: #2e7d5b;
    --radius: 10px;

    --menu-bg: #141d28;
    --menu-tekst: #98a4b3;
    --menu-actief: #ffffff;

    --schaduw: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --schaduw-op: 0 4px 12px rgba(16, 24, 40, .09);
}

* { box-sizing: border-box; }

/* De browser verbergt [hidden] met display: none, maar dat is zo'n lichte
   regel dat elke eigen "display: flex" hem verslaat — dan blijft iets staan
   terwijl JavaScript denkt het weggehaald te hebben. Hier eens en voor altijd
   dichtgezet. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.icoon { flex-shrink: 0; }

/* --- Layout --------------------------------------------------------------- */

.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--menu-bg);
    color: var(--menu-tekst);
    padding: 16px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 18px;
    color: #fff;
}
.brand:hover { text-decoration: none; }

.brandmerk {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2b6ca8, #1f4e79);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.brandnaam { font-size: 14px; font-weight: 600; letter-spacing: .01em; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 7px;
    color: var(--menu-tekst);
    font-size: 14px;
    line-height: 1.2;
    transition: background .12s, color .12s;
}

.sidebar nav a .icoon { opacity: .75; transition: opacity .12s; }

/* Het cijfertje achter Taken. Rood, want het gaat alleen aan als er iets over
   de datum heen is; anders zou je eroverheen kijken. */
.menumerk {
    margin-left: auto;
    min-width: 19px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.sidebar nav a:hover {
    background: rgba(255, 255, 255, .06);
    color: #dfe5ec;
    text-decoration: none;
}
.sidebar nav a:hover .icoon { opacity: 1; }

.sidebar nav a.active {
    background: rgba(255, 255, 255, .1);
    color: var(--menu-actief);
    font-weight: 500;
}
.sidebar nav a.active .icoon { opacity: 1; color: #78b0e4; }

/* Beheer in uitklapgroepen: Instellingen en DEV.
 *
 * Een <details> in plaats van een script. Uitklappen kan de browser zelf, en
 * de CSP laat losse JavaScript niet toe. De groep staat open als je erin zit;
 * dat zet de view, niet de stylesheet.
 *
 * De groep is zelf een kolom, want de nav is een flexkolom en zonder dit
 * kwamen de zes links van een groep naast elkaar te staan. */
.menugroep { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }

.menugroep summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 7px;
    color: #7c8798;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;                 /* het driehoekje van de browser zelf */
    transition: background .12s, color .12s;
}
.menugroep summary::-webkit-details-marker { display: none; }
.menugroep summary:hover { background: rgba(255, 255, 255, .06); color: #b9c2cf; }

/* Het pijltje helemaal rechts, en een kwartslag om zodra de groep openstaat.
   Zo zie je in één oogopslag welke van de twee uit staat. */
.menugroep summary .icoon:last-child {
    margin-left: auto;
    opacity: .55;
    transition: transform .15s;
}
.menugroep[open] summary .icoon:last-child { transform: rotate(90deg); }

/* De links in een groep iets naar binnen: dan is te zien dat ze bij de kop
   erboven horen en niet bij het hoofdmenu. Met .sidebar ervoor, want anders
   weegt .sidebar nav a zwaarder en blijft de inspringing weg. */
.sidebar nav .menugroep a { padding-left: 22px; }

/* Staat de groep dicht terwijl je er wel in zit, dan is dat een fout in de
   view — maar het mag nooit betekenen dat je niet ziet waar je bent. */
.menugroep:not([open]):has(a.active) summary { color: var(--menu-actief); }

.menukop {
    margin: 18px 0 6px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5c6878;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

.topbar .user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.topbar .belletje { margin-left: 4px; }

/* De avatar in de topbalk is groter dan die in de lijsten. Als uitzondering
   geschreven, want de algemene .avatar staat verderop en zou hem overrulen. */
.topbar .avatar {
    width: 30px;
    height: 30px;
    background: var(--accent-licht);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

/* Is het een echte foto, dan bijsnijden in plaats van uitrekken: een liggende
   foto zou anders platgedrukt in het rondje staan. */
img.avatar { object-fit: cover; background: var(--accent-licht); }

/* Het eigen tekstje van de afzender onderaan de offerte. */
.verzendertekst { margin-top: 10px; color: var(--muted); }

/* Een naam met een rondje ervoor, in een lijst. */
.metfoto { display: inline-flex; align-items: center; gap: 8px; }
.metfoto .avatar { flex: 0 0 auto; width: 28px; height: 28px; font-size: 11px; }

/* De naam bovenin is een link naar je eigen profiel. */
.usernaam { display: block; line-height: 1.25; color: var(--text); }
.usernaam:hover { color: var(--accent); text-decoration: none; }
.usernaam em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }

/* Een hint die ergens op wijst in plaats van iets uitlegt. */
.veldhint.waarschuwing {
    padding: 8px 10px;
    border-left: 3px solid #d9a441;
    border-radius: 0 6px 6px 0;
    background: #fdf7ea;
    color: #7a5b1c;
}

.uitlogknop {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.uitlogknop:hover { background: #f1f3f6; color: var(--text); }

.content { padding: 22px 28px 40px; }

/* --- Componenten ---------------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--label-color, var(--accent));
    border-radius: var(--radius);
    padding: 15px 16px;
    box-shadow: var(--schaduw);
}

.card h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.card dl { margin: 0; display: grid; gap: 7px; }
.card dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card dt { color: var(--muted); font-size: 13px; }
.card dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.card dd.negative { color: var(--danger); }

.columns { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }

/* De recordpagina, naar het voorbeeld van HubSpot: links waar dit record zelf
   uit bestaat, in het midden wat er gebeurd is, rechts waar het aan vastzit.
   Die driedeling is de hele truc — je hoeft niet meer te scrollen om te zien
   met wie je te maken hebt. */
.recordpagina {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.recordpagina > * { min-width: 0; }

/* De offerte heeft een breed document in het midden: regels, bedragen,
   fragmenten. Daar past geen smalle eigenschappenkolom naast, dus die pagina
   houdt twee kolommen met hetzelfde koppelingenpaneel rechts. */
.recordpagina.breed { grid-template-columns: minmax(0, 1fr) 320px; }

.recordkoppelingen { display: grid; gap: 16px; align-content: start; }

/* Onder de 1400px is er geen ruimte voor drie kolommen naast elkaar. De
   koppelingen gaan dan over de volle breedte onder de rest, naast elkaar. */
@media (max-width: 1400px) {
    .recordpagina { grid-template-columns: 300px minmax(0, 1fr); }
    .recordpagina > .recordkoppelingen {
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 980px) {
    .recordpagina,
    .recordpagina.breed { grid-template-columns: minmax(0, 1fr); }
}

/* Eén paneel met gekoppelde records. */
/* Geen overflow: hidden. De uitklaplijst van de keuzelijst hangt buiten het
   paneel, en die werd hier afgeknipt. De afgeronde hoeken regelen we op de
   onderdelen zelf. */
.koppelblok { padding: 0; }
.koppelblok > .koppelkop:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.koppelblok > .koppellijst > li:last-child { border-radius: 0 0 var(--radius) var(--radius); }

.koppelkop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-zacht);
}

.koppelkop h2 { margin: 0; font-size: 14px; }

.koppelaantal {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f3f6;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.koppelkop .toevoegen { margin-left: auto; font-size: 12.5px; }

.koppellijst { list-style: none; margin: 0; padding: 0; }

.koppellijst > li {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-zacht);
    font-size: 13px;
}
.koppellijst > li:last-child { border-bottom: none; }

.koppelnaam { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.koppelnaam a { font-weight: 500; }

.koppelregel {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

/* De labels van het gekoppelde bedrijf, als rij gekleurde blokjes. */
.bedrijfsindeling { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

.koppelblok .empty { margin: 0; padding: 14px; font-size: 13px; }

/* De handelingen onder een gekoppelde contactpersoon. */
.koppellijst .rijacties {
    display: flex;
    gap: 10px;
    /* De algemene .rijacties duwt naar rechts, want die zit in tabelrijen.
       Hier staan de knoppen onder de naam en horen ze links te beginnen. */
    justify-content: flex-start;
    margin-top: 4px;
    font-size: 12px;
}
.koppellijst .rijacties form { display: inline-flex; }
.koppellijst .rijacties .losmaken { color: var(--muted); }
.koppellijst .rijacties .losmaken:hover { color: var(--danger); }

/* Onderin een koppelblok: koppelen zonder de omweg via het bewerkformulier. */
/* "Meer tonen" onder een lijst van meer dan drie. Een <details>, dus het werkt
   zonder javascript; het driehoekje van de browser halen we weg omdat de tekst
   zelf al zegt wat er gebeurt. */
.koppelmeer > summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 14px;
    border-top: 1px solid var(--border-zacht);
    color: var(--accent);
    font-size: 12.5px;
}
.koppelmeer > summary::-webkit-details-marker { display: none; }
.koppelmeer > summary:hover { background: #fbfcfd; }
.koppelmeer > summary .open { display: none; }
.koppelmeer[open] > summary .dicht { display: none; }
.koppelmeer[open] > summary .open { display: inline; }
.koppelmeer .koppellijst > li:first-child { border-top: 1px solid var(--border-zacht); }

.koppelextra { padding: 12px 14px; border-top: 1px solid var(--border-zacht); background: #fbfcfd; }

.koppelform { display: grid; gap: 6px; }
.koppelform label { margin: 0; }
.koppelform select { width: 100%; }
.koppelform .btn { justify-self: start; }

.koppelform.los { margin-top: 8px; justify-items: start; }

/* Het metertje onderaan, alleen voor beheerders. Zonder cijfers is "de site
   is traag" een gevoel; hiermee is het een getal. */
.meter {
    margin: 20px 0 0;
    padding: 6px 2px 0;
    border-top: 1px solid var(--border-zacht);
    color: #9aa4b1;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
/* De contactpersonen van het gekozen bedrijf, als knopjes onder het veld.
   Voorstellen, niet invullen: bij vijf contactpersonen is automatisch kiezen
   toch een gok, en een offerte naar de verkeerde persoon is vervelend. */
.contactvoorstel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

/* De kop krijgt een eigen regel; anders staat hij naast de eerste knop en
   lijkt die knop bij het bijschrift te horen. */
.voorstelkop { flex: 0 0 100%; margin-bottom: -1px; color: var(--muted); font-size: 12px; }

.voorsteloptie {
    display: grid;
    gap: 1px;
    /* Een vaste bovengrens houdt de knoppen gelijk, ook als iemand een
       mailadres van veertig tekens heeft. */
    max-width: 230px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    appearance: none;
    -webkit-appearance: none;
}

.voorsteloptie:hover { border-color: #b9c7d6; background: #f7f9fb; }
.voorsteloptie:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.voorstelregel { display: flex; align-items: center; gap: 5px; min-width: 0; }

.voorstelnaam {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voorstelbij {
    color: var(--muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voorstelmerk {
    flex: 0 0 auto;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-licht);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* De knop van wie er nu gekozen is. */
.voorsteloptie.gekozen {
    border-color: var(--accent);
    background: var(--accent-licht);
}
.voorsteloptie.gekozen .voorstelnaam { color: var(--accent); }

.meter.traag { color: var(--danger); }
.meter span { cursor: help; }
.koppelform.los button { font-size: 12px; color: var(--muted); }
.koppelform.los button:hover { color: var(--danger); }



.block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--schaduw);
}

.block h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.block h3 { font-size: 13px; font-weight: 600; margin: 18px 0 6px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border-zacht); }
th {
    padding-top: 4px;
    color: var(--muted);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom-color: var(--border);
    white-space: nowrap;
}
tbody tr { transition: background .1s; }
tbody tr:hover { background: #fafbfc; }

/* --- Rust in een lange lijst ---------------------------------------------- */

/* Om de andere regel een spoortje lichter. Bijna niet te zien als je ernaar
   kijkt, maar het houdt je oog op één regel als je van links naar rechts
   leest — en dat is precies waar je in een brede tabel de mist in gaat.
   :hover wint, zodat de regel waar je op staat nog steeds oplicht. */
tbody tr:nth-child(even) { background: #fcfcfd; }
tbody tr:nth-child(even):hover { background: #fafbfc; }

/* De fase met een tint naar de slaagkans. Geen felle kleuren: het gaat om
   herkennen tijdens het scannen, niet om alarm slaan. */
.fasemerk {
    display: inline-block;
    max-width: 100%;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.fasemerk.kans-laag      { background: #f2f4f7; color: #5b6675; }
.fasemerk.kans-midden    { background: #eef3f8; color: #2f4f8f; }
.fasemerk.kans-goed      { background: #fdf4e3; color: #8a6516; }
.fasemerk.kans-hoog      { background: #e3f2ea; color: var(--ok); }
.fasemerk.kans-onbekend  { background: #f6f7f9; color: var(--muted); }

/* Een gesloten deal blijft gedempt: de tint mag niet suggereren dat er nog
   iets loopt. */
tr.gesloten .fasemerk { opacity: .55; }

/* Bedragen als kolom laten lezen: cijfers even breed, iets steviger. */
td.num { font-variant-numeric: tabular-nums; }
.dealtabel td[data-kolom="bedrag"] { font-weight: 600; color: var(--text); }
tbody tr:last-child td { border-bottom: none; }

/* Getalkolommen krimpen naar hun inhoud; de tekstkolommen krijgen de rest. */
td.num, th.num { text-align: right; width: 1%; white-space: nowrap; }
td.num { font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

.pill {
    display: inline-block;
    padding: 2px 7px;
    margin-right: 7px;
    border-radius: 5px;
    background: var(--label-color, var(--accent));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: 1px;
}

/* Mijn opvolging op het dashboard: de taak, en waar hij aan hangt. */
.opvolging { list-style: none; margin: 0; padding: 0; font-size: 14px; }

.opvolging li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-zacht);
}
.opvolging li:last-child { border-bottom: none; }

.opvolginhoud { min-width: 0; }
.opvolgtaak { display: block; }

.opvolgbij {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bedrijf, Deal, Offerte — waar de taak aan hangt. */
.opvolgsoort {
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f3f6;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.opvolging time {
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.opvolging time.te-laat { color: var(--danger); font-weight: 500; }

.empty { color: var(--muted); font-size: 14px; margin: 4px 0; }

/* --- Meldingen ------------------------------------------------------------ */

.flash {
    margin: 18px 28px -4px;
    padding: 11px 15px;
    border-radius: 9px;
    font-size: 14px;
    border: 1px solid;
}

.flash-error   { background: #fdf2f1; border-color: #f2d3cf; color: #9a2e26; }
.flash-success { background: #eff8f3; border-color: #cbe6d8; color: #23684c; }
.flash-info    { background: #eff4f9; border-color: #d2e0ef; color: var(--accent); }

/* --- De balk tijdens een overname ----------------------------------------- */

/* Plakt boven aan het scherm en gaat dus nooit uit beeld. Dat is het hele
   punt: je bent op dit moment iemand anders, en alles wat je doet komt onder
   diens naam te staan. Een melding die na één keer scrollen verdwenen is,
   zou precies op het verkeerde moment weg zijn.

   Bruin en niet rood: er is niets kapot. Wel genoeg kleur dat je het scherm
   niet aanziet voor je eigen scherm. */
.imitatiebalk {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 28px;
    background: #6f3d12;
    color: #f3ddc7;
    font-size: 13.5px;
    line-height: 1.35;
}

.imitatiebalk .icoon { flex-shrink: 0; opacity: .85; }
.imitatiebalk strong { color: #fff; font-weight: 600; }
.imitatiebalk .bij { color: #d9bb9c; }
.imitatiebalk form { margin-left: auto; }

.imitatiebalk button {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 7px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.imitatiebalk button:hover { background: rgba(255, 255, 255, .2); }

@media (max-width: 700px) {
    .imitatiebalk { padding: 8px 14px; flex-wrap: wrap; gap: 8px; }
}

/* In het auditlog achter de naam: deze regel is gezet terwijl een beheerder
   het account had overgenomen. Dezelfde bruine kleur als de balk, zodat het
   met elkaar te verbinden is. */
.namens {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f4e7d8;
    color: #6f3d12;
    font-size: 11.5px;
    white-space: nowrap;
}

/* --- Formulieren ---------------------------------------------------------- */

.stack { display: grid; gap: 6px; }
.stack label { font-size: 13px; color: var(--muted); margin-top: 8px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
    -webkit-appearance: none;
    appearance: none;
}

input::placeholder, textarea::placeholder { color: #9aa3af; }

input:hover, select:hover, textarea:hover { border-color: #d2d7de; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .13);
}

/* Eigen pijltje, want het pijltje van de browser is per systeem anders. */
select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    cursor: pointer;
}

/* Vergrootglas in het zoekveld. */
.zoekveld input[type="search"] {
    padding-left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    -webkit-appearance: auto;
    appearance: auto;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 78, 121, .25); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--schaduw); }
.btn-primary:hover { background: #1a4266; text-decoration: none; }

button.link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}
button.link:hover { text-decoration: underline; }

/* --- Losse pagina's (login, fouten) --------------------------------------- */

body.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.panel {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
}

.panel .flash { margin: 0 0 16px; }
.panel-title { margin: 0 0 4px; font-size: 19px; }
.panel-sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

/* Kleine uitleg onder een formulier op het inlogscherm. */
.panel-voet { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.error-block { text-align: center; padding: 48px 20px; }
.error-code { font-size: 42px; font-weight: 600; color: var(--muted); margin: 0 0 8px; }

/* --- Werkbalk, filters en lijsten ----------------------------------------- */

.werkbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.werkbalk .acties { display: flex; align-items: center; gap: 8px; }

/* De filterbalk als één geheel, in plaats van losse veldjes naast elkaar. */
.filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--schaduw);
}

.filters .zoekveld { width: 360px; max-width: 100%; }
.filters input, .filters select { border-color: transparent; background-color: transparent; }
.filters input:hover, .filters select:hover { border-color: var(--border); }
.filters input:focus, .filters select:focus { background-color: #fff; }

/* Scheidingslijntje tussen zoekveld en filters, zodat het één balk blijft
   maar de onderdelen toch uit elkaar te houden zijn. */
.filters select {
    width: auto;
    min-width: 140px;
    border-left: 1px solid var(--border);
    border-radius: 0 8px 8px 0;
}
.filters select:hover, .filters select:focus { border-radius: 8px; }

/* In het filterblok van deals/offertes staan de velden al in een kaart. */
.filterblok .filters { padding: 0; border: none; box-shadow: none; background: none; }

.btn-stil {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--schaduw);
}
.btn-stil:hover { background: #f7f8fa; border-color: #d6dbe2; text-decoration: none; }

/* Een knop die niets doet moet er ook zo uitzien — zoals "Vorige" bij de
   eerste stap van de offertewizard. */
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.btn:disabled:hover { background: var(--surface); border-color: var(--border); }

.btn-gevaar { background: var(--surface); border-color: #e8cbc8; color: var(--danger); }
.btn-gevaar:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.btn.klein { padding: 6px 11px; font-size: 13px; }

.terug { font-size: 14px; color: var(--muted); }
.terug:hover { color: var(--accent); }

.blokkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.blokkop h2 { margin-bottom: 12px; }
.klein { font-size: 13px; }

.merk {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 3px;
    background: #f0f2f5;
    color: var(--muted);
    font-size: 11px;
}

.lijst { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lijst li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.lijst li:last-child { border-bottom: none; }
.lijst .bij { display: block; color: var(--muted); font-size: 13px; }

.gegevens { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.gegevens dt { color: var(--muted); }
/* In de smalle linkerkolom past een btw-nummer of een lang e-mailadres niet
   op één regel; laat het afbreken in plaats van buiten de kaart lopen. */
.gegevens dd { margin: 0; overflow-wrap: anywhere; }

/* Diezelfde kolom is te smal voor twee kolommen naast elkaar. */
.recordpagina > div:first-child .gegevens,
.recordpagina > section:first-child .gegevens { grid-template-columns: 110px minmax(0, 1fr); gap: 7px 10px; }

.notities { font-size: 14px; white-space: pre-wrap; }

/* --- Direct aanpassen op een recordpagina --------------------------------- */

/* Een regel die je kunt aanklikken om hem meteen aan te passen. Terughoudend:
   een gestippelde onderlijn die pas bij hover opvalt. Ging het harder opvallen,
   dan leest het overzicht als een formulier terwijl je meestal alleen kijkt. */
.gegevens dd.bewerkbaar { cursor: text; border-radius: 4px; }
.gegevens dd.bewerkbaar > .veldwaarde {
    border-bottom: 1px dashed transparent;
    transition: border-color .12s, background-color .12s;
}
.gegevens dd.bewerkbaar:hover > .veldwaarde { border-bottom-color: var(--border); }
.gegevens dd.bewerkbaar.bewerkt { cursor: default; }

/* Een leeg veld moet aanklikbaar zijn; een kaal streepje is een te klein
   doelwit en ziet er bovendien niet uit als iets waar je iets kunt invullen. */
.leegveld { color: var(--muted); }
.gegevens dd.bewerkbaar:hover .leegveld::after {
    content: ' aanpassen';
    font-size: 12px;
}

.inlinevorm { display: grid; gap: 6px; margin: 2px 0; }
.inlinevorm input, .inlinevorm select, .inlinevorm textarea {
    width: 100%; padding: 5px 8px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 6px; font-family: inherit;
}
.inlinevorm textarea { resize: vertical; line-height: 1.45; }
.inlineknoppen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inlinefout { color: var(--danger); font-size: 12px; }

/* --- De zelfgebouwde filter (EN/OF-regels) -------------------------------- */

.regelbouwer {
    flex: 1 1 100%;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border-zacht);
}
.regelbouwer > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    color: var(--accent);
    font-size: 12.5px;
}
.regelbouwer > summary::-webkit-details-marker { display: none; }
.regelbouwer > summary::after { content: '▾'; font-size: 10px; }
.regelbouwer[open] > summary::after { content: '▴'; }
.regelbouwer > summary .telling {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-licht);
    font-size: 11px;
    font-weight: 600;
}

.regelkop { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
.regelkop label { color: var(--muted); font-size: 12px; }
.regelkop select { width: auto; }

.regelrij {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(110px, 0.8fr) minmax(140px, 1.4fr) 26px;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.regelrij select, .regelrij input[type="text"] { width: 100%; }

.regelweg {
    width: 24px; height: 24px; padding: 0;
    border: none; border-radius: 50%; background: none;
    color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
}
.regelweg:hover { background: #fbeceb; color: var(--danger); }

@media (max-width: 760px) {
    .regelrij { grid-template-columns: 1fr 1fr; }
    .regelrij > :nth-child(3) { grid-column: 1 / -1; }
}

/* De profielfoto van een medewerker: rond, en altijd even groot ongeacht wat
   er geüpload is — anders staat er een liggende foto van 2000 pixels naast een
   staande van 200. */
.profielfoto {
    width: 64px; height: 64px; flex: 0 0 auto;
    border-radius: 50%; object-fit: cover;
    border: 1px solid var(--border); background: var(--bg);
}
.profielfoto.leeg {
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 22px;
}
/* De foto links, de knop en de uitleg rechts. */
.fotokiezer { position: relative; display: flex; align-items: center; gap: 14px; }
.fotokiezerknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fotokiezerknoppen .veldhint { flex: 1 0 100%; }

/* Het bestandsveld uit beeld, maar wel bereikbaar met de toetsenbordfocus —
   niet met display:none, want dan slaat de tab-volgorde hem over. */
input.verborgenbestand {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0;
}
input.verborgenbestand:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.fotonaam { font-size: 12px; color: var(--muted); }
.aankruis.fotoweg { margin: 0; font-size: 12px; }
.aankruis.fotoweg span { color: var(--muted); }

/* De twee kolommen van het profiel bij elkaar houden. Op een breed scherm
   stond de rechterkolom anderhalve meter van de linker af; dan lijkt het twee
   pagina's in plaats van één. */
.profielkolommen { max-width: 1320px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* Het profiel is één pagina met zes onderwerpen erop: wie je bent, wat er
   onder je offertes staat, wanneer je mail wilt, je wachtwoord, je tweede stap
   en je toegang. Dat stond in twee grote vakken, en dan is een kop midden in
   een vak niet te onderscheiden van een tussenkopje — je ziet niet waar het
   ene onderwerp ophoudt. Elk onderwerp een eigen kaart maakt dat wél zichtbaar.
   Beide kolommen dezelfde afstand ertussen, anders lopen ze uit de pas. */
.profielkolommen > div { display: grid; gap: 16px; align-content: start; }

/* Onder de 900px gaan de kolommen onder elkaar; dat regelt .columns al. */

/* De kaarten zitten in een formulier, en .formulier zet een breedtegrens van
   560px. In een kolom van 711px levert dat 150px lucht op die nergens vandaan
   lijkt te komen — precies het gat in het midden waar dit over ging.
 *
 * Twee klassen en niet één: .profielvorm alleen weegt even zwaar als
 * .formulier, en die staat verderop in dit bestand. Even zwaar en later wint,
 * dus de override deed niets. */
.profielkolommen .formulier { max-width: none; }
.formulier.profielvorm { gap: 16px; }

/* Een regel onder de kop die zegt waar de kaart over gaat. Zonder dat is een
   kop van twee woorden de enige uitleg die er is. */
.kaartlead {
    margin: -6px 0 14px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 62ch;
}

/* Hoe iets ervoor staat, in één regel bovenaan de kaart.
 *
 * Los groen tekstje boven een stapel alinea's las als nog een zin. Een stipje
 * en een eigen vlakje maken er een status van die je in één blik ziet. */
.statusstrip {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}
.statusstrip .stip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.statusstrip.aan { background: #eaf5ef; color: #1f7a44; }
.statusstrip.aan .stip { background: #2e9c62; }
.statusstrip.uit { background: #fdf3e7; color: #8a5a17; }
.statusstrip.uit .stip { background: #d79a3c; }

/* Een onderwerp met de knop die erbij hoort, op één regel.
 *
 * De rechterkolom was een stapel losse alinea's met losse knoppen eronder, en
 * dan is niet te zien welke knop bij welke zin hoort. Nu staat de knop naast
 * de tekst waar hij iets mee doet, met een lijntje tussen de onderwerpen —
 * hetzelfde ritme als de vinklijst links. */
.kaartrij {
    display: flex; align-items: start; justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--border-zacht);
}
.kaartrij:first-of-type { border-top: 0; padding-top: 2px; }
.kaartrij > div { min-width: 0; }
.kaartrij form { margin: 0; flex: none; }
.kaartrij .btn { flex: none; white-space: nowrap; }
.kaartrijkop { display: block; font-size: 13px; font-weight: 500; }
.kaartrijbij {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
}
.kaartrij .apparatenlijst { margin: 6px 0 0; font-size: 12.5px; }
.kaartrij .apparatenlijst li { padding: 4px 0; }

/* De uitklapper onderaan de kaart hoort niet bij de rijen erboven; een lijntje
   met wat lucht zet hem apart zonder er een eigen kop van te maken. */
.uitklap.uitklapvoet {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-zacht);
}
.uitklap.uitklapvoet summary { font-size: 13px; }

/* De knop onder de drie kaarten, met erbij wat hij bewaart. */
.opslaanbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.opslaanbalk span { font-size: 11.5px; color: var(--muted); }

/* Vier vinkjes onder elkaar lezen als een opsomming en niet als vier losse
   velden: een lijntje ertussen en overal dezelfde hoogte. */
.vinklijst {
    border: 1px solid var(--border-zacht);
    border-radius: 8px;
    overflow: hidden;
}
.formulier .vinklijst .veld.aankruis {
    margin: 0;
    padding: 9px 12px;
    border-top: 1px solid var(--border-zacht);
}
.formulier .vinklijst .veld.aankruis:first-child { border-top: 0; }
.formulier .vinklijst .veld.aankruis:hover { background: var(--hover, #f7f8fa); }
.formulier .vinklijst .veld.aankruis label { margin: 0; }

/* De foto en zijn knoppen mogen de volle breedte hebben; in de labelkolom
   geperst wikkelde de uitleg over drie regels. */
.formulier .veld.fotoveld { grid-template-columns: minmax(0, 1fr); }
.formulier .veld.fotoveld .veldlabel { text-align: left; }
/* Eén kolom betekent ook: alles in kolom 1. Zonder deze regel vroeg de
   foutmelding om een tweede kolom die er niet is, en dan schoof het label
   dwars over de foto heen. */
.formulier .veld.fotoveld .veldfout,
.formulier .veld.fotoveld .veldhint { grid-column: 1; }

/* Op de klantpagina, bij de afzender. */
.verzenderfoto {
    width: 72px; height: 72px;
    border-radius: 50%; object-fit: cover;
    display: block; margin-bottom: 8px;
}

/* De korting klapt open als je hem nodig hebt.

   De meeste prijsregels hebben geen korting; drie vakjes op elke rij maakte van
   de tabel een muur. Dicht is het een klein knopje, open zijn het het bedrag,
   de eenheid en de reden. De velden blijven altijd in het formulier staan —
   dichtklappen is wegkijken, niet weggooien. */
.kortingblok > summary {
    display: inline-block; cursor: pointer;
    padding: 3px 0; font-size: 12px; color: var(--accent);
    list-style: none;
}
.kortingblok > summary::-webkit-details-marker { display: none; }
.kortingblok > summary:hover { text-decoration: underline; }

/* Dicht "+ korting", open gewoon "Korting": een plusje bij een blok dat al
   openstaat leest als "nog een korting erbij". */
.kortingblok > summary .open,
.kortingblok[open] > summary .dicht { display: none; }
.kortingblok[open] > summary .open { display: inline; }
/* Open blijft hij klikbaar — je moet hem ook weer dicht kunnen doen — maar
   rustiger van kleur, want dan is de inhoud het belangrijkste. */
.kortingblok[open] > summary { color: var(--muted); }

/* Procenten of euro's bij een korting: twee knopjes waarvan de gekozene
   ingekleurd is. Het was een uitklaplijstje met één teken erin, en daar was
   niet aan te zien wat er gekozen stond. */
.eenheidkeuze {
    display: flex; width: 100%; margin-top: 3px;
    border: 1px solid var(--border); border-radius: 7px;
    overflow: hidden; background: var(--surface);
}
/* Allebei de helft: dan staan "procent" en "euro" even breed en leest het als
   één schakelaar in plaats van twee losse knopjes. */
.eenheidkeuze label { flex: 1 1 50%; margin: 0; cursor: pointer; }
.eenheidkeuze input { position: absolute; opacity: 0; pointer-events: none; }
.eenheidkeuze span {
    display: block; padding: 4px 6px; text-align: center;
    font-size: 12px; line-height: 1.3; color: var(--muted);
    transition: background .12s, color .12s;
}
.eenheidkeuze label + label span { border-left: 1px solid var(--border); }
.eenheidkeuze label:hover span { background: #f2f5f8; }
.eenheidkeuze input:checked + span { background: var(--accent); color: #fff; font-weight: 600; }
.eenheidkeuze input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

/* De reden bij een korting, onder het kortingbedrag in de prijsregeltabel.

   input.kortingreden en niet .kortingreden: de algemene regel voor
   input[type="text"] is even specifiek en staat verderop, en zette de tekst
   dan terug op 14px. */
input.kortingreden { width: 100%; margin-top: 3px; font-size: 11.5px; }
input.kortingreden::placeholder { font-style: italic; }

/* Snel een bedrijf of contactpersoon aanmaken, onder het keuzeveld.

   Belangrijk: in de tweede kolom, net als de foutmeldingen en toelichtingen
   hierboven. Een veld is een raster van een smalle labelkolom en de rest; zonder
   deze regel viel dit blok in die labelkolom van 92 pixels en werd het een
   pilaartje van een half woord breed. */
.formulier .veld > .snelnieuw { grid-column: 2; }

/* Idem voor een rijtje keuzerondjes onder één kopje — "Hoe wordt er getekend?"
   op de offerte. Zonder dit vallen ze om en om in de labelkolom en de
   veldkolom, en staat de tweede keuze half over de eerste heen. */
/* En het strookje met voorgestelde contactpersonen onder het contactveld.
   Zonder dit stond "Dit bedrijf heeft nog geen contactpersonen." in de smalle
   labelkolom, over drie regels afgebroken. */
.formulier .veld > .contactvoorstel { grid-column: 2; }

.formulier .veld > .keuzeregel {
    grid-column: 2;
    /* Een keuzeregel is zelf een <label>, en die staan in de labelkolom rechts
       uitgelijnd. Hier hoort de tekst gewoon links te beginnen, naast het
       rondje. */
    text-align: left;
    font-size: inherit;
    color: inherit;
}

.snelnieuw { margin-top: 4px; }
.snelnieuw > summary {
    display: inline-block; cursor: pointer;
    font-size: 11.5px; color: var(--accent);
    list-style: none; padding: 1px 0;
}
.snelnieuw > summary::-webkit-details-marker { display: none; }
.snelnieuw > summary:hover { text-decoration: underline; }
.snelnieuw[open] > summary { color: var(--muted); }

/* De vakjes naast elkaar, en meebuigen als het niet past: bij een bedrijf is
   het één vakje plus een knop, bij een contactpersoon zijn het er drie. */
.snelnieuwvelden {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 5px; padding: 8px 9px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg);
}

/* Ze verdelen de ruimte samen; onder de ~120px wordt een vakje onleesbaar en
   gaat het naar de volgende regel. */
.formulier .snelnieuwvelden input[type="text"],
.formulier .snelnieuwvelden input[type="email"] {
    flex: 1 1 120px; min-width: 0; width: auto;
    padding: 5px 8px; font-size: 12.5px;
}
.snelnieuwvelden .btn { flex: 0 0 auto; white-space: nowrap; }

/* De melding eronder, over de volle breedte. */
.snelfout { flex: 1 0 100%; margin: 0; font-size: 11.5px; color: var(--danger); }
.snelfout.gelukt { color: var(--ok); }

/* Een regel in de kolomkiezer: het vinkje links, de pijltjes rechts. */
.kolomregel { display: flex; align-items: center; gap: 6px; }
.kolomregel > label { flex: 1 1 auto; }
.kolomschuif { display: inline-flex; gap: 2px; margin-left: auto; }
.kolomschuif button {
    width: 20px; height: 20px; padding: 0;
    border: none; border-radius: 5px; background: none;
    color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer;
    opacity: .5; transition: opacity .12s, background .12s, color .12s;
}
.kolomregel:hover .kolomschuif button { opacity: 1; }
.kolomschuif button:hover { background: var(--accent-licht); color: var(--accent); }

/* Een uitgevinkte kolom kun je niet verschuiven: hij staat niet in de tabel. */
.kolomregel:has(input:not(:checked)) .kolomschuif { visibility: hidden; }

/* --- De filterbalk in- en uitklappen -------------------------------------- */

/* Staat er een opgeslagen weergave aan, dan zit deze vouw dicht: die weergave
   is de filter. Het kopje blijft staan zodat je er altijd bij kunt. */
.filtervouw > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
}
.filtervouw > summary::-webkit-details-marker { display: none; }
.filtervouw > summary::after { content: '▾'; font-size: 10px; }
.filtervouw[open] > summary::after { content: '▴'; }
.filtervouw > summary:hover { color: var(--accent); border-color: var(--accent); }

/* --- Snelknoppen onder de gegevens ---------------------------------------- */

/* Rondjes met een woord eronder, zoals je ze bij HubSpot ziet. Ze staan met
   een streep erboven los van de gegevens: het zijn handelingen, geen velden. */
.snelacties {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-zacht);
}

.snelactie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 58px;
    padding: 4px 2px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 11.5px;
    text-decoration: none;
}
.snelactie:hover { background: #f4f7fa; color: var(--accent); }

.snelicoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--accent);
}
.snelactie:hover .snelicoon { border-color: var(--accent); }

/* Even oplichten waar je naartoe gestuurd bent, anders zie je niet dat er
   iets veranderd is als de tijdlijn al in beeld stond. */
.tijdlijninvoer.aangewezen {
    box-shadow: 0 0 0 2px var(--accent);
    transition: box-shadow .2s;
}

/* --- Venster (popup) ------------------------------------------------------ */

.venster {
    /* Op een telefoon bijna het hele scherm, op een computer ruim genoeg om
       een dealnaam met bedrijf erachter op één regel te lezen. */
    width: min(820px, 94vw);
    max-height: 88vh;
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .28);
    overflow: hidden;
    background: var(--surface);
}
.venster::backdrop { background: rgba(15, 23, 42, .42); }

.vensterkop {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-zacht);
}
.vensterkop h2 { margin: 0; font-size: 14px; font-weight: 600; }
.venstersluit {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 20px; line-height: 1; padding: 0 2px;
}
.venstersluit:hover { color: var(--danger); }

.vensterinhoud { padding: 12px 14px 14px; overflow: auto; max-height: calc(88vh - 46px); }

/* Ruimte voor de suggestielijst, maar alleen als hij openstaat.
 *
 * De uitklaplijst van een zoekveld hangt buiten het invoervak, en de inhoud
 * van een venster scrolt — dus werd die lijst onderaan afgeknipt en zag je de
 * tweede en derde treffer niet.
 *
 * Vast ruimte reserveren zou onder elk venstertje een lap wit laten staan.
 * Vandaar de koppeling aan de lijst zelf: keuzelijst.js zet er `hidden` op als
 * hij dicht is, dus zolang dat zo is verandert er niets aan de hoogte. */
.vensterinhoud:has(.kl-lijst:not([hidden]))  { min-height: 330px; }

/* In een venster hoeft het formulier geen eigen kaart te zijn: het vénster is
   de kaart. Anders staat er een rand in een rand. */
.vensterinhoud .formulier.block {
    border: none; box-shadow: none; padding: 0; background: none; max-width: none;
}

/* Het koppelvakje in een paneel: een zoeklijst met een knop eronder. */
.snelcontact { display: grid; gap: 6px; }
.snelcontact .btn { justify-self: start; }

/* Twee vakjes naast elkaar in zo'n snelinvoer; op een smal scherm onder
   elkaar. */
.snelrij { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.snelcontact input[type="text"] { width: 100%; padding: 5px 9px; font-size: 13px; }

@media (max-width: 720px) {
    .snelrij { grid-template-columns: 1fr; }
}

/* Het knopje dat een waarde naar het klembord zet.
 *
 * Hier stond het woordje "kopieer" in een pilletje. Naast twintig mailadressen
 * onder elkaar staat dat woord twintig keer, en dan leest de kolom als drukte
 * in plaats van als gegevens. Nu een icoon, zonder rand: hij hoort bij de
 * waarde ernaast en niet naast de waarde. */
.kopieerknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 3px;
    vertical-align: -3px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    transition: color .12s, background-color .12s;
}

.kopieerknop:hover { color: var(--accent); background: var(--accent-licht); }
.kopieerknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Welk van de twee iconen je ziet. Ze zitten allebei in de knop, zodat de
 * javascript geen svg hoeft te tekenen — dan zou de vorm op twee plekken staan. */
.kopieerknop .vinkicoon { display: none; }
.kopieerknop.gekopieerd .kopieericoon { display: none; }
.kopieerknop.gekopieerd .vinkicoon { display: inline-flex; }

.kopieerknop.gekopieerd { color: var(--ok); }
.kopieerknop.mislukt { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    .kopieerknop { transition: none; }
}

.paginering {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}
.paginering .tel { color: var(--muted); }
.paginering .uit { color: #c3c9d2; }

/* --- Formulieren met meerdere kolommen ------------------------------------ */

/* Compacter dan de rest van de pagina, en met opzet.
 *
 * Een formulier is geen leesscherm: je vult het in en gaat weg. Op een breed
 * scherm liep een veld voor een e-mailadres over twee meter uit, stond er per
 * rij één ding, en paste een contactpersoon niet meer op één scherm — terwijl
 * het tien vakjes zijn. De maat hieronder is gekozen op "alles in beeld zonder
 * te scrollen", niet op de leesbreedte van een tekst.
 *
 * De rest van de site (lijsten, filters, tijdlijn) blijft zoals hij was; dit
 * hangt allemaal onder .formulier.
 */
.formulier { display: grid; gap: 7px; max-width: 560px; }

/* Alles onder elkaar, één veld per regel.
 *
 * Naast elkaar leek compacter maar leest niet: je springt met tab van links
 * naar rechts en weer terug, en je oog moet elke regel opnieuw zoeken waar het
 * volgende vakje begint. Onder elkaar is één kolom om langs te lopen — naam,
 * enter, achternaam. De rijen die de views aangeven blijven bestaan, ze zetten
 * alleen niets meer naast elkaar. */
.formulier .veldrij { display: grid; grid-template-columns: minmax(0, 1fr); }

/* Het label naast het veld en niet erboven.
 *
 * Dat is de helft van de hoogte per veld: een label van 16px plus een vak van
 * 30px werd één regel van 30px. Bij een contactpersoon met tien vakjes scheelt
 * dat ruim tweehonderd pixels — het verschil tussen scrollen en niet scrollen.
 *
 * De labelkolom is smal en mag afbreken; "Btw-nummer" hoeft geen 140px op te
 * eisen omdat "E-mail" er ook staat. */
.formulier .veld {
    display: grid;
    /* 106 en niet 92: sinds de verplichte velden een sterretje kregen viel
       "Contactpersoon *" uiteen over twee regels, met het sterretje alleen
       op de tweede. */
    grid-template-columns: 106px minmax(0, 1fr);
    align-items: center;
    gap: 4px 8px;
}
.formulier .veld label {
    font-size: 11.5px;
    line-height: 1.25;
    margin: 0;
    text-align: right;
    color: var(--muted);
}

/* Een vinkje binnen een veld is geen veldnaam.
 *
 * Zonder deze uitzondering erfde het de rechter uitlijning van de labelkolom
 * hierboven, en stond "wachtwoord wissen" tegen de rechterrand van de kaart —
 * een halve kaart verwijderd van het wachtwoord waar het over gaat. */
.formulier .veld label.inlinevinkje,
.formulier .veld label.aankruis,
.formulier .veld .veldhint label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    text-align: left;
    font-size: 12px;
}

/* Wat onder een veld hoort te hangen — een foutmelding, een toelichting —
   staat in de tweede kolom, netjes onder het invoervak. */
.formulier .veld .veldfout,
.formulier .veld .veldhint { grid-column: 2; }

/* Bij een tekstvak hoort het label bovenaan mee te lopen, niet halverwege
   te zweven. */
.formulier .veld:has(textarea) { align-items: start; }
.formulier .veld:has(textarea) label { padding-top: 6px; }

/* Een vinkje heeft geen labelkolom nodig. */
.formulier .veld.aankruis { display: flex; align-items: center; }
.formulier .veld.knoppen { display: flex; }

.formulier input[type="text"], .formulier input[type="email"],
.formulier input[type="password"], .formulier input[type="date"],
.formulier input[type="number"], .formulier input[type="search"],
.formulier select, .formulier textarea {
    padding: 6px 9px;
    font-size: 13.5px;
    border-radius: 7px;
}

.formulier textarea { line-height: 1.4; }
.formulier .veldhint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; }
.formulier .veldgroep { padding: 9px 12px 11px; }
.formulier .veldgroep legend { font-size: 12px; }
.formulier .veld.aankruis label { margin: 0 0 6px; }

/* De knop hoeft geen eigen verdieping; hij mag tegen het laatste veld aan. */
.formulier > .btn { margin-top: 2px; }

/* Uitzondering op de breedte: een formulier met een prijstabel erin.
 *
 * Het offerteformulier heeft tabellen van rond de 860px met acht kolommen.
 * Die in 1080px persen levert geen compacter scherm op maar een tabel die
 * zijwaarts scrolt, en dat is precies het scherm waar je het meeste zit.
 *
 * Twee regels voor hetzelfde: data-wizard is de zekere (het offerteformulier
 * draagt dat attribuut), :has() vangt de rest. Kent een browser :has() niet,
 * dan is zo'n formulier hooguit smaller — niet stuk. */
.formulier[data-wizard],
.formulier:has(.tabelwikkel),
.formulier:has(.regeltabel),
/* De documentopmaak: het formulier en het voorbeeld staan naast elkaar, en dat
   raster zit binnen het formulier. Met de grens van 560px werden dat twee
   kolommen van tweehonderdzeventig pixels, en dan wikkelt elke uitleg tot een
   lint van zes regels en is het voorbeeld te klein om iets aan te zien. */
.formulier:has(.opmaakraster) { max-width: none; }

/* Maar niet elke stap heeft die breedte nodig.
 *
 * De wizard is één formulier met acht blokken erin; alleen de prijsregels en de
 * betaaltermijnen staan in een brede tabel. Stap 1 heeft zes vakjes, en die
 * sleepten zich op een breed scherm van rand tot rand uit: het label stond een
 * halve meter van zijn invoervak, en "Titel" en "Geldig tot" stonden zo ver uit
 * elkaar dat ze niets meer met elkaar te maken leken te hebben.
 *
 * Dus: elk blok krijgt de leesbare maat, en alleen een blok met een tabel erin
 * mag zo breed worden als het nodig heeft. */
.formulier[data-wizard] > .block { max-width: 640px; }

/* --- Het voorbeeld naast de laatste stap ---------------------------------- */

/* Standaard weg. Javascript zet hem aan zodra je op de laatste stap komt, en
   alleen brede genoeg schermen krijgen hem te zien: onder de 1400 pixels zou
   hij de stappen platdrukken, en dan zijn er twee dingen te smal in plaats van
   één ding te breed. Op smallere schermen blijft de knop "Voorbeeld bekijken"
   met zijn venster gewoon werken. */
.voorbeeldkolom { display: none; }

@media (min-width: 1400px) {
    .formulier[data-wizard]:has(.voorbeeldkolom:not([hidden])) { position: relative; }

    /* De stappen, de knoppen en de navigatie houden hun leesbare maat; de
       ruimte die overblijft is voor het voorbeeld.
    
       De stappenbalk niet: die hoort boven allebei de kolommen te staan. In 640
       pixels geperst brak "Jouw gegevens" over twee regels en vielen stap 6 en 7
       eraf — precies de stap waar je op dat moment staat. Het paneel begint
       daarom onder die balk; hoe ver dat is rekent voorbeeldnaast.js uit, want
       dat hangt af van hoe de balk afbreekt. */
    .formulier[data-wizard]:has(.voorbeeldkolom:not([hidden])) > *:not(.voorbeeldkolom):not(.wizard) {
        max-width: 640px;
    }

    /* Losgemaakt van het raster, en dat is de hele truc.
     *
     * Een blok dat in een raster alle rijen overspant, verdeelt zijn hoogte
     * over die rijen. Het paneel is bijna een heel scherm hoog, dus zakten de
     * stappen ernaast achthonderd pixels omlaag en stond er boven "Nakijken"
     * een gat. Absoluut geplaatst telt hij niet mee bij het uitrekenen van de
     * rijen, terwijl hij wel zo hoog is als het formulier — en dat laatste is
     * precies wat het paneel eronder nodig heeft om te kunnen blijven staan. */
    .voorbeeldkolom {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: calc(100% - 664px);
    }

    .voorbeeldnaast {
        display: flex;
        flex-direction: column;
        /* Blijft staan terwijl je links door het formulier scrollt. */
        position: sticky;
        top: 16px;
        height: calc(100vh - 32px);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--schaduw);
        overflow: hidden;
    }
}

.voorbeeldnaastkop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.voorbeeldnaastkop h2 { margin: 0; font-size: 14px; font-weight: 600; }
.voorbeeldnaastkop [data-ververs] { margin-left: auto; }

/* Het kader vult wat er over is en schuift binnen zichzelf. Eén schuifbalk voor
   het voorbeeld, één voor het formulier — en die van het formulier is de enige
   die beweegt zolang je links bezig bent. */
.voorbeeldnaastkader {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}
.formulier[data-wizard] > .block:has(.tabelwikkel),
.formulier[data-wizard] > .block:has(.regeltabel),
.formulier[data-wizard] > .block:has(table) { max-width: none; }


/* En daar blijven de velden wél naast elkaar staan: dat scherm is breed omdat
   de tabel dat nodig heeft, en dan is één smalle kolom ernaast zonde. */
.formulier[data-wizard] .veldrij,
.formulier:has(.tabelwikkel) .veldrij,
.formulier:has(.regeltabel) .veldrij { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.formulier[data-wizard] .veld,
.formulier:has(.tabelwikkel) .veld,
.formulier:has(.regeltabel) .veld { flex: 1 1 240px; }

/* Behalve in de offertewizard: daar staat alles onder elkaar, net als op elk
 * ander formulier in dit CRM.
 *
 * Ze stonden naast elkaar omdat de hele wizard op volle breedte staat, en die
 * breedte is er alleen voor de prijstabel verderop. Het gevolg was dat je bij
 * stap 1 van links naar rechts moest zoeken naar zes vakjes, terwijl je bij een
 * deal of een contactpersoon gewoon van boven naar beneden gaat.
 *
 * Deze regels moeten ná die hierboven staan: die gelden voor elk formulier met
 * een tabel erin, en de wizard heeft er een. Even specifiek, dus de laatste
 * wint. */
.formulier[data-wizard] .veldrij {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}
.formulier[data-wizard] .veldrij > .veld { flex: none; }

/* Een vak in een grid groeit standaard mee met zijn breedste inhoud. De
   regeltabel op het offerteformulier is 860px breed en duwde daarmee de hele
   pagina zijwaarts, in plaats van binnen zijn eigen .tabelwikkel te scrollen. */
.formulier > * { min-width: 0; }
.veldrij { display: flex; gap: 14px; flex-wrap: wrap; }
.formulier .veldrij { gap: 7px; align-items: start; }

/* .breed en .smal zeggen iets over verhoudingen naast elkaar. In één kolom is
   dat betekenisloos: alles is even breed. Wel de breedte van het vakje zelf
   beperken bij een kort veld, want een postcode van vijfhonderd pixels ziet
   eruit als een fout. */
.formulier .veldrij .veld.smal input,
.formulier .veldrij .veld.smal select { max-width: 200px; }
.veld { flex: 1 1 180px; min-width: 0; }
.veld.breed { flex: 2 1 280px; }
.veld.smal { flex: 0 1 110px; }
.veld label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.veld.aankruis { display: flex; align-items: flex-end; }
.veld.aankruis label { display: flex; align-items: center; gap: 8px; color: var(--text); margin: 0 0 9px; }
.veld.aankruis input { width: auto; }

/* Een kopje boven een veld dat geen enkel invoerelement heeft — een groep
   vinkjes bijvoorbeeld. Een <label> zou dan naar niets wijzen. */
.veldlabel { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }

/* De jaartallen als aan te vinken blokjes. Een deal kan er meerdere hebben. */
.jaarkeuze { display: flex; flex-wrap: wrap; gap: 4px; }
.jaarkeuze label { position: relative; display: inline-block; margin: 0; }
.jaarkeuze input { position: absolute; opacity: 0; width: 0; height: 0; }

.jaarkeuze span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    cursor: pointer;
}

.jaarkeuze label:hover span { border-color: #cbd2db; color: var(--text); }

.jaarkeuze input:checked + span {
    background: var(--accent-licht);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.jaarkeuze input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.veldfout { color: var(--danger); font-size: 13px; margin: 4px 0 0; }

.formulier .btn-primary { justify-self: start; margin-top: 0; }

/* --- Deals ---------------------------------------------------------------- */

.weergavekeuze {
    display: flex;
    gap: 3px;
    background: #eaedf1;
    padding: 3px;
    border-radius: 9px;
}
.weergavekeuze a, .weergavekeuze .actief {
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--muted);
}
.weergavekeuze a:hover { color: var(--text); text-decoration: none; }
.weergavekeuze .actief {
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    box-shadow: var(--schaduw);
}

.filterblok { margin-bottom: 16px; display: grid; gap: 12px; }
.veld.knoppen { display: flex; align-items: flex-end; gap: 8px; }
.veld.knoppen .btn { margin-bottom: 1px; }
.veldhint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

.cards.compact .card { border-top-width: 1px; }
.cards.compact .card h2 { font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.cards.compact .card dd { font-size: 18px; }
.cards.compact .card dt { display: none; }

tr.gesloten td { opacity: .6; }
.te-laat { color: var(--danger); }

.merk-goed { background: #e3f2ea; color: var(--ok); }
.merk-fout { background: #fdeceb; color: var(--danger); }

.dealkop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 16px;
}
.dealkop h2 { margin: 8px 0 2px; font-size: 20px; }
.dealkop .onderkop { margin: 0; color: var(--muted); font-size: 14px; }
.dealkop.gesloten { background: #fafbfc; }

.kerncijfers { display: flex; gap: 28px; }
.kerncijfers .kop { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.kerncijfers strong { font-size: 17px; font-variant-numeric: tabular-nums; }

.inlineform { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.inlineform label { font-size: 13px; color: var(--muted); }
.inlineform select { width: auto; min-width: 190px; }

/* De fasebalk op een deal: de pijplijn als pijlen in plaats van een keuzelijst.
   Elke pijl is een echte knop in een formulier, dus dit werkt ook zonder JavaScript. */
.fasebalk { margin: 0 0 4px; }

.fasebalk ol {
    display: flex;
    /* Niet afbreken: een pijl die op de volgende regel begint wijst het niets
       in. Ze krimpen liever mee; onder de 700px stapelen ze (zie onderaan). */
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* display:flex zodat de knop de volle hoogte van de rij pakt; anders steekt de
   langste fase onder de rest uit. */
.fasebalk li { flex: 1 1 0; min-width: 0; display: flex; }

/* De pijlen haken in elkaar: de punt van de een valt in de inkeping van de ander. */
.fasebalk li + li { margin-left: -14px; }

/* De uitkomst aan het eind van de balk: gewonnen en verloren horen bij dezelfde
   weg als de fases, alleen met een eigen kleur. Ze groeien niet mee — de fases
   verdelen de ruimte, de uitkomst neemt wat hij nodig heeft. */
.fasebalk li.uitkomst { flex: 0 0 auto; }
.fasebalk li.uitkomst button { padding-right: 14px; }
.fasebalk li.gewonnen button { background: #e3f2ea; color: var(--ok); }
.fasebalk li.gewonnen button:hover { background: #d3ebe0; }
.fasebalk li.verloren button { background: #fdeceb; color: var(--danger); }
.fasebalk li.verloren button:hover { background: #f9dedc; }

/* Het redenveldje onder de balk. Klein en stil: je hebt het alleen nodig als je
   op Verloren klikt, en het hoort de balk niet te overstemmen. */
/* Met input ervoor, anders wint de algemene regel voor input[type="text"]
   verderop in dit bestand en staat er alsnog een vak over de volle breedte. */
input.verliesreden {
    width: min(320px, 100%);
    margin-top: 8px;
    padding: 5px 9px;
    font-size: 12.5px;
}

.fasebalk button {
    /* Kolom met het percentage onderaan, zodat alle percentages op één lijn staan
       ook als de ene fasenaam twee regels nodig heeft en de andere drie. */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px 8px 26px;
    border: 0;
    border-radius: 0;
    font: inherit;
    text-align: left;
    background: #eef0f4;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    /* Safari geeft een knop met de standaard "appearance" een vaste regel met
       drie puntjes erachter. Fasenamen zijn lang en mogen over twee regels;
       zonder deze regel las je alleen "Suspect - Contact...". */
    appearance: none;
    -webkit-appearance: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}

/* De eerste heeft geen inkeping nodig, de laatste geen punt. */
.fasebalk li:first-child button {
    padding-left: 14px;
    border-radius: var(--radius) 0 0 var(--radius);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.fasebalk li:last-child button {
    border-radius: 0 var(--radius) var(--radius) 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
}

.fasebalk li:first-child:last-child button { border-radius: var(--radius); clip-path: none; }

.stapnaam {
    display: block;
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.stapkans { display: block; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

/* Gehad: de weg die de deal al heeft afgelegd. */
.fasebalk .gehad button { background: #d5e3f2; color: #17395a; }

/* Nu: waar de deal staat. */
.fasebalk .nu button { background: var(--accent); color: #fff; }
.fasebalk .nu .stapnaam { font-weight: 600; }
.fasebalk .nu .stapkans { opacity: .85; }

.fasebalk button:hover:not(:disabled)     { background: #e2e6ec; color: var(--text); }
.fasebalk .gehad button:hover:not(:disabled) { background: #c6d8ec; }
.fasebalk .nu button:hover:not(:disabled)    { background: #1a4165; }

/* De omlijning bij toetsenbordbediening mag niet onder de buurpijl verdwijnen. */
.fasebalk button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; position: relative; z-index: 1; }

.fasebalk button:disabled { cursor: default; }

/* Een gewonnen of verloren deal: de weg blijft leesbaar, maar vraagt geen aandacht meer. */
.fasebalk.dicht ol { opacity: .55; }

.fasehint { margin: 0 0 14px; }

/* Op een smal scherm passen acht pijlen niet naast elkaar; dan onder elkaar,
   met een streep links in plaats van een punt rechts. */
@media (max-width: 700px) {
    .fasebalk ol { display: block; }
    .fasebalk li, .fasebalk li + li { margin: 0 0 2px; }

    .fasebalk button,
    .fasebalk li:first-child button,
    .fasebalk li:last-child button {
        clip-path: none;
        border-radius: 6px;
        border-left: 4px solid transparent;
        padding: 8px 12px;
        min-height: 0;
        display: block;
    }

    /* li.gehad in plaats van .gehad: anders wint de "border-left: transparent"
       van li:first-child, en blijft juist de eerste fase zonder streep. */
    .fasebalk li.gehad button { border-left-color: var(--accent); }
    .fasebalk li.nu button    { border-left-color: #9fc4e6; }
    .stapnaam { display: inline; font-size: 13px; }
    .stapkans { display: inline; font-size: 13px; margin-left: 6px; }
}

.uitkomstknoppen { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
                   border-top: 1px solid var(--border); padding-top: 14px; }
.verliesform { display: flex; gap: 6px; }
.verliesform input { width: 190px; padding: 8px 10px; }
.btn-goed { background: var(--ok); color: #fff; padding: 8px 14px; }
.btn-goed:hover { background: #25674a; }

.block-in-block {
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.activiteiten { list-style: none; margin: 0; padding: 0; }
.activiteiten li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.activiteiten li:last-child { border-bottom: none; }
.activiteiten li.af .onderwerp { text-decoration: line-through; color: var(--muted); }
.activiteiten .inhoud { flex: 1; min-width: 0; }
.activiteiten .onderwerp { font-size: 14px; }
.activiteiten .notities { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.activiteiten .bij { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.vinkje button, .vinkje.soort {
    background: none; border: 1px solid var(--border); border-radius: 50%;
    width: 22px; height: 22px; line-height: 1; padding: 0; cursor: pointer;
    color: var(--muted); font-size: 12px;
}
.vinkje.soort { display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.vinkje button:hover { border-color: var(--ok); color: var(--ok); }

.tijdlijn { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tijdlijn li { display: grid; grid-template-columns: 100px 1fr; gap: 2px 10px; padding: 7px 0;
               border-bottom: 1px solid var(--border); }
.tijdlijn li:last-child { border-bottom: none; }
.tijdlijn .wanneer { color: var(--muted); font-variant-numeric: tabular-nums; }
.tijdlijn .wie { grid-column: 2; color: var(--muted); font-size: 12px; }

.tip { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* --- Kanbanbord ----------------------------------------------------------- */

.bord {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
}

.bord .kolom {
    flex: 0 0 260px;
    background: #eef0f4;
    border-radius: var(--radius);
    padding: 10px;
    min-height: 120px;
    transition: background .12s;
}
.bord .kolom.doel { background: #dfe6f0; outline: 2px dashed #b6c4d8; outline-offset: -4px; }

.bord .kolom header { margin-bottom: 10px; }
.bord .kolom h2 { margin: 0; font-size: 13px; font-weight: 600; }
.kolomtotaal { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 2px; }
.kolomtotaal .som { font-variant-numeric: tabular-nums; }
.kans { height: 3px; background: #d7dce4; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.kans span { display: block; height: 100%; background: var(--accent); }

.bord .kaarten { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }

.bord .kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    cursor: grab;
}
.bord .kaart:active { cursor: grabbing; }
.bord .kaart.sleept { opacity: .45; }
.bord .kaart.bezig { opacity: .6; pointer-events: none; }
.bord .kaart.verlopen { border-left: 3px solid var(--danger); }

.kaartkop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kaartkop .bedrag { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kaarttitel { display: block; font-size: 14px; color: var(--text); }
.kaarttitel:hover { color: var(--accent); }
.kaartvoet { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
             font-size: 12px; color: var(--muted); }

.bord-melding {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
    padding: 10px 18px; border-radius: 6px; font-size: 14px; color: #fff;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
.bord-melding.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }
.bord-melding.goed { background: var(--ok); }
.bord-melding.fout { background: var(--danger); }

/* --- Live zoeken ---------------------------------------------------------- */

/* De knop is er alleen voor wie geen JavaScript heeft. */
.heeft-js .zonder-js { display: none; }

.zoekveld { position: relative; flex: 1 1 auto; }
.zoekveld input { width: 100%; padding-right: 32px; }

/* Draaiend rondje rechts in het zoekveld tijdens het ophalen. */
.bezigje {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}
form.bezig .bezigje { opacity: 1; animation: draai .6s linear infinite; }

@keyframes draai { to { transform: rotate(360deg); } }

[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

@media (prefers-reduced-motion: reduce) {
    form.bezig .bezigje { animation: none; opacity: .6; }
    [aria-busy="true"] { transition: none; }
}

/* --- Doorzoekbare keuzelijst ---------------------------------------------- */

.keuzelijst { position: relative; }
.keuzelijst .kl-verborgen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Met de ouder erbij, anders wint de padding uit input[type="text"] en loopt
   de naam onder het wiskruisje door. */
.keuzelijst .kl-invoer { width: 100%; padding-right: 28px; }

.kl-wissen {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.kl-wissen:hover { background: #eceff3; color: var(--text); }

.keuzelijst.bezig .kl-invoer { background-image: none; }

.kl-lijst {
    position: absolute;
    z-index: 30;
    top: calc(100% + 3px);
    left: 0;
    /* Minstens zo breed als het veld, maar hij mag uitlopen tot wat de namen
       nodig hebben. In de smalle kolom naast een deal stond er anders
       "Jedidj…" en "Van der Valk Diensten …". */
    min-width: 100%;
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(20, 30, 45, .12);
}

/* Twee regels per keuze: boven de naam en waar diegene werkt, eronder het
   mailadres en telefoonnummer. Na de import heten contactpersonen soms "-" of
   alleen een voornaam; aan de naam alleen zie je niet wie je voor je hebt. */
.kl-lijst [role="option"] {
    display: block;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.kl-regel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.kl-lijst [role="option"].actief { background: #eaf0f7; }
.kl-lijst [role="option"][aria-selected="true"] .kl-naam { font-weight: 600; }
.kl-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-bij { color: var(--muted); font-size: 12px; white-space: nowrap; flex: 0 1 auto;
          min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.kl-extra {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kl-lijst [role="option"].actief .kl-extra { color: #5b6875; }

.kl-leeg { padding: 9px; color: var(--muted); font-size: 14px; }

/* --- Offertes (interne kant) ---------------------------------------------- */

.status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 500;
    background: #eceff3;
    color: var(--muted);
}
.status-verzonden    { background: #eef3f8; color: var(--accent); }
.status-bekeken      { background: #e8eefb; color: #2f4f8f; }
.status-geaccepteerd { background: #e3f2ea; color: var(--ok); }
.status-afgewezen    { background: #fdeceb; color: var(--danger); }
.status-ingetrokken  { background: #f2f0ec; color: #7a6a4f; }

.statusbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.statusbalk .bij { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.klantlink { flex: 1; min-width: 260px; }
.klantlink input {
    width: 100%;
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    background: #f7f8fa;
}

.tabelwikkel { overflow-x: auto; }

table.regeltabel { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
table.regeltabel th {
    text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--border);
    color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap;
}
table.regeltabel td { padding: 4px 6px 4px 0; border-bottom: 1px solid #f2f4f7; }
table.regeltabel input[type="text"] { padding: 7px 8px; }
table.regeltabel .getal { text-align: right; }
table.regeltabel .eenheid { text-align: center; }
table.regeltabel tr.optioneel td { background: #fbfbfc; }
table.regeltabel tr.optioneel input[type="text"] { color: var(--muted); }

.kolom-nr { width: 26px; }
.regelnummer { color: var(--muted); font-size: 12px; text-align: right; padding-right: 4px; }
.kolom-getal { width: 92px; }
.kolom-eenheid { width: 78px; }
.kolom-optie { width: 46px; text-align: center; }
.kolom-optie input { width: auto; }
.regeltotaal { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }

.regel-verwijderen {
    background: none; border: none; color: var(--muted); font-size: 17px;
    cursor: pointer; padding: 0 4px; border-radius: 4px; line-height: 1;
}
.regel-verwijderen:hover { color: var(--danger); background: #fdeceb; }

/* Het betaalschema onder de totalen, op de offertepagina en bij de klant. */
.betaalschema { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13.5px; }
.betaalschema th {
    text-align: left;
    padding: 0 8px 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}
.betaalschema td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border); }
.betaalschema .num { text-align: right; white-space: nowrap; }

/* De greep om een prijsregel te verslepen, en de kolomkiezer erboven. */
.kolom-greep { width: 26px; padding-right: 0 !important; }

.sleepgreep {
    display: inline-block;
    padding: 0 2px;
    color: var(--muted);
    cursor: grab;
    user-select: none;
    line-height: 1;
}
.sleepgreep:active { cursor: grabbing; }

tr.sleept { opacity: .45; background: #eef2f7; }

.kolomkiezer { position: relative; }
.kolomkiezer > summary { list-style: none; cursor: pointer; }
.kolomkiezer > summary::-webkit-details-marker { display: none; }

.kolomlijst {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    right: 0;
    width: 230px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(20, 30, 45, .12);
    text-align: left;
}
.kolomlijst label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    cursor: pointer;
}
.kolomlijst label:has(input:disabled) { cursor: default; color: var(--muted); }
.kolomlijst input { width: 15px; height: 15px; accent-color: var(--accent); }
.kolomlijst .bij { margin-left: auto; font-size: 11px; }

.kolom-datum { min-width: 140px; }
.regeltabel input.datum { width: 100%; min-width: 130px; }

/* Het codescherm dat de klant ziet voordat de offerte opengaat. */
.codeblad {
    max-width: 380px;
    margin: 8vh auto;
    padding: 28px 30px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(20, 30, 45, .08);
    text-align: center;
}
.codelogo { display: block; max-width: 130px; max-height: 60px; margin: 0 auto 18px; }
.codeblad h1 { margin: 0 0 8px; font-size: 20px; }
.codeuitleg { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.codefout {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #fdf0ef;
    color: var(--danger);
    font-size: 13.5px;
}
.codeformulier { display: grid; gap: 10px; }
.codeformulier input {
    width: 100%;
    padding: 12px;
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.codehulp { margin: 18px 0 0; color: var(--muted); font-size: 12.5px; }

/* Een keuze met uitleg eronder, zoals bij de handtekeningopties. */
/* De kaart met de totalen bij stap 6: die stond los rechts te zweven naast
   een lege tabel, en was daardoor niet te plaatsen. */
.totalenkaart {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafbfc;
}
.totalenkaart h3 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.totalenkaart .regeltotalen { margin-top: 0; padding-top: 0; border-top: 0; }
.totalenkaart .veld.aankruis { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Een aankruisvakje met uitleg eronder in plaats van ernaast; .veld.aankruis
   is een flexrij en zet die uitleg anders naast het vinkje. */
.veld.aankruis.metuitleg { display: block; }
.veld.aankruis.metuitleg .veldhint { margin-top: 6px; }

label.keuzeregel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    cursor: pointer;
}
.keuzeregel input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.keuzeregel strong { display: block; font-size: 14px; font-weight: 500; }
.keuzeregel .bij { display: block; font-size: 13px; }

/* De kaarten met de afzender en het eigen bedrijf, bij stap 2. */
.afzenderkaarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 14px;
    margin-top: 4px;
}
.afzenderkaarten > * { min-width: 0; }

.afzenderkaart {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}
.afzenderkaart h3 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.afzenderkaart .veldhint { margin-bottom: 0; }

.afzenderregel { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.afzenderregel strong { display: block; font-size: 14px; }
.afzenderregel .bij { display: block; font-size: 13px; }

.afzenderlogo { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }

/* --- De offertewizard ---------------------------------------------------
   Zes genummerde stappen boven het formulier. Zonder JavaScript staat deze
   balk op "hidden" en zie je het hele formulier onder elkaar. */

.wizard {
    display: flex;
    gap: 2px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.wizard li { flex: 1 1 0; min-width: 118px; }

.wizardstap {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.wizardstap:hover { background: #f2f5f8; }

.wizardnr {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #eef0f4;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wizardnaam {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    /* break-word en niet anywhere: anders breekt "Ondertekenen" middenin. */
    overflow-wrap: break-word;
}

.wizardnaam .bij { display: block; font-size: 11px; font-weight: 400; opacity: .8; }

/* Waar je nu staat. */
.wizard .nu { border-color: var(--accent); background: var(--accent); color: #fff; }
.wizard .nu .wizardnr { background: rgba(255, 255, 255, .22); color: #fff; }

/* Wat je al gehad hebt. */
.wizard .gehad { color: var(--text); }
.wizard .gehad .wizardnr { background: #d5e3f2; color: #17395a; }

/* Hier is de server ergens over gestruikeld. */
.wizard .heeftfout { border-color: var(--danger); }
.wizard .heeftfout .wizardnr { background: var(--danger); color: #fff; }

.wizardnav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

/* Duwt de knop "Volgende" naar rechts, ook als "Vorige" uitstaat. */
.wizardtelling { margin-left: auto; color: var(--muted); font-size: 13px; }

/* Tussentijds bewaren kan op elke stap; die knop hoort er bescheiden bij te
   staan, niet naast de hoofdknop te concurreren. */
.wizardnav [data-concept-klein] { color: var(--muted); }
.wizardnav [data-concept-klein]:hover { color: var(--accent); }

/* De samenvatting op de laatste stap.
 *
 * Stond onderaan, met een streep erboven, ná het tekstvak voor de voorwaarden.
 * Op een blok van vierhonderd pixels hoog betekende dat: buiten beeld. Nu staat
 * hij bovenaan als kaartje, want dat is waarvoor je deze stap opent. */
.nakijken {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
}
.nakijken h3 { margin: 0 0 10px; font-size: 14px; }
.nakijken .gegevens { grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }

.regeltotalen {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px;
}
.regeltotalen div { display: flex; gap: 22px; justify-content: space-between; min-width: 220px; }
.regeltotalen span { color: var(--muted); }
.regeltotalen strong { font-variant-numeric: tabular-nums; }
.regeltotalen .eind { padding-top: 6px; border-top: 1px solid var(--border); font-size: 16px; }

tr.optioneel td { color: var(--muted); }

.ondertekend { border-top: 3px solid var(--ok); }
.handtekeningafbeelding {
    display: block; width: 100%; max-width: 300px; margin: 12px 0;
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
}
.hash { font-size: 11px; word-break: break-all; }

/* Zonder JavaScript geen sjabloonknop tonen. */
html:not(.heeft-js) #regel-toevoegen { display: none; }

/* --- Labelbeheer ---------------------------------------------------------- */

.kleurbol {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--label-color, var(--accent));
    vertical-align: 0;
}

td code {
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f3f6;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.reeks { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.rijacties { display: flex; gap: 12px; justify-content: flex-end; }
.rijacties .link { white-space: nowrap; }
.link.gevaar { color: var(--danger); }

.kleurkiezer { display: flex; align-items: center; gap: 8px; }
.kleurkiezer input[type="color"] {
    width: 40px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.kleurcode { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.gebruikslijst { margin: 8px 0; padding-left: 18px; font-size: 14px; }
.gebruikslijst li { margin-bottom: 2px; }

/* --- Gebruikersbeheer ----------------------------------------------------- */

.veldgroep {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 16px 16px;
    margin: 0;
}
.veldgroep legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }

.rollenuitleg {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid var(--border-zacht);
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted);
}
.rollenuitleg strong { color: var(--text); font-weight: 600; }

.keuze { display: grid; gap: 8px; margin-bottom: 14px; }
.keuze label { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; cursor: pointer; }
.keuze input[type="radio"] { margin-top: 3px; accent-color: var(--accent); cursor: pointer; }
.keuze span strong { font-weight: 600; }

.labelkeuze { display: flex; flex-wrap: wrap; gap: 8px; }
.labelvinkje {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.labelvinkje:hover { border-color: #cbd2db; background: #fafbfc; }
.labelvinkje:has(input:checked) { border-color: var(--accent); background: var(--accent-licht); }
.labelvinkje.inactief { opacity: .6; }
.labelvinkje input { margin: 0; }
.labelvinkje .kleurbol { margin-right: 0; }

/* --- E-mailinstellingen --------------------------------------------------- */

.smtplog, .sleutel {
    background: #16202c;
    color: #c9d2dc;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 8px 0 0;
}
.sleutel { color: #9fd0a3; user-select: all; } /* bewust: overschrijft de kleur uit het donkere kader hierboven */

.inlinevinkje { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.inlinevinkje input { width: 14px; height: 14px; }

.paneelvoet { margin: 16px 0 0; font-size: 14px; text-align: center; }
.paneelvoet a { color: var(--muted); }
.paneelvoet a:hover { color: var(--accent); }

/* --- Labelindeling in drie niveaus ---------------------------------------- */

.labelrij { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 2px; vertical-align: middle; }
.labelrij .pill { margin-right: 0; font-weight: 600; }

.koppelrij {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.koppelrij select { flex: 1 1 0; min-width: 0; }
.koppelrij select:disabled { background: #f6f7f9; color: #9aa3af; cursor: not-allowed; }

.koppelrij-weg {
    flex-shrink: 0;
    width: 30px; height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.koppelrij-weg:hover { background: #fdeceb; color: var(--danger); }

html:not(.heeft-js) #koppeling-toevoegen,
html:not(.heeft-js) .koppelrij-weg { display: none; }

/* Rollen van contactpersonen */
.rolmerk {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: #eceff3;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.rol-dealsluiter  { background: #e3f2ea; color: var(--ok); }
.rol-tekenbevoegd { background: #eef3f8; color: var(--accent); }
.rol-financieel   { background: #f2f0ec; color: #7a6a4f; }

/* Beheer van types en subtypes onder een label */
.boomlijst { list-style: none; margin: 0 0 14px; padding: 0; }
.boomlijst > li { padding: 10px 0; border-bottom: 1px solid var(--border-zacht); }
.boomlijst > li:last-child { border-bottom: none; }
.boomlijst.diep { margin: 6px 0 6px 18px; border-left: 2px solid var(--border); padding-left: 12px; }
.boomlijst.diep > li { padding: 5px 0; border-bottom: none; }

.boomrij { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.boomrij .bij { margin-right: auto; font-size: 12px; }

/* De naam van een type is meteen het invoerveld: hernoemen zonder scherm erbij. */
.boomnaam { display: flex; align-items: center; gap: 4px; }
.boomnaam input {
    width: 11rem; max-width: 100%;
    padding: 3px 8px;
    font-size: 13px; font-weight: 500;
    /* Geen randje tot je erbij komt. Acht namen in acht hokjes naast acht
       blokjes was te veel lijnwerk; dat de naam te wijzigen is zegt het
       "Opslaan" ernaast al. */
    border: 1px solid transparent; border-radius: 6px;
    background: none;
}
.boomnaam input:hover { border-color: var(--border-zacht); background: var(--surface); }
.boomnaam input:focus { border-color: var(--accent); background: var(--surface); }

/* Een type dat uit staat is er nog wel, maar niet meer te kiezen. */
.boomrij.uitgezet .boomnaam input { color: var(--muted); }

/* De indeling onder een label, als tabel.
 *
 * Elke rij vulde zich eerst zelf op, dus de schakelaars stonden bij elk type op
 * een andere plek en de subtypeveldjes hakten de lijst in stukken. Eén raster
 * voor de hele lijst zet de kolommen onder elkaar; dan lees je hem van boven
 * naar beneden in plaats van rij voor rij opnieuw. */
.typetabel {
    display: grid;
    /* De kolommen nemen wat ze nodig hebben en de tabel begint links. Met een
       kolom van 1fr stond er een halve meter niets tussen de naam en de rest,
       en dan hoort het niet meer bij elkaar. */
    grid-template-columns: max-content max-content max-content;
    justify-content: start;
    align-items: center;
    gap: 0 18px;
    margin-top: 14px;
    border-top: 1px solid var(--border-zacht);
}

/* De koppen boven de kolommen: zonder die woorden moet je bij elke schakelaar
   opnieuw bedenken waar hij over gaat. */
.typekop {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding: 8px 0;
    font-size: 11px; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}

.typerij {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 3px 0;
    border-top: 1px solid var(--border-zacht);
}

/* Gewoon een achtergrond op de rij zelf.
 *
 * Eerst stond hier een absoluut geplaatste ::before die over de volle breedte
 * liep. Die paint boven de inhoud van de rij — een absoluut geplaatst
 * pseudo-element hoort bij de laag van gepositioneerde elementen, en die ligt
 * bovenop gewone kinderen. Het gevolg: de rij waar je overheen ging werd een
 * leeg grijs vlak. De rij loopt zelf al van de eerste tot de laatste kolom, dus
 * een achtergrond is genoeg. */
.typerij:hover { background: #eef2f7; }

/* De twee blokjes in vaste kolommen, zodat "Bedrijven" en "Deals" over alle
   rijen heen onder elkaar staan. Als flexrij hing hun breedte af van de tekst
   en stonden ze per rij een paar pixels verschoven — met acht rijen onder
   elkaar zie je dat meteen. */
.schakelaars {
    display: grid;
    grid-template-columns: 7.5rem 6rem;
    gap: 6px;
    align-items: center;
}

/* De opslaanknop als klein tekstlinkje, altijd zichtbaar.
 *
 * Hij stond eerst op visibility: hidden tot je in het veld ging staan. Maar
 * verborgen is niet weg: de knop hield zijn breedte, en dat werd een gat van
 * vijf centimeter tussen de naam en de blokjes ernaast waar niets stond. Een
 * linkje neemt de ruimte die het nodig heeft en zegt meteen wat je moet doen
 * als je de naam aanpast. */
.boomnaam button {
    padding: 2px 4px;
    background: none; border: 0;
    color: var(--muted); font-size: 12px; cursor: pointer;
}
.boomnaam button:hover { color: var(--accent); text-decoration: underline; }
.boomnaam:focus-within button { color: var(--accent); font-weight: 500; }

/* Verwijderen staat op elke rij; in rood schreeuwt hij dan twintig keer. Grijs
   tot je hem aanwijst. */
.typerij .link.gevaar { color: var(--muted); font-weight: 400; }
.typerij .link.gevaar:hover { color: var(--danger); }

/* Een type met subtypes krijgt ze achter de naam; de rest krijgt niets. Een
   kolom vol streepjes zei alleen maar dat er niets is. */
.subtypenamen {
    font-size: 11.5px; color: var(--muted);
    background: #f1f3f6; border-radius: 999px; padding: 2px 8px;
    max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Een soort die is opgegaan in een andere. Zonder dit staat "Schools" grijs in
   de lijst zonder dat erbij staat waarom, en zet iemand hem terug aan omdat het
   op een vergissing lijkt. */
.opgegaan {
    font-size: 11.5px; color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
    white-space: nowrap;
}

/* De onderdelen die je in het nummerformaat kunt zetten.
 *
 * In de tweede kolom, net als de hints: zonder dat belandt de lijst in de smalle
 * labelkolom van het formulier en loopt hij over de tekst eronder heen. */
.formulier .veld > .nummeruitleg { grid-column: 2; }
.nummeruitleg {
    list-style: none;
    margin: 6px 0 4px; padding: 7px 10px;
    background: #f7f8fa; border-radius: 7px;
    font-size: 11.5px; line-height: 1.7; color: var(--muted);
}
.nummeruitleg code, .formulier .veldhint code {
    padding: 1px 4px;
    background: #eceff3; border-radius: 4px;
    font-size: 11px; color: var(--text);
}

/* "of" met een streep aan weerszijden, tussen inloggen met wachtwoord en met
   Google. Zonder scheiding lijken het twee knoppen die hetzelfde doen. */
.ofwel {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0; color: var(--muted); font-size: 12px;
}
.ofwel::before, .ofwel::after {
    content: ''; flex: 1; height: 1px; background: var(--border-zacht);
}

.btn.breed { width: 100%; justify-content: center; }
.googlemerk {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-right: 8px;
    border-radius: 50%; background: #fff;
    border: 1px solid var(--border-zacht);
    font-weight: 700; font-size: 12px; color: #4285F4;
}

/* De stappen die je in Google Cloud doet. */
.stappen { margin: 8px 0 12px; padding-left: 20px; font-size: 12.5px; line-height: 1.6; }
.stappen li { margin-bottom: 5px; }
.terugadres {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 4px 0 8px; padding: 8px 10px;
    background: #f4f6f9; border-radius: 7px;
}
.terugadres code { font-size: 12px; overflow-wrap: anywhere; }

/* De types die overal uit staan, achter een uitklapper.
 *
 * Uit HubSpot kwamen per label tien jaarvarianten mee die allemaal uit staan.
 * Tussen de rest was een lijst van acht bruikbare types ineens twintig regels
 * lang, en dan zoek je de goede ertussenuit. */
.schakelaars form { display: flex; }

.slapendetypes { margin-top: 12px; }
.slapendetypes > summary {
    cursor: pointer; font-size: 12.5px; color: var(--muted);
    list-style: none; padding: 5px 0;
}
.slapendetypes > summary::-webkit-details-marker { display: none; }
.slapendetypes > summary::before { content: '▸ '; }
.slapendetypes[open] > summary::before { content: '▾ '; }
.slapendetypes > summary:hover { color: var(--accent); }
.slapendetypes > summary .bij { margin-left: 6px; }
.slapendetypes .typetabel { margin-top: 6px; border-top: 0; }
.slapendetypes .veldhint { max-width: 68ch; margin: 2px 0 0; }

/* Alles wat met subtypes te maken heeft bij elkaar, standaard dicht. */
.subtypebeheer {
    margin-top: 16px;
    border-top: 1px solid var(--border-zacht);
    padding-top: 10px;
}
.subtypebeheer > summary {
    cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text);
    list-style: none; padding: 4px 0;
}
.subtypebeheer > summary .bij { margin-left: 8px; font-weight: 400; color: var(--muted); }

/* Wat een subtype is, in twee zinnen. Zonder dat is het een uitklapper met
   invoervelden waarvan je niet weet waar ze voor dienen. */
.subtypeuitleg { margin: 8px 0 12px; max-width: 68ch; font-size: 12.5px; line-height: 1.55; }
.subtypeuitleg p { margin: 0 0 6px; }
.subtypeuitleg .veldhint { margin: 0; }
.subtypebeheer > summary::-webkit-details-marker { display: none; }
.subtypebeheer > summary::before { content: '▸ '; }
.subtypebeheer[open] > summary::before { content: '▾ '; }
.subtypebeheer > summary:hover { color: var(--accent); }

.subtypeblok {
    margin: 8px 0;
    padding: 9px 11px;
    background: #fafbfc;
    border: 1px solid var(--border-zacht); border-radius: 8px;
    font-size: 13px;
}
.subtypeblok > strong { display: block; font-size: 12.5px; margin-bottom: 4px; }
.subtyperij {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 3px 0;
}
.subtypeblok .boomtoevoegen { margin-top: 6px; }

@media (max-width: 820px) {
    .typetabel { grid-template-columns: minmax(0, 1fr); }
    .typekop { display: none; }
    .typerij { gap: 6px; padding: 12px 0; }
    .boomnaam button { visibility: visible; }
}

/* Een schakelaar zegt in welke stand hij staat, niet wat er gebeurt als je
   klikt. "uitzetten" naast "geen soort deal" las als twee handelingen, en dan
   moet je raden wat er nú aan staat. Een vinkje is één blik. */
.schakelaar {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%; min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface);
    color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
/* Het vinkje houdt zijn plek ook als het er niet is; anders springt de tekst
   in de blokjes heen en weer tussen aan en uit. */
.schakelaar .vinkje { width: 9px; font-size: 11px; line-height: 1; text-align: center; }
.schakelaar:hover { border-color: #d2d7de; background: #f7f8fa; }

.schakelaar.aan { background: #eaf5ef; border-color: #bfe0cd; color: #1f7a44; }
.schakelaar.aan:hover { background: #dcefe4; border-color: #a9d5bb; }

/* Uitleg van de twee schakelaars, één keer boven de lijst. */
.uitlegblok {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px; margin: 12px 0; font-size: 12px; line-height: 1.5;
    max-width: 72ch;
}
.uitlegblok dt { font-weight: 600; }
.uitlegblok dd { margin: 0; color: var(--muted); }

@media (max-width: 720px) {
    .uitlegblok { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .uitlegblok dd { margin-bottom: 8px; }
}
.boomrij span:first-child { margin-right: auto; }

.boomtoevoegen { display: flex; gap: 8px; margin-top: 8px; }
.boomtoevoegen input { flex: 1; max-width: 320px; }
.boomtoevoegen.nieuw { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* --- Auditlog ------------------------------------------------------------- */

table.auditlog { font-size: 13px; }
table.auditlog td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
table.auditlog .wanneer { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
table.auditlog .ip { white-space: nowrap; color: var(--muted); font-size: 12px;
                     font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
table.auditlog .details { max-width: 380px; color: var(--muted); word-break: break-word; }
/* Soortaanduiding achter de naam, klein en grijs. */
.soortbij { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
table.auditlog .details ul { margin: 6px 0 0; padding-left: 16px; }
table.auditlog .details li { margin-bottom: 2px; }
table.auditlog .details summary { cursor: pointer; color: var(--accent); }
table.auditlog .details summary:hover { text-decoration: underline; }

/* Mislukte inlogpogingen en geweigerde toegang springen eruit. */
table.auditlog tr.let-op td { background: #fdf6f5; }
table.auditlog tr.let-op:hover td { background: #fbeeec; }

.categoriemerk {
    display: inline-block;
    min-width: 62px;
    padding: 1px 6px;
    margin-right: 7px;
    border-radius: 4px;
    background: #eceff3;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
    vertical-align: 1px;
}
.cat-user     { background: #e8eefb; color: #2f4f8f; }
.cat-toegang  { background: #fdeceb; color: var(--danger); }
.cat-password { background: #fdeceb; color: var(--danger); }
.cat-deal     { background: #e3f2ea; color: var(--ok); }
.cat-quote    { background: #eef3f8; color: var(--accent); }
.cat-settings { background: #f2f0ec; color: #7a6a4f; }
.cat-label    { background: #f0ecf7; color: #5a4b8c; }

@media (max-width: 900px) {
    .columns { grid-template-columns: 1fr; }
    .filters input[type="search"] { width: 100%; }
    .filters .zoekveld { width: 100%; flex-basis: 100%; }
    .kerncijfers { gap: 18px; }
}

/* Smal scherm: het menu wordt een horizontale balk met alleen iconen en
   korte labels, zodat het niet het halve scherm opeet. */
@media (max-width: 700px) {
    .app { flex-direction: column; }

    .sidebar { width: 100%; padding: 10px 12px; gap: 0; }
    .brand { padding: 4px 2px 12px; }

    .sidebar nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .sidebar nav::-webkit-scrollbar { display: none; }
    .sidebar nav a { flex-direction: column; gap: 4px; padding: 8px 12px; font-size: 11px; white-space: nowrap; }
    .menukop { display: none; }

    /* Op een telefoon is het menu één rij om doorheen te vegen. De groep gaat
       op in die rij: de kop wordt een knopje als alle andere, en de links
       komen erachter zodra je hem opentikt.
     *
     * De kop mag hier niet verdwijnen. Een <details> die dicht staat verbergt
     * zijn inhoud in de browser zelf, en daar komt geen stijlregel tussen —
     * met een verborgen kop zouden de beheerlinks op een telefoon nergens meer
     * te bereiken zijn. */
    .menugroep { display: contents; }

    /* En de inhoud van een open groep óók, anders wordt die inhoud één blok in
       de rij: zeven links onder elkaar, een kolom van 358 pixels hoog, waar de
       rest van de balk zich aan optrekt. Zo lopen ze gewoon door in de rij. */
    .menugroep::details-content { display: contents; }

    /* Vangnet voor een browser die ::details-content nog niet kent: de andere
       knoppen rekken zich dan tenminste niet uit tot die kolomhoogte. */
    .sidebar nav { align-items: flex-start; }

    .sidebar nav .menugroep summary {
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        font-size: 10px;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    /* Het pijltje kost breedte die er in een rij niet is; open of dicht zie je
       hier aan de links die erachter verschijnen. */
    .menugroep summary .icoon:last-child { display: none; }

    .sidebar nav .menugroep a { padding-left: 12px; }

    .content, .topbar { padding: 16px; }
    .flash { margin: 12px 16px -4px; }
    .topbar .usernaam { display: none; }
    .filters .zoekveld { width: 100%; }
}

/* --- Migraties ------------------------------------------------------------ */

.migratiekop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.migratiekop .bij { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 60ch; }

.migratieknop { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.bevestiging {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--danger); cursor: pointer;
}
.bevestiging input { accent-color: var(--danger); }

.indelinglijst { list-style: none; margin: 0; padding: 0; }
.indelinglijst li { padding: 2px 0; font-size: 14px; }

/* --- Templates ------------------------------------------------------------ */

.templatebalk {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--accent-licht);
    border: 1px solid #d3e2f0;
    border-radius: 9px;
}
.templatebalk label { font-size: 13px; font-weight: 600; color: var(--accent); }
.templatebalk select { width: auto; min-width: 220px; background: #fff; }
.templatebalk .veldhint { margin: 0; flex: 1 1 220px; }

.verborgenformulier { display: none; }

.plaatshouders { margin: 0; font-size: 13px; }
.plaatshouders dt { margin-top: 8px; }
.plaatshouders dt code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f3f6;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
.plaatshouders dd { margin: 2px 0 0; color: var(--muted); }

/* --- Tijdlijn ------------------------------------------------------------- */

.tijdlijnblok { margin-top: 16px; }

.tijdlijninvoer {
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.tijdlijninvoer > input[type="text"] { margin-bottom: 10px; }

/* Het invoerveld is een textarea: Enter maakt een regel, hij groeit mee met
   wat je typt. Geen resize-hoekje, want dat doet het script al. */
.tijdlijninvoer > textarea {
    margin-bottom: 10px;
    min-height: 46px;
    resize: vertical;
    font: inherit;
    line-height: 1.45;
}

.soortkeuze { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.soortkeuze label { position: relative; }
.soortkeuze input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.soortkeuze span {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}
.soortkeuze label:hover span { border-color: #cbd2db; color: var(--text); }
.soortkeuze input:checked + span {
    background: var(--accent-licht);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
}
.soortkeuze input:focus-visible + span { box-shadow: 0 0 0 3px rgba(31, 78, 121, .25); }

.tijdlijninvoer-onder { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tijdlijninvoer-onder label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--muted);
}
.tijdlijninvoer-onder input[type="date"] { width: auto; padding: 6px 8px; }
.tijdlijninvoer-onder select { width: auto; padding: 6px 26px 6px 8px; }
.tijdlijninvoer-onder .btn { margin-left: auto; }

.tijdlijndag {
    /* Ruim bovenaan: nu elke activiteit een eigen kader heeft, is de dagkop de
       scheiding die je zoekt als je terugkijkt naar "wat was er dinsdag". */
    margin: 26px 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}
.tijdlijndag:first-of-type { margin-top: 4px; }

ul.tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
ul.tijdlijn::before {
    content: "";
    position: absolute;
    left: 11px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--border-zacht);
}

ul.tijdlijn > li { display: flex; gap: 12px; padding: 6px 0 10px; position: relative; }

/* --- Elke activiteit in een eigen kader ----------------------------------- */

/* "Kan je bij de tijdlijn 1 activiteit afkaderen zodat je verschillende dagen
   en meetings beter kan onderscheiden."
 *
 * De regels stonden onder elkaar met alleen witruimte ertussen. Bij drie
 * gesprekken op één dag liep dat in elkaar over: je zag niet waar de ene
 * afspraak ophield en de volgende begon.
 *
 * Alleen wat iemand zélf heeft vastgelegd krijgt een kader. De wijzigingen uit
 * het auditlog blijven kale regels: daar zijn er veel van, en die allemaal in
 * een doosje zetten levert een muur van doosjes op waarin juist niets meer
 * opvalt. Nu steekt af wat er gebeurd is tussen wat er veranderd is. */
ul.tijdlijn > li:not(.systeem) > .inhoud {
    padding: 8px 12px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

/* Een afgeronde taak zakt naar de achtergrond: hij is klaar, hij hoeft alleen
   nog vindbaar te zijn. */
ul.tijdlijn > li.af > .inhoud { background: var(--bg); border-color: var(--border-zacht); }

/* De stip komt met het kader mee omhoog, anders zweeft hij naast de bovenrand. */
ul.tijdlijn > li:not(.systeem) > .stip { margin-top: 5px; }


.tijdlijn .stip {
    position: relative; z-index: 1;
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--accent-licht);
    color: var(--accent);
}
.tijdlijn .systeem .stip { background: #f1f3f6; color: var(--muted); }
.tijdlijn .af .stip { background: #e3f2ea; color: var(--ok); }

.tijdlijn .inhoud { flex: 1; min-width: 0; }
.tijdlijn .kop { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; flex-wrap: wrap; }
.tijdlijn .titel { font-size: 14px; }
.tijdlijn .af .titel { text-decoration: line-through; color: var(--muted); }
.tijdlijn .systeem .titel { color: var(--muted); }
.tijdlijn .tekst { margin: 3px 0 0; font-size: 13px; color: #40495a; white-space: pre-wrap; }
/* Tekst met opmaak regelt zijn eigen regels met tags. Met pre-wrap erbij komt
   er tussen elke alinea een lege regel bij, want de editor zet ook echte
   regelovergangen in de html. */
.tijdlijn .tekst.rijk { white-space: normal; }
.tijdlijn .tekst.rijk ul { margin: 4px 0; padding-left: 20px; }
.tijdlijn .tekst.rijk li { padding: 1px 0; }

.tijdlijn .wijzigingen { color: var(--muted); font-size: 12px; }
.tijdlijn .bij { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.tijdlijn .vinkje { display: inline-flex; }

/* "Verwijderen" rechts op een tijdlijnregel. Zelfde afspraak als "losmaken" in
   de koppellijsten: gedempte tekst die rood wordt als je erheen gaat. Altijd
   zichtbaar — het stond eerst als kruisje dat pas bij hover verscheen, en dan
   is het én onduidelijk wat het doet én onvindbaar op een tablet. */
.tijdlijn .tijdlijnweg { margin-left: auto; display: inline-flex; }
.tijdlijn .tijdlijnweg button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--muted); font-size: 12px; line-height: 1.4;
    text-decoration: underline; text-underline-offset: 2px;
    transition: color .12s;
}
.tijdlijn .tijdlijnweg button:hover,
.tijdlijn .tijdlijnweg button:focus-visible { color: var(--danger); }

/* "Bewerken" ernaast, in dezelfde gedempte stijl maar zonder het rood: dit is
   de onschuldige van de twee. Hij duwt zichzelf naar rechts; staat er ook een
   "Verwijderen", dan schuift die er met een vaste tussenruimte achteraan in
   plaats van dat ze allebei hun eigen kant op vliegen. */
.tijdlijn .tijdlijnbewerk {
    margin-left: auto;
    color: var(--muted); font-size: 12px; line-height: 1.4;
    text-decoration: underline; text-underline-offset: 2px;
    transition: color .12s;
}
.tijdlijn .tijdlijnbewerk:hover,
.tijdlijn .tijdlijnbewerk:focus-visible { color: var(--text); }
.tijdlijn .tijdlijnbewerk + .tijdlijnweg { margin-left: 10px; }

/* Het filter boven de tijdlijn: per soort, met het aantal erachter. Gewone
   links, zodat een gefilterde tijdlijn een eigen adres heeft. */
.tijdlijnfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-zacht);
}

.tijdlijnfilter a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--muted);
    background: var(--surface);
}

.tijdlijnfilter a:hover { border-color: #c9d3df; color: var(--text); text-decoration: none; }

.tijdlijnfilter a span {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.tijdlijnfilter a.aan {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.tijdlijnfilter a.aan span { color: rgba(255, 255, 255, .8); }

/* Oudere maanden staan ingeklapt. <details> doet het openklappen zelf, dus
   dit werkt ook zonder JavaScript. */
.tijdlijnperiode { margin-top: 8px; border-top: 1px solid var(--border-zacht); }

.tijdlijnperiode > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 2px;
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
}
.tijdlijnperiode > summary::-webkit-details-marker { display: none; }

/* Een driehoekje dat meedraait bij het openklappen. */
.tijdlijnperiode > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0; height: 0;
    margin-left: 7px;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .12s ease;
}
.tijdlijnperiode[open] > summary::before { transform: rotate(90deg); }

.tijdlijnperiode > summary:hover { color: var(--text); }
.periodenaam { font-weight: 500; }

.periodeaantal {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f3f6;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tijdlijnperiode[open] > summary { border-bottom: 1px solid var(--border-zacht); }

/* Een lang gespreksverslag: eerst het begin, de rest op een klik. */
.tijdlijn .langetekst { margin: 3px 0 0; }

.tijdlijn .langetekst > summary {
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    color: #40495a;
}
.tijdlijn .langetekst > summary::-webkit-details-marker { display: none; }
.tijdlijn .langetekst > summary::after {
    content: "meer";
    color: var(--accent);
    font-size: 12px;
}

/* Open: alleen "minder" blijft staan. Die zit in de summary en is dus echt
   aanklikbaar — een tekstje onder de alinea zou dat niet zijn. */
.tijdlijn .langetekst[open] .aanhef { display: none; }
.tijdlijn .langetekst[open] > summary::after { content: "minder"; }
.tijdlijn .langetekst[open] > summary { margin-bottom: 2px; }

.tijdlijnmeer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.tijdlijnmeer .veldhint { margin: 0; }


/* Tekst die alleen een schermlezer voorleest. Niet display:none — dan slaat
   een schermlezer hem ook over, en dan heeft een kolom helemaal geen kop. */
.verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Filters met meerdere keuzes ------------------------------------------ */

.meerkeuze { position: relative; }

/* De echte <select> blijft bestaan — die wordt verstuurd — maar is niet meer
   te zien zodra JavaScript het overneemt. */
.meerkeuze .meerkeuze-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.meerkeuzeknop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    font-size: 14px;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meerkeuzeknop::after {
    content: "";
    flex: 0 0 auto;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.meerkeuzeknop:hover { border-color: #c9d3df; }
.meerkeuzeknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Met een keuze erin springt hij eruit, zodat je ziet dat er gefilterd wordt. */
.meerkeuzeknop.heeft {
    border-color: var(--accent);
    background: var(--accent-licht);
    color: var(--accent);
    font-weight: 500;
}

.meerkeuzepaneel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 3px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(300px, calc(100vw - 32px));
    max-height: 260px;
    overflow-y: auto;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(20, 30, 45, .12);
}

/* Het zoekveldje bovenin het paneel. Met alleen .meerkeuzezoek zou de
   algemene formulierregel input[type="search"] winnen: die is even zwaar
   plus een element, en staat hierboven. Vandaar de ouder erbij. */
/* Blijft bovenin staan als je door een lange lijst scrollt. De negatieve
   marges vullen de padding van het paneel, anders schuiven regels erlangs. */
.meerkeuzezoekrij {
    position: sticky;
    /* Vijf omhoog: anders blijft de padding van het paneel als kier over,
       en zie je regels daar langs schuiven. */
    top: -5px;
    z-index: 1;
    margin: -5px -5px 4px;
    padding: 5px;
    background: var(--surface);
}

.meerkeuzepaneel .meerkeuzezoek {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
}
.meerkeuzepaneel .meerkeuzezoek:focus { border-color: var(--accent); outline: none; }

.meerkeuzeleeg { margin: 0; padding: 10px 8px; color: var(--muted); font-size: 13px; }

.meerkeuzepaneel label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 5px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.meerkeuzepaneel label:hover { background: #f2f5f8; }
/* Alleen de vinkjes: ongescoopt won deze regel het van .meerkeuzezoek. */
.meerkeuzepaneel input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }

.meerkeuzewissen {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 8px;
    border: none;
    border-top: 1px solid var(--border-zacht);
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
}
.meerkeuzewissen:hover { color: var(--danger); }

/* --- Sorteren en weergaven ------------------------------------------------ */

/* Een kolomkop waarop je kunt sorteren. */
th .sorteerkop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    white-space: nowrap;
}
th .sorteerkop:hover { color: var(--accent); text-decoration: none; }
th.gesorteerd .sorteerkop { color: var(--accent); }
th .pijl { font-size: 10px; }

/* De ster waarmee je een weergave je standaard maakt. */
.standaardknop { display: inline-flex; }
.standaardknop button {
    padding: 0 3px;
    border: 0;
    background: none;
    color: #b8c1cc;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.standaardknop button:hover { color: #d9a441; }
.standaardknop button.aan { color: #d9a441; }

/* --- Taggen en meldingen -------------------------------------------------- */

/* Het lijstje met collega's terwijl je "@" typt. */
.tagveld { position: relative; display: block; }

.tagsuggesties {
    position: absolute;
    z-index: 40;
    top: calc(100% + 3px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(20, 30, 45, .12);
}

.tagsuggesties [role="option"] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 9px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.tagsuggesties [role="option"].aan { background: #eaf0f7; }
.tagnaam { font-weight: 500; }
.tagbij { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Een genoemde collega in een notitie of taak. */
.vermelding {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--accent-licht);
    color: var(--accent);
    font-weight: 600;
}

/* Het belletje in de balk bovenin. */
.belletje {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--muted);
    flex: 0 0 auto;
}

.belletje:hover { background: #f1f3f6; color: var(--text); }
.belletje.heeft { color: var(--accent); }

.belteller {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.meldingen { list-style: none; margin: 0; padding: 0; }

.meldingen > li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border-zacht);
}
.meldingen > li:last-child { border-bottom: none; }

/* Wat je nog niet gelezen hebt krijgt een streep in de kantlijn. */
.meldingen > li.nieuw {
    margin: 0 -10px;
    padding-left: 12px;
    padding-right: 12px;
    border-left: 3px solid var(--accent);
    background: #f8fafc;
}

.meldinginhoud { flex: 1; min-width: 0; }
.meldingtitel { margin: 0; font-size: 14px; font-weight: 500; }
.meldingtekst { margin: 3px 0 0; font-size: 13px; color: #40495a; white-space: pre-wrap; }
.meldingen .bij { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }

.meldingacties { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* --- Taken ---------------------------------------------------------------- */

.lijsttitel { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

.lijstaantal {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-licht);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: 2px;
}

/* De snelfilters: te laat, vandaag, deze week. Wat te laat is springt eruit —
   daar kom je voor. */
.termijnbalk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.termijnbalk a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    color: var(--muted);
}

.termijnbalk a:hover { border-color: #c9d3df; color: var(--text); text-decoration: none; }
.termijnbalk a span { font-size: 11.5px; font-variant-numeric: tabular-nums; }

.termijnbalk a.dringend { border-color: #e7c3c0; color: var(--danger); }
.termijnbalk a.aan { background: var(--accent); border-color: var(--accent); color: #fff; }
.termijnbalk a.aan span { color: rgba(255, 255, 255, .8); }
.termijnbalk a.dringend.aan { background: var(--danger); border-color: var(--danger); color: #fff; }

.takenlijst td { vertical-align: top; }
.takenlijst .vink { width: 1%; padding-right: 0; }
.takenlijst .taaknaam { display: block; }
.takenlijst .bij { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.takenlijst tr.af .taaknaam { text-decoration: line-through; color: var(--muted); }

.taakvink {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.taakvink:hover { background: var(--accent-licht); color: var(--accent); }
.takenlijst tr.af .taakvink { color: var(--ok); }

/* De kolom "Voor": je geeft een taak hier aan een collega zonder hem te openen.
 *
 * In rust leest het als een gewone naam. In een lijst van vijfentwintig taken is
 * die kolom vooral iets wat je léést; er hoeven daar geen vijfentwintig
 * invoervakken met knoppen te staan. Pas als je de regel aanwijst ziet het eruit
 * als iets wat je kunt veranderen — hetzelfde als in de filterbalk.
 *
 * Let op: select erft width:100% uit de formulieropmaak. In een tabelcel die
 * zichzelf zo smal mogelijk maakt, knijpt dat de lijst tot alleen het pijltje.
 * Vandaar width:auto met een ondergrens waar een naam in past. */
.takenlijst .taakvoor { white-space: nowrap; }

.taakoverdracht { display: flex; align-items: center; gap: 6px; }

.taakoverdracht select {
    width: auto;
    min-width: 150px;
    max-width: 220px;
    border-color: transparent;
    background-color: transparent;
}

.takenlijst tr:hover .taakoverdracht select,
.taakoverdracht select:hover,
.taakoverdracht select:focus { border-color: var(--border); background-color: #fff; }

/* De knop is er alleen als er iets te versturen is.
 *
 * Zonder javascript staat hij altijd: dan is er geen andere manier om op te
 * slaan, en een onbereikbare knop is erger dan een knop te veel. Mét javascript
 * verschijnt hij zodra je echt een andere naam kiest — zie taakoverdracht.js.
 * Automatisch versturen bij het kiezen doen we met opzet niet: met de muis over
 * een keuzelijst scrollen verandert de waarde, en dan verplaats je iemands werk
 * zonder het door te hebben. */
.heeft-taakscript .taakoverdracht button { display: none; }
.heeft-taakscript .taakoverdracht.gewijzigd button { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
    .taakoverdracht select { transition: none; }
}

/* --- Zoekbalk bovenin ----------------------------------------------------- */

.globaalzoeken { position: relative; flex: 1; max-width: 420px; margin: 0 auto; }

#globaalzoeken {
    width: 100%;
    padding: 8px 12px 8px 34px;
    background-color: #f2f4f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    border-color: transparent;
}
#globaalzoeken:focus { background-color: #fff; }
#globaalzoeken.bezig { opacity: .7; }

.zoekpaneel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--schaduw-op);
}

.zoekgroep {
    margin: 8px 0 3px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.zoekgroep:first-child { margin-top: 2px; }

a.zoekitem {
    display: block;
    padding: 7px 9px;
    border-radius: 6px;
    color: var(--text);
}
a.zoekitem:hover, a.zoekitem.actief { background: var(--accent-licht); text-decoration: none; }
.zoektitel { display: block; font-size: 14px; }
.zoekbij { display: block; font-size: 12px; color: var(--muted); }

.zoekleeg { padding: 12px 10px; margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
    .globaalzoeken { display: none; }
}

/* --- Fragmenten ----------------------------------------------------------- */

/* Het fragment zoals het op de offertepagina staat: één omkaderd geheel,
   met de onderdelen A, B, C eronder. Dezelfde opbouw als in de PDF. */
.fragmentblok {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 16px 18px 12px;
    margin-bottom: 14px;
}
.fragmentblok:last-child { margin-bottom: 0; }
.fragmentblok h3 { margin: 0; font-size: 15px; }
.fragmentonder { margin: 2px 0 14px; color: var(--muted); font-size: 14px; }

.fragmentdeel { margin-bottom: 14px; }
.fragmentdeel:last-child { margin-bottom: 0; }
.fragmentdeel h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
}
.fragmentdeel h4 .letter { font-style: normal; color: var(--muted); margin-right: 4px; }
.fragmentdeel p { margin: 0 0 6px; font-size: 14px; }
.fragmentdeel ul { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }
.fragmentdeel li { margin-bottom: 4px; }

.fragmentvoet { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

/* In het offerteformulier: een compacte kaart per aangehangen fragment. */
.fragmentkaart {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fafbfc;
}

.fragmentkop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.fragmentkop .bij { display: block; }

.fragmentknoppen { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.fragmentknoppen button[disabled] { opacity: .35; cursor: default; }

ol.fragmentonderdelen {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 13px;
}
ol.fragmentonderdelen li { padding: 2px 0; color: var(--muted); }
ol.fragmentonderdelen .letter {
    display: inline-block;
    min-width: 18px;
    font-weight: 600;
    color: var(--text);
}

/* In het fragmentformulier: één onderdeel per omkaderd blok. */
/* --- De fragmenteditor ---------------------------------------------------
   Links het tekstvak waar je het hele pakket in typt, rechts hoe het op de
   offerte terechtkomt. Zonder JavaScript is er geen voorbeeld en houdt het
   tekstvak de volle breedte. */

/* auto-fit laat een lege kolom vervallen: zonder JavaScript is er geen
   voorbeeld en krijgt het tekstvak de volle breedte in plaats van de helft.
   De min() erin houdt het heel op een smal scherm. */
/* Het fragmentformulier mag breder zijn dan de rest.
 *
 * Een gewoon formulier is 560 pixels: één kolom om langs te lopen, en een
 * invoervak breder dan dat leest niet. Maar hier staat een schrijfblad met
 * ernaast hoe het op de offerte komt, en die twee moeten naast elkaar passen.
 * Op 560 pixels paste er één, dus stond het voorbeeld eronder en bleef het halve
 * scherm leeg — terwijl juist dat voorbeeld de reden is om hier te zijn.
 *
 * Alleen het tekstblok wordt breed. "Interne naam" in een vak van duizend
 * pixels ziet er verlaten uit en is lastiger te lezen dan een kort vak. */
.formulier.fragmentformulier { max-width: 1180px; }
.formulier.fragmentformulier > section.block { max-width: 560px; }
.formulier.fragmentformulier > section.block.fragmenttekstblok { max-width: none; }

.fragmentvak {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}
.fragmentvak > * { min-width: 0; }

.fragmentvak textarea {
    min-height: 420px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
}

@media (max-width: 900px) {
    .fragmentvak textarea { min-height: 300px; }
}

/* De opmaakbalk en het schrijfblad. Zonder JavaScript bestaan die niet en
   zie je het gewone tekstveld. */

.opmaakbalk {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #f7f8fa;
}

.opmaakknop {
    min-width: 30px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}
.opmaakknop:hover { background: #e8ecf1; }
.opmaakknop.aan { background: var(--accent); border-color: var(--accent); color: #fff; }

.opmaakknop.vet { font-weight: 700; }
.opmaakknop.schuin { font-style: italic; font-family: Georgia, serif; }
.opmaakknop.onder { text-decoration: underline; }
.opmaakknop.wissen { font-size: 12px; }

/* Het balkje waarin je het adres van een link intypt. Staat tussen de
   knoppenbalk en het schrijfblad, en alleen als je erom vraagt. */
.linkbalk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-bottom: 0;
    background: #eef2f7;
}

.linkbalk .linkadres {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.opmaakblad a { color: var(--accent); }

.opmaakblad {
    /* Voor de plaatshouder verderop, die over het lege vak heen ligt in plaats
       van er een regel bij te duwen. */
    position: relative;
    min-height: 420px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    background: var(--surface);
    font-size: 13.5px;
    line-height: 1.55;
}
.opmaakblad:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 78, 121, .13); }

/* In de offertewizard hoeft dat vak niet zo hoog.
 *
 * 420 pixels is de maat voor het scherm waar je een template of een fragment
 * zít te schrijven. In de wizard is het één veld van de zeven stappen, en het
 * duwde de knoppen "Offerte aanmaken" en "Voorbeeld bekijken" van het scherm —
 * op precies de stap waar je klaar bent. */
.formulier[data-wizard] .opmaakblad { min-height: 200px; }

/* En in de tijdlijn nog een stuk minder.
 *
 * Daar is dit geen scherm maar een invoerregel: je typt twee zinnen en je bent
 * klaar. Met 420 pixels duwde het lege vak de hele tijdlijn van het scherm — je
 * moest scrollen langs een leeg blok om te zien wat er bij een bedrijf gebeurd
 * was. Het vak groeit gewoon mee met wat je typt, dus een lage bodem kost niets
 * en scheelt bij een lege pagina zo'n driehonderd pixels. */
.tijdlijninvoer .opmaakblad {
    min-height: 72px;
    max-height: 40vh;
}

/* De plaatshouder van het tekstvak, op het schrijfblad.
 *
 * Een contenteditable kent geen placeholder. Zonder dit is een leeg vak een
 * grijs vlak waarvan niemand weet wat erin moet — en in de tijdlijn is dat
 * het eerste wat je ziet.
 *
 * Drie vormen van leeg, want de browser laat een leeggemaakt vak niet altijd
 * even leeg achter: helemaal niets, één leeg blok, of één blok met alleen een
 * regelovergang erin. */
.opmaakblad[data-plaatshouder]:empty::before,
.opmaakblad[data-plaatshouder]:has(> div:only-child:empty)::before,
.opmaakblad[data-plaatshouder]:has(> div:only-child > br:only-child)::before {
    content: attr(data-plaatshouder);
    position: absolute;
    top: 12px;
    left: 14px;
    right: 14px;
    color: var(--muted);
    pointer-events: none;
}

/* Een veld met een tekstverwerker: het label bóven het vak.
 *
 * Elk veld op een formulier is een raster van een labelkolom van 106 pixels en
 * de rest. Dat werkt voor "Titel" en "Bedrijf". "Tekst onderaan de offerte"
 * valt daar over drie regels uiteen, en align-items:center zet dat restje
 * halverwege een blok van vierhonderd pixels — dan zweeft er een stukje tekst
 * in het niets naast een grote lege doos, en begint de doos zelf honderd pixels
 * verder naar rechts dan alles erboven.
 *
 * Op het tekstvak zelf mikken en niet op .opmaakblad: dat laatste maakt
 * javascript aan, en zonder javascript hoort het net zo goed te kloppen. */
.formulier .veld:has([data-fragmenttekst]) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.formulier .veld:has([data-fragmenttekst]) label {
    text-align: left;
    margin-bottom: 2px;
}

/* En dan hoort ook wat eronder hangt in die ene kolom te staan.
 *
 * Een toelichting of een foutmelding staat normaal vast in kolom 2, netjes
 * onder het invoervak. Maar hier ís er maar één kolom, en "kolom 2" maakt er
 * dan stilletjes een tweede bij. Alles wat daarna geplaatst wordt verdeelt zich
 * over die twee: het schrijfblad kwam rechts terecht en de opmaakbalk links, in
 * een kolom van veertien pixels. De knoppen stonden er dus wel, maar als twee
 * donkere streepjes naast het vak — je zag ze aan voor een rand. */
.formulier .veld:has([data-fragmenttekst]) > .veldhint,
.formulier .veld:has([data-fragmenttekst]) > .veldfout {
    grid-column: 1;
}

.opmaakblad > div { min-height: 1.55em; }
.opmaakblad ul { margin: 4px 0; padding-left: 22px; }
.opmaakblad li { padding: 1px 0; }

/* Een onderdeelregel, met de letter ervoor die het systeem zelf bijhoudt.
   Die staat in de opmaak en niet in de tekst: hem meetypen zou betekenen dat
   je hem bij elke verschuiving zelf moet bijwerken. */
.opmaakblad .r-onderdeel {
    margin-top: 10px;
    padding-left: 26px;
    position: relative;
    font-style: italic;
}
.opmaakblad .r-onderdeel::before {
    content: attr(data-letter);
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--accent);
}

/* Het tekstveld blijft het echte veld en gaat mee bij het versturen; je ziet
   het alleen niet meer zodra de editor er staat. */
.opmaakbron { display: none; }

.fragmentvoorbeeld { position: sticky; top: 16px; }
.fragmentvoorbeeld h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 500; }

.voorbeeldblad {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    font-size: 13.5px;
    line-height: 1.5;
    max-height: 520px;
    overflow-y: auto;
}

.bladkop { margin: 0; font-size: 15px; font-weight: 700; }
.bladbij { margin: 2px 0 0; color: var(--muted); }
.bladonderdeel { margin-top: 14px; }
.bladonderdeelkop { margin: 0 0 2px; font-style: italic; }
.bladletter { font-style: italic; font-weight: 600; margin-right: 3px; }
.bladintro { margin: 0; white-space: pre-wrap; }
.bladpunten { margin: 4px 0 0; padding-left: 20px; }
.bladpunten li { padding: 1px 0; }
.bladleeg { margin: 0; color: var(--muted); font-style: italic; }

/* Het hekje staat vast in het veld, zoals bij HubSpot. */
.hekjeveld { position: relative; }
.hekjeveld .hekje {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-weight: 600;
}
.hekjeveld input { padding-left: 26px; }

/* Alleen voor schermlezers; het veld eronder spreekt voor zich. */
.verborgenlabel {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.knoppenrij { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

.onderdeelknoppen { display: flex; gap: 2px; flex: 0 0 auto; align-items: center; }

/* De uitleg bij een blok. Stond als alinea onder elke titel; bij tien blokken
 * onder elkaar is dat tien alinea's die je al kent. Nu een i rechtsboven, met
 * de tekst als tekstballon — je leest hem alleen als je hem zoekt.
 *
 * tabindex maakt hem met Tab bereikbaar; zonder dat is de uitleg er voor wie
 * geen muis gebruikt helemaal niet meer. */
.blokinfo {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 2px;
    border-radius: 6px;
    color: var(--muted);
    cursor: help;
}

.blokinfo:hover { color: var(--accent); background: var(--accent-licht); }
.blokinfo:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.onderdeelknoppen button {
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
}
.onderdeelknoppen button:hover { color: var(--text); border-color: #cfd4dc; }


/* --- Import en export ----------------------------------------------------- */

.uitleglijst { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--muted); }
.uitleglijst li { margin-bottom: 6px; }
.uitleglijst strong { color: var(--text); }

.importvoortgang .onderkop { margin-top: 0; }

.balk {
    height: 10px;
    margin: 14px 0 6px;
    border-radius: 5px;
    background: var(--border-zacht);
    overflow: hidden;
}
.balk span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 5px;
    transition: width .3s ease;
}

.voortgangtekst { margin: 0 0 14px; font-size: 14px; color: var(--muted); }

.btn.bezig { opacity: .65; pointer-events: none; }

/* Het uploadveld hoort bij de rest te passen.
 *
 * Niet het veld dat uit beeld staat: dat is ook een input[type="file"], en
 * deze regel staat verderop in het bestand dan die van .verborgenbestand.
 * Even zwaar en later betekent: deze wint. Het gevolg was een onzichtbaar veld
 * van 100% breed dat absoluut gepositioneerd stond zonder ouder om zich aan
 * vast te houden, dus 100% van de héle pagina — en dan kun je een halve meter
 * naar rechts scrollen naar niets. */
input[type="file"]:not(.verborgenbestand) {
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #fafbfc;
    font-size: 14px;
    width: 100%;
}
input[type="file"]:not(.verborgenbestand):hover { border-color: var(--accent); }

/* --- Dashboard op maat ---------------------------------------------------- */

/* Twee kolommen; een breed blok pakt ze allebei. Op een smal scherm valt
   alles vanzelf onder elkaar. */
.dashboardraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.dashboardraster .dashboardblok.breed { grid-column: 1 / -1; }

/* Binnen een blok hoeven de kaarten geen extra marge onderaan. */
.dashboardblok .cards { margin-bottom: 0; }
.dashboardblok .card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.dashboardblok .blokkop h2 { display: flex; align-items: center; gap: 8px; }
.dashboardblok .kerncijfers { margin-bottom: 10px; }
.dashboardblok .kerncijfers .bij { display: block; font-size: 12px; }

@media (max-width: 900px) {
    .dashboardraster { grid-template-columns: minmax(0, 1fr); }
}

/* Pipeline: naam, bedrag, en een staafje voor de verhouding. */
.fasebalken { list-style: none; margin: 0 0 10px; padding: 0; }
.fasebalken li { margin-bottom: 12px; }
.fasebalken li:last-child { margin-bottom: 0; }

.faseregel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 14px;
}
.fasenaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fasegetal { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Gewonnen per maand: twaalf staafjes naast elkaar. */
.staafjes {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 130px;
    margin-bottom: 10px;
}
.staafje {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
}
.staaf {
    display: block;
    width: 100%;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    transition: height .3s ease;
}
.staafje:hover .staaf { background: var(--text); }
.staafnaam { margin-top: 5px; font-size: 11px; color: var(--muted); }

/* De indelingspagina ------------------------------------------------------- */

/* Het toevoegpaneel is zelf ook inklapbaar: zodra je klaar bent met blokken
   erbij zetten, is het alleen nog in de weg. */
.toevoegpaneel { padding: 0; }
.toevoegpaneel > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius);
}
.toevoegpaneel > summary::-webkit-details-marker { display: none; }
.toevoegpaneel > summary:hover { background: #fafbfc; }
.toevoegpaneel[open] > summary { border-bottom: 1px solid var(--border-zacht); border-radius: var(--radius) var(--radius) 0 0; }
.toevoegpaneel .veldhint { margin: 0; }
.paneelkop { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.paneelinhoud { padding: 16px; }

/* Kiezen wát je toevoegt: kaartjes in plaats van een keuzelijst, zodat je in
   één oogopslag ziet wat er te halen valt. */
/* Sinds de uitleg als tekstballon op de kaart staat en niet meer als alinea
 * erin, hoeven de kaarten niet meer zo breed: er passen er meer naast elkaar en
 * de hele lijst is in één blik te overzien. */
.soortkaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.soortkaart { cursor: pointer; }
.soortkaart input { position: absolute; opacity: 0; pointer-events: none; }

.soortinhoud {
    display: block;
    height: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    transition: border-color .12s ease, background .12s ease;
}
.soortkaart:hover .soortinhoud { border-color: #cfd4dc; }
.soortkaart input:checked + .soortinhoud {
    border-color: var(--accent);
    background: var(--accent-licht);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.soortkaart input:focus-visible + .soortinhoud { outline: 2px solid var(--accent); outline-offset: 2px; }

.soortkop {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
}

/* De i achteraan de kaart: laat zien dát er uitleg is, zonder de kaart drie
 * regels langer te maken. De tekst zelf staat als tekstballon op de kaart en
 * daarnaast verborgen in de opmaak, zodat een schermlezer hem wél voorleest. */
.soortinfo { margin-left: auto; display: grid; place-items: center; color: var(--muted); }
.soortkaart:hover .soortinfo,
.soortkaart input:checked + .soortinhoud .soortinfo { color: var(--accent); }


/* Labels aanvinken: chips die je aantikt. Op een telefoon zijn dat prettige
   trefvlakken; met eenentwintig labels is een keuzelijst dat niet. */
.chipveld { margin-bottom: 14px; }
.chipveld:last-child { margin-bottom: 0; }

.chipkop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.chipkop label { font-size: 13px; font-weight: 600; margin: 0; }
.chipacties { display: flex; align-items: center; gap: 10px; }
.chipacties input[type="search"] {
    width: 130px;
    padding: 4px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }

.chip span {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    line-height: 1.35;
    color: var(--muted);
    user-select: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover span { border-color: var(--label-color, var(--accent)); color: var(--text); }
.chip input:checked + span {
    background: var(--label-color, var(--accent));
    border-color: var(--label-color, var(--accent));
    color: #fff;
    font-weight: 600;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.toevoegknoppen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toevoegknoppen .veldhint { flex: 1 1 220px; }

.blokkenkop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 22px 0 10px;
}
.blokkenkop h2 { margin: 0; font-size: 15px; }
.blokkenkop .veldhint { margin: 0; }
.leegmelding {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #fafbfc;
    color: var(--muted);
    font-size: 13px;
}

/* Eén blok: ingeklapt één regel, uitgeklapt de instellingen. Met twintig
   blokken is dat het verschil tussen een overzicht en eindeloos scrollen. */
details.indelingblok {
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 8px;
    background: var(--surface);
}
details.indelingblok > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    border-radius: 8px;
}
details.indelingblok > summary::-webkit-details-marker { display: none; }
details.indelingblok > summary:hover { background: #fafbfc; }
details.indelingblok[open] > summary { border-bottom: 1px solid var(--border-zacht); border-radius: 8px 8px 0 0; }

.bloknaam {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}
.bloktitel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wat er in het blok staat, zonder het open te klappen. */
.bloksamenvatting {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}
.minichip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--label-color, var(--muted));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
.minichip.alle { background: transparent; color: var(--muted); border: 1px solid var(--border); font-weight: 500; }
.regeltelling { color: var(--muted); font-size: 12px; }

.blokvelden { padding: 12px 14px 14px; }
.veldrij .veld.smal { flex: 0 0 130px; }

/* De greep: drie streepjes, groot genoeg om met een vinger te pakken. */
.blokgreep {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    flex: 0 0 auto;
    width: 22px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    cursor: grab;
    touch-action: none;   /* anders scrollt de pagina mee tijdens het slepen */
}
.blokgreep span { display: block; height: 2px; border-radius: 1px; background: #c2c8d0; }
.blokgreep:hover { background: var(--border-zacht); }
.blokgreep:hover span { background: var(--muted); }

details.indelingblok.sleept {
    opacity: .95;
    border-color: var(--accent);
    box-shadow: var(--schaduw-op);
}
details.indelingblok.sleept .blokgreep { cursor: grabbing; }
body.bezig-slepen { cursor: grabbing; user-select: none; }

@keyframes blokerbij {
    from { background: var(--accent-licht); border-color: var(--accent); }
    to   { background: var(--surface); border-color: var(--border); }
}
details.indelingblok.nieuw { animation: blokerbij .9s ease-out; }

.onderdeelknoppen button {
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
}
.onderdeelknoppen button:hover { color: var(--text); border-color: #cfd4dc; }
.onderdeelknoppen .blok-verwijderen { color: var(--danger); font-size: 15px; }
.onderdeelknoppen .blok-verwijderen:hover { border-color: var(--danger); color: var(--danger); }

html:not(.heeft-js) .blokgreep,
html:not(.heeft-js) .sleephint,
html:not(.heeft-js) .soortkaarten,
html:not(.heeft-js) #labelkiezer,
html:not(.heeft-js) .toevoegknoppen { display: none; }

@media (max-width: 720px) {
    .bloksamenvatting { display: none; }   /* op een telefoon is de kop al vol */
    .veldrij .veld.smal { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    details.indelingblok.nieuw { animation: none; }
    .soortinhoud, .chip span { transition: none; }
}

/* --- Offerteregels: de extra kolommen ------------------------------------- */

.regeltabel .kolom-sku        { width: 90px; }
.regeltabel .kolom-frequentie { width: 130px; }
/* 165 en niet 120: onder het bedrag staat sinds kort de reden voor de korting,
   en die viel op 120px al na twee woorden weg. */
.regeltabel .kolom-korting    { width: 165px; }

.regeltabel .sku { width: 100%; font-size: 13px; }
.regeltabel select { width: 100%; font-size: 13px; padding: 5px 6px; }

/* Bedrag en eenheid naast elkaar in één cel: "10" en "%". */
.kortingveld .getal { width: 100%; }

.regeltabel input:disabled {
    background: #f5f6f8;
    color: var(--muted);
    cursor: not-allowed;
}

.regeltotalen .eind + div { margin-top: 4px; }

/* --- Lijsten: tabbladen, balk en tabel ------------------------------------ */

/* De opgeslagen weergaven boven een lijst.
 *
 * Twee eerdere pogingen: eerst tabbladen aan een onderlijn (de inactieve waren
 * kale tekst en zweefden), daarna vierkante blokken (log, en het blok gaapte
 * open door ruimte die voor de knopjes werd vrijgehouden).
 *
 * Nu: compacte pillen. De actieve is gevuld met de accentkleur, de rest is wit
 * met een randje. De ster en het kruisje staan er altijd, licht uitgegrijsd —
 * dan hoeft er geen ruimte vrijgehouden te worden en springt er ook niets als
 * je erover gaat.
 */
.lijstkop {
    margin: -4px 0 14px;
}

.weergaven {
    display: flex;
    /* stretch en niet center: dan zijn alle pillen even hoog, ook de ronde +
       die geen tekstregel heeft om zijn hoogte aan te ontlenen. */
    align-items: stretch;
    gap: 6px;
    flex-wrap: wrap;
}

.weergave {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 0 6px 0 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    transition: border-color .12s, background-color .12s, box-shadow .12s;
}

/* Twee vormen in één rij: "Alle contactpersonen" ís een link met de klasse
   erop, de opgeslagen weergaven zijn een omhulsel met een link erin. Beide
   moeten hier langs, anders houdt er eentje zijn eigen kleur en staat er
   donkere tekst op een gevulde pil. */
.weergave > a,
a.weergave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px 5px 13px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
}
.weergave > a:hover, a.weergave:hover { text-decoration: none; }

/* Een pil zonder knopjes ernaast houdt zijn ruimte rechts. */
.weergave > a:last-child { padding-right: 9px; }
a.weergave { padding-right: 13px; }

.weergave:hover {
    border-color: #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

/* De actieve is gevuld: in één oogopslag zie je welke lijst je voor je hebt. */
.weergave.actief {
    border-color: var(--accent);
    background: var(--accent);
}
.weergave.actief > a,
a.weergave.actief { color: #fff; font-weight: 600; }

.weergave .telling {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--border-zacht);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.weergave.actief .telling { background: rgba(255, 255, 255, .2); color: #fff; }

/* De ster en het kruisje. Altijd zichtbaar maar bleek: zo springt de breedte
   niet als je erover gaat, en gaapt de pil ook niet open door ruimte die voor
   iets onzichtbaars wordt vrijgehouden. */
.weergave .standaardknop button,
.weergave .verwijderform button {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: .45;
    transition: opacity .12s, color .12s, background .12s;
}

.weergave:hover .standaardknop button,
.weergave:hover .verwijderform button,
.standaardknop button:focus-visible,
.verwijderform button:focus-visible,
.standaardknop button.aan { opacity: 1; }

.weergave .standaardknop button { color: #b8c1cc; }
.weergave .standaardknop button:hover { background: #fdf3e0; color: #d9a441; }
.weergave .standaardknop button.aan { color: #d9a441; }

.weergave .verwijderform button { color: var(--muted); }
.weergave .verwijderform button:hover { background: #fbeceb; color: var(--danger); }

/* Op de gevulde pil moeten de knopjes wit zijn, anders vallen ze weg. */
.weergave.actief .standaardknop button,
.weergave.actief .verwijderform button { color: rgba(255, 255, 255, .75); opacity: .85; }
.weergave.actief .standaardknop button.aan { color: #ffd479; opacity: 1; }
.weergave.actief .verwijderform button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.weergave.actief .standaardknop button:hover { background: rgba(255, 255, 255, .18); color: #ffd479; }

.weergave .gedeeld { color: var(--accent); font-weight: 700; }

/* Het potloodje om een weergave aan te passen. Zelfde maat en zelfde bleekheid
   als de ster en het kruisje ernaast. */
.weergavebewerk { position: relative; display: inline-flex; }
.weergavebewerk > summary {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
    list-style: none;
    opacity: .45;
    transition: opacity .12s, color .12s, background .12s;
}
.weergavebewerk > summary::-webkit-details-marker { display: none; }
.weergave:hover .weergavebewerk > summary,
.weergavebewerk[open] > summary { opacity: 1; }
.weergavebewerk > summary:hover { background: var(--accent-licht); color: var(--accent); }

.weergave.actief .weergavebewerk > summary { color: rgba(255, 255, 255, .75); opacity: .85; }
.weergave.actief .weergavebewerk > summary:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* Het paneeltje hangt onder de pil en niet eronder ingeklemd: het is breder
   dan de pil zelf. */
.weergavebewerk > .bewaarform { top: calc(100% + 6px); left: auto; right: -6px; }

/* De + om de huidige filters te bewaren, even hoog als de tabbladen. */
.weergave.bewaren { position: relative; padding: 0; }
.weergave.bewaren > summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 100%;
    padding: 0;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    font-size: 14px;
}
.weergave.bewaren.metwoord > summary {
    grid-auto-flow: column;
    width: auto;
    gap: 6px;
    padding: 0 12px;
}
.weergave.bewaren > summary::-webkit-details-marker { display: none; }
.weergave.bewaren > summary:hover { color: var(--accent); }
.weergave.bewaren[open] > summary { background: var(--accent-licht); color: var(--accent); }

.bewaarform {
    display: block;
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    width: 290px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--schaduw-op);
}
.bewaarform label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.bewaarform input[type="text"] { width: 100%; margin-bottom: 10px; }
.bewaarform label.aankruis {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 12px; font-weight: 400; color: var(--muted);
}

/* De balk met zoeken, filters en knoppen eronder. */
.lijstbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.lijstbalk .filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 420px; }
.lijstacties { display: flex; align-items: center; gap: 8px; }

/* Het zoekveld met het vergrootglas erin. */
.lijstbalk .zoekveld { position: relative; display: flex; align-items: center; flex: 1 1 260px; }
.lijstbalk .zoekveld .icoon {
    position: absolute;
    left: 10px;
    color: var(--muted);
    pointer-events: none;
}
.lijstbalk .zoekveld input { width: 100%; padding-left: 32px; }

/* Het rondje met initialen voor een naam. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: hsl(var(--tint, 210) 45% 92%);
    color: hsl(var(--tint, 210) 55% 32%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: none;
}
.avatar.leeg { background: var(--border-zacht); color: var(--muted); }

td.naamcel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
td.naamcel > a { font-weight: 500; }
td.naamcel .labelrij { flex-basis: 100%; }

/* Paginering met nummers. */
.paginering .nummers { display: flex; align-items: center; gap: 2px; }
.paginering .nummers a,
.paginering .nummers .nu {
    min-width: 28px;
    padding: 4px 7px;
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.paginering .nummers a:hover { background: var(--border-zacht); text-decoration: none; }
.paginering .nummers .nu { background: var(--accent); color: #fff; font-weight: 600; }
.paginering .gat { padding: 0 2px; color: var(--muted); }
.paginering .tel { margin-left: auto; color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
    .paginering .nummers { display: none; }
}

/* De labelkolom: pillen naast elkaar, niet onder de naam door. */
.kolom-label { width: 1%; }
td.labelcel { white-space: nowrap; }
td.labelcel .pill + .pill { margin-left: 4px; }

td.naamcel { flex-wrap: nowrap; }
td.naamcel .merk { flex: 0 0 auto; }

/* Ophalen uit HubSpot: de drie knoppen naast elkaar. */
.ophaalknoppen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Een balk zonder bekend eindpunt: we weten pas hoeveel er is als het er is. */
.balk.onbepaald span {
    width: 35%;
    animation: schuiven 1.4s ease-in-out infinite;
}
@keyframes schuiven {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .balk.onbepaald span { animation: none; width: 100%; opacity: .4; }
}

/* Een formulier in een kolommenopzet.
 *
 * .formulier houdt een breedtegrens van 560px aan, zodat een lange rij velden
 * op een leeg scherm niet uitrekt tot een meter breed. Staat het formulier ín
 * een kolom, dan bepaalt het raster de breedte al en werkt die grens averechts:
 * er bleef een gat van een kwart scherm tussen de twee kolommen staan, en het
 * leek twee losse pagina's naast elkaar. Dit is de derde pagina waar dat
 * misging, vandaar hier voor alle kolommenpagina's tegelijk.
 *
 * Als afstammeling en niet als direct kind: het formulier hangt niet overal
 * even diep. Op de mailpagina is het formulier zelf de kaart, op de
 * HubSpot- en importpagina staat het in een <section class="block"> — met
 * .columns > div > .formulier bleven die twee alsnog op 560px staan. */
.columns .formulier { max-width: none; }

/* Twee kaarten onder elkaar in dezelfde kolom houden dezelfde tussenruimte
   als tussen de kolommen zelf. */
.columns > div { display: grid; gap: 16px; align-content: start; }

.beheerkolommen { max-width: 1320px; }

/* --- Documentopmaak: instellingen links, voorbeeld rechts ------------------ */

/* Het logo, de bestandskiezer en de uitleg horen bij elkaar en in de
   veldkolom. Als losse kinderen van het veld plaatste het raster ze om en om
   links en rechts, en stak de knop uit onder de labels. */
/* Onder elkaar met flex en niet met grid: dit blok is zelf ook een onderdeel
   van het veldraster, en dan komt het sporenpatroon van dat raster erin terug —
   het logo en de knop stonden naast elkaar in plaats van onder elkaar. */
.logokiezer {
    grid-column: 2;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 8px;
}
.logokiezer img { max-height: 60px; }
.logokiezer .veldhint { margin: 0; }
.formulier .logokiezer input[type="file"] { width: 100%; }

.opmaakraster {
    display: grid;
    /* De instellingen krijgen een vaste, leesbare breedte; het voorbeeld de
       rest. Twee gelijke kolommen maakten de invoervelden onnodig breed en het
       voorbeeld onnodig smal — terwijl je juist naar dat voorbeeld kijkt. */
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.opmaakvoorbeeld {
    position: sticky;
    top: 16px;
}
.voorbeeldkop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.opmaakvoorbeeld iframe {
    width: 100%;
    height: 760px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f0f2f5;
}
.opmaakvoorbeeld .veldhint { margin-top: 8px; }

@media (max-width: 1100px) {
    .opmaakraster { grid-template-columns: minmax(0, 1fr); }
    .opmaakvoorbeeld { position: static; }
    .opmaakvoorbeeld iframe { height: 560px; }
}

/* --- Voorbeeld van de offerte, in een venster ------------------------------ */

/* Waarom een <dialog> en geen eigen constructie: Esc sluiten, de achtergrond,
   en het vasthouden van de toetsaandacht krijg je dan van de browser. Dat is
   precies het soort ding dat je zelf nooit helemaal goed krijgt. */
.voorbeeldvenster {
    /* Ruim, want dit is de pagina van de klant en die is gemaakt voor een
       browservenster — niet voor een vel papier. */
    width: min(1080px, calc(100vw - 32px));
    max-width: none;
    height: min(92vh, 1300px);
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 12px 44px rgba(16, 24, 40, .26);
    color: var(--text);
    overflow: hidden;
}

/* Een dialog staat op display: none tot showModal(); vandaar de open-stand. */
.voorbeeldvenster[open] { display: flex; flex-direction: column; }

.voorbeeldvenster::backdrop { background: rgba(16, 24, 40, .45); }

/* De pagina eronder op slot zolang het venster open staat: anders schuift die
   mee zodra je in het voorbeeld scrolt, en sta je bij het sluiten ergens anders.

   Afgeleid uit de stand van het venster zelf, en niet uit een klasse die de JS
   erop en eraf zet. Dat laatste hing aan het "close"-bericht, en dat komt niet
   altijd op tijd aan — in een tabblad op de achtergrond bleef de pagina dan op
   slot staan. Zo kan het niet uit de pas lopen. */
body:has(.voorbeeldvenster[open]) { overflow: hidden; }

.voorbeeldbalk {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: none;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}
.voorbeeldbalk h2 { margin: 0; font-size: 15px; }

/* Zodat niemand denkt dat dit al bij de klant ligt. */
.voorbeeldbij { color: var(--muted); font-size: 12px; }

/* Duwt de knoppen naar rechts en houdt de melding ernaast leesbaar. */
.voorbeeldstand {
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
}

.voorbeeldsluit {
    border: 0;
    background: none;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}
.voorbeeldsluit:hover { color: var(--text); }

/* De enige plek waar geschoven wordt. Het venster erin krijgt de volle hoogte
   van de pagina mee, dus dat heeft geen eigen schuifbalk. */
.voorbeeldruimte {
    flex: 1;
    /* Altijd een verticale schuifbalk, ook als hij niet nodig is. Met "auto"
       verschijnt hij zodra de pagina langer wordt, en dan wordt de ruimte
       ineens smaller — waarop de pagina anders loopt en weer een andere hoogte
       krijgt. Deze regel haalt die wisselwerking eruit. */
    overflow-y: scroll;
    overflow-x: hidden;
    background: var(--bg);
}

/* De pagina van de klant loopt gewoon mee met de breedte die hij krijgt; er
   valt hier niets te schalen. Alleen de hoogte zet de JS. */
.voorbeeldkader {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
}

/* Alleen zichtbaar bij een offerte die niet in het Nederlands is; dan wil je
   het meteen zien. */
.taalpil { background: var(--accent-licht); color: var(--accent); }

/* --- Ondertekenaar zoeken tussen de contactpersonen ------------------------ */

/* Aan de body en niet in de tabelcel: een cel knipt af, en dan zie je de helft
   van de lijst niet. De plek wordt door de JS gezet. */
.tekenaarkeuzes {
    position: absolute;
    z-index: 70;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--schaduw-op);
}

.tekenaarkeuzes li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.tekenaarkeuzes li:hover,
.tekenaarkeuzes li.aan { background: var(--accent-licht); }

.tekenaarkeuzes strong { font-weight: 600; }

/* Het mailadres eronder, over de volle breedte. */
.tekenaarkeuzes .bij {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 12px;
}

/* --- Bedrijf opzoeken bij de KvK ------------------------------------------- */

.kvkzoek { position: relative; }

.kvkkeuzes {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 2px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--schaduw-op);
}

/* Een knop en geen div: hiermee kom je er ook met het toetsenbord doorheen. */
.kvkkeuzes button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.kvkkeuzes button:hover,
.kvkkeuzes button:focus { background: var(--accent-licht); }

.kvkkeuzes strong { display: block; font-weight: 600; font-size: 14px; }
.kvkkeuzes .bij { display: block; color: var(--muted); font-size: 12px; }

.kvkstand:empty { display: none; }

/* De waarschuwing dat we in de proefomgeving zitten. Opvallend genoeg om te
   zien vóórdat je gaat zoeken, want anders lijkt "niets gevonden" een storing. */
.kvkproef {
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid #f0d9a0;
    border-left: 3px solid #d99b1c;
    border-radius: 6px;
    background: #fdf8ec;
    color: #6b5115;
    font-size: 13px;
    line-height: 1.5;
}

.kvkproef code {
    background: #f6ecd4;
    padding: 1px 5px;
    border-radius: 3px;
}

.kvkproefactie {
    display: block;
    margin-top: 6px;
    color: #6b5115;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Tweestapsverificatie
   --------------------------------------------------------------------------- */

/* Het codeveld: zes cijfers die je overtypt van een ander scherm. Ruim en met
   spatiëring, zodat je ziet hoeveel je er al hebt staan.

   Met input ervoor, want anders wint de algemene regel voor input[type="text"]
   hierboven en blijft het gewoon een klein veld. */
input.codeinvoer {
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    max-width: 240px;
}

.qrvak {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

/* Een witte ondergrond met wat lucht eromheen: op een gekleurde of donkere
   achtergrond leest een scanner een QR-code een stuk slechter. */
.qrcode {
    background: #fff;
    padding: 10px;
    border: 1px solid var(--rand, #e2e6ee);
    border-radius: 8px;
    line-height: 0;
}

.qrnaast { flex: 1; min-width: 240px; }
.qrnaast p { margin: 0 0 8px; }

.geheimcode {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    letter-spacing: 1px;
    background: #f4f6fa;
    border: 1px solid var(--rand, #e2e6ee);
    border-radius: 6px;
    padding: 8px 10px;
    overflow-wrap: anywhere;
}

.herstelcodes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    list-style: none;
    margin: 16px 0;
    padding: 0;
}

.herstelcodes li {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    letter-spacing: 1px;
    background: #f4f6fa;
    border: 1px solid var(--rand, #e2e6ee);
    border-radius: 6px;
    padding: 9px 12px;
    text-align: center;
}

.waarschuwing {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #f0d9a0;
    border-left: 3px solid #d99b1c;
    border-radius: 6px;
    background: #fdf8ec;
    color: #6b5115;
    font-size: 13px;
    line-height: 1.55;
}

.statusaan {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1f7a44;
}

.apparatenlijst { list-style: none; margin: 6px 0 12px; padding: 0; font-size: 14px; }
.apparatenlijst li { padding: 6px 0; border-bottom: 1px solid var(--rand, #e2e6ee); }
.apparatenlijst li:last-child { border-bottom: none; }
.apparatenlijst .bij { color: var(--muted); font-size: 12px; margin-left: 6px; }

.stilformulier { display: inline-block; margin: 0 8px 0 0; }

.uitklap { margin-top: 16px; }
.uitklap summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.uitklap[open] summary { margin-bottom: 10px; }

/* ---------------------------------------------------------------------------
   Dashboard: doelen, conversie en de cijfers per medewerker
   --------------------------------------------------------------------------- */

/* Vier cijfers naast elkaar in plaats van drie; op een smal scherm wikkelen ze
   netjes door in plaats van de kaart open te duwen. */
.kerncijfers.vier { flex-wrap: wrap; gap: 20px 32px; }
.kerncijfers.vier > div { min-width: 120px; }

.doelenlijst { list-style: none; margin: 0; padding: 0; }
.doelenlijst > li + li { margin-top: 18px; }

.doelkop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
}

.doelnaam { display: flex; align-items: center; gap: 7px; font-weight: 500; }

.doelcijfer { font-variant-numeric: tabular-nums; white-space: nowrap; }
.doelcijfer .bij { color: var(--muted); font-size: 13px; }
.doelcijfer.gehaald { color: var(--ok); font-weight: 600; }

/* De balk zit al in de stylesheet; hier alleen de maat en de kleur als het
   doel gehaald is. */
.doelenlijst .balk { margin: 8px 0 4px; }
.doelenlijst .balk span.gehaald { background: var(--ok); }

.doelbij { margin: 0; font-size: 13px; color: var(--muted); }

/* Een gekleurd rondje voor het label, zoals de pillen elders. */
.stip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--label-color, var(--muted));
    flex: 0 0 auto;
}

.blokkopje {
    margin: 20px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Het invoerveld voor een bedrag, met het euroteken ervoor in plaats van erin:
   zo blijft het veld leeg als er niets ingevuld is. */
.bedragveld { display: flex; align-items: center; gap: 8px; }
.bedragveld > span { color: var(--muted); font-size: 15px; }
.bedragveld input { max-width: 180px; text-align: right; font-variant-numeric: tabular-nums; }

.doelenraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px 24px;
}

.doelenraster label { display: flex; align-items: center; gap: 7px; }

/* De filterbalk boven het dashboard. Dezelfde onderdelen als boven een lijst,
   maar met de knoppen op één regel ernaast in plaats van eronder. */
.filterblok .veldrij { align-items: flex-end; }
.filterblok .knopveld { display: flex; gap: 8px; align-items: center; }
.filterblok .knopveld label { display: none; }

/* De kruistabel: bedragen per label tegen de fases. Cijfers rechts uitgelijnd
   en met vaste cijferbreedte, zodat kolommen onder elkaar leesbaar blijven. */
/* Alleen zo breed als de inhoud. Met width:100% rekt de labelkolom uit tot de
   volle breedte, en dan staat er bij twee kolommen een halve meter niets. */
table.kruistabel { min-width: 0; width: auto; }
table.kruistabel .vast { width: 1%; white-space: nowrap; }
table.kruistabel td.num, table.kruistabel th.num { font-variant-numeric: tabular-nums; }
table.kruistabel td.nul { color: var(--muted); }
table.kruistabel td .bij { margin-left: 6px; font-size: 12px; color: var(--muted); }
table.kruistabel tfoot td { border-top: 2px solid var(--border); font-weight: 600; }

/* De kolomkop van een fase op twee regels: "Suspect" met daaronder klein
   "Contactgegevens relatie zijn bekend". Op één regel is de kop breder dan de
   bedragen eronder, en dan loopt de tabel het scherm uit terwijl er maar een
   handvol cijfers in staat. */
table.kruistabel thead th,
table.kruistabel thead th.num {
    vertical-align: bottom;
    width: auto;
    max-width: 150px;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
}
.fasekop { display: block; font-weight: 600; }
.fasestaart {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}
table.kruistabel tbody .fasekop,
table.kruistabel tbody .fasestaart { text-align: left; }

/* De eerste kolom blijft staan als je zijwaarts schuift; anders weet je niet
   meer bij welk label een bedrag hoort. */
table.kruistabel .vast {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
}
table.kruistabel thead .vast { background: var(--surface); }
table.kruistabel tfoot .vast { background: var(--surface); }

/* --- Het rapportblok ------------------------------------------------------ */

/* De keuzes die bepalen wát je ziet staan bij elkaar in een eigen vlak, apart
   van de filters eronder die alleen bepalen wélke deals meedoen. */
.rapportopdracht {
    margin: 0 0 16px;
    padding: 12px 14px 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--accent-licht);
}
.rapportopdracht select { background-color: var(--surface); }
.rapportopdracht .veldrij:last-of-type { margin-bottom: 0; }
.rapportopdracht .veldhint { margin: 6px 0 0; }

/* Staafjes: naam en bedrag boven de balk, de balk zelf op volle breedte. Een
   liggende balk in plaats van een staande, want de namen van labels en
   accountmanagers passen staand niet onder elkaar. */
.rapportbalken { list-style: none; margin: 0; padding: 0; }
.rapportbalken li { margin-bottom: 12px; }
.rapportbalken li:last-child { margin-bottom: 0; }

.rapportregel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 14px;
}
.rapportnaam {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rapportgetal {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Het stipje voor een label, in de kleur van dat label. */
.rapportnaam .stip {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--label-color, var(--accent));
}

.rapportbalk {
    display: flex;
    height: 10px;
    border-radius: 5px;
    background: var(--border-zacht);
    overflow: hidden;
}
.rapportbalk .segment { display: block; height: 100%; min-width: 2px; }

/* Acht kleuren voor de segmenten van een gestapelde balk. Ze lopen van het
   accentblauw naar warm, zodat naast elkaar liggende segmenten uit elkaar te
   houden zijn — ook op een scherm dat kleur slecht weergeeft, want ze
   verschillen ook in helderheid. */
.segment.kleur1 { background: #1f4e79; }
.segment.kleur2 { background: #2e7d5b; }
.segment.kleur3 { background: #4a7fb5; }
.segment.kleur4 { background: #b8862e; }
.segment.kleur5 { background: #6d5ba8; }
.segment.kleur6 { background: #3aa3a0; }
.segment.kleur7 { background: #b8362e; }
.segment.kleur8 { background: #8a94a3; }

.rapportlegenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--muted);
}
.rapportlegenda li { display: flex; align-items: center; gap: 6px; }
.rapportlegenda .segment {
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

/* De trechter: dezelfde regels als de staafjes, maar de balk staat in het
   midden zodat de rij samen een trechtervorm heeft, en er staat tussen elke
   twee stappen hoeveel procent er doorstroomt. */
.trechter { list-style: none; margin: 0; padding: 0; }
.trechter li { margin-bottom: 10px; }
.trechter li:last-child { margin-bottom: 0; }

.trechterregel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 14px;
}
.trechternaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trechtergetal {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.trechtergetal .bij {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--accent-licht);
    color: var(--accent);
    font-weight: 600;
}

.trechterbalk { display: flex; justify-content: center; }
.trechterbalk span {
    display: block;
    height: 24px;
    border-radius: 4px;
    background: var(--accent);
}

.doorstroom {
    margin: 5px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* De keuzes in het toevoegpaneel horen zichtbaar bij het blok dat je koos, en
   niet als losse velden onder de kaarten te zweven. */
.toevoegkeuzes-kop {
    margin: 4px 0 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-zacht);
    font-size: 13px;
    color: var(--muted);
}
.toevoegkeuzes-kop strong { color: var(--text); }

.paneelinhoud .rapportopdracht { margin-bottom: 14px; }

/* Een zoeklijst die uitstaat — een subtype zonder gekozen type — hoort er ook
   uit te zien alsof je er niets mee kunt. */
.keuzelijst.uitgeschakeld { opacity: .55; }
.keuzelijst.uitgeschakeld .kl-invoer { background: var(--border-zacht); cursor: not-allowed; }

/* Adressuggesties onder het adresveld. Zelfde vorm als de KvK-keuzes, zodat
   het één ding lijkt en niet twee. */
.veld[data-adreszoek] { position: relative; }

.adreskeuzes {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--schaduw-op);
}
.adreskeuzes li {
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.adreskeuzes li:hover,
.adreskeuzes li.actief { background: var(--accent-licht); }

.adresstand { margin: 4px 0 0; min-height: 18px; }

/* --- Cashregistratie ------------------------------------------------------ */

/* Per label: naam links, bedragen rechts, en eronder een staafje voor de
   verhouding. Liggend, want labelnamen passen staand niet onder elkaar. */
.cashlabels { list-style: none; margin: 0; padding: 0; }
.cashlabels li { margin-bottom: 14px; }
.cashlabels li:last-child { margin-bottom: 0; }

.cashregel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 5px;
    font-size: 14px;
}
.cashnaam { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cashnaam .bij { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cashgetallen {
    display: flex;
    align-items: baseline;
    gap: 14px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cashgetallen .binnen { color: var(--ok); }
.cashgetallen .eruit { color: var(--danger); font-size: 13px; }

.cashbalk {
    display: flex;
    height: 8px;
    margin-top: 3px;
    border-radius: 4px;
    background: var(--border-zacht);
    overflow: hidden;
}
.cashbalk span { display: block; height: 100%; min-width: 2px; border-radius: 4px; }
.cashbalk .in { background: var(--ok); }
.cashbalk .uit { background: var(--danger); }

/* --- De feedbackknop rechtsonder ------------------------------------------
 *
 * Staat er alleen de eerste tijd, uit te zetten bij de mailinstellingen.
 *
 * Weer een <details> en geen script: opengaan kan de browser zelf, en de CSP
 * laat losse JavaScript niet toe. Dat betekent ook dat hij het doet als er een
 * script niet laadt — juist een knop om te melden dat er iets stuk is, moet
 * blijven werken als er iets stuk is.
 */
.feedbackknop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
}

.feedbackknop summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--menu-achtergrond, #16202c);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    box-shadow: 0 6px 20px rgba(16, 26, 38, .28);
    transition: transform .12s, box-shadow .12s;
}
.feedbackknop summary::-webkit-details-marker { display: none; }
.feedbackknop summary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16, 26, 38, .34); }
.feedbackknop summary .icoon { opacity: .85; }

/* Open: het venster hangt boven de knop, met de knop eronder in beeld. */
.feedbackvenster {
    position: absolute;
    right: 0;
    bottom: 52px;
    width: min(360px, calc(100vw - 40px));
    /* Ook als er iets in staat dat niet wil afbreken: het venster rekt niet op. */
    max-width: calc(100vw - 40px);
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(16, 26, 38, .22);
}

.feedbackvenster > * { min-width: 0; }
.feedbackvenster h2 { margin: 0; font-size: 15px; }
.feedbackvenster textarea { width: 100%; resize: vertical; }

/* --- Een schermafbeelding bij de feedback -------------------------------- */

/* Het venster is smal; bij een afbeelding erbij mag het meegroeien, anders is
   het voorbeeld een postzegel waarop je niets kunt markeren. */
.feedbackvenster:has([data-beeldvoorbeeld]:not([hidden])) {
    width: min(520px, calc(100vw - 40px));
}

/* Sleep je een bestand over het venster, dan hoort dat te zien te zijn. */
.feedbackvenster.sleep {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .13);
}

.feedbackbeeld { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* Het bestandsveld zelf uit beeld, maar niet uit de toetsenbordvolgorde: met
   tab kom je er nog gewoon op en met enter open je de bestandskiezer. */
.feedbackbeeldknop { position: relative; cursor: pointer; }

.feedbackbeeldknop input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.feedbackbeeldknop span {
    display: block;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

/* De opnameknop is een echte knop en geen label om een bestandsveld heen; de
   standaardopmaak van een knop moet er dan af om er hetzelfde uit te zien. */
button.feedbackbeeldknop {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
}

.feedbackbeeldknop:hover span { border-color: var(--accent); color: var(--text); }
.feedbackbeeldknop:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }
.feedbackbeeldknop input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.feedbackbeeld kbd {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    font: inherit;
    font-size: 11px;
}

.feedbackbeeldvoorbeeld { display: grid; gap: 6px; width: 100%; }

/* crosshair: het nodigt uit om te slepen, en dat is precies wat je hier doet. */
.feedbackbeeldvoorbeeld canvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 40vh;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    cursor: crosshair;
    /* Op een telefoon niet meescrollen terwijl je een kader trekt. */
    touch-action: none;
}

.feedbackbeeldacties { display: flex; gap: 12px; }

.feedbackpagina { margin: 0; font-size: 12px; color: var(--muted); }
.feedbackpagina code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--hover, #f1f3f6);
    font-size: 11.5px;
    /* Een lang adres hoort af te breken, niet het venster op te rekken. */
    overflow-wrap: anywhere;
}


/* De melding in het feedbackvenster zelf.
 *
 * Met javascript blijf je staan waar je bent; een melding bovenaan de pagina
 * zou je dan niet eens zien. */
.feedbackmelding {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.feedbackmelding.gelukt { color: var(--ok, #1c7c4c); }
.feedbackmelding.mis { color: var(--fout, #b3261e); }

.feedbackvoet { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feedbackvoet .bij { font-size: 11.5px; color: var(--muted); }

/* Op een telefoon van rand tot rand: een venster van 360 breed past daar niet
   naast de knop, en dan valt de helft buiten beeld. */
@media (max-width: 700px) {
    .feedbackknop { right: 12px; bottom: 12px; }

    .feedbackvenster {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: 64px;
        width: auto;
    }
}

/* Bij het printen van een offerte heeft niemand iets aan een zwevende knop. */
@media print {
    .feedbackknop { display: none; }
}

/* --- Alles in één keer overzetten uit HubSpot ------------------------------ */
.allesophalen { margin: 4px 0 18px; }
.allesophalen .veldhint { margin-top: 8px; max-width: 68ch; }

.btn.groot { padding: 12px 20px; font-size: 15px; gap: 9px; }

/* "Stap 3 van 7 — Deals" boven de voortgangsbalk. Zonder dit staat er tien
   minuten lang alleen "bezig" en weet je niet of je halverwege bent. */
.reeksstap {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Waar je inlogt: de apparatenlijst op je profiel ---------------------- */
.inlogapparaten { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.inlogapparaten li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 2px;
    border-top: 1px solid var(--border);
}
.inlogapparaten li:first-child { border-top: 0; }
.inlogapparaten strong { font-weight: 600; font-size: 13.5px; }
.inlogapparaten .bij { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* Het apparaat waar je nu op zit. Zonder dit is een lijst met vier keer
   "Windows — Chrome" niet te gebruiken. */
.merk-nu {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ok-zacht, #e7f4ec);
    color: var(--ok, #1c7c46);
    font-size: 11px;
    font-weight: 600;
}

/* --- Meerdere records tegelijk bewerken ----------------------------------- */
.vinkkolom { width: 34px; padding-right: 0; }
.vinkkolom input { width: 15px; height: 15px; cursor: pointer; }

/* De balk hangt onderaan in beeld zolang er iets aangevinkt staat. Niet in de
   pagina meelopend: bij vijftig regels scroll je hem anders voorbij en zoek je
   waar de knoppen gebleven zijn. */
.bulkbalk {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    /* Alles links bij elkaar en niet uit elkaar getrokken: rechtsonder zweeft
       de feedbackknop, en met space-between schoof de laatste knop daar precies
       onder. */
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(16, 26, 38, .16);
}
.bulkbalk[hidden] { display: none; }

.bulktelling { margin: 0; font-size: 13px; color: var(--muted); }
.bulktelling strong { color: var(--text); font-variant-numeric: tabular-nums; }

.bulkacties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Ruimte voor de zwevende feedbackknop rechtsonder. */
@media (min-width: 701px) {
    .bulkbalk { padding-right: 160px; }
}
.bulkactie { display: flex; align-items: center; gap: 6px; }
.bulkactie select { min-width: 150px; }

@media (max-width: 700px) {
    .bulkbalk { flex-direction: column; align-items: stretch; }
    .bulkactie select { flex: 1; min-width: 0; }
}

/* --- Lijsten op een telefoon ----------------------------------------------
 *
 * Een tabel met acht kolommen past niet op 390 pixels. Elke rij wordt daarom
 * een kaartje: de naam bovenaan, daaronder de rest met het kopje van de kolom
 * ervoor. Die kopjes zet lijstmobiel.js als data-label op de cel — CSS kan een
 * <th> verderop niet lezen.
 */
@media (max-width: 700px) {
    .lijsttabel,
    .lijsttabel thead,
    .lijsttabel tbody,
    .lijsttabel tr,
    .lijsttabel td { display: block; width: auto; }

    /* De kop verdwijnt: hij staat nu bij elke waarde. Niet display:none op de
       hele thead-rij maar erbuiten geplaatst, zodat sorteerlinks bereikbaar
       blijven voor wie met een schermlezer werkt. */
    .lijsttabel thead { position: absolute; left: -9999px; }

    .lijsttabel tbody tr {
        position: relative;
        margin: 0 0 10px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
    }

    .lijsttabel td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 4px 0;
        border: 0;
        text-align: left;
    }

    .lijsttabel td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11.5px;
        color: var(--muted);
    }

    /* De naam is de kaart: groot, zonder kopje ervoor, met een streepje eronder.
       Twee keuzes, want in lijsten met vinkjes is de eerste cel het vinkje en
       staat de naam er direct achter. */
    .lijsttabel tbody td:first-child:not(.vinkkolom):not(.vink),
    .lijsttabel tbody td.vinkkolom + td,
    .lijsttabel tbody td.vink + td {
        display: block;
        margin: 0 26px 6px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
        font-size: 15px;
        font-weight: 600;
    }
    .lijsttabel tbody td:first-child:not(.vinkkolom):not(.vink)::before,
    .lijsttabel tbody td.vinkkolom + td::before,
    .lijsttabel tbody td.vink + td::before { content: none; }

    /* Een cel zonder inhoud is op een kaartje alleen ruis. */
    .lijsttabel td:empty { display: none; }

    /* Het vinkje in de hoek van de kaart in plaats van als eigen regel erboven.
       Bij taken is dat het rondje waarmee je hem afvinkt. */
    .lijsttabel tbody td.vink,
    .lijsttabel tbody td.vinkkolom {
        position: absolute;
        top: 12px;
        right: 12px;
        width: auto;
        padding: 0;
    }
    .lijsttabel td.vink::before,
    .lijsttabel td.vinkkolom::before { content: none; }

    /* De wikkel hoeft niet meer zijwaarts te schuiven; er valt niets meer af. */
    .tabelwikkel { overflow-x: visible; }

    /* Bedragen en getallen stonden rechts uitgelijnd in hun kolom; op een
       kaartje staan ze al rechts door de verdeling hierboven. */
    .lijsttabel td.num { text-align: right; }
}

/* --- De opvolgregels: welke momenten een taak opleveren ------------------- */
.opvolgregels { display: grid; gap: 2px; margin: 4px 0 18px; }

.opvolgregel {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.opvolgregel:first-child { border-top: 0; }
.opvolgregel .aankruis span { font-weight: 600; font-size: 14px; color: var(--text); }
.opvolgregel .veldhint { margin: 4px 0 0 24px; max-width: 66ch; }

.opvolgtermijn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0 24px;
}
.opvolgtermijn label { font-size: 12px; color: var(--muted); }
.opvolgtermijn input { width: 90px; }

/* De uitweg als een opgeslagen weergave nul regels oplevert. */
.wisfilters { display: inline-block; margin-left: 8px; font-weight: 600; }

/* --- Lange fasenamen in de pipeline --------------------------------------
 *
 * "Suspect - Contactgegevens relatie zijn bekend" brak over drie regels in de
 * kolomkop en duwde alle kaarten omlaag. De volledige naam blijft in de
 * tooltip staan; wie de fase kent heeft aan het eerste stuk genoeg.
 */
.pipeline .kolom h2,
.kolomkop h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* --- Vandaag: wat er nu aandacht nodig heeft ------------------------------ */
.signalen { list-style: none; margin: 0; padding: 0; }

.signaal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 0 12px 14px;
    border-top: 1px solid var(--border);
    border-left: 3px solid transparent;
}
.signaal:first-child { border-top: 0; }

/* De kleur zegt in één oogopslag wat voor soort het is. Rood is bewust alleen
   voor "de klant zit erin": dat is het enige waar minuten toe doen. */
.signaal-heet   { border-left-color: #c0392b; }
.signaal-let-op { border-left-color: #d99323; }
.signaal-goed   { border-left-color: #1f7a44; }
.signaal-stil   { border-left-color: #b6bdc7; }

.signaalwat { min-width: 0; }

.signaalmerk {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--hover, #f1f3f6);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.signaal-heet .signaalmerk { background: #fdecea; color: #c0392b; }

.signaaltitel { font-weight: 600; font-size: 14.5px; }
.signaalregel { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

.signaalbedrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.signaalacties { display: flex; gap: 6px; }
.signaalacties form { display: flex; }

@media (max-width: 700px) {
    .signaal { grid-template-columns: minmax(0, 1fr) auto; }
    .signaalacties { grid-column: 1 / -1; }
}

/* De feedbacklijst onder Beheer.
   Berichten voluit en niet ingeklapt: het zijn er een paar per week en ze zijn
   kort. Een lijst waar je elk item eerst moet openslaan om te zien waar het
   over gaat, lees je niet. */
.feedbacklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feedbacklijst > li {
    border: 1px solid var(--border-zacht);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--kaart, #fff);
}
/* Afgevinkt blijft leesbaar maar zakt naar achteren; doorstrepen zou de tekst
   juist onleesbaar maken en dat is waar je soms voor terugkomt. */
.feedbacklijst > li.af { opacity: .62; }

.feedbackkop {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    margin-bottom: 6px;
}
.feedbackkop .bij { font-size: 12px; color: var(--muted); }
.feedbackkop .feedbackaf { margin-left: auto; }

.feedbacktekst { margin: 0 0 8px; white-space: normal; line-height: 1.5; }

.feedbackbeelden { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.feedbackbeelden img {
    max-height: 150px; max-width: 100%;
    border: 1px solid var(--border-zacht); border-radius: 6px;
    display: block;
}

/* Doorklikken vanaf een rapportblok naar de deals erachter.
 *
 * Bewust rustig: een dashboard waarin elk getal blauw onderstreept staat is
 * niet te lezen. Het getal houdt zijn eigen kleur en krijgt pas bij aanwijzen
 * een streep eronder, zodat je ziet dat er iets achter zit zonder dat het
 * scherm eruitziet als een lijst met links. */
.doorklik {
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
}
.doorklik:hover,
.doorklik:focus-visible {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.kruistabel td.num .doorklik { display: block; }
.kruistabel td.nul .doorklik { color: inherit; }

/* Status plus het merkje "verlopen" in dezelfde cel: naast elkaar, en op een
   smal scherm onder elkaar in plaats van dat er een over de rand valt. */
td.statuscel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

/* Keuzes gegroepeerd per label, met een kopje ervoor.
 *
 * "Labels> dus eerst EMCUP> welke ID partnership> en daar in de status."
 *
 * Zonder kopjes is het één rij van tientallen vakjes en zie je niet welke bij
 * welk label horen. Het kopje staat links, de vakjes ernaast, zodat je in één
 * blik ziet hoe het ingedeeld is. */
.chipgroep {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 6px 10px;
    align-items: start;
    padding: 5px 0;
}
.chipgroep + .chipgroep { border-top: 1px solid var(--rand, #e6e8ec); }
.chipgroepkop {
    font-size: 12px;
    font-weight: 600;
    color: var(--label-color, #5B6472);
    padding-top: 4px;
    overflow-wrap: anywhere;
}
.chipgroep[hidden] { display: none; }

@media (max-width: 640px) {
    .chipgroep { grid-template-columns: 1fr; }
}

/* De filterbalk van de dealslijst, in een dashboardblok.
 *
 * "Wat het moet zijn, is eigenlijk hetzelfde als een filter bij bedrijven /
 *  deals. Dus je kan gewoon helemaal gaan filteren en dan komt wat er uit die
 *  filter komt in het dashboard!"
 *
 * Dezelfde velden als op /deals, maar in een blok dat naast andere blokken
 * staat: iets compacter, met een randje eromheen zodat te zien is waar het
 * filter van dít blok begint en ophoudt. */
.blokfilter {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--surface);
}

/* De filterbalk terugzetten op zijn eigen opmaak.
 *
 * De indeelpagina is een .formulier, en dat zet elk veld in een grid van
 * 106px label + rest, met het label rechts uitgelijnd. Prima voor een
 * bewerkscherm; funest voor een filterbalk, want die staat in een smallere
 * kolom en dan bleef er van elk uitklaplijstje een strookje van vijftig pixels
 * over — "Alle labels" werd "Al". Dat gebeurde stilletjes: de balk stond er,
 * hij deed het, en je kon alleen niet lezen wat je koos.
 *
 * Hier dus terug naar hoe de balk op /deals staat: label erboven, veld op volle
 * breedte, en naast elkaar zolang er ruimte is. */
.blokfilter .veldrij {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}
.blokfilter .veld {
    display: block;
    flex: 1 1 200px;
    min-width: 0;
}
.blokfilter .veld label {
    display: block;
    text-align: left;
    font-size: 12px;
    margin-bottom: 3px;
}
.blokfilter .veld.breed { flex: 1 1 100%; }
.blokfilter .veld.smal { flex: 1 1 150px; }
.blokfilter select,
.blokfilter input,
.blokfilter .keuzeknop { width: 100%; }

/* En het uitklaplijstje zelf mag niet meekrimpen: dat vult de breedte van zijn
   veld, niet die van zijn langste optie. */
.blokfilter .meerkeuze { width: 100%; }
.blokfilter .meerkeuzeknop { width: 100%; }

/* De dealregels in een lijstblok: compacter en met het bedrijf eronder.
 *
 * "kun je zorgen dat dit dashboard overzichtelijker wordt?"
 *
 * Drie blokken vulden 1655 pixels terwijl het scherm er 923 laat zien. Een deel
 * daarvan was de regelhoogte: 48 pixels per deal, met de bedrijfsnaam achter de
 * dealnaam geplakt. Omdat een dealnaam meestal met de bedrijfsnaam begint, las
 * dat als één lange regel waarin je twee keer hetzelfde leest. */
.dealslijstblok td,
.dealslijstblok th { padding-top: 7px; padding-bottom: 7px; }
.dealslijstblok .dealnaam { display: block; }
.dealslijstblok .dealbedrijf {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 1px;
}
.dealslijstblok .fasestaart { display: block; font-size: 11.5px; }

/* Een halve kolom is smal; daar hoeft de datum niet af te breken. */
.dashboardblok:not(.breed) .dealslijstblok td,
.dashboardblok:not(.breed) .dealslijstblok th { white-space: nowrap; }
.dashboardblok:not(.breed) .dealslijstblok .dealcel { white-space: normal; }

/* ---------------------------------------------------------------------------
   De keuze op de opschoonpagina: alleen wat uit HubSpot komt, of alles.
   --------------------------------------------------------------------------- */

/* Twee blokken naast elkaar, allebei even groot. Als radiorondjes op een regel
   las je "Alles" als een detail bij de eerste keuze, terwijl het de knop eronder
   van tienduizend naar zeventigduizend records tilt. */
.omvangkeuze {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 10px;
    margin: 4px 0 18px;
}

.omvangoptie {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 2px 9px;
    padding: 11px 13px;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface);
    cursor: pointer;
}

.omvangoptie:hover { border-color: var(--border-zacht); }
.omvangoptie:has(input:checked) { border-color: var(--accent); background: #f7f9fc; }
.omvangoptie input { margin-top: 2px; }

.omvangnaam { font-weight: 600; font-size: 13.5px; }

/* Onder de naam, niet ernaast: de uitleg is de helft van de keuze. */
.omvangbij {
    grid-column: 2;
    font-size: 12px; line-height: 1.5; color: var(--muted);
}

/* De toelichting achter een naam in de tabel: "de prijslijst; standaard uit".
   Zonder eigen ruimte plakt hij tegen het woord ervoor en lees je "Producten de
   prijslijst" als één naam. */
.tabelwikkel td .bij {
    margin-left: 8px;
    font-size: 11.5px; color: var(--muted);
}

/* Een rij waar in deze stand niets in zit. Niet weghalen — dat het er is en
   leeg is, is ook een antwoord. */
.tabelwikkel tr.uitgezet td { color: var(--muted); }

/* Het vakje waarin je het woord overtypt.
 *
 * Niet in het gewone veldstramien: dat zet het label in een kolom van 106
 * pixels, en dan valt "Typ ALLES WISSEN om te bevestigen" over vier regels uit
 * elkaar — precies de zin die in één oogopslag moet kloppen. */
.bevestigveld { margin: 0 0 14px; }
.bevestigveld label { display: block; margin-bottom: 5px; font-size: 13px; }
.bevestigveld code { white-space: nowrap; }
.bevestigveld input {
    width: 100%; max-width: 22rem;
    padding: 8px 11px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; letter-spacing: .04em;
}
.bevestigveld input:focus { border-color: var(--accent); outline: none; }

/* Wat er blijft staan. Hoort bij een knop die alles weggooit: dat is de vraag
   die je beantwoord wilt zien vóór je hem indrukt, niet erna. */
.blijftstaan {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-zacht); border-radius: 9px;
    background: #f7f8fa;
    font-size: 12.5px;
}

.blijftstaan strong { display: block; margin-bottom: 5px; font-size: 13px; }
.blijftstaan ul { margin: 0; padding-left: 18px; line-height: 1.75; color: var(--muted); }