:root{
  --charcoal:#0B0D0F; --graphite:#1F2937; --steel:#6B7280; --light:#E5E7EB;
  --offwhite:#F8F9FA; --oranje:#FF6A00; --oranje-rgb:255,106,0; --oranje-tekst:#b34900; --papier:#ECEDEE; --kaartrand:#E2E4E6;
  --menu:#0B0D0F; --menu-tekst:#F8F9FA; --menu-zacht:#8b939d; --menu-icoon:#6c757f; --menu-vlak:#141a20; --menu-rand:#1c242c; --menu-actief:#171d24; --menu-label:#59626c;
  --donkerrand:#1c242c; --donkervlak:#141a20; --donkertekst:#aeb5bd; --donkerlabel:#7c838d;
  --groen:#2f6b48; --groenvlak:#e7f3ec; --rood:#b42318; --roodvlak:#fdecea; --blauw:#1d4ed8; --blauwvlak:#e6edfb;
  --paars:#6d28d9; --paarsvlak:#efe9fb; --geel:#8a5a00; --geelvlak:#fbf1d6;
  --zij:236px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--achtergrond,var(--papier));transition:background-color .25s ease;color:var(--charcoal);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";font-size:13.5px;line-height:1.45;overflow:hidden}
a{text-decoration:none;color:inherit}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.ik{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
b,strong{font-weight:600}
.verborgen{display:none!important}
.stil{color:var(--steel)}
.klein{font-size:12px}
.num{font-variant-numeric:tabular-nums}
.lab{font-size:10.5px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:var(--steel)}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:13px;border-radius:9px;padding:9px 14px;
  border:1px solid transparent;white-space:nowrap;transition:background-color .16s,border-color .16s,color .16s,transform .16s}
