/* EnergyShare D2D Portal. Huisstijl EnergyShare: donkergroen #2D5728 (de app zelf) en limoen #96BC33 (sales en accent).
   Buitenwerk op een iPad: licht, hoog contrast (leesbaar in de zon), grote tikvlakken.
   Werkbon (22-10-2026): de looplijst is het scherm; het adres opent ernaast (iPad) of erin (telefoon), nooit eroverheen. */
:root{
  color-scheme:light;
  /* richting A · Rustig (22-10-2026): neutraal papier en witte kaarten; donkergroen alleen voor de hoofdactie en de actieve tab,
     limoen alleen voor voortgang, live en sales. Elke kleur in app.css en app.js komt uit deze set; donker staat eronder. */
  --bg:#F4F5F2; --papier:#FFFFFF; --mist:#F1F3EF; --lijn:#E1E5DE; --inkt:#18211B; --inkt-2:#4A564D; --zacht:#68746B; --leeg-ico:#A9B5A6;
  --rand:#7D8A80; /* randen van velden, knoppen en deuren: minstens 3:1 op wit, ook in de zon */
  --merk:#2D5728; --merk-donker:#1F3E1B; --merk-licht:#E8EFE4; --merk-tekst:#2D5728; --op-merk:#FFFFFF; --op-merk-zacht:#D7E6CE;
  --limoen:#96BC33; --limoen-licht:#EFF6DC; --limoen-rand:#D5E6A6; --limoen-inkt:#16300F;
  --rood:#C62828; --rood-licht:#FDECEC; --rood-rand:#F2B8B8; --op-rood:#FFFFFF;
  --geel:#F3C623; --geel-licht:#FFF3DE; --geel-rand:#F1D9A6; --geel-inkt:#6B4600; --geel-sel:#FFF6CF; --sel-licht:#FFFBEA; --sel-rand:#E2C556;
  --amber:#946010; --blauw:#2459C7; --blauw-licht:#E8EFFC; --blauw-rand:#C9D7F3; --goud:#8A6500; --groen:#276B2B;
  --balk:#FFFFFF; --balk-inkt:#4A564D; --balk-hover:#F1F3EF; --balk-aan:#E8EFE4; --balk-aan-inkt:#1F3E1B;
  --vlak:#2D5728; --op-vlak:#FFFFFF; --op-vlak-zacht:#CFE3A0; /* het merkvlak van het inlogscherm */
  --toast:#18211B; --op-toast:#FFFFFF; --toast-actie:#96BC33;
  --glas:rgba(255,255,255,.88); --glas-sterk:rgba(255,255,255,.96); --glas-zwak:rgba(255,255,255,.75);
  /* status van een adres (chip met icoon en tekst): tekst en achtergrond halen samen minstens 4,5:1 */
  --s-open:#68746B; --s-nietthuis:#8C560A; --s-terug:#2459C7; --s-klant:#276B2B; --s-nee:#C62828; --s-info:#6E45B8;
  --s-open-bg:#F1F3EF; --s-nietthuis-bg:#FFF3DE; --s-terug-bg:#E8EFFC; --s-klant-bg:#E6F2E6; --s-nee-bg:#FDECEC; --s-info-bg:#F1ECFA;
  --live:#3E9B2F; --oud:#946010; --offline:#8A948C; --ik:#2459C7;
  /* kaart: ondergrond en stippen. app.js leest de --k-… en --ag-… bij het opstarten en bij een themawissel */
  --kaart-bg:#E8ECE6; --kaart-filter:saturate(.3) brightness(1.08) contrast(.95);
  --k-open:#FFFFFF; --k-open-rand:#2D5728; --k-later:#B7791F; --k-af:#C3CBC1; --k-selectie:#F3C623; --k-selectie-rand:#17211A;
  --k-gekozen:#F3C623; --k-klant:#96BC33; --k-klant-rand:#2D5728; --k-rust:#C3CBC1; --k-ik:#2459C7;
  --k-vrij:#22943F; --k-vrij-rand:#145A26; /* beschikbaar op de inschietkaart: groen vinkje, los van het limoen van een klant */
  --k-stip-rand:#FFFFFF; --k-neenee-rand:#7A1010;
  /* kleur per agent op de inschietkaart: niet het groen van de app, niet het limoen van een klant, niet het blauw van de eigen stip */
  --ag-1:#0E7C86; --ag-2:#B7791F; --ag-3:#6E45B8; --ag-4:#C2185B; --ag-5:#5D4037; --ag-6:#455A64; --ag-7:#D84315; --ag-8:#8E24AA; --op-ag:#FFFFFF;
  --schaduw-1:0 1px 2px rgba(23,33,26,.06),0 1px 3px rgba(23,33,26,.06);
  --schaduw:0 2px 4px rgba(23,33,26,.05),0 8px 24px rgba(23,33,26,.09);
  --schaduw-3:0 12px 40px rgba(23,33,26,.22);
  --schaduw-rand:0 -6px 18px rgba(23,33,26,.08); --schaduw-onder:0 6px 16px rgba(23,33,26,.08);
  --schaduw-pin:0 1px 4px rgba(0,0,0,.35); --paneel-schaduw:rgba(23,33,26,.10);
  --r-klein:8px; --r:12px; --r-groot:18px;
  --rail:84px; --paneel:420px;
  --snel:.16s; --midden:.24s; --zacht-curve:cubic-bezier(.2,.7,.2,1);
  --veilig-onder:env(safe-area-inset-bottom,0px); --veilig-boven:env(safe-area-inset-top,0px);
}
/* donker: gekozen onder Ik (thema.js zet data-thema vóór het tekenen), of het systeem als er niets gekozen is */
:root[data-thema=donker]{
  color-scheme:dark;
  --bg:#0E1310; --papier:#161D18; --mist:#1C251F; --lijn:#2A352D; --inkt:#E7EDE8; --inkt-2:#B6C2B9; --zacht:#8D9A91; --leeg-ico:#56635A;
  --rand:#627066;
  --merk:#96BC33; --merk-donker:#A9CF57; --merk-licht:#1F2D1C; --merk-tekst:#A9CF57; --op-merk:#132510; --op-merk-zacht:#234018;
  --limoen:#96BC33; --limoen-licht:#1F2D1C; --limoen-rand:#3A4F22; --limoen-inkt:#132510;
  --rood:#F07A7A; --rood-licht:#3A1A1A; --rood-rand:#6A2A2A; --op-rood:#2A0E0E;
  --geel-licht:#2E2412; --geel-rand:#5A4520; --geel-inkt:#E0A64A; --geel-sel:#332B10; --sel-licht:#2A2510; --sel-rand:#7A6524;
  --amber:#E0A64A; --blauw:#7FA6F5; --blauw-licht:#18243B; --blauw-rand:#2A3D63; --goud:#E0B84A; --groen:#7CC47F;
  --balk:#121915; --balk-inkt:#9AA79E; --balk-hover:#1C251F; --balk-aan:#1F2D1C; --balk-aan-inkt:#C4E07F;
  --vlak:#14200F; --op-vlak:#E7EDE8; --op-vlak-zacht:#A9CF57;
  --toast:#E7EDE8; --op-toast:#0E1310; --toast-actie:#2D5728;
  --glas:rgba(22,29,24,.9); --glas-sterk:rgba(22,29,24,.96); --glas-zwak:rgba(22,29,24,.75);
  --s-open:#8D9A91; --s-nietthuis:#E0A64A; --s-terug:#7FA6F5; --s-klant:#7CC47F; --s-nee:#F07A7A; --s-info:#B39AF0;
  --s-open-bg:#1C251F; --s-nietthuis-bg:#2E2412; --s-terug-bg:#18243B; --s-klant-bg:#183020; --s-nee-bg:#3A1A1A; --s-info-bg:#261F3A;
  --live:#7CC47F; --oud:#E0A64A; --offline:#6E7A71; --ik:#7FA6F5;
  /* donkere kaart: de grijze PDOK-ondergrond, gedimd; niet omgekeerd, zodat water en groen herkenbaar blijven */
  --kaart-bg:#1A211C; --kaart-filter:brightness(.5) contrast(1.15);
  --k-ik:#7FA6F5;
  --schaduw-1:0 1px 2px rgba(0,0,0,.4);
  --schaduw:0 2px 4px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --schaduw-3:0 12px 40px rgba(0,0,0,.6);
  --schaduw-rand:0 -6px 18px rgba(0,0,0,.35); --schaduw-onder:0 6px 16px rgba(0,0,0,.35); --paneel-schaduw:rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){:root:not([data-thema=licht]){
  color-scheme:dark;
  --bg:#0E1310; --papier:#161D18; --mist:#1C251F; --lijn:#2A352D; --inkt:#E7EDE8; --inkt-2:#B6C2B9; --zacht:#8D9A91; --leeg-ico:#56635A;
  --rand:#627066;
  --merk:#96BC33; --merk-donker:#A9CF57; --merk-licht:#1F2D1C; --merk-tekst:#A9CF57; --op-merk:#132510; --op-merk-zacht:#234018;
  --limoen:#96BC33; --limoen-licht:#1F2D1C; --limoen-rand:#3A4F22; --limoen-inkt:#132510;
  --rood:#F07A7A; --rood-licht:#3A1A1A; --rood-rand:#6A2A2A; --op-rood:#2A0E0E;
  --geel-licht:#2E2412; --geel-rand:#5A4520; --geel-inkt:#E0A64A; --geel-sel:#332B10; --sel-licht:#2A2510; --sel-rand:#7A6524;
  --amber:#E0A64A; --blauw:#7FA6F5; --blauw-licht:#18243B; --blauw-rand:#2A3D63; --goud:#E0B84A; --groen:#7CC47F;
  --balk:#121915; --balk-inkt:#9AA79E; --balk-hover:#1C251F; --balk-aan:#1F2D1C; --balk-aan-inkt:#C4E07F;
  --vlak:#14200F; --op-vlak:#E7EDE8; --op-vlak-zacht:#A9CF57;
  --toast:#E7EDE8; --op-toast:#0E1310; --toast-actie:#2D5728;
  --glas:rgba(22,29,24,.9); --glas-sterk:rgba(22,29,24,.96); --glas-zwak:rgba(22,29,24,.75);
  --s-open:#8D9A91; --s-nietthuis:#E0A64A; --s-terug:#7FA6F5; --s-klant:#7CC47F; --s-nee:#F07A7A; --s-info:#B39AF0;
  --s-open-bg:#1C251F; --s-nietthuis-bg:#2E2412; --s-terug-bg:#18243B; --s-klant-bg:#183020; --s-nee-bg:#3A1A1A; --s-info-bg:#261F3A;
  --live:#7CC47F; --oud:#E0A64A; --offline:#6E7A71; --ik:#7FA6F5;
  /* donkere kaart: de grijze PDOK-ondergrond, gedimd; niet omgekeerd, zodat water en groen herkenbaar blijven */
  --kaart-bg:#1A211C; --kaart-filter:brightness(.5) contrast(1.15);
  --k-ik:#7FA6F5;
  --schaduw-1:0 1px 2px rgba(0,0,0,.4);
  --schaduw:0 2px 4px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --schaduw-3:0 12px 40px rgba(0,0,0,.6);
  --schaduw-rand:0 -6px 18px rgba(0,0,0,.35); --schaduw-onder:0 6px 16px rgba(0,0,0,.35); --paneel-schaduw:rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--inkt);font:16px/1.5 Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--merk);outline-offset:2px}