.btn .ik{width:15px;height:15px}
.btn:active{transform:translateY(1px)}
.b1{background:var(--oranje);color:#fff}.b1:hover{filter:brightness(.93)}
.b2{background:var(--charcoal);color:#fff}.b2:hover{background:#1f2937}
.b3{background:#fff;border-color:var(--kaartrand);color:var(--charcoal)}.b3:hover{border-color:#c9cdd2;background:#fafafa}
.activiteit.klikbaar{cursor:pointer;border-radius:10px;transition:background-color .16s}.activiteit.klikbaar:hover{background:#f6f7f8}.activiteit.klikbaar p::after{content:" ›";color:var(--steel)}
.b4{background:transparent;color:var(--steel)}.b4:hover{background:rgba(11,13,15,.05);color:var(--charcoal)}
.bk{padding:7px 10px;font-size:12.5px}
.bi{padding:0;width:34px;height:34px;border-radius:9px}
.bi.b3{color:var(--steel)}

/* ---------- schil ---------- */
.schil{display:grid;grid-template-columns:var(--zij) 1fr;height:100vh;height:100dvh}
/* een licht menu (de standaard) krijgt een zachte schaduw naar rechts: dan staat het los van de pagina */
.zij.licht{box-shadow:1px 0 0 rgba(11,13,15,.06),12px 0 32px -20px rgba(11,13,15,.22)}
.zij{background:var(--menu);padding:14px 12px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;position:relative;z-index:20;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .2s}
/* de schuifbalk van het menu: dun, in de kleur van het menu, en alleen zichtbaar als je er met de muis op staat */
.zij:hover{scrollbar-color:var(--menu-icoon) transparent}
.zij::-webkit-scrollbar{width:10px}
.zij::-webkit-scrollbar-track{background:transparent}
.zij::-webkit-scrollbar-thumb{background:transparent;border-radius:99px;border:3px solid transparent;background-clip:padding-box}
.zij:hover::-webkit-scrollbar-thumb{background-color:var(--menu-icoon)}
.zij::-webkit-scrollbar-thumb:hover{background-color:var(--menu-zacht)}
.werkruimte{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--menu-vlak);border:1px solid var(--menu-rand);color:var(--menu-tekst);
  width:100%;text-align:left;position:relative;transition:border-color .16s}
.werkruimte:hover{border-color:#2b333b}
.werkruimte .wr{width:28px;height:28px;border-radius:8px;background:#232b33;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.werkruimte b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.werkruimte i{display:block;font-style:normal;font-size:11px;color:var(--donkerlabel);margin-top:1px}
.werkruimte .ik{margin-left:auto;color:var(--donkerlabel);width:14px;height:14px}
.wisselaar{position:absolute;left:12px;right:12px;top:62px;background:#fff;border:1px solid var(--kaartrand);border-radius:12px;padding:6px;color:var(--charcoal);
  box-shadow:0 24px 48px -16px rgba(11,13,15,.4);display:none;z-index:30}
.wisselaar.open{display:block}
.wisselaar .wo{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;width:100%;text-align:left}
.wisselaar .wo:hover{background:var(--papier)}
.wisselaar .wo .wr{width:26px;height:26px;border-radius:7px;background:var(--light);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#3f454d}
.wisselaar .wo b{display:block;font-size:12.5px}
.wisselaar .wo i{font-style:normal;font-size:11px;color:var(--steel)}
.wisselaar .wo.aan .wr{background:var(--charcoal);color:#fff}
.wisselaar .wo .ik{margin-left:auto;color:var(--oranje);width:14px;height:14px}
.wisselaar hr{border:0;border-top:1px solid var(--kaartrand);margin:6px 4px}
.wisselaar .wo.plus{color:var(--steel);font-size:12.5px}
.zijkop{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--menu-label);font-weight:600;padding:0 10px;margin-bottom:6px}
.nav{display:grid;gap:2px}
/* Menu-items: een rustig vlak bij aanwijzen en bij het actieve item, het icoon kleurt oranje als het aan staat.
   Geen oranje lijn ernaast, geen pil om de teller: alleen een getal rechts. */
.ni{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--menu-zacht);padding:7px 10px;border-radius:6px;transition:background-color .12s ease,color .12s ease}
.ni:hover{color:var(--menu-tekst);background:var(--menu-vlak)}
.ni .ik{color:var(--menu-icoon);transition:color .12s ease}
.ni:hover .ik{color:var(--menu-tekst)}
.ni.aan{background:var(--menu-actief);color:var(--menu-tekst)}
.ni.aan .ik{color:var(--oranje)}
.ni .tel{margin-left:auto;font-size:11px;font-weight:600;color:var(--menu-zacht);background:none;border-radius:0;padding:0;font-variant-numeric:tabular-nums}
.ni.aan .tel{background:none;color:var(--menu-tekst)}
.zb{margin-top:auto;background:var(--donkervlak);border:1px solid var(--donkerrand);border-radius:12px;padding:12px;width:100%;text-align:left;transition:border-color .16s}
.zb:hover{border-color:#2b333b}
.zbk{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--offwhite);margin-bottom:9px}
.zbk .stip{width:6px;height:6px;border-radius:50%;background:#2f9e5f;margin-left:auto}
.zbv{display:flex;align-items:center;gap:8px;background:#0e1115;border:1px solid #222a31;border-radius:8px;padding:8px 10px;font-size:12px;color:#7c838d}
.zbv kbd{margin-left:auto;font:inherit;font-size:10px;color:#59626c;border:1px solid #222a31;border-radius:4px;padding:1px 5px}
.gebruiker{display:flex;align-items:center;gap:10px;padding:6px 10px 2px;width:100%;text-align:left}
.gebruiker .av{background:#232b33;color:var(--offwhite)}
.gebruiker b{display:block;font-size:12.5px;font-weight:600;color:var(--menu-tekst)}
.gebruiker i{display:block;font-style:normal;font-size:11px;color:var(--donkerlabel)}
.gebruiker .ik{margin-left:auto;color:var(--donkerlabel);width:14px;height:14px}
.proef{font-size:11px;color:var(--donkerlabel);padding:0 10px;display:flex;align-items:center;gap:6px}
.proef b{color:var(--menu-tekst);font-weight:600}
.proef a{color:var(--oranje);margin-left:auto;font-weight:600}

/* ---------- hoofd ---------- */
.hoofd{display:flex;flex-direction:column;min-width:0;height:100vh;height:100dvh}
.top{display:flex;align-items:center;gap:12px;padding:14px 26px 0;flex:none}
.top .hg{color:var(--pagina-tekst,var(--charcoal));font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.top .hs{font-size:12.5px;color:var(--pagina-zacht,var(--steel));margin-top:2px}
/* Kruimels: waar je bent en één klik terug. De pagina erboven is een klein klikbaar label met een pijl terug. */
.top .kruimel{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--steel);margin-bottom:6px;min-width:0}
.top .kruimel a{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px 0 6px;border-radius:8px;background:#fff;border:1px solid var(--kaartrand);color:var(--charcoal);font-weight:600;text-decoration:none;flex:none;transition:border-color .15s,background-color .15s,transform .12s}
.top .kruimel a::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.7}
.top .kruimel a:hover{border-color:var(--oranje);background:rgba(var(--oranje-rgb),.06)}
.top .kruimel a:active{transform:scale(.97)}
.top .kruimel a:focus-visible{outline:2px solid var(--oranje);outline-offset:2px}
.top .kruimel .ik{width:13px;height:13px;opacity:.6;flex:none}
.top .kruimel span{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hz{margin-left:auto;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--kaartrand);border-radius:9px;padding:8px 12px;font-size:12.5px;color:#6b7280;min-width:260px;cursor:text}
.hz .ik{width:14px;height:14px}
.hz kbd{margin-left:auto;font:inherit;font-size:10.5px;color:#6b7280;border:1px solid var(--kaartrand);border-radius:5px;padding:2px 6px}
.bel{position:relative}
.bel .stip{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--oranje);border:2px solid #fff}
.menuknop{display:none}
.inhoud{padding:16px 26px 26px;overflow-y:auto;flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
@keyframes in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.av{width:30px;height:30px;border-radius:50%;background:var(--light);color:#3f454d;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.av.k{width:22px;height:22px;font-size:9.5px}
.av.g{width:44px;height:44px;font-size:15px}
.av.o{background:var(--oranje);color:#fff}

/* ---------- panelen en statistieken ---------- */
.paneel{background:#fff;border:1px solid var(--kaartrand);border-radius:12px;padding:16px}
.paneel.strak{padding:0;overflow:hidden}
.pk{font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pk .pkr{margin-left:auto;font-size:11.5px;color:var(--steel);font-weight:500;display:flex;align-items:center;gap:6px}
.pk .pkr.o{color:var(--oranje)}
.pk .pkr .ik{width:13px;height:13px}
/* De cijferbalk: één wit vlak met de cijfers naast elkaar en een dun lijntje ertussen. Per cijfer: label,
   getal, en daaronder de trend (als tekst) met de uitleg op één regel. Komen de cijfers op een smal scherm
   onder elkaar, dan tekent de schaduw het lijntje erboven. Zelfde beeld als de cijferbalk op het overzicht. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#fff;border:1px solid var(--kaartrand);border-radius:12px;overflow:hidden}
.stat{background:none;border:0;border-radius:0;padding:14px 18px 13px;position:relative;min-width:0;text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;box-shadow:-1px 0 0 #f0f1f3,0 -1px 0 #f0f1f3;transition:background-color .12s ease}
a.stat:hover{background:var(--offwhite)}
.sl{flex-basis:100%;font-size:12px;letter-spacing:0;text-transform:none;color:var(--steel);font-weight:500}
.sr{display:contents}
.sc{flex-basis:100%;font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.delta{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:600;white-space:nowrap;margin-top:4px}
.delta .ik{width:11px;height:11px;stroke-width:2.2}
.delta.op{color:var(--groen)}
.delta.let{color:var(--oranje-tekst)}
.delta.rust{color:var(--steel)}
.sd{font-size:12px;color:var(--steel);margin-top:4px}
.vonk{position:absolute;right:14px;bottom:12px;width:60px;height:22px}
.vonk path{fill:none;stroke:#C4C9CF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vonk.o path{stroke:var(--oranje)}
.twee{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
.twee.gelijk{grid-template-columns:repeat(2,minmax(0,1fr))}
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.legenda{display:flex;gap:14px;font-size:11px;color:var(--steel);margin:-4px 0 8px}
.legenda i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.grafiek{width:100%;height:150px;display:block}
.grafiek .raster{stroke:#EEF0F2;stroke-width:1}
.grafiek .lijn{fill:none;stroke:var(--charcoal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grafiek .vlak{fill:url(#vlakgrad)}
.grafiek .doel{fill:none;stroke:var(--oranje);stroke-width:1.5;stroke-dasharray:3 4}
.grafiek .punt{fill:#fff;stroke:var(--charcoal);stroke-width:2}
.grafiek .punt.laatst{fill:var(--charcoal)}
.grafiek text{font-size:10px;fill:#9aa1ab;font-family:inherit}
.staven{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:10px}
.staaf{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.staaf i{display:block;width:100%;background:var(--charcoal);border-radius:4px 4px 2px 2px;min-height:3px}
.staaf i.l{background:#c4c9cf}
.staaf span{font-size:10.5px;color:#6b7280}

/* tijdlijn */
.tl{display:grid;grid-template-columns:44px 14px 1fr;gap:0 8px;padding:9px 0;border-top:1px solid #f0f1f3;align-items:start}
.tl:first-of-type{border-top:0}
.tl time{font-size:12px;color:var(--steel);font-variant-numeric:tabular-nums;padding-top:1px}
.tp{width:8px;height:8px;border-radius:50%;background:var(--oranje);margin-top:5px;justify-self:center;box-shadow:0 0 0 3px rgba(var(--oranje-rgb),.13)}
.tp.lg{background:#C4C9CF;box-shadow:none}
.tl b{display:block;font-size:12.5px;font-weight:600}
.tl i{font-style:normal;font-size:11.5px;color:var(--steel)}
.tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:600;color:var(--steel);background:var(--light);border-radius:4px;padding:1px 5px;vertical-align:1px}

/* tabellen */
.tabel{display:grid}
.tr{display:grid;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid #f0f1f3;font-size:12.5px;transition:background-color .12s}
a.tr:hover,.tr.klik:hover{background:#fafafa;cursor:pointer}
.tr.kop{border-top:0;padding:12px 16px 8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;font-weight:600;background:#fff}
.tr.kop:hover{background:#fff;cursor:default}
.wie{display:flex;align-items:center;gap:10px;min-width:0}
.wie b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wie i{font-style:normal;font-size:11.5px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.bron{display:inline-flex;align-items:center;gap:6px;color:#3f454d}
.bron i{width:7px;height:7px;border-radius:2px;background:#C4C9CF;flex:none}
.bron.website i{background:var(--charcoal)}.bron.meta i{background:#1877f2}.bron.gmail i{background:#ea4335}.bron.boeking i{background:var(--oranje)}.bron.import i{background:#7c838d}
.wanneer{color:var(--steel);white-space:nowrap}
.st{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;border-radius:99px;padding:4px 9px;white-space:nowrap;justify-self:start}
.st.nieuw{background:rgba(var(--oranje-rgb),.11);color:var(--oranje-tekst)}
.st.gecontact{background:var(--blauwvlak);color:var(--blauw)}
.st.gesprek{background:var(--paarsvlak);color:var(--paars)}
.st.voorstel{background:var(--geelvlak);color:var(--geel)}
.st.klant,.st.actief,.st.gr{background:var(--groenvlak);color:var(--groen)}
.st.verloren,.st.gestopt,.st.g{background:var(--light);color:var(--steel)}
.st.gepauzeerd,.st.let{background:var(--geelvlak);color:var(--geel)}
.st.rood{background:var(--roodvlak);color:var(--rood)}
.werkbalk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.werkbalk .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.zoekveld{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--kaartrand);border-radius:9px;padding:0 10px;height:34px;min-width:220px}
.zoekveld .ik{width:14px;height:14px;color:#6b7280}
.zoekveld input{border:0;outline:0;background:none;width:100%;font-size:12.5px}
.segment{display:inline-flex;background:#fff;border:1px solid var(--kaartrand);border-radius:9px;padding:3px}
.segment button{padding:5px 11px;border-radius:6px;font-size:12px;font-weight:600;color:var(--steel)}
.segment button.aan{background:var(--charcoal);color:#fff}
.filter{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:9px;background:#fff;border:1px solid var(--kaartrand);font-size:12.5px;color:var(--charcoal)}
.filter .ik{width:13px;height:13px;color:var(--steel)}
.filter select{border:0;background:none;outline:0;font-size:12.5px;font-weight:600}

/* pipeline */
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.kolom{background:rgba(11,13,15,.035);border-radius:12px;padding:8px;min-height:360px;display:flex;flex-direction:column;gap:8px;transition:background-color .16s}
.kolom.over{background:rgba(var(--oranje-rgb),.08)}
.kk{color:var(--pagina-tekst,var(--charcoal));display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:4px 6px 2px}
.kk .tel{margin-left:auto;font-size:11px;color:var(--pagina-zacht,var(--steel));font-weight:600}
.kk .som{font-size:10.5px;color:var(--pagina-zacht,#6b7280);font-weight:500}
.kk i{width:8px;height:8px;border-radius:50%;display:inline-block}
.kaart{background:#fff;border:1px solid var(--kaartrand);border-radius:10px;padding:11px 12px;display:grid;gap:7px;cursor:grab;transition:border-color .16s,box-shadow .16s,transform .16s}
.kaart:hover{border-color:#c9cdd2;box-shadow:0 8px 20px -14px rgba(11,13,15,.4)}
.kaart.sleep{opacity:.5;transform:rotate(1.5deg)}
.kaart b{font-size:13px;display:block}
.kaart i{font-style:normal;font-size:11.5px;color:var(--steel);display:block}
.kaart .onder{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--steel);margin-top:2px}
.kaart .onder .av{margin-left:auto}
.kaart .actie{font-size:11px;color:var(--oranje-tekst);background:rgba(var(--oranje-rgb),.09);border-radius:6px;padding:4px 7px;display:flex;align-items:center;gap:5px}
.kaart .actie .ik{width:11px;height:11px}
.kaart .actie.laat{color:var(--rood);background:var(--roodvlak)}
.leeg{border:1px dashed #d3d7db;border-radius:10px;padding:18px;text-align:center;font-size:12px;color:#6b7280}

/* detailpagina */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
/* de rechterkolom blijft 340 breed, ook als er een lange regel in staat (een lange herkomst of campagnenaam):
   zonder dit rekte de inhoud de kolom op en schoof de pagina rechts uit beeld */
.detail > *{min-width:0}
.detail > div:last-child{grid-template-columns:minmax(0,1fr)}
.detail > div:last-child > *{min-width:0}
.kopkaart{display:flex;align-items:center;gap:14px}
.kopkaart h2{font-size:20px;font-weight:700;letter-spacing:-.02em}
.kopkaart .sub{font-size:12.5px;color:var(--steel);margin-top:2px}
.kopkaart .acties{margin-left:auto;display:flex;gap:8px}
.velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.veld{display:grid;gap:3px}
.veld label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;font-weight:600}
.veld span,.veld input,.veld select,.veld textarea{font-size:13px}
/* een lang e-mailadres of een lange link breekt af in plaats van het blok breder te maken */
.veld{min-width:0}.veld > span{min-width:0;overflow-wrap:anywhere}
.veld input,.veld select,.veld textarea{border:1px solid var(--kaartrand);border-radius:8px;padding:8px 10px;background:#fff;outline:0;width:100%;transition:border-color .16s,box-shadow .16s}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(11,13,15,.06)}
.veld textarea{min-height:80px;resize:vertical}
.veld.breed{grid-column:1/-1}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--kaartrand);margin:0 -16px 14px;padding:0 16px}
.tabs a{padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--steel);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.aan{color:var(--charcoal);border-color:var(--oranje)}
.tabs a:hover{color:var(--charcoal)}
.notitieveld{display:flex;gap:8px;margin-bottom:12px}
.notitieveld input{flex:1;border:1px solid var(--kaartrand);border-radius:9px;padding:8px 11px;outline:0;font-size:12.5px}
.notitieveld input:focus{border-color:var(--charcoal)}
.activiteit{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid #f0f1f3;overflow-wrap:anywhere}
.activiteit:first-child{border-top:0}
.activiteit .ai{width:26px;height:26px;border-radius:8px;background:var(--papier);display:flex;align-items:center;justify-content:center;color:var(--steel)}
.activiteit .ai .ik{width:13px;height:13px}
.activiteit .ai.o{background:rgba(var(--oranje-rgb),.11);color:var(--oranje-tekst)}
.activiteit p{font-size:12.5px}
.activiteit small{display:block;font-size:11px;color:#6b7280;margin-top:2px}
.rij{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f0f1f3;font-size:12.5px}
.rij:first-child{border-top:0}
.rij .r{margin-left:auto;color:var(--steel);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rij .ik{color:var(--steel);width:14px;height:14px}
.stappen{display:flex;gap:4px}
.stappen span{flex:1;height:5px;border-radius:99px;background:var(--light)}
.stappen span.aan{background:var(--oranje)}
.stappen span.klaar{background:var(--groen)}

/* agenda */
.week{display:grid;grid-template-columns:52px repeat(7,1fr);border-top:1px solid #f0f1f3}
.week .dk{padding:10px 8px;font-size:11.5px;font-weight:600;border-left:1px solid #f0f1f3;text-align:center}
.week .dk i{display:block;font-style:normal;font-size:10.5px;color:#6b7280;font-weight:500}
.week .dk.nu b{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--oranje);color:#fff;align-items:center;justify-content:center}
.week .uur{grid-column:1;font-size:10.5px;color:#6b7280;text-align:right;padding:0 8px 0 0;height:52px;transform:translateY(-6px)}
.week .cel{border-left:1px solid #f0f1f3;border-top:1px solid #f0f1f3;height:52px;position:relative}
.week .cel.weekend{background:#fafafa}
.week .cel.nu{background:rgba(var(--oranje-rgb),.03)}
.afspraak{position:absolute;left:3px;right:3px;border-radius:7px;padding:5px 7px;font-size:11px;line-height:1.3;overflow:hidden;cursor:pointer;
  border-left:3px solid var(--oranje);background:#fff;box-shadow:0 1px 0 rgba(11,13,15,.06),0 0 0 1px var(--kaartrand);transition:transform .12s,box-shadow .12s;z-index:2}
.afspraak:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(11,13,15,.4),0 0 0 1px var(--kaartrand);z-index:3}
.afspraak b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afspraak i{font-style:normal;color:var(--steel);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.afspraak.groep{background:#fff8f2}
.afspraak.geblok{background:repeating-linear-gradient(135deg,#f3f4f5 0 6px,#e9ebed 6px 12px);border-left-color:#c4c9cf;color:var(--steel);cursor:default}
.medew{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border-radius:99px;background:#fff;border:1px solid var(--kaartrand);font-size:12px;font-weight:600}
.medew i{width:9px;height:9px;border-radius:50%;display:inline-block}
.medew.uit{opacity:.45}
.et{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid #f0f1f3}
.et:first-child{border-top:0}
.et .kl{width:10px;height:38px;border-radius:99px}
.et b{display:block;font-size:13.5px}
.et i{font-style:normal;font-size:12px;color:var(--steel)}
.pil{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;background:var(--papier);border-radius:6px;padding:3px 7px;color:#3f454d;margin-right:4px}
.pil .ik{width:11px;height:11px}

/* taken */
.taak{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-top:1px solid #f0f1f3;transition:background-color .12s}
.taak:first-child{border-top:0}
.taak:hover{background:#fafafa}
.vink{width:18px;height:18px;border-radius:6px;border:1.5px solid #c4c9cf;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .16s,border-color .16s;margin-top:1px}
.vink .ik{width:12px;height:12px;stroke-width:2.5;opacity:0}
.taak.klaar .vink{background:var(--groen);border-color:var(--groen)}
.taak.klaar .vink .ik{opacity:1}
.taak.klaar .tt b{text-decoration:line-through;color:var(--steel)}
.taak .tt b{display:block;font-size:13px}
.taak .tt i{font-style:normal;font-size:11.5px;color:var(--steel)}
.taak .tr2{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--steel);white-space:nowrap}
.taak .tr2 .laat{color:var(--rood);font-weight:600}

/* koppelingen */
.kop3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kop3 .paneel{display:grid;gap:10px;align-content:start}
.dienst{display:flex;align-items:center;gap:12px}
.dienst .logo{width:40px;height:40px;border-radius:10px;border:1px solid var(--kaartrand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;background:#fff}
.dienst b{display:block;font-size:13.5px}
.dienst i{font-style:normal;font-size:12px;color:var(--steel)}
.dienst .st{margin-left:auto}
.legestaat{display:grid;place-items:center;text-align:center;padding:46px 20px;gap:10px}
.legestaat .logo{width:56px;height:56px;border-radius:14px;border:1px solid var(--kaartrand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;background:#fff}
.legestaat p{font-size:12.5px;color:var(--steel);max-width:320px}
.sleutel{display:flex;align-items:center;gap:8px;background:var(--papier);border-radius:8px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.sleutel .ik{margin-left:auto;color:var(--steel)}

/* team en instellingen */
.persoon{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid #f0f1f3}
.persoon:first-child{border-top:0}
.persoon b{display:block;font-size:13.5px}
.persoon i{font-style:normal;font-size:12px;color:var(--steel)}
.schakel{width:34px;height:20px;border-radius:99px;background:#c4c9cf;position:relative;transition:background-color .16s;flex:none}
.schakel::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .16s}
.schakel.aan{background:var(--groen)}
.schakel.aan::after{transform:translateX(14px)}
.optie{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #f0f1f3}
.optie:first-child{border-top:0}
.optie b{display:block;font-size:13px}
.optie i{font-style:normal;font-size:12px;color:var(--steel)}
.optie .r{margin-left:auto}
.beschik{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.beschik div{background:var(--papier);border-radius:8px;padding:8px 6px;text-align:center;font-size:11px}
.beschik div b{display:block;font-size:11px;margin-bottom:3px}
.beschik div.uit{opacity:.45}
.kleurkeuze{display:flex;gap:8px}
.kleurkeuze i{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.kleurkeuze i.aan{border-color:var(--charcoal)}

/* geld */
.geldrij{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:10px 16px;border-top:1px solid #f0f1f3;font-size:12.5px}
.geldrij:first-child{border-top:0}
.geldrij b{display:block;font-size:13px}
.geldrij i{font-style:normal;font-size:11.5px;color:var(--steel)}
.bedrag{font-variant-numeric:tabular-nums;font-weight:600}
.bedrag.min{color:var(--rood)}

/* ---------- lagen: modal, lade, palet, meldingen ---------- */
.sluier{position:fixed;inset:0;background:rgba(11,13,15,.45);z-index:40;display:none;animation:fade .2s ease-out}
.sluier.open{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));background:#fff;border-radius:16px;z-index:50;display:none;
  box-shadow:0 40px 90px -30px rgba(11,13,15,.6);animation:pop .22s ease-out}
.modal.open{display:block}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mk{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--kaartrand)}
.mk h3{font-size:15px;font-weight:700}
.mk .sluit{margin-left:auto}
.mi{padding:18px 20px;display:grid;gap:12px;max-height:70vh;overflow-y:auto}
.mv{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--kaartrand)}
.lade{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;z-index:50;transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;
  box-shadow:-30px 0 80px -40px rgba(11,13,15,.5)}
.lade.open{transform:none}
.lade .mk{background:var(--charcoal);color:#fff;border-bottom-color:var(--donkerrand)}
.lade .mk .sluit{color:var(--donkerlabel)}
.chatlijst{flex:1;overflow-y:auto;padding:18px;display:grid;gap:12px;align-content:start;background:var(--papier)}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.5;animation:in .25s ease-out both}
.msg.ai{background:#fff;border:1px solid var(--kaartrand);border-bottom-left-radius:4px;justify-self:start}
.msg.ik2{background:var(--charcoal);color:#fff;border-bottom-right-radius:4px;justify-self:end}
.msg .kop{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--steel);margin-bottom:5px}
.msg .kaartje{margin-top:8px;border:1px solid var(--kaartrand);border-radius:9px;padding:8px 10px;font-size:12px;background:#fafafa}
.msg .kaartje b{display:block}
.msg .knopjes{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.msg .knopjes button{font-size:11.5px;font-weight:600;border:1px solid var(--kaartrand);border-radius:99px;padding:5px 10px;background:#fff}
.msg .knopjes button:hover{border-color:var(--charcoal)}
.typ{display:inline-flex;gap:4px;padding:4px 0}
.typ i{width:6px;height:6px;border-radius:50%;background:#c4c9cf;animation:typ 1.1s infinite}
.typ i:nth-child(2){animation-delay:.15s}.typ i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chatinvoer{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--kaartrand);background:#fff}
.chatinvoer input{flex:1;border:1px solid var(--kaartrand);border-radius:10px;padding:10px 12px;outline:0;font-size:13px}
.chatinvoer input:focus{border-color:var(--charcoal)}
.palet{position:fixed;left:50%;top:14vh;transform:translateX(-50%);width:min(600px,calc(100vw - 32px));background:#fff;border-radius:14px;z-index:50;display:none;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(11,13,15,.6);animation:pop2 .18s ease-out}
.palet.open{display:block}
@keyframes pop2{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%)}}
.palet .pi{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--kaartrand)}
.palet .pi input{flex:1;border:0;outline:0;font-size:15px}
.palet .pi .ik{color:var(--steel)}
.palet .pr{max-height:50vh;overflow-y:auto;padding:6px}
.palet .pg{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;font-weight:600;padding:10px 12px 4px}
.palet a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:13px}
.palet a:hover,.palet a.aan{background:var(--papier)}
.palet a .ik{color:var(--steel);width:14px;height:14px}
.palet a i{font-style:normal;color:var(--steel);font-size:12px;margin-left:auto}
.meldingen{position:absolute;right:0;top:44px;width:340px;background:#fff;border:1px solid var(--kaartrand);border-radius:12px;box-shadow:0 24px 48px -16px rgba(11,13,15,.35);z-index:30;display:none;overflow:hidden}
.meldingen.open{display:block}
.meldingen .mkop{padding:12px 14px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--kaartrand);display:flex}
.meldingen .mkop a{margin-left:auto;font-weight:500;color:var(--steel);font-size:12px}
.melding{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:10px 14px;border-top:1px solid #f0f1f3;font-size:12.5px;align-items:start}
.melding:first-of-type{border-top:0}
.melding i{width:8px;height:8px;border-radius:50%;background:var(--oranje);margin-top:6px}
.melding i.lg{background:#c4c9cf}
.melding small{display:block;color:#6b7280;font-size:11px;margin-top:2px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--charcoal);color:#fff;font-size:13px;font-weight:500;border-radius:10px;padding:11px 16px;
  z-index:60;opacity:0;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:8px;pointer-events:none;white-space:nowrap}
.toast.aan{opacity:1;transform:translateX(-50%)}
/* op een telefoon mag een lange melding over twee regels, in plaats van buiten beeld te lopen */
@media (max-width:640px){.toast{white-space:normal;width:max-content;max-width:calc(100vw - 32px);line-height:1.45}}
.toast .ik{color:#2f9e5f}
/* een fout: rood, met een uitroepteken, en een regel meer ruimte want de uitleg is vaak langer */
.toast.fout{background:var(--rood);white-space:normal;width:max-content;max-width:min(560px,calc(100vw - 32px));line-height:1.45}
.toast.fout .ik{color:#fff;flex:none}
.onboardnoot{background:var(--charcoal);color:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.onboardnoot .ik{width:22px;height:22px;color:var(--oranje)}
.onboardnoot b{display:block;font-size:13.5px}
.onboardnoot i{font-style:normal;font-size:12px;color:var(--donkertekst)}
.onboardnoot .btn{margin-left:auto}
.gebrmenu{position:absolute;left:12px;right:12px;bottom:56px;background:#fff;border:1px solid var(--kaartrand);border-radius:12px;padding:6px;color:var(--charcoal);box-shadow:0 24px 48px -16px rgba(11,13,15,.4);display:none;z-index:30}
.gebrmenu.open{display:block}
.gebrmenu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:12.5px}
.gebrmenu a:hover{background:var(--papier)}
.gebrmenu a .ik{width:14px;height:14px;color:var(--steel)}

/* ---------- mobiel ---------- */
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .twee,.twee.gelijk,.drie,.kop3{grid-template-columns:1fr}
  .detail{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .schil{grid-template-columns:1fr}
  .zij{position:fixed;top:0;bottom:0;left:0;width:min(300px,86vw);transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.7,.2,1);box-shadow:30px 0 80px -40px rgba(11,13,15,.6)}
  .zij.open{transform:none}
  .menuknop{display:inline-flex}
  .top{padding:12px 16px 0;flex-wrap:wrap}
  .top .hg{font-size:18px}
  .hz{min-width:0;flex:1;order:5;width:100%;margin-left:0}
  .hz kbd{display:none}
  .inhoud{padding:12px 16px 24px}
  .velden{grid-template-columns:1fr}
  .week{grid-template-columns:44px repeat(7,minmax(74px,1fr))}
  .paneel.agenda{overflow-x:auto}
  .tr{grid-template-columns:1fr auto!important;gap:8px}
  .tr > :nth-child(n+3){display:none}
  .tr.kop{display:none}
  .kolom{min-height:200px}
  .persoon{grid-template-columns:auto 1fr;gap:10px}
  .persoon > :nth-child(3){grid-column:2}
  .kopkaart{flex-wrap:wrap}
  .kopkaart .acties{margin-left:0;width:100%}
}
@media (max-width:480px){.stats{grid-template-columns:1fr 1fr}.sc{font-size:20px}.vonk{display:none}}

/* merkteken op kleine plekken en donkere knop */
.pk > svg,.msg .kop svg,.btn svg[viewBox="0 0 100 100"],.zbk svg{width:16px;height:16px}
.b3w{background:rgba(255,255,255,.04);color:var(--offwhite);border-color:#2b333b}
.b3w:hover{border-color:#4a545f;background:rgba(255,255,255,.07)}
.taakrij .vink{margin:0}

/* nabewerking na eerste controle */
.proef{white-space:nowrap}
.kaart .num,.pk .pkr{white-space:nowrap}
.hz{flex:0 1 280px;min-width:150px;white-space:nowrap;overflow:hidden}
.paneel > a.klein{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
@media (max-width:860px){
  .top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 12px}
  .top > div[style*="position:relative"]{grid-column:3}
  .hz{grid-column:1/-1;flex:none;width:100%;order:0;min-width:0}
  #topacties{grid-column:1/-1;flex-wrap:wrap}
  .onboardnoot{flex-wrap:wrap}
  .onboardnoot .btn{margin-left:0;width:100%}
  .grafiek{height:130px}
  .pipeline{grid-template-columns:repeat(5,240px)}
}
@media (max-width:860px){
  .menuknop{grid-row:1;grid-column:1}
  #topkop{grid-row:1;grid-column:2;min-width:0}
  .top > div[style*="position:relative"]{grid-row:1;grid-column:3}
  .hz{grid-row:2}
  #topacties{grid-row:3}
  .tabs{overflow-x:auto;white-space:nowrap}
}

/* gezicht van Heli */
.heli-gezicht{display:inline-block;width:26px;height:26px;border-radius:50%;background:#1a2027 var(--agent-foto,none) 50% 22%/cover no-repeat;flex:none;box-shadow:0 0 0 1.5px rgba(var(--oranje-rgb),.35)}
.heli-gezicht.k{width:18px;height:18px}
.heli-gezicht.g{width:32px;height:32px}
.mk .heli-gezicht{margin-right:2px}
/* agent-keuze in de chat */
.agentkies{padding:14px 4px 4px}
.agentkies h4{font-size:15px;font-weight:750;margin:0 0 3px}
.agentkies > .klein{color:var(--donkerlabel);margin:0 0 14px;line-height:1.5}
.agentkies-rij{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.agentkaart{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:16px 12px 15px;border:1px solid var(--kaartrand);border-radius:15px;background:var(--kaart);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.agentkaart:hover{border-color:var(--oranje);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(var(--oranje-rgb),.6)}
.agentkaart b{font-size:15px;font-weight:750}
.agentkaart i{font-size:11.5px;color:var(--donkerlabel);line-height:1.4;font-style:normal}
.agentfoto{width:74px;height:74px;border-radius:50%;background:#1a2027 50% 20%/cover no-repeat;box-shadow:0 0 0 2px rgba(var(--oranje-rgb),.4)}
.agentfoto.man{background-image:url(/merk/Agent%20Man.png)}
.agentfoto.vrouw{background-image:url(/merk/Agent%20vrouw.png)}
.werkruimte > div,.gebruiker > div{min-width:0}
.werkruimte b,.werkruimte i,.gebruiker b,.gebruiker i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proef{overflow:hidden}

/* Heli als tab en als ballon */
.ni .heli-gezicht{margin-right:0}
.heli-ballon{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:var(--menu);border:1px solid var(--menu-rand);display:flex;align-items:center;justify-content:center;z-index:35;
  box-shadow:0 18px 40px -14px rgba(11,13,15,.7);transition:transform .16s,box-shadow .16s}
.heli-ballon:hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(11,13,15,.8)}
.heli-ballon .heli-gezicht{width:36px;height:36px;box-shadow:none}
.op-heli .heli-ballon,.lade.open ~ .heli-ballon{display:none}
.heli-groot{display:flex;flex-direction:column;height:calc(100vh - 110px);height:calc(100dvh - 110px);min-height:420px}
.heli-groot .chatlijst{flex:1}
.heli-groot .msg{max-width:720px;font-size:14px}
@media (max-width:860px){.heli-ballon{right:14px;bottom:14px;width:50px;height:50px}.heli-groot{height:calc(100dvh - 150px)}}

/* ---------- merk: logo, lichte menubalk, kleurenkiezer ---------- */
.zij .merklogo{display:flex;align-items:center;justify-content:center;height:34px;margin:2px 4px 2px}
.zij .merklogo img{max-height:34px;max-width:100%;width:auto;object-fit:contain}
.werkruimte .wr img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
/* Alles in de menubalk volgt de menukleuren (pasMerk in portaal-a.js), ook een zelf gekozen tekstkleur: de kleine
   regels, de pijltjes, de tellers en de bolletjes met je initialen. Eerst stonden hier vaste grijstinten. */
.zij .werkruimte .wr,.zij .gebruiker .av{background:var(--menu-actief);color:var(--menu-tekst)}
.zij .werkruimte i,.zij .gebruiker i,.zij .werkruimte .ik,.zij .gebruiker .ik,.zij .proef{color:var(--menu-icoon)}
.zij .ni .tel{background:none;color:var(--menu-zacht)}
.zij .werkruimte:hover{border-color:var(--menu-icoon)}

.kleurstalen{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kl-staal{width:24px;height:24px;border-radius:7px;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .12s}
.kl-staal:hover{transform:scale(1.1)}
.kl-staal.aan{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px #fff,0 0 0 4px var(--charcoal)}
.kl-auto{height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--kaartrand);background:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.kl-auto.aan{border-color:var(--charcoal);box-shadow:0 0 0 1px var(--charcoal)}
.tekstkleuren{display:flex;gap:8px;flex-wrap:wrap}
.tekstkleuren .tk{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--kaartrand);border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:600;background:#fff}
.tekstkleuren .tk:hover{border-color:#c9cdd2}
.tekstkleuren .tk i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.tk-let{margin-top:8px;font-size:12.5px;line-height:1.55;color:#875800;background:#FFF6E0;border-radius:8px;padding:8px 10px}
.tekstkleuren .tk.aan{border-color:var(--charcoal);box-shadow:0 0 0 1px var(--charcoal)}
.logovak{width:120px;height:64px;border-radius:12px;border:1px solid var(--kaartrand);display:flex;align-items:center;justify-content:center;background:var(--papier);overflow:hidden;flex:none}
.logovak img{max-width:104px;max-height:48px;object-fit:contain}
.logovak.leeg{color:#6b7280;font-size:11.5px;text-align:center;padding:8px}
.logovak.donker{background:var(--menu)}


/* kleurenkiezer */
.kiezer{position:fixed;z-index:70;width:272px;background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:14px;box-shadow:0 30px 70px -24px rgba(11,13,15,.55);display:none}
.kiezer.open{display:block}
.kiezer .vlak{position:relative;width:244px;height:150px;border-radius:10px;cursor:crosshair;touch-action:none;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--k-hue,#f00)}
.kiezer .knop-vlak{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}
.kiezer .tint{position:relative;height:14px;border-radius:8px;margin:12px 0 0;cursor:pointer;touch-action:none;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.kiezer .knop-tint{position:absolute;top:50%;width:14px;height:20px;border-radius:5px;background:#fff;border:1px solid rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}
.kiezer .hexrij{display:flex;align-items:center;gap:8px;margin-top:12px}
.kiezer .hexrij .staal{width:30px;height:30px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.kiezer .hexrij input{flex:1;border:1px solid var(--kaartrand);border-radius:8px;padding:7px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-transform:uppercase;outline:0}
.kiezer .hexrij input:focus{border-color:var(--charcoal)}
.kiezer .stalen{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:12px}
.kiezer .stalen i{aspect-ratio:1;border-radius:6px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.kiezer .stalen i:hover{transform:scale(1.12)}
.kiezer .klaar{width:100%;margin-top:12px}

/* ---------- aanraakfeedback ----------
   Alles waar je op kunt klikken reageert zichtbaar op de muis. Bewust duidelijk:
   een zachte oranje gloed van het merk, een randje en een klein zetje omhoog, zodat
   je zonder twijfel ziet wat je aanwijst. Indrukken zakt weer terug, en met het
   toetsenbord krijg je dezelfde ring. Alleen op apparaten met een echte muis. */
.stat,.kaart,.taak,.tr,.blok,.dash .rijtje,.afspraak,.chip,.btn,.vink,.tabs a,.segment button,.ni,.si,.wo,.palet a,.gebrmenu a,.widget,.dagtaken .rijtje{transition:background-color .15s ease,border-color .15s ease,box-shadow .2s ease,transform .15s ease,color .15s ease}
[data-actie]:not(input):not(select):not(textarea):not([disabled]),.klik,a.tr,.tr.klik,.uurlijst .blok,.dash .rijtje{cursor:pointer}

@media (hover:hover){
  /* tegels op het overzicht */
  /* leadkaarten in de pipeline */
  .kaart:hover{border-color:var(--oranje);box-shadow:0 12px 26px -16px rgba(var(--oranje-rgb),.7);transform:translateY(-2px)}
  /* rijen in lijsten: tint plus een oranje streepje aan de linkerkant */
  a.tr:hover,.tr.klik:hover{background:rgba(var(--oranje-rgb),.05);box-shadow:inset 3px 0 0 var(--oranje)}
  .tr.kop:hover{background:#fff;box-shadow:none}
  /* taken, zowel op het dashboard als op de takenpagina */
  .taak:hover{background:rgba(var(--oranje-rgb),.06);box-shadow:inset 3px 0 0 var(--oranje)}
  /* in de widgets loopt de rij tot aan de rand, dus daar zou het streepje over het vinkje vallen:
     we rekken de rij naar links op zodat het streepje ernaast staat in plaats van eroverheen */
  .dash .rijtje:hover{background:var(--offwhite)}
  /* afspraakblokken in de dagagenda en de weekagenda */
  .uurlijst .blok:hover,.afspraak:hover{box-shadow:0 12px 24px -12px rgba(11,13,15,.75),0 0 0 2px var(--oranje);transform:translateY(-2px);z-index:4}
  /* het vinkje van een taak */
  .vink:hover{border-color:var(--oranje);background:rgba(var(--oranje-rgb),.12);transform:scale(1.1)}
  /* menu-items in de zijbalk */
  /* tekstlinks */
  .dagtaken .kop a:hover,.pk a:hover,.widget .kop a:hover,.meer:hover{text-decoration:underline}
}

/* indrukken: alles zakt terug, zodat een klik voelbaar is */
.btn:not([disabled]):active,.vink:active,.segment button:active,.chip:active,.stat:active,.kaart:active,.uurlijst .blok:active{transform:translateY(1px)}

/* toetsenbord: dezelfde oranje ring, alleen bij navigeren met tab */
.btn:focus-visible,a:focus-visible,button:focus-visible,[data-actie]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--oranje);outline-offset:2px;border-radius:8px}

/* uitgeschakelde knoppen reageren niet */
.btn[disabled],button[disabled]{cursor:not-allowed;opacity:.55}
.btn[disabled]:hover{transform:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .stat,.kaart,.taak,.tr,.blok,.dash .rijtje,.afspraak,.chip,.btn,.vink{transition:none}
  .stat:hover,.kaart:hover,.uurlijst .blok:hover,.afspraak:hover,.vink:hover,.btn:active{transform:none}
}

/* De cijfertegels boven het overzicht, de statistieken en de websitepagina.
   Die zijn niet klikbaar, dus geen oranje rand en geen handje: alleen een
   rustige lift, zodat je ziet welke tegel je aanwijst zonder te denken
   dat er iets gebeurt als je erop drukt. */
.statbalk .tegel,.webstat .tegel,.dash .widget{transition:border-color .15s ease,box-shadow .2s ease,transform .15s ease}
@media (hover:hover){
}

/* ---------- pipeline: leads als smalle regels ----------
   Een lead is standaard één regel: naam, bedrijf, pijltje. Eén klik klapt hem open en toont
   wat er te doen staat; nog een klik opent de leadkaart. Het pijltje klapt weer dicht.
   De kolommen zijn hoger en scrollen zelf, zodat tientallen leads in beeld passen zonder
   dat de hele pagina meeschuift. */
.pipeline{grid-template-columns:repeat(5,minmax(210px,1fr))}
.kolom{min-height:420px;max-height:calc(100vh - 290px);overflow-y:auto;overscroll-behavior:contain;gap:5px}
.kolom::-webkit-scrollbar{width:8px}
.kolom::-webkit-scrollbar-thumb{background:rgba(11,13,15,.16);border-radius:99px}
.kolom .kk{position:sticky;top:-8px;background:var(--achtergrond,var(--papier,#ECEDEE));z-index:2;margin:-8px -6px 2px;padding:8px 8px 6px;border-radius:8px}

/* flex:none: een regel houdt zijn eigen hoogte. Zonder dit drukte een volle kolom (met een vaste maximale hoogte)
   alle regels in elkaar, waardoor de tweede regel met de bedrijfsnaam half wegviel; nu scrolt de kolom. */
.leadrij{background:#fff;border:1px solid var(--kaartrand);border-radius:9px;overflow:hidden;cursor:grab;flex:none}
.kolom > .kk,.kolom > .leeg{flex:none}
.leadrij.sleep{opacity:.55}
.lkop{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.lkop .pijl{width:16px;height:16px;flex:0 0 16px;border-radius:5px;display:grid;place-items:center;color:var(--steel);transition:transform .16s ease,background-color .14s ease}
.lkop .pijl::before{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin-left:-2px}
.leadrij.open .lkop .pijl{transform:rotate(90deg)}
.lnaam{min-width:0;flex:1;display:grid;line-height:1.25}
.lnaam b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnaam i{font-style:normal;font-size:11px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lstip{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--oranje)}
.lstip.laat{background:var(--rood,#b42318)}

.linhoud{display:none;padding:0 10px 9px;border-top:1px solid #f0f1f3;margin-top:-1px}
.leadrij.open .linhoud{display:block;animation:heliIn .2s ease both}
.lr{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:start;padding:7px 0;font-size:11.5px;line-height:1.4;border-top:1px solid #f4f5f6}
.lr:first-child{border-top:0;padding-top:9px}
.lr .lk{color:#6b7280;font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.lr.laat > span:last-child{color:var(--rood,#b42318);font-weight:600}
.lr.onderrij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:9px}
.lr.onderrij .naarkaart{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--oranje-tekst,var(--oranje));text-decoration:none;white-space:nowrap}
.lr.onderrij .naarkaart:hover{text-decoration:underline}

@media (hover:hover){
  .leadrij:hover{border-color:var(--oranje);box-shadow:0 8px 20px -16px rgba(var(--oranje-rgb),.8)}
  .lkop:hover .pijl{background:rgba(var(--oranje-rgb),.12);color:var(--oranje-tekst,var(--oranje))}
}
@media (max-width:900px){.kolom{max-height:none}}

/* ---------- klanten als kaarten ----------
   Vier tot vijf kaarten naast elkaar. De achtergrond is de pasteltint van het pakket, dus je
   ziet in één blik welke klant welk pakket heeft. Zonder pakketkleur blijft de kaart wit. */
.klantkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px}
.kkaart{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:14px;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .2s ease,transform .15s ease}
.kkaart.getint{border-width:1px}
.kkop{display:flex;align-items:center;gap:10px;min-width:0}
.kkaart .av{flex:0 0 auto}
.kwie{min-width:0;display:grid;line-height:1.3}
.kwie b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kwie i{font-style:normal;font-size:11.5px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpakket{display:grid;gap:1px;padding:9px 10px;background:rgba(255,255,255,.62);border-radius:9px;line-height:1.35}
.kkaart:not(.getint) .kpakket{background:var(--papier,#f4f5f6)}
.kpakket b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpakket span{font-size:11px;color:var(--steel)}
.kvoet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.klabels{display:flex;gap:6px;flex-wrap:wrap}
.klabels .chip{font-size:10.5px;padding:2px 8px;background:rgba(255,255,255,.7);border-radius:99px;color:var(--charcoal)}
@media (hover:hover){
  .kkaart:hover{border-color:var(--oranje);box-shadow:0 14px 28px -18px rgba(11,13,15,.6);transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){.kkaart:hover{transform:none}}

/* de pasteltinten bij een pakket (Geld > Pakketten) */
.pakketkleuren{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.pakketkleuren button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.1);cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .14s ease}
.pakketkleuren .pk-geen{width:auto;padding:0 10px;height:26px;background:#fff;font:600 11.5px/1 inherit;color:var(--steel)}
.pakketkleuren button:hover{transform:scale(1.08)}
.pakketkleuren button.aan{box-shadow:0 0 0 2px var(--oranje);border-color:transparent}

/* ---------- een vinkje met tekst ernaast ----------
   In een venster staat boven elk veld een kopje in kleine hoofdletters. Een label met een
   vinkje erin kreeg diezelfde opmaak, waardoor de tekst naast het vinkje in hoofdletters en
   grijs stond en raar afbrak. Hier staat één regel voor het hele platform: gewone tekst,
   netjes naast het vinkje, op dezelfde hoogte. Onderdelen met een eigen vormgeving
   (schakelaars, Google-opties, doelgroeplijst) blijven ongemoeid. */
.veld label:has(> input[type="checkbox"]):not(.doc-vink):not(.kp-schakel):not(.onb-check):not(.gopt):not(.doelgroep-item),
.veld label:has(> input[type="radio"]):not(.doc-vink):not(.kp-schakel):not(.onb-check):not(.gopt):not(.doelgroep-item),
.mi label.vinkregel,.veld label.vinkregel{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:500;line-height:1.45;color:var(--charcoal);
  text-transform:none;letter-spacing:0;cursor:pointer;padding-top:7px;margin:0;
}
/* het vinkje zelf overal even groot, en het zakt niet mee met de tekst */
.veld input[type="checkbox"],.veld input[type="radio"],.mi input[type="checkbox"],.mi input[type="radio"]{
  width:16px;height:16px;flex:0 0 16px;margin:0;cursor:pointer
}
/* staat er een kopje boven, dan hoort het vinkje op dezelfde hoogte te beginnen als een invoerveld */
.veld > label + label.vinkregel{padding-top:8px}

/* het logo van het klantportaal in de instellingen */
.kp-logo{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.kp-logo-vak{width:92px;height:92px;flex:none;border:1px solid var(--kaartrand);border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden;padding:8px}
.kp-logo-vak img{max-width:100%;max-height:100%;object-fit:contain}
.kp-logo-knoppen{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:200px;flex:1}
.kp-logo-knoppen .klein{line-height:1.5}

/* de pakketkleur ook in de lijstweergave: een streep in de tint aan de linkerkant, zodat je
   in beide weergaven ziet welk pakket een klant heeft zonder dat de hele rij gekleurd wordt */
.tabel .tr.getint{box-shadow:inset 4px 0 0 var(--rijtint)}
.tabel .tr.getint:hover{box-shadow:inset 4px 0 0 var(--rijtint),inset 0 0 0 999px rgba(var(--oranje-rgb),.05)}

/* de uitlegknop staat vast direct links van de zoekbalk: hij neemt de ruimte over die de
   zoekbalk eerst gebruikte om naar rechts te schuiven, zodat ze samen rechts staan */
.top .rl-hulpknop{margin-left:auto}
.top .rl-hulpknop + .hz{margin-left:0}

/* de regel bij Incasso op de klantkaart: status, uitleg en knop netjes op één lijn */
.incassoregel{display:flex;align-items:center;flex-wrap:wrap;gap:8px}

/* velden in een venster rekken niet mee met hun buurman: staat er naast een veld een veld met
   uitleg eronder, dan werd het eerste veld anders een groot leeg blok */
.velden > .veld{align-self:start}
.vastveld{padding:11px 13px;border:1px solid var(--rand);border-radius:10px;background:var(--papier);font-weight:600}
/* plusje naast "Soort" in Nieuwe afspraak */
.veld.metplus > label{display:flex;align-items:center;justify-content:space-between}
.soortplus{width:22px;height:22px;min-height:0;padding:0;border-radius:7px}
.soortplus .ik{width:13px;height:13px}
.soortrij{display:flex;gap:8px;align-items:center}
.soortrij input[name=soort_naam]{flex:1;min-width:0}
.soortrij input[name=soort_duur]{width:78px}
.onb-sturen{width:100%;justify-content:center}

/* klantkaart, Overzicht: kop met Bewerken en het blok "Over het bedrijf" */
.kg-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kg-kop b{font-size:13.5px}
.kg-over{background:var(--papier);border-radius:12px;padding:12px 14px;margin-bottom:16px;text-align:left}
.kg-over label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:5px}
.kg-over p{margin:0;line-height:1.6;white-space:pre-line}
.kg-over-leeg{all:unset;display:block;text-align:left;cursor:pointer;color:var(--steel);font-size:13px;line-height:1.5}
.kg-over-leeg:hover{color:var(--charcoal);text-decoration:underline}

/* pil naast de naam van een klant zolang het profiel niet compleet is */
.hg .profielpil{display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;padding:3px 10px;border-radius:999px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;font-family:inherit;font-size:11.5px;font-weight:600;line-height:1.3;letter-spacing:0;cursor:pointer;transition:background .15s,border-color .15s}
.hg .profielpil::before{content:"";width:6px;height:6px;border-radius:50%;background:#f59e0b;margin-right:6px}
.hg .profielpil:hover{background:#fef3c7;border-color:#fcd34d}

/* telefoon: niets mag buiten beeld vallen (lange rijen met knoppen, filtersegmenten) */
@media (max-width:640px){.paneel.dienst{flex-wrap:wrap}.inhoud .segment{max-width:100%;overflow-x:auto;scrollbar-width:none}.inhoud .segment::-webkit-scrollbar{display:none}.inhoud .segment button{flex:none}}
/* telefoon: kaarten (klant, lead, teamlid) blijven binnen beeld, ook met lange namen of tabbladen */
@media (max-width:640px){.detail > div{grid-template-columns:minmax(0,1fr)}.detail > *{min-width:0}.paneel .pk{flex-wrap:wrap;row-gap:6px}.paneel .rij{min-width:0}.paneel .rij > .btn{white-space:normal;overflow-wrap:anywhere;min-width:0;height:auto;text-align:left}}
/* telefoon: meetings (lijst en soorten) binnen beeld */
@media (max-width:640px){.mt-links{grid-template-columns:minmax(0,1fr)}.mt-links > *{min-width:0}.mt-soort{flex-wrap:wrap;row-gap:8px}.mt-soort .mt-info{flex:1;min-width:0}.mt-soort .mt-knoppen{flex-basis:100%;justify-content:flex-start}}
/* bezig: een knop die na een klik op de server wacht (opslaan, betalen, versturen) krijgt een draaiend icoon; portaal-a.js zet .bezig */
button.bezig::before{content:"";display:inline-block;vertical-align:-2px;margin-right:7px;width:13px;height:13px;flex:none;box-sizing:border-box;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.85;animation:draai .7s linear infinite}
.btn.bezig::before{margin-right:0}
button.bezig{cursor:progress}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button.bezig::before{animation-duration:1.6s}}

/* achtergrondkleur: teksten die rechtstreeks op de achtergrond staan (donkere keuze) */
.inhoud > .klein.stil,.inhoud > .stil{color:var(--pagina-zacht,var(--steel))}
html.bg-donker .kolom{background:rgba(255,255,255,.06)}
html.bg-donker .fl-chip.aan{background:#FFEFE3}
.inhoud > .klein.stil a{color:var(--pagina-tekst,var(--charcoal))!important}
.kolom .leeg{border-color:var(--pagina-zacht,#d3d7db);color:var(--pagina-zacht,#6b7280)}