/* op donkergroen is limoen wel goed zichtbaar */
.login-merk :focus-visible{outline-color:var(--limoen)}
.toast :focus-visible,.melding-ok :focus-visible{outline-color:var(--toast-actie)}
.vel h2:focus{outline:none}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.zacht{color:var(--zacht)}
.klein{font-size:13px}
.fout{color:var(--rood);min-height:1.4em;margin:4px 0}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* knoppen en velden */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r);border:1px solid var(--rand);background:var(--papier);font-weight:600;transition:background var(--snel),border-color var(--snel),transform var(--snel)}
.knop:hover{border-color:var(--inkt-2)}
.knop:active{transform:scale(.98)}
.knop-hoofd{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.knop-hoofd:hover{background:var(--merk-donker);border-color:var(--merk-donker)}
.knop-limoen{background:var(--limoen);border-color:var(--limoen);color:var(--limoen-inkt)}
.knop-rood{background:var(--papier);border-color:var(--rood);color:var(--rood)}
.knop-klein{min-height:38px;padding:0 12px;font-size:14px;border-radius:var(--r-klein)}
.knop-breed{width:100%}
.knop:disabled{opacity:.5;cursor:not-allowed}
label{display:block;font-weight:500;font-size:14px;color:var(--inkt-2);margin:12px 0 0}
input,select,textarea{display:block;width:100%;margin-top:6px;min-height:48px;padding:10px 12px;border:1px solid var(--rand);border-radius:var(--r);background:var(--papier);transition:border-color var(--snel),box-shadow var(--snel)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--merk);box-shadow:0 0 0 2px var(--merk)}
textarea{min-height:72px;resize:vertical}
input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--merk);flex:none;box-shadow:none}
.zoekveld{position:relative}
.zoekveld .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--zacht)}
.zoekveld input{padding-left:44px;margin:0}

/* inloggen */
/* één merkvlak over de hele pagina met de inlogkaart erop (23-10-2026, keuze Stijn); was een tweedeling groen | wit */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:24px;padding:32px 16px;
  /* de gloed als achtergrond, niet als los vlak met overflow:hidden: zo'n vlak kan meescrollen bij focus en dan valt de kop weg */
  background:radial-gradient(circle 260px at right 100px bottom 100px,color-mix(in srgb,var(--limoen) 35%,transparent),transparent 65%) var(--vlak)}
.login-merk{color:var(--op-vlak);display:flex;align-items:center;gap:16px}
.login-kop{width:56px;height:auto}
.login-titel{font-size:30px;font-weight:700;margin:0;letter-spacing:-.02em}
.login-slogan{display:none}
.login-kaart{width:100%;max-width:420px;padding:32px 28px;background:var(--papier);border-radius:var(--r-groot);box-shadow:var(--schaduw-3)}
.login-logo{width:220px;height:auto;margin:0 0 28px -4px}
.login h1{font-size:28px}
.login .zacht{margin:4px 0 8px}
.login .knop{width:100%;margin-top:8px}

/* opbouw */
.app{display:grid;grid-template-columns:var(--rail) var(--paneel) 1fr;height:100%;height:100dvh}
.rail{background:var(--balk);border-right:1px solid var(--lijn);display:flex;flex-direction:column;align-items:center;padding:calc(14px + var(--veilig-boven)) 0 14px;gap:4px;z-index:20}
.rail-logo{margin-bottom:16px}
.rail-logo img{width:36px;height:auto;display:block}
.rail-knop{width:68px;min-height:62px;border:0;border-radius:var(--r);background:none;color:var(--balk-inkt);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:500;transition:background var(--snel),color var(--snel)}
.rail-knop svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail-knop:hover{color:var(--inkt);background:var(--balk-hover)}
.rail-knop.aan{background:var(--balk-aan);color:var(--balk-aan-inkt);font-weight:600}
.rail-vul{flex:1}
.rail-knop[data-paneel=kaart]{display:none}
.app:not(.admin) .alleen-admin,.app.admin .alleen-verkoper{display:none}
.demo-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--limoen-inkt);background:var(--geel);border-radius:6px;padding:2px 6px;margin-bottom:6px}

.paneel{background:var(--bg);border-right:1px solid var(--lijn);display:flex;flex-direction:column;min-height:0;z-index:10}
.paneel-inhoud{--pad:22px;overflow-y:auto;flex:1;padding:var(--pad) var(--pad) 36px}
.status{padding:10px 22px;font-size:14px;font-weight:500;border-bottom:1px solid var(--lijn)}
.status.offline{background:var(--geel-licht)}
.status.afkoel{background:var(--merk-licht)}

.kaartvlak{position:relative;min-width:0}
.kaart{position:absolute;inset:0;background:var(--kaart-bg)}
.kaart-knoppen{position:absolute;right:16px;bottom:24px;z-index:500;display:flex;flex-direction:column;gap:8px}
.rond{width:52px;height:52px;border-radius:50%;border:0;background:var(--papier);box-shadow:var(--schaduw);display:grid;place-items:center}
.rond svg{width:22px;height:22px;fill:var(--merk);stroke:none}
.legenda{position:absolute;left:16px;bottom:24px;z-index:500;background:var(--glas-sterk);border-radius:var(--r);box-shadow:var(--schaduw);padding:8px 12px;font-size:13px;max-width:calc(100% - 100px)}
.legenda-items{display:flex;flex-wrap:wrap;gap:4px 12px}
.legenda-items span{display:inline-flex;align-items:center;gap:6px}
.legenda-knop{display:none;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 6px;border:0;background:none;font-weight:600;font-size:14px}
.legenda-knop .ico{width:16px;height:16px;transition:transform var(--snel)}
.legenda.open .legenda-knop .ico{transform:rotate(180deg)}
.stip{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none;border:2px solid transparent}
.stip-vink{width:14px;height:14px;position:relative}
.stip-vink::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6px;border:solid var(--vink,var(--k-stip-rand));border-width:0 2px 2px 0;transform:rotate(45deg)}
.kaart-melding{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:600;background:var(--toast);color:var(--op-toast);border-radius:99px;padding:8px 16px;font-size:14px;font-weight:500;box-shadow:var(--schaduw);white-space:nowrap}
.tekenbalk{position:absolute;top:16px;left:16px;right:72px;z-index:650;background:var(--papier);border-radius:var(--r);box-shadow:var(--schaduw);padding:10px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tekenbalk b{margin-right:auto;font-weight:600}

/* paneelkoppen en blokken */
.kop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.kop h1,.kop h2{font-size:26px}
.kop .zacht{font-size:14px}
.blok{border:1px solid var(--lijn);border-radius:var(--r);padding:16px;margin-bottom:14px;background:var(--papier);box-shadow:var(--schaduw-1)}
.blok h3{font-size:17px;margin-bottom:8px}
.blok-kop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.blok-kop h3{margin:0}
details.blok summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:28px}
details.blok summary::-webkit-details-marker{display:none}
details.blok summary::after{content:"+";font-size:22px;color:var(--zacht);font-weight:400}
details.blok[open] summary::after{content:"–"}
.nieuw{animation:in var(--midden) var(--zacht-curve) both}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.chip{border:1px solid var(--rand);background:var(--papier);border-radius:99px;padding:6px 14px;font-size:14px;font-weight:500;white-space:nowrap;min-height:38px;transition:background var(--snel),color var(--snel)}
.chip.aan{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--mist);border:1px solid var(--lijn);border-radius:var(--r);padding:4px;gap:4px;margin-bottom:16px}
.segment button{border:0;background:none;border-radius:var(--r-klein);min-height:40px;font-weight:500;color:var(--inkt-2)}
.segment button.aan{background:var(--papier);color:var(--merk);font-weight:600;box-shadow:var(--schaduw-1)}

/* looplijst (werkbon): per straat een kop die bovenaan blijft staan (routenummer, naam, open, kantkeuze),
   per pand één rij: het huisnummer links zoals het bordje op de gevel, de deuren met hun volledige nummer ernaast.
   De stand staat in woorden onder het nummer; de kleur van de uitkomst als onderrand. */
.straatblok{margin-top:14px}
.straat{position:sticky;top:calc(-1 * var(--pad));z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 calc(-1 * var(--pad));padding:10px var(--pad) 8px;
  background:var(--bg);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);cursor:pointer;list-style:none}
.straat::-webkit-details-marker{display:none}
.straat-naam{flex:1 1 auto;min-width:0;font-weight:600;font-size:19px;line-height:1.2;overflow-wrap:break-word}
.straat-naam small{display:block;font-weight:500;color:var(--zacht);font-size:13px}
.straat-balk{flex-basis:100%;display:block;height:4px;border-radius:99px;background:var(--lijn);overflow:hidden}
.straat-balk i{display:block;height:100%;background:var(--limoen);border-radius:99px}
.straatblok:not([open]) .straat{color:var(--zacht)}
.kanten{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:3px}
.kanten button{border:0;background:none;border-radius:var(--r-klein);min-height:40px;padding:0 12px;font-weight:600;color:var(--inkt-2);white-space:nowrap}
.kanten button span{font-weight:500;color:var(--zacht);font-size:13px;margin-left:2px}
.kanten button.aan{background:var(--merk);color:var(--op-merk)}
.kanten button.aan span{color:var(--op-merk-zacht)}
.kant-een{font-size:14px;font-weight:500;color:var(--zacht)}
/* adreskaart per pand (ronde 1 uitstraling, richting A): groot huisnummer met de toevoegingen eronder, de stand als chip met icoon en tekst,
   één regel extra en een pijl. Eén deur: de kaart is de knop; een portiek: per deur een knop in de kaart */
.panden{display:grid;gap:8px;padding:10px 0 6px}
.pand{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:68px;padding:10px 12px;border-radius:14px;
  border:1px solid var(--lijn);background:var(--papier);color:var(--inkt);text-align:left;font:inherit;box-shadow:var(--schaduw-1);transition:border-color var(--snel),transform var(--snel)}
.pand.meer{grid-template-columns:56px minmax(0,1fr)}
button.pand:hover{border-color:var(--rand)}
button.pand:active{transform:scale(.99)}
.pand.sel{border:2px solid var(--merk-tekst);padding:9px 11px}
.pand.klaar{background:var(--mist);box-shadow:none}
.pand.klaar .pand-nr{color:var(--inkt-2)}
.pand-nr{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}
.pand-nr small{display:block;font-size:12px;font-weight:600;color:var(--zacht);letter-spacing:0;margin-top:3px;line-height:1.2}
.pand-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:13px;color:var(--inkt-2);overflow-wrap:anywhere}
.pand-pijl{color:var(--zacht)}
.schip{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:13px;font-weight:600;padding:3px 9px;border-radius:99px;line-height:1.3}
.schip .ico{width:14px;height:14px;stroke-width:2.4}
.s-open{color:var(--s-open);background:var(--s-open-bg)}
.s-nietthuis{color:var(--s-nietthuis);background:var(--s-nietthuis-bg)}
.s-terug{color:var(--s-terug);background:var(--s-terug-bg)}
.s-klant{color:var(--s-klant);background:var(--s-klant-bg)}
.s-nee{color:var(--s-nee);background:var(--s-nee-bg)}
.s-info{color:var(--s-info);background:var(--s-info-bg)}
.pand-deuren{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.deur{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;max-width:100%;min-height:52px;padding:6px 10px;border-radius:10px;border:1px solid transparent;
  font-weight:600;text-align:left;transition:transform var(--snel),border-color var(--snel)}
.deur b{font-size:17px;line-height:1.1;color:var(--inkt)}
.deur small{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;overflow-wrap:anywhere}
.deur small .ico{width:13px;height:13px;stroke-width:2.4}
.deur:hover{border-color:var(--rand)}
.deur:active{transform:scale(.97)}
.deur.gekozen{border:2px solid var(--merk-tekst);padding:5px 9px}
.leeg{padding:32px 12px;text-align:center;color:var(--zacht)}
.leeg .ico{width:36px;height:36px;color:var(--leeg-ico);display:block;margin:0 auto 10px}
.leeg b{display:block;color:var(--inkt);font-size:17px;font-weight:600;margin-bottom:4px}
.filters{flex-wrap:nowrap}
.filters .chip{flex:1 1 0;min-width:0;padding:6px 8px;overflow:hidden;text-overflow:ellipsis}

/* werkkop: één regel met naam, voortgang en verzendstatus; de tellers eronder */
.werkkop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:6px}
.werkkop-naam{flex:1 1 150px;min-width:0}
.werkkop-naam h1{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.werkkop-naam small{display:block;font-size:13px;color:var(--zacht)}
.voortgang{flex:0 1 120px;min-width:100px}
.voortgang b{display:block;font-size:18px;font-weight:700;line-height:1.1}
.voortgang-balk{display:block;height:8px;border-radius:99px;background:var(--mist);margin-top:5px;overflow:hidden}
.voortgang-balk i{display:block;height:100%;background:var(--limoen);border-radius:99px;transition:width .5s var(--zacht-curve)}
.werkkop .sync:not(.pil){flex-basis:100%;margin:0}
.werkkop-tellers{margin:0 0 14px;font-size:15px;color:var(--inkt-2)}
.werkkop-tellers .sale{color:var(--merk);font-weight:600}
.tekstlink{border:0;background:none;padding:6px 0;font-weight:600;color:var(--merk);text-decoration:underline;text-underline-offset:3px}

/* scorebord */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:12px 14px;box-shadow:var(--schaduw-1)}
.kpi span{display:block;font-size:13px;color:var(--zacht)}
.kpi b{display:block;font-size:28px;font-weight:700;line-height:1.15}
.kpi.sale{background:var(--limoen-licht);border-color:var(--limoen-rand)}
.kpi.sale b{color:var(--merk)}
.delta{font-size:12px;font-weight:500;color:var(--zacht)}
.delta.op{color:var(--groen)}
.delta.neer{color:var(--rood)}
.rang{list-style:none;margin:0;padding:0}
.rang li{display:grid;grid-template-columns:26px 40px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--lijn)}
.rang li:first-child{border-top:0}
.rang li.ik{background:var(--limoen-licht);margin:0 -10px;padding:10px;border-radius:var(--r-klein);border-top-color:transparent}
.rang li.ik + li{border-top-color:transparent}
.rang-plek{font-weight:700;font-size:16px;color:var(--zacht);text-align:center}
.rang li.eerste .rang-plek{color:var(--goud)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--merk-licht);color:var(--merk);display:grid;place-items:center;font-weight:600;font-size:15px;position:relative}
.avatar.actief::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--limoen);border:2px solid var(--papier)}
.rang-naam{min-width:0}
.rang-naam b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rang-naam small{color:var(--zacht);font-size:13px}
.rang-balk{height:5px;border-radius:99px;background:var(--mist);margin-top:5px;overflow:hidden}
.rang-balk i{display:block;height:100%;background:var(--limoen);border-radius:99px;transition:width .5s var(--zacht-curve)}
.rang-score{text-align:right;line-height:1.1}
.rang-score b{font-size:22px;font-weight:700;color:var(--merk)}
.rang-score small{display:block;font-size:12px;color:var(--zacht)}
/* staafgrafieken: elke kolom is een knop over de volle hoogte (ook een lage staaf is te raken); de cijfers staan eronder */
.grafiek,.uurbalk{display:flex;align-items:stretch;gap:3px;height:120px;margin-top:6px}
.staaf{flex:1;min-width:0;border:0;padding:0;background:none;display:flex;align-items:flex-end;border-radius:4px 4px 0 0}
.staaf>span{display:block;width:100%;background:var(--merk-licht);border-radius:4px 4px 0 0;position:relative;min-height:2px}
.staaf>span i{position:absolute;left:0;right:0;bottom:0;background:var(--limoen);border-radius:4px 4px 0 0}
.uurbalk .staaf>span{background:var(--merk);border-radius:3px 3px 0 0}
.staaf.aan>span{box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--inkt)}
.staaf-uitleg{font-size:14px;font-weight:500;margin:8px 0 0;min-height:1.5em}
.grafiek-labels{display:flex;gap:3px;font-size:11px;color:var(--zacht);margin-top:4px}
.grafiek-labels span{flex:1;text-align:center;min-width:0;overflow:hidden;white-space:nowrap}
.legenda-klein{display:flex;gap:14px;font-size:12px;color:var(--zacht);margin-top:8px}
.legenda-klein span{display:inline-flex;align-items:center;gap:6px}
.legenda-klein i{width:10px;height:10px;border-radius:3px;display:inline-block}
.sale-rij{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);font-size:14px}
.sale-rij:first-of-type{border-top:0}
.sale-ico{width:30px;height:30px;border-radius:50%;background:var(--limoen-licht);color:var(--merk);display:grid;place-items:center;flex:none}
.sale-ico .ico{width:16px;height:16px;stroke-width:2.5}
.skelet{background:linear-gradient(90deg,var(--mist) 25%,var(--lijn) 37%,var(--mist) 63%);background-size:400% 100%;animation:glans 1.2s ease infinite;border-radius:var(--r);height:72px;margin-bottom:10px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--lijn);vertical-align:middle}
th{font-weight:500;color:var(--zacht);font-size:13px}
td.getal,th.getal{text-align:right}
/* dagrapport: per verkoper een kaartje met de cijfers in twee kolommen, op elke breedte. Het paneel is hooguit ±400 px breed;
   als tabel paste het niet meer sinds de kolom Adressen erbij kwam (22-10-2026) */
.rijtabel tr:first-child{display:none}
.rijtabel tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--lijn)}
.rijtabel td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:8px}
.rijtabel td::before{content:attr(data-label);color:var(--zacht);font-size:13px}
.rijtabel td.rijnaam{grid-column:1/-1;display:block;font-weight:600;font-size:15px}
.rij{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* teamlijst (Beheer): naam bovenaan, de knoppen eronder even breed; past het niet naast elkaar, dan onder elkaar */
.teamlijst{list-style:none;margin:0;padding:0}
.teamlijst li{padding:12px 0;border-bottom:1px solid var(--lijn)}
.teamlid{display:flex;align-items:center;gap:12px;min-width:0}
.teamlid>div{min-width:0;overflow-wrap:anywhere}
.teamknoppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:10px}
.teamknoppen .knop{white-space:nowrap;padding:0 10px}
.schakel{display:flex;align-items:center;gap:12px;padding:6px 0;font-weight:500;color:var(--inkt)}
.wachtwoordvak{font-family:ui-monospace,Consolas,monospace;background:var(--geel-licht);padding:10px 12px;border-radius:var(--r-klein);font-size:17px;user-select:all;margin:8px 0}
.tellers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.teller{background:var(--mist);border-radius:var(--r);padding:10px 12px}
.teller b{display:block;font-size:24px;line-height:1.1}
.teller span{font-size:13px;color:var(--zacht)}
.uurbalk{height:90px;margin-top:10px}
.uurbalk-labels{display:flex;gap:3px;font-size:11px;color:var(--zacht)}
.uurbalk-labels span{flex:1;text-align:center}

/* inschieten (werkbon): agents | werk | kaart. De agentkolom toont per agent open, dagen werk (balk vol bij 3 dagen) en een vlag bij minder dan een dag;
   de werkkolom is een stappenplan: wat wil je doen, hoe kiezen, selectie. Onder iPad liggend staan de agents als rij kaartjes boven het werk. */
.ins-kolommen{display:grid;gap:14px}
.ins-agenten{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-content:start}
.kolomkop{grid-column:1/-1;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.ins-agent{position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;border:1.5px solid var(--rand);background:var(--papier);border-radius:var(--r);padding:10px;text-align:left;min-height:64px;transition:border-color var(--snel),background var(--snel)}
.ins-agent .avatar{width:34px;height:34px;font-size:13px;background:var(--ag);color:var(--op-ag);flex:none}
.ins-agent-tekst{flex:1;min-width:0}
.ins-agent b{display:block;font-weight:600;font-size:15px;line-height:1.2;overflow-wrap:anywhere}
.ins-agent small{display:block;font-size:13px;color:var(--zacht)}
.ins-balk{display:block;height:5px;border-radius:99px;background:var(--mist);margin-top:6px;overflow:hidden}
.ins-balk i{display:block;height:100%;background:var(--ag);border-radius:99px}
.ins-agent.aan{border-color:var(--ag);background:var(--mist);box-shadow:0 0 0 2px var(--ag)}
.vlag{position:absolute;top:-8px;right:8px;background:var(--rood);color:var(--op-rood);font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px}
.ins-wissel{margin-bottom:12px}
.ins-wissel button.aan.rood{color:var(--rood)}
.modi{margin-bottom:10px}
.modi button{padding:0 4px;font-size:14px}
.ins-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.ins-cijfers>div{background:var(--mist);border-radius:var(--r);padding:10px 12px;min-width:0}
.ins-cijfers b{display:block;font-size:24px;font-weight:700;line-height:1.1}
.ins-cijfers span{display:block;font-size:13px;color:var(--zacht);overflow-wrap:anywhere}
.ins-cijfers .rood b,.ins-cijfers .rood span{color:var(--rood)}
.ins-cijfers .sel{background:var(--geel-sel)}
.stapblok h3{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.stapnr{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--merk);color:var(--op-merk);font-size:14px;font-weight:700;flex:none}
.melding-ok{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;background:var(--toast);color:var(--op-toast);border-radius:var(--r);padding:10px 12px 10px 16px;margin-bottom:12px;font-weight:500}
.melding-ok .knop{background:none;border-color:transparent;color:var(--toast-actie)}
.knop-tekst{border:0;background:none;padding:10px 0;min-height:44px;font-weight:600;color:var(--merk);text-decoration:underline;text-underline-offset:3px;text-align:left}
.knop-tekst.rood{color:var(--rood)}
.meer h4{margin:16px 0 6px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.meer summary + h4{margin-top:12px}
.rood{color:var(--rood)}
.aantallen{display:flex;gap:6px;margin-top:12px}
.aantallen .chip{flex:1}
.selectie{border-color:var(--sel-rand);background:var(--sel-licht)}
.straatlijst{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.straatchip{display:inline-flex;align-items:center;gap:6px;background:var(--papier);border:1px solid var(--lijn);border-radius:99px;padding:3px 4px 3px 12px;font-size:13px;font-weight:500}
.straatchip small{color:var(--zacht)}
.straatchip button{width:26px;height:26px;border:0;border-radius:50%;background:var(--mist);display:grid;place-items:center;padding:0}
.straatchip .ico{width:14px;height:14px}
.plaats{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--lijn);background:none;padding:9px 2px;min-height:48px;font-weight:500}
.meer h4 + .plaats{border-top:0}
.plaats-cijfers{text-align:right;line-height:1.15}
.plaats-cijfers b{display:block;color:var(--merk);font-size:16px}
.plaats-cijfers small{color:var(--zacht);font-size:12px;font-weight:400}
.label.stand-b{background:var(--limoen-licht);color:var(--merk)}
.label.stand-i{background:var(--blauw-licht);color:var(--blauw)}
.label.stand-k{background:var(--limoen);color:var(--limoen-inkt)}
.label.stand-n{background:var(--rood-licht);color:var(--rood)}
.lasso-aan .kaart{touch-action:none;cursor:crosshair}
.zoekresultaat{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--lijn);background:none;padding:10px 2px;min-height:52px}
.zoekresultaat:first-child{border-top:0}
.zoekresultaat small{display:block;color:var(--zacht);font-size:13px}
.label{display:inline-block;font-size:12px;font-weight:600;border-radius:6px;padding:2px 8px;background:var(--mist);color:var(--inkt-2);white-space:nowrap}
.label.vrij{background:var(--limoen-licht);color:var(--merk)}
.label.rood{background:var(--rood-licht);color:var(--rood)}
.importbalk{height:10px;border-radius:99px;background:var(--mist);overflow:hidden;margin:8px 0 6px}
.importbalk i{display:block;height:100%;background:linear-gradient(90deg,var(--merk),var(--limoen))}

/* adresvenster: op de iPad vast in de rechterkolom onder een kaartstrook (nooit over de kaart), bij de admin over het paneel;
   op de telefoon opent het in de lijst onder het gekozen pand (inline-vel), met het vel van onderen als reserve */
.vel{position:fixed;z-index:1000;background:var(--papier);display:flex;flex-direction:column;overflow:hidden}
.vel-kop{padding:18px 20px 16px;border-bottom:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start}
.terugknop{flex-basis:100%;justify-content:flex-start}
.vel-adres{flex:1;min-width:0}
.vel-adres h2{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.vel-adres p{margin:6px 0 0;font-size:15px;color:var(--zacht)}
.sluit{width:44px;height:44px;border-radius:50%;border:0;background:var(--mist);display:grid;place-items:center;flex:none}
.vel-body{overflow-y:auto;padding:16px 20px 22px;flex:1}
.feiten{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.feit{background:var(--mist);border-radius:99px;padding:4px 12px;font-size:14px;font-weight:500}
.feit.rood{background:var(--rood-licht);color:var(--rood);font-weight:600}
.uitkomsten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* uitkomst: witte knop met de kleur van de uitkomst als balk links (dezelfde kleur als de onderrand van de deur) */
.uitkomst{position:relative;overflow:hidden;min-height:64px;border-radius:var(--r);border:1.5px solid var(--rand);background:var(--papier);color:var(--inkt);font-weight:600;font-size:17px;text-align:left;
  padding:10px 14px 10px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;overflow-wrap:anywhere;transition:transform var(--snel),border-color var(--snel)}
.uitkomst:hover{border-color:var(--inkt-2)}
.uitkomst:active{transform:scale(.98)}
.uk-balk{position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--uk)}
.uitkomst small{font-size:13px;font-weight:500;color:var(--zacht)}
.uitkomst.kans{width:100%;flex-direction:row;align-items:center;gap:10px;min-height:68px;margin-top:8px;padding-left:16px;background:var(--limoen);border-color:var(--limoen);color:var(--limoen-inkt);font-size:18px}
.uitkomst .ico{width:22px;height:22px;flex:none}
.scheid{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.scheid::before,.scheid::after{content:"";flex:1;height:1px;background:var(--lijn)}
.eerder,.eerder-vast{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r);padding:10px 14px;margin-bottom:12px;font-size:15px;background:var(--mist);overflow-wrap:anywhere}
.eerder .ico{width:18px;height:18px;margin-top:3px;color:var(--zacht)}
.eerder-vast{background:var(--geel-licht);font-weight:600}
.stap{border:1px solid var(--lijn);border-radius:var(--r);padding:14px;margin-top:12px;background:var(--bg)}
.stap h3{font-size:18px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.stap h3 .ico{width:20px;height:20px}
.vink{display:flex;align-items:center;gap:12px;min-height:48px;font-size:16px;font-weight:500;color:var(--inkt)}
.knoppenrij{display:flex;gap:8px;margin-top:12px}
.knoppenrij .knop{flex:1;min-height:56px}
.knoppenrij .knop[data-actie=bevestig]{flex:2;flex-direction:column;gap:0;line-height:1.2;text-align:center}
.knop small{display:block;font-size:12px;font-weight:500;opacity:.85}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin:8px 0 10px}
.tegel{min-height:64px;border:1.5px solid var(--rand);border-radius:var(--r);background:var(--papier);font-weight:600;font-size:17px;text-align:left;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.tegel small{font-size:13px;font-weight:500;color:var(--zacht)}
.tegel.aan{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.tegel.aan small{color:var(--op-merk-zacht)}
.andere-datum{margin-top:0}
.salesdock{margin-top:12px;border:1px dashed var(--rand);border-radius:var(--r);padding:12px 14px;font-size:14px;color:var(--zacht)}
.historie{margin-top:18px}
.historie h3{font-size:15px;margin-bottom:6px}
.historie summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;color:var(--inkt-2)}
.hist{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);font-size:14px;align-items:flex-start}
.hist .stip{margin-top:4px}
.hist.ingetrokken{opacity:.5;text-decoration:line-through}
.neenee-blok{background:var(--rood-licht);color:var(--rood);border-radius:var(--r);padding:14px;font-weight:600}
.acties{display:grid;gap:8px;margin-top:6px}

/* melding na vastleggen: een donkere balk bovenaan de lijst, met Ongedaan maken */
.toast{position:fixed;z-index:2000;left:calc(var(--rail) + 12px);width:calc(var(--paneel) - 24px);top:calc(12px + var(--veilig-boven));background:var(--toast);color:var(--op-toast);border-radius:var(--r);padding:12px 14px 12px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--schaduw-3);font-weight:500;overflow-wrap:anywhere}
.toast button{flex:none}
.toast button{background:none;border:0;color:var(--toast-actie);font-weight:600;min-height:36px;padding:0 6px}
.toast.fout{background:var(--rood);color:var(--op-rood)}
.toast.fout button{color:var(--op-rood)}

.ik-stip{width:18px;height:18px;border-radius:50%;background:var(--k-ik);border:3px solid var(--k-stip-rand);box-shadow:0 0 0 2px color-mix(in srgb,var(--k-ik) 35%,transparent),var(--schaduw-pin)}
.leaflet-container{font-family:inherit;background:var(--kaart-bg)}

/* kaart in premium stijl: gedempte PDOK-ondergrond (water blijft blauw, wegen leesbaar), zwevende knoppen en legenda als glaskaart,
   zachte schaduw langs het paneel en een pulserende ring om het gekozen huis */
.leaflet-tile-pane{filter:var(--kaart-filter)}
.kaartvlak::before{content:"";position:absolute;inset:0 auto 0 0;width:14px;z-index:450;pointer-events:none;background:linear-gradient(90deg,var(--paneel-schaduw),transparent)}
.leaflet-bar{border:0!important;border-radius:var(--r)!important;box-shadow:var(--schaduw)!important;overflow:hidden}
.leaflet-bar a{width:40px!important;height:40px!important;line-height:40px!important;color:var(--merk)!important;font-size:20px!important;font-weight:500;border-bottom:1px solid var(--lijn)!important;background:var(--papier)}
.leaflet-bar a:last-child{border-bottom:0!important}
.leaflet-bar a:hover{background:var(--mist)}
.leaflet-top.leaflet-right{margin:16px 16px 0 0}.leaflet-top.leaflet-right .leaflet-control{margin:0}
.leaflet-control-attribution{background:var(--glas-zwak)!important;border-radius:6px 0 0 0;font-size:10px;color:var(--zacht)!important}
.leaflet-tooltip{border:0;border-radius:var(--r-klein);box-shadow:var(--schaduw);font-weight:500;font-size:13px;padding:6px 10px;color:var(--inkt)}
.legenda,.rond{background:var(--glas);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
.puls{pointer-events:none}
.puls::before,.puls::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--k-gekozen)}
.puls::after{animation:puls 1.8s var(--zacht-curve) infinite}
@keyframes puls{from{transform:scale(.45);opacity:.9}to{transform:scale(1.25);opacity:0}}
.puls::before{transform:scale(.62);opacity:.35}

@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes glans{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* iPad staand (en kleine iPad liggend): smallere looplijst, kaart ernaast */
@media (min-width:700px) and (max-width:1099px){
  :root{--rail:76px;--paneel:340px}
  .rail-knop{width:64px}
  .paneel-inhoud{--pad:16px}
}
/* kleine iPad liggend: iets bredere lijst */
@media (min-width:900px) and (max-width:1099px) and (orientation:landscape){:root{--paneel:400px}}
/* iPad liggend: brede looplijst (werkbon), rechts kaartstrook met het adres eronder */
@media (min-width:1100px){
  .app:not(.admin){--paneel:520px}
  .app.admin.p-inschieten{--paneel:640px;--agentkol:210px}
  .p-inschieten .ins-kolommen{grid-template-columns:var(--agentkol) minmax(0,1fr);gap:16px}
  .p-inschieten .ins-agenten{grid-template-columns:1fr;position:sticky;top:0}
  .app.admin.p-inschieten .vel{left:calc(var(--rail) + var(--agentkol) + 38px);width:calc(var(--paneel) - var(--agentkol) - 38px)}
}
/* vanaf iPad: het adres staat vast rechts naast de lijst, onder een kaartstrook; de kaart blijft zichtbaar en het venster zweeft nergens over */
@media (min-width:700px){
  .app{--strook:clamp(200px,34vh,320px)}
  .app:not(.admin) .vel{left:calc(var(--rail) + var(--paneel));right:0;top:var(--strook);bottom:0;border-top:1px solid var(--lijn);box-shadow:var(--schaduw-rand);padding-bottom:var(--veilig-onder)}
  .app:not(.admin):has(#vel:not([hidden])) .kaartvlak{height:var(--strook);align-self:start}
  .app:not(.admin):has(#vel:not([hidden])) .legenda{display:none}
  .app:not(.admin):has(#vel:not([hidden])) .kaart-knoppen{bottom:12px}
  .app.admin .vel{left:var(--rail);width:var(--paneel);top:0;bottom:0;border-right:1px solid var(--lijn);box-shadow:var(--schaduw-3)}
}
@media (min-width:700px) and (max-width:1099px){
  .vel-kop{padding:14px 16px 12px}
  .vel-body{padding:14px 16px 18px}
  .vel-adres h2{font-size:28px}
  .uitkomst{font-size:16px;padding:10px 10px 10px 18px}
  .werkkop-naam{flex-basis:100%}
  .voortgang{flex:1 1 100px}
  .filters{gap:4px}
  .filters .chip{font-size:13px;padding:6px 4px}
}
@media (max-width:899px){
  .login-kaart{padding:28px 20px}
}
/* aanraakscherm (iPad): grotere tikvlakken, geen dubbeltik-zoom, geen grijze tikflits */
@media (pointer:coarse){
  button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .deur{min-height:56px}
  .pand{min-height:72px}
  .kanten button{min-height:48px}
  .uitkomst{min-height:72px}
  .chip{min-height:44px;padding:8px 16px}
  .knop{min-height:56px}
  .knop-klein{min-height:44px}
  .segment button{min-height:44px}
  .vink{min-height:56px}
  .vink input[type=checkbox]{width:28px;height:28px}
  .leaflet-touch .leaflet-bar a{width:44px!important;height:44px!important;line-height:44px!important}
}
/* telefoon (reserve; het team werkt op iPads): kaart vol scherm, menu onderin, panelen en afboekvel als vel van onderen */
@media (max-width:699px){
  :root{--rail:0px;--paneel:0px}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto}
  .rail{grid-row:2;border-right:0;border-top:1px solid var(--lijn);flex-direction:row;justify-content:space-around;padding:4px 4px calc(4px + var(--veilig-onder));gap:0;min-width:0}
  .rail-logo,.rail-vul,.demo-label{display:none}
  .rail-knop{flex:1 1 0;min-width:0;width:auto;min-height:56px;font-size:11px}
  .rail-knop span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail-knop[data-paneel=kaart]{display:flex}
  .paneel{grid-row:1;grid-column:1;border-right:0}
  .kaartvlak{grid-row:1;grid-column:1}
  .app.toon-kaart .paneel{display:none}
  .app:not(.toon-kaart) .kaartvlak{visibility:hidden}
  .paneel-inhoud{--pad:16px}
  .vel{left:0;right:0;top:auto;bottom:0;max-height:88dvh;border-radius:var(--r-groot) var(--r-groot) 0 0;box-shadow:var(--schaduw-3);padding-bottom:var(--veilig-onder)}
  .vel-adres h2{font-size:26px}
  .uitkomst{font-size:16px;padding:10px 10px 10px 18px}
  .uitkomst .ico{width:20px;height:20px}
  .straat-naam{font-size:17px}
  .kanten button{padding:0 8px;font-size:15px}
  /* het gekozen adres opent in de lijst, direct onder het pand */
  .inline-vel{margin:0 calc(-1 * var(--pad));background:var(--papier);border-top:3px solid var(--merk);border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw-onder)}
  .inline-vel .vel-kop{padding:14px 16px 12px}
  .inline-vel .vel-body{padding:12px 16px 18px}
  .werkkop-naam h1{font-size:21px}
  .werkkop-naam{flex-basis:100%}
  .voortgang{flex:1 1 100px}
  .legenda{left:12px;right:80px;bottom:16px;max-width:none;padding:0 6px}
  .legenda:not(.open){right:auto}
  .legenda-knop{display:flex}
  .legenda:not(.open) .legenda-items{display:none}
  .legenda.open .legenda-items{padding:0 6px 10px}
  .kaart-knoppen{right:12px;bottom:16px}
  .toast{left:12px;right:12px;width:auto}
}
@media (prefers-reduced-motion:no-preference){
  .vel:not([hidden]),.inline-vel{animation:in var(--midden) var(--zacht-curve)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* telefoon: geen paneel naast de kaart, dus ook geen schaduwrand */
@media (max-width:699px){.kaartvlak::before{display:none}}

/* ---------- ronde 1 werksysteem (22-10-2026): verzendstatus, vervolgacties, overdracht, regiekamer ---------- */
.sync{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--lijn);border-radius:var(--r);padding:10px 14px;margin-bottom:12px;background:var(--papier);font:inherit;color:inherit}
.sync .ico{width:22px;height:22px;flex:none}
.sync b{display:block;font-size:15px}
.sync small{display:block;font-size:13px;color:var(--zacht)}
.sync.ok{border-color:var(--limoen-rand);background:var(--limoen-licht)}
.sync.ok .ico{color:var(--merk)}
.sync.wacht{border-color:var(--geel-rand);background:var(--geel-licht)}
.sync.wacht .ico{color:var(--amber)}
.sync.fout{border-color:var(--rood-rand);background:var(--rood-licht);color:var(--rood)}
.sync.fout small{color:var(--rood)}
.sync.pil{width:auto;margin:0;padding:5px 10px;border-radius:99px;gap:5px;font-size:13px;white-space:nowrap;font-weight:600;color:var(--merk)}
.sync.pil .ico{width:16px;height:16px}
.sync.pil small{display:inline;font-size:12px;font-weight:500}
.overdrachtblok h3{display:flex;align-items:center;gap:8px}
/* vandaag terug: blauwe kaarten bovenaan de lijst, links het dagdeel; over datum rood */
.vervolgblok{display:grid;gap:8px;margin-bottom:14px}
.vervolg-rij{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:60px;text-align:left;border:1px solid var(--blauw-rand);border-left:5px solid var(--blauw);border-radius:var(--r);background:var(--blauw-licht);padding:10px 14px;font:inherit;color:inherit}
.vervolg-rij.achter{border-color:var(--rood-rand);border-left-color:var(--rood);background:var(--rood-licht)}
.vervolg-wanneer{font-weight:700;font-size:14px;color:var(--blauw);min-width:64px}
.vervolg-rij.achter .vervolg-wanneer{color:var(--rood)}
.vervolg-rij b{display:block;font-size:16px;overflow-wrap:anywhere}
.vervolg-rij small{display:block;font-size:13px;color:var(--zacht)}
.vervolg-rij.gekozen{box-shadow:0 0 0 2px var(--merk)}
.ov-rij,.mislukt-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--lijn)}
.overdrachtblok .ov-rij:first-of-type,.mislukt-rij:first-of-type{border-top:0}
.ov-rij>div:first-child,.mislukt-rij>div:first-child{min-width:0;flex:1 1 180px}
.ov-rij b,.mislukt-rij b{display:block;overflow-wrap:anywhere}
.ov-rij small,.mislukt-rij small{display:block;font-size:13px;color:var(--zacht);overflow-wrap:anywhere}
.mislukt-rij small{color:var(--rood)}
.ov-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.overdrachtblok{border-color:var(--limoen-rand);background:var(--limoen-licht)}
.ov-vel{display:grid;gap:8px;background:var(--limoen-licht);border:1px solid var(--limoen-rand);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.ov-vel .ov-knoppen .knop{flex:1 1 140px}
.vv-vel{display:flex;align-items:center;gap:10px;border-radius:var(--r);padding:10px 14px;margin-bottom:12px;background:var(--blauw-licht);color:var(--blauw);font-weight:600}
.vv-vel.achter{background:var(--rood-licht);color:var(--rood)}
.vv-vel .ico{width:20px;height:20px;flex:none}
.dagdeel{margin:10px 0 4px}
.kpi-sub{display:block;font-size:13px;color:var(--inkt-2);margin-top:2px}
.tussenkop{font-size:17px;margin:4px 0 10px}
.actie-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--lijn)}
.actie-rij:first-of-type{border-top:0;padding-top:0}
.actie-rij>span{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.actie-groep{padding:10px 0;border-top:1px solid var(--lijn)}
.actie-rij + .actie-groep:first-of-type,.blok-kop + .actie-groep{border-top:0;padding-top:0}
.actie-wie{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.actie-wie .avatar{width:32px;height:32px;font-size:13px;background:var(--ag);color:var(--op-ag);flex:none}
.actie-wie b{flex:1;min-width:0;overflow-wrap:anywhere}
.actie-groep ul{margin:6px 0 0 42px;padding:0;list-style:none;font-size:15px}
.actie-groep li{padding:2px 0;overflow-wrap:anywhere}
.actie-groep li.achter,.actie-groep li.verloopt,.actie-groep li.werk{color:var(--rood)}
.agentkaart{border:1px solid var(--lijn);border-radius:var(--r);padding:14px;margin-bottom:12px;background:var(--papier);box-shadow:var(--schaduw-1)}
.agentkaart-kop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.agentkaart-kop>div{min-width:0}
.agentkaart-kop b{display:block;overflow-wrap:anywhere}
.agentkaart-kop small{display:block;font-size:13px}
.agentkaart-kop .avatar{background:var(--ag);color:var(--op-ag);flex:none}
.agentkaart-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin-bottom:6px}
.agentkaart-regel{margin:0 0 12px;font-size:14px;color:var(--inkt-2);overflow-wrap:anywhere}
.agentkaart-cijfers b{display:block;font-size:24px;font-weight:700;line-height:1.2}
.agentkaart-cijfers span{display:block;font-size:12px;color:var(--zacht);line-height:1.3}
.agentkaart-cijfers .sale b{color:var(--merk)}
.agentkaart-cijfers .rood b,.agentkaart-cijfers .rood span{color:var(--rood)}
.agentkaart-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (pointer:coarse){.ov-knoppen .knop,.agentkaart-knoppen .knop,.actie-rij .knop{min-height:48px}}
/* looproute: straatnummer in de volgorde van lopen; waarschuwing bij een tweede, los gebied */
.straatnr{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:var(--merk);color:var(--op-merk);font-size:13px;font-weight:700;vertical-align:1px}
.waarschuwing{background:var(--geel-licht);border:1px solid var(--geel-rand);color:var(--geel-inkt);border-radius:var(--r);padding:10px 12px;font-size:14px;font-weight:500;margin:10px 0}
.routelengte{font-size:13px;color:var(--zacht);margin:2px 0 10px}
/* ronde Betrouwbaar en grip (22-10-2026) */
/* laadscherm tot de app of het inlogscherm klaar is (G1) */
.laden{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--papier);color:var(--zacht);z-index:50}
.laden img{width:150px;height:auto}
/* logo zonder wit vlak (23-10-2026, keuze Stijn): in donker de variant met witte tekst */
:root[data-thema=donker] .login-logo,:root[data-thema=donker] .laden img{content:url(/logo-donker.png)}
@media (prefers-color-scheme:dark){:root:not([data-thema=licht]) .login-logo,:root:not([data-thema=licht]) .laden img{content:url(/logo-donker.png)}}
.laden p{margin:0;font-size:15px}
.laden i{display:block;width:120px;height:4px;border-radius:99px;background:var(--merk-licht);overflow:hidden;position:relative}
.laden i::after{content:"";position:absolute;inset:0;width:40%;border-radius:99px;background:var(--merk)}
@media (prefers-reduced-motion:no-preference){.laden i::after{animation:laden 1.1s ease-in-out infinite}}
@keyframes laden{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* filterchips: de breedte volgt de tekst, zodat "Gedaan 12" niet wordt afgekapt op de iPad staand (G2) */
.filters .chip{flex:1 1 auto;text-overflow:clip}
/* vandaag al afgeboekt: corrigeren of nog een bezoek (K3) */
.al-vast{background:var(--geel-licht);border:1px solid var(--geel-rand);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.al-vast b{display:block;font-size:17px}
.al-vast>span{display:block;margin-top:2px;color:var(--inkt-2)}
.al-vast small{display:block;margin-top:10px;font-size:13px;color:var(--zacht)}
.al-vast .knoppenrij{margin-top:10px}
.eerder-vast .tekstlink{padding:0;margin-left:auto;flex:none}
/* afwijzen met een reden (G4) */
.afwijs{background:var(--rood-licht);border-radius:var(--r);padding:10px 12px 12px;margin:0 0 8px}
.afwijs p{margin:6px 0 0}
.afwijs .knoppenrij{margin-top:8px}
.afwijs .knoppenrij .knop{min-height:48px}
/* blok Systeem op Vandaag (O2) */
.systeem summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.systeem summary::-webkit-details-marker{display:none}
.systeem ul{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--inkt-2)}
.systeem li{margin:3px 0;overflow-wrap:anywhere}
.systeem li.rood{color:var(--rood);font-weight:600}
.systeem.rood{border-color:var(--rood)}
.sale-rij .label{margin-left:auto;flex:none}
/* datumveld in de kop van het dagrapport: houdt zijn eigen breedte en gaat onder de titel staan als er geen plek is (iPad staand) */
.kop:has(#cijferdatum){flex-wrap:wrap}
#cijferdatum{flex:0 0 auto;max-width:100%}
/* Salesdock-koppeling (ronde 2): stand van de kans onder het adres, knoppen die een link zijn, en de keuze van de Salesdock-gebruiker in Beheer */
a.knop{color:inherit;text-decoration:none;text-align:center}
a.knop-limoen{color:var(--limoen-inkt)}
.sd-stand{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--merk);overflow-wrap:anywhere}
.sd-stand.rood{color:var(--rood)}
.sd-keuze{display:block;margin-top:6px;font-size:13px;color:var(--zacht)}
.sd-keuze select{display:block;width:100%;max-width:100%;margin-top:4px;min-height:40px}
.blok-kop:has([data-actie="sd-nu"]){flex-wrap:wrap;gap:8px}
/* ronde 2 (22-10-2026): berichten van de admin, voorraad per agent, rapport met periode en CSV */
.bericht{border-top:1px solid var(--lijn);padding:10px 0;overflow-wrap:anywhere}
.bericht:first-of-type{border-top:0;padding-top:0}
.bericht p{margin:4px 0 8px;white-space:pre-line}
.bericht.gelezen{color:var(--inkt-2)}
.bericht-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.bericht-kop small{color:var(--zacht)}
.bericht .tekstlink,.bericht-adres{display:inline-flex;align-items:center;gap:4px;font-size:14px;text-align:left;min-height:32px}
.bericht .ico{width:16px;height:16px;flex:none}
.berichtblok.nieuw{border-color:var(--merk);box-shadow:inset 4px 0 0 var(--merk),var(--schaduw-1)}
.berichtblok details summary{cursor:pointer;color:var(--zacht);font-size:14px;padding:6px 0;min-height:32px}
.vel-body > .bericht{background:var(--merk-licht);border:0;border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
.vr-rij{display:flex;align-items:center;gap:8px;border-top:1px solid var(--lijn);padding:6px 0}
.vr-rij:first-child{border-top:0}
.vr-adres{flex:1;min-width:0;text-align:left;border:0;background:none;padding:6px 0;min-height:44px;color:inherit}
.vr-adres b{display:block}
.vr-adres small{display:block;color:var(--zacht);overflow-wrap:anywhere}
.velden2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.velden2 input{width:100%;min-width:0}
.rapportkeuze .knoppenrij{display:flex;flex-wrap:wrap;gap:8px}
#berichten .bericht p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}  /* de admin ziet het begin; de agent krijgt alles */

/* ---------- Samen (ronde A, 22-10-2026): meldingen, dienst, doelen, teamfeed, klassement en emotes ----------
   Rustig en goed leesbaar tijdens het lopen: grote tikvlakken, geen rode verliezerslijsten, animaties alleen zonder "minder beweging". */
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--limoen);color:var(--limoen-inkt);font-size:12px;font-weight:700;line-height:1}
.rail-knop{position:relative}
.rail-knop .badge{position:absolute;top:6px;right:12px;box-shadow:0 0 0 2px var(--balk)}
.rail-knop.aan .badge{background:var(--merk);color:var(--op-merk);box-shadow:0 0 0 2px var(--balk-aan)}
.segment button .badge{margin-left:4px}
.teamtabs{margin-bottom:14px}
#samen .kop{flex-wrap:wrap;align-items:center}
#samen .kop>div{flex:1 1 170px;min-width:0}
#samen .kop .knop{white-space:nowrap}
.blok-kop{flex-wrap:wrap}
.dienstblok h3,.doelblok h3{white-space:nowrap}
.samen-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.samen-knoppen .knop{flex:1 1 140px}
.achterkaart{background:var(--geel-licht);border-color:var(--geel-rand)}
.achterkaart p{margin:0}
.achterkaart .zacht{margin-top:8px}
.dienstblok h3{display:flex;align-items:center;gap:8px}
.dienst-stip{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rand);flex:none}
.aan .dienst-stip,.dienstregel.aan .dienst-stip{background:var(--limoen);box-shadow:0 0 0 3px var(--limoen-licht)}
.pauze .dienst-stip{background:var(--amber)}
.mijndoel{margin-top:14px;padding-top:12px;border-top:1px solid var(--lijn)}
.mijndoel .rij{flex-wrap:wrap;gap:2px 12px}
.doelbalk{position:relative;height:10px;border-radius:99px;background:var(--mist);margin-top:8px}
.doelbalk.groot{height:14px}
.doelbalk i{display:block;height:100%;border-radius:99px;background:var(--limoen);transition:width .6s var(--zacht-curve)}
.doel-merk{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;border-radius:2px;background:var(--merk)}
.doel-getal{font-size:24px;font-weight:700;color:var(--merk)}
.doel-getal.klein{font-size:16px}
.doelblok.gehaald{border-color:var(--limoen);background:var(--limoen-licht)}
.doelblok .rij{flex-wrap:wrap;gap:2px 12px}
.doelblok .rij b{min-width:0;overflow-wrap:anywhere}
.hulpblok .rij{flex-wrap:wrap}
.hulpblok .rij>div{flex:1 1 180px;min-width:0}
.hulpblok h3{margin:0}
.hulp-rij{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--lijn)}
.hulp-rij:first-of-type{border-top:0;padding-top:0}
.hulp-rij>div:first-child{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.hulp-rij p{margin:2px 0}
.hulp-rij small{display:block}
.hulp-rij .samen-knoppen{margin:0}
.hulp-rij .samen-knoppen .knop{flex:0 0 auto}
.hulp-rij.klaar{opacity:.65}
.tussenkop{font-size:14px;margin:14px 0 4px;color:var(--inkt-2)}
.meldingen,.feed{list-style:none;margin:0;padding:0}
.melding,.feed li{padding:10px 0;border-top:1px solid var(--lijn)}
.melding:first-child,.feed li:first-child{border-top:0;padding-top:2px}
.melding.nieuw{background:var(--limoen-licht);margin:0 -10px;padding:10px;border-radius:var(--r-klein);border-top-color:transparent}
.melding.nieuw + .melding{border-top-color:transparent}
.melding-tekst{overflow-wrap:anywhere}
.melding-tekst small{display:block}
.snel-terug{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.emoji-knop{width:44px;height:44px;border-radius:50%;border:1px solid var(--lijn);background:var(--papier);font-size:20px;line-height:1;display:grid;place-items:center;flex:none;transition:transform var(--snel)}
.emoji-knop:active{transform:scale(.92)}
.feed li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.feed-tekst{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.feed-tekst small{display:block}
.reacties{display:flex;gap:6px}
.reactie{min-width:48px;height:40px;padding:0 10px;border-radius:99px;border:1px solid var(--lijn);background:var(--papier);font-size:18px;display:inline-flex;align-items:center;gap:4px;transition:background var(--snel),border-color var(--snel)}
.reactie small{font-size:13px;font-weight:600;color:var(--inkt-2)}
.reactie.aan{background:var(--limoen-licht);border-color:var(--limoen)}
.segment.mini{margin:0;padding:3px}
.segment.mini button{min-height:34px;padding:0 10px;font-size:13px}
.klassement{list-style:none;margin:0;padding:0}
.klassement li{display:grid;grid-template-columns:24px minmax(0,1fr) auto 44px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--lijn)}
.klassement li:first-child{border-top:0}
.klassement li.ik{background:var(--limoen-licht);margin:0 -10px;padding:8px 10px;border-radius:var(--r-klein);border-top-color:transparent}
.klassement li.ik + li{border-top-color:transparent}
.klassement .rang-naam b{white-space:normal;overflow-wrap:anywhere}
.definitie,.groetlijst{margin-top:10px}
.definitie summary,.groetlijst summary,.voorkeuren summary{cursor:pointer;font-weight:600;color:var(--merk);min-height:40px;display:flex;align-items:center}
.definitie p{margin:4px 0 0}
.groet-rij{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);overflow-wrap:anywhere}
.groet-rij>div{min-width:0}
.groet-rij p{margin:2px 0}
.groet-rij.uit b{color:var(--inkt-2);font-weight:500}
.groet-emoji{font-size:22px;line-height:1.2}
.voorkeuren summary{font-size:17px;color:var(--inkt)}
.dienstregel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-4px 0 10px;padding:4px 6px 4px 12px;border-radius:var(--r);background:var(--papier);border:1px solid var(--lijn);font-size:14px}
.dienstregel.uit{background:var(--geel-licht)}
.dienstregel.uit>span{flex:1 1 160px;font-weight:500}
.dienst-info{flex:1 1 170px;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;text-align:left;font-weight:500;color:var(--inkt)}
.dienst-info b{font-weight:600}
/* berichten van de admin ingeklapt tot één regel */
.berichtregel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 10px;padding:6px 6px 6px 12px;border-radius:var(--r);background:var(--papier);border:1px solid var(--lijn);font-size:14px}
.berichtregel>span{flex:1 1 160px;min-width:0}
.berichtregel.nieuw{border-color:var(--merk-tekst);box-shadow:inset 4px 0 0 var(--merk-tekst)}
/* afboeken in twee stappen: de gekozen uitkomst krijgt een rand, daarna Vastleggen */
.uitkomst.aan{border:2px solid var(--merk-tekst);box-shadow:0 0 0 2px color-mix(in srgb,var(--merk-tekst) 20%,transparent)}
.vastleggen{margin-top:10px}
.vastleggen-uitleg{text-align:center;margin:6px 0 0}
.dienst-info>span:last-child{min-width:0;overflow-wrap:anywhere}
/* emote sturen */
.keuze-set{border:0;margin:0 0 6px;padding:0;min-width:0}
.keuze-set legend{font-weight:500;font-size:14px;color:var(--inkt-2);margin:4px 0 8px;padding:0}
.collega-keuze{display:flex;flex-wrap:wrap;gap:8px}
.collega,.emote{margin:0;cursor:pointer;position:relative}
.collega input,.emote input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.collega{display:flex;align-items:center;gap:8px;max-width:100%;padding:4px 14px 4px 4px;border:1px solid var(--rand);border-radius:99px;background:var(--papier);font-weight:500;color:var(--inkt)}
.collega .avatar{width:36px;height:36px;font-size:13px;flex:none}
.collega-naam{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.emote-keuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.emote{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border:1px solid var(--rand);border-radius:var(--r);background:var(--papier);font-weight:500;color:var(--inkt);line-height:1.2}
.emote-emoji{font-size:24px;line-height:1}
.collega:has(input:checked),.emote:has(input:checked){border-color:var(--merk);background:var(--merk-licht);box-shadow:0 0 0 2px var(--merk)}
.collega:has(input:focus-visible),.emote:has(input:focus-visible){outline:3px solid var(--merk);outline-offset:2px}
.teller{text-align:right;margin:4px 0 0}
/* beheer */
.lid-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 10px}
.lid-team label{margin-top:8px}
.team-rij{padding:10px 0;border-top:1px solid var(--lijn);overflow-wrap:anywhere}
.team-rij:first-of-type{border-top:0}
/* feest: een handvol confetti dat één keer valt (alleen zonder "minder beweging") */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:3000;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.95;animation:val 2.2s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes val{to{transform:translate(var(--x),105vh) rotate(540deg);opacity:.2}}
@media (max-width:699px){
  .rail-knop .badge{top:3px;right:calc(50% - 22px)}
  .emote{padding:6px 8px;gap:6px;font-size:14px}
  .klassement li{grid-template-columns:22px minmax(0,1fr) auto 44px;gap:8px}
}
/* ronde B: profielfoto's en de teamkaart */
.avatar.foto{overflow:hidden;background:var(--merk-licht)}
.avatar.foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar-mini{display:inline-grid;width:24px;height:24px;font-size:10px;vertical-align:-6px;margin-right:6px;flex:none}
.avatar-groot{width:64px;height:64px;font-size:22px;flex:none}
.deel-locatie{margin-top:10px;padding-top:8px;border-top:1px solid var(--lijn)}
.deel-ico{font-size:13px}
.tk-pin{position:relative;width:44px;height:44px;border-radius:50%;padding:3px;background:var(--papier);box-shadow:var(--schaduw-pin);border:3px solid var(--live);cursor:pointer}
.tk-pin .avatar{width:100%;height:100%;font-size:13px}
.tk-pin.ik{border-color:var(--ik)}
.tk-pin.verouderd{border-color:var(--oud)}
.tk-pin.offline{border-color:var(--offline);filter:grayscale(1);opacity:.7}
.tk-hulp{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--rood);color:var(--op-rood);font-weight:700;font-size:13px;display:grid;place-items:center;border:2px solid var(--papier)}
.tk-cluster{width:44px;height:44px;border-radius:50%;background:var(--merk);color:var(--op-merk);font-weight:700;font-size:16px;display:grid;place-items:center;border:3px solid var(--papier);box-shadow:var(--schaduw-pin);cursor:pointer}
.tk-lijst{list-style:none;margin:8px 0 0;padding:0}
.tk-lijst li+li{border-top:1px solid var(--lijn)}
.tk-rij{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;width:100%;min-height:48px;padding:6px 2px;background:none;border:0;text-align:left;color:var(--inkt)}
.tk-rij .avatar-mini{width:32px;height:32px;font-size:12px;margin:0;vertical-align:0}
.tk-naam{flex:1 1 120px;min-width:0;font-weight:600;overflow-wrap:anywhere}
.tk-stand{font-size:13px;font-weight:600;color:var(--zacht);white-space:nowrap}
.tk-stand::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--rand);vertical-align:0}
.tk-stand.live{color:var(--merk-tekst)}.tk-stand.live::before{background:var(--live)}
.tk-stand.verouderd{color:var(--oud)}.tk-stand.verouderd::before{background:var(--oud)}
.tk-stand.pauze::before,.tk-stand.uit::before{background:none;border:1.5px solid var(--rand);width:6px;height:6px}
.tk-kaart-kop{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tk-kaart .samen-knoppen{margin:12px 0}
.bijsnijden canvas{display:block;width:min(100%,320px);aspect-ratio:1;height:auto;margin:0 auto 12px;border-radius:var(--r);touch-action:none;cursor:grab;background:var(--lijn)}
.bijsnijden canvas:focus-visible{outline:3px solid var(--merk);outline-offset:3px}
.bijsnijden input[type=range]{min-height:44px;padding:0;border:0}
/* ---------- ronde 1 uitstraling (22-10-2026): Team met teamdoel, leden en één berichtenblok ---------- */
.teamstand{display:flex;align-items:flex-end;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.teamstand .doel-getal{font-size:28px;line-height:1.1;color:var(--inkt)}
.teamstand .doel-getal .zacht{font-size:17px;font-weight:600}
.doelblok .doelbalk{margin-top:8px}
.segment.periode{margin:0 0 10px}
.ledenblok{padding:4px 4px}
.leden{list-style:none;margin:0;padding:0}
.lid{display:flex;align-items:center;gap:6px;border-top:1px solid var(--lijn)}
.lid:first-child{border-top:0}
.lid.ik{background:var(--merk-licht);border-radius:var(--r);border-top-color:transparent}
.lid.ik + .lid{border-top-color:transparent}
.lid-knop{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 8px;border:0;background:none;text-align:left;color:var(--inkt);border-radius:var(--r)}
.lid .emoji-knop{margin-right:6px}
.lid-foto{position:relative;flex:none}
.lid-foto .avatar{width:44px;height:44px}
.lid-stip{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;border:2px solid var(--papier)}
.lid-stip.live{background:var(--live)}
.lid-stip.oud{background:var(--oud)}
.lid-tekst{min-width:0;display:flex;flex-direction:column;gap:1px}
.lid-naam{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.lid-naam .zacht{font-weight:500;font-size:13px}
.lid-stand{font-size:13px;color:var(--zacht);overflow-wrap:anywhere}
.scores{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:4px;font-size:11px;color:var(--zacht)}
.scores>span{display:flex;flex-direction:column;line-height:1.2}
.scores b{color:var(--inkt);font-size:16px}
.score-uitleg{margin:-4px 4px 14px}
.lid-stand-groot{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.lid-stand-groot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--offline)}
.lid-stand-groot.live::before{background:var(--live)}
.lid-stand-groot.oud::before{background:var(--oud)}
.lid-periode{border-top:1px solid var(--lijn);padding-top:12px;margin-top:12px}
.lid-periode h3{font-size:15px;margin-bottom:8px}
.lid-periode + .samen-knoppen{margin:14px 0 10px}
.berichtenblok .meldingen{margin-bottom:4px}
.berichtenblok .samen-knoppen .knop{flex:1 1 auto}
/* ---------- ronde 1 uitstraling: Kaart met Mijn adressen | Team en de emoteballon ---------- */
.kaart-boven{position:absolute;top:calc(12px + var(--veilig-boven));left:12px;right:72px;z-index:620;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.kaart-boven>*{pointer-events:auto;max-width:100%}
.kaartwissel{margin:0;background:var(--glas-sterk);box-shadow:var(--schaduw);padding:3px}
.kaartwissel button{min-height:40px;padding:0 14px;white-space:nowrap}
.deelbalk{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;background:var(--glas-sterk);border:1px solid var(--lijn);border-radius:var(--r);padding:6px 10px;font-size:13px;box-shadow:var(--schaduw)}
.deel-tekst{min-width:0;overflow-wrap:anywhere}
.live-stip{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 25%,transparent);flex:none}
.tk-jij{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);font-size:11px;font-weight:700;line-height:1.4;background:var(--ik);color:var(--papier);padding:0 6px;border-radius:6px;white-space:nowrap}
.tk-pin.ik{box-shadow:0 0 0 4px color-mix(in srgb,var(--ik) 25%,transparent),var(--schaduw-pin)}
.ballon-plek{pointer-events:none!important}
.ballon{position:absolute;left:0;top:0;width:max-content;max-width:190px;transform:translate(-50%,calc(-100% - 30px));background:var(--papier);color:var(--inkt);border:1px solid var(--lijn);border-radius:12px;
  padding:6px 10px;font-size:13px;line-height:1.35;box-shadow:var(--schaduw);pointer-events:none;overflow-wrap:anywhere;animation:ballon 6s ease forwards}
.ballon-tekst{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}  /* lange berichten: twee regels, de rest staat in Berichten */
.ballon b{font-weight:600}
.ballon.tweede{transform:translate(-50%,calc(-100% - 82px))}
@keyframes ballon{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ballon{animation:none}}
@media (max-width:699px){.kaart-boven{right:64px}}
.berichtenblok .melding-tekst>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}  /* compact: twee regels, alles staat onder Alle berichten */