/* ═══════════════════════════════════════════════════════════
   KIDEO OFFICE — dezelfde kleuren als Orders en de winkel:
   crème werkvlak, witte kaarten, donkergroen als tekst, magenta
   alleen waar je moet klikken. Baloo 2 in koppen, systeemletter erbuiten.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#f4f1ea; --vlak:#ffffff; --menu:#eae6dc; --balk:#ffffff; --balk-vlak:#f4f1ea;
  --ink:#22423a; --gedempt:rgba(34,66,58,.68); --zacht:rgba(34,66,58,.45);
  --lijn:rgba(34,66,58,.13); --lijn-zwaar:rgba(34,66,58,.26); --hover:rgba(34,66,58,.055);
  --accent:#a51580; --accent-zacht:#fbeaf5; --accent-ink:#7c2d67;
  --zijmenu:240px;   /* één breedte voor het zijmenu in elke app, ook in Orders en Sales (Mike, 11-9-2026) */
  --groen:#2e7d4f; --groen-zacht:#e8f3ec; --oranje:#c96a1f; --oranje-zacht:#fbf1dc; --blauw-zacht:#e9eefa; --rood:#b3261e; --rood-zacht:#fdecec;
  --pil:0 1px 2px rgba(34,66,58,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;font-family:'Baloo 2',system-ui,sans-serif;letter-spacing:-.2px;line-height:1.15}
hr{border:0;border-top:1px solid var(--lijn);margin:18px 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* frame */
body.frame{display:flex;flex-direction:column;min-height:100vh}
/* Laag 44 (20-10-2026; was 5): de menu's in de balk (organisatie wisselen, account, apps) liggen zo boven een paneel
   aan de zijkant, zoals een kaart in Notities (40) of de zijbalk van Drive (42); onder het venster bij een vakje (45)
   en het opstelvenster van Mail (60). Mike: "als ik dan van bedrijf wil wisselen komt deze daar weer achter". */
.topbalk{height:56px;flex:none;background:var(--balk);border-bottom:1px solid var(--lijn);display:flex;align-items:center;gap:14px;padding:0 18px 0 20px;position:sticky;top:0;z-index:44}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo__blok{width:30px;height:30px}
.logo__tekst{font-family:'Baloo 2',sans-serif;font-size:16px;font-weight:800;line-height:1;letter-spacing:-.2px}
.logo__tekst small{display:block;font-family:Caveat,cursive;font-size:12.5px;font-weight:600;color:var(--accent);line-height:1.15;margin-left:8px;transform:rotate(-3deg);transform-origin:left}
/* Het hoekblok: 66px breed, net als de app-balk eronder, in de kleur van de app. */
.hoek{width:66px;height:56px;flex:none;display:grid;place-items:center}
.hoek__teken{width:32px;height:32px;display:block}
.hoek__naam{font-family:'Baloo 2',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.2px;color:inherit;display:inline-flex;align-items:center;gap:8px;line-height:1}
.hoek__naam svg{width:24px;height:24px;flex:none}
.logo--midden{justify-content:center;margin-bottom:14px}
.logo--midden .logo__blok{width:40px;height:40px}
.logo--midden .logo__tekst{font-size:22px}
.topbalk__rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.orgwissel{position:relative}
.orgwissel summary,.orgnaam{list-style:none;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 6px;border-radius:8px;border:1px solid var(--lijn);background:var(--balk);font-size:13px;font-weight:600;cursor:pointer}
.orgwissel summary::-webkit-details-marker{display:none}
.orgwissel summary svg{width:12px;height:12px;color:var(--zacht)}
.orgwissel__blok{width:20px;height:20px;border-radius:5px;background:var(--accent);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:12px;display:grid;place-items:center}
.orgwissel__lijst{position:absolute;right:0;top:38px;background:var(--vlak);border:1px solid var(--lijn-zwaar);border-radius:10px;box-shadow:0 12px 30px -12px rgba(34,66,58,.4);min-width:220px;padding:6px;z-index:6}
.orgwissel__lijst a{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:7px;font-size:13px}
.orgwissel__lijst a:hover{background:var(--hover)}
.orgwissel__lijst a.aan{background:var(--accent-zacht)}
.orgwissel__lijst small{color:var(--zacht)}
.account{width:32px;height:32px;border-radius:50%;background:var(--menu);border:1px solid var(--lijn);display:grid;place-items:center;font-size:12px;font-weight:700;list-style:none;cursor:pointer}
.account::-webkit-details-marker{display:none}
.accountmenu{position:relative;display:flex;align-items:center}
.accountmenu[open] .account,.account:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* De voornaam als knop in plaats van het rondje met initialen (19-9-2026). */
.account--naam{width:auto;border-radius:8px;padding:0 11px;font-size:13px;font-weight:600;background:var(--vlak)}
.accountmenu__lijst{position:absolute;right:0;top:40px;z-index:30;min-width:230px;background:var(--vlak);border:1px solid var(--lijn-zwaar);border-radius:10px;box-shadow:0 12px 30px -12px rgba(34,66,58,.4);padding:6px}
.accountmenu__wie{padding:8px 10px 10px;border-bottom:1px solid var(--lijn);margin-bottom:4px;line-height:1.3}
.accountmenu__wie b{display:block;font-size:13.5px}
.accountmenu__wie small{display:block;color:var(--gedempt);font-size:11.5px}
.accountmenu__lijst a,.accountmenu__lijst button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:7px;cursor:pointer}
.accountmenu__lijst a:hover,.accountmenu__lijst button:hover{background:var(--hover)}
.accountmenu__lijst form{margin:0}
.romp{display:flex;flex:1;min-height:0}
/* De balk links: tegels onder elkaar, naam eronder; dezelfde als in Orders. */
.officerail{width:66px;flex:none;background:var(--balk);border-right:1px solid var(--lijn);display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0;position:sticky;top:var(--kopbalk,56px);height:calc(100vh - var(--kopbalk,56px));overflow-y:auto;scrollbar-width:none}
.officerail__app{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:58px;padding:6px 0 5px;border-radius:9px;font-size:9.5px;font-weight:600;color:var(--gedempt);line-height:1}
.officerail__app .tegelsvg{width:30px;height:30px;display:block}
.officerail__app:hover{background:var(--bg);color:var(--ink)}
.officerail__app--dicht .tegelsvg{opacity:.35}
/* De app waar je bent: een rustig vlak achter icoon en naam, geen magenta rand (iconen in lijnen, 3-11-2026). */
.officerail__app--hier{color:var(--ink);background:var(--bg)}
.officerail__tel{position:absolute;top:2px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--rood);color:#fff;font-size:9.5px;font-weight:700;font-style:normal;display:grid;place-items:center}
/* Het bolletje bij Mail (23-9-2026) staat er altijd, verborgen bij nul; assets/mailteller.js toont en telt het elke minuut. */
.officerail__tel[hidden]{display:none}
.officemenu__knop{position:relative}
.officemenu__icoon .officerail__tel{top:-3px;right:-3px}
.officemenu__tel{top:-5px;right:-7px;box-shadow:0 0 0 2px var(--vlak)}
@media (min-width:761px){.officemenu__tel{display:none}}
.werk{flex:1;min-width:0;padding:26px 30px 48px;max-width:1240px}
/* Mail over de hele breedte, met wat lucht rechts. Mike: "de mail heeft maar
   half scherm"; de grens van 1240px is op een breed scherm de helft. */
.werk--mail{max-width:none;padding-right:56px}
/* Drive net zo: de bestandenlijst en de editor over de hele breedte (Mike, 9-9-2026: "kan je
   drive volledige breedte maken?"). */
.werk--drive{max-width:none;padding-right:56px}

/* koppen en meldingen */
.groet{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.groet h1{font-size:28px;font-weight:800;letter-spacing:-.3px}
.groet p{margin:4px 0 0;color:var(--gedempt);font-size:13.5px;max-width:70ch}
.groet .datum{color:var(--zacht);font-size:13px}
.melding{border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13.5px;background:var(--groen-zacht);color:var(--groen);font-weight:600}
.melding--fout{background:var(--rood-zacht);color:var(--rood)}
.melding--let{background:var(--oranje-zacht);color:var(--oranje)}
.kaart{background:var(--blauw-zacht);border:1px solid var(--lijn-zwaar);border-radius:10px;padding:14px 16px;margin-bottom:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.kaart--let{background:var(--oranje-zacht);border-color:var(--oranje)}
.kaart--let b{color:var(--oranje)}
.kaart p{margin:0;flex:1;min-width:240px}
.kaart b{display:block;font-family:'Baloo 2',sans-serif;font-size:15px}
.kaart span{font-size:13px;color:var(--gedempt)}
.link{display:block;width:100%;background:var(--vlak);border:1px solid var(--lijn);border-radius:8px;padding:8px 10px;font-size:12.5px;word-break:break-all;overflow-wrap:anywhere;white-space:normal;user-select:all;box-sizing:border-box}
.kaart__acties{display:flex;gap:8px;align-items:center;width:100%}
.kaart__acties .link{flex:1;min-width:0}
.link--code{font-size:28px;letter-spacing:.3em;text-align:center;font-weight:700}

/* knoppen en formulieren */
.knop{height:36px;padding:0 14px;border-radius:8px;border:0;background:var(--accent);color:#fff;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.knop:hover{background:var(--accent-ink)}
.knop--licht{background:var(--vlak);color:var(--ink);border:1px solid var(--lijn-zwaar)}
.knop--klein{height:30px;padding:0 12px;font-size:12.5px}
.knop--licht:hover{background:var(--hover)}
.knop--breed{width:100%;justify-content:center;height:40px;font-size:14px;margin-top:6px}
.af{background:none;border:0;padding:0;font-size:12px;color:var(--accent-ink);font-weight:600;white-space:nowrap}
.form .veldje,.veldje{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.veldje label{font-size:12px;color:var(--gedempt);font-weight:600}
.veldje small{color:var(--zacht);font-size:11.5px}
/* Een element met hidden is weg, ook als een klasse zelf een display zet (.knop, .ag-hint): anders bleef de knop Bewerken
   staan bij een afspraak uit een andere organisatie (Mike, 2-10-2026: "Die afspraak is er niet (meer)"). */
[hidden]:not([hidden=until-found i]){display:none!important}
.invoer{height:38px;border:1px solid var(--lijn-zwaar);border-radius:8px;padding:0 12px;background:var(--vlak);font:inherit;font-size:14px;color:var(--ink);width:100%}
.invoer--vast{display:flex;align-items:center;overflow:hidden;white-space:nowrap;background:var(--bg);color:var(--gedempt);cursor:default;user-select:all}
textarea.invoer{height:auto;min-height:96px;padding:8px 12px;resize:vertical;line-height:1.5;box-sizing:border-box}
/* Uitklapbaar formulier per postbus (Mijn account, Beheer › Postbussen). */
.pbdetails{margin-top:8px}
.pbdetails summary{cursor:pointer;font-size:13px;color:var(--accent-ink);user-select:none}
.pbdetails .form{margin-top:10px}
select.invoer{appearance:auto}
/* Een veld met de cursor erin: een donkerder rand en een zachte, neutrale gloed, geen paarse rand met een tweede rand
   eromheen (Mike, 13-10-2026 bij Pagina hernoemen: "deze lelijke selectie border ook veranderen, maak ander design
   daarvoor"; zie ook 7-9, 24-9 en 27-9: geen gekleurde focusrand in velden). Eerst stond dit per venster (Agenda, Drive,
   Beheer, Account, teamvenster); nu de standaard voor elk veld. Het inlogscherm houdt zijn eigen stijl. */
.invoer:focus,.invoer:focus-visible{outline:none;border-color:rgba(34,66,58,.5);box-shadow:0 0 0 3px rgba(34,66,58,.07)}
.invoer--pin{font-size:22px;letter-spacing:.35em;text-align:center;max-width:220px}
.vinkjes{display:flex;flex-wrap:wrap;gap:6px}
.vinkje{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;border:1px solid var(--lijn);border-radius:999px;padding:5px 10px 5px 8px;background:var(--vlak);margin-bottom:10px;cursor:pointer}
.vinkje input{accent-color:var(--accent);margin:0}
.gebeurt{background:var(--groen-zacht);border-radius:8px;padding:10px 12px;font-size:12.5px;margin:6px 0 12px}
.gebeurt b{display:block;margin-bottom:4px;color:var(--groen)}
.gebeurt ul{margin:0;padding-left:18px}
.apparaatnoot{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--gedempt);border-radius:8px;padding:10px 12px;margin-top:14px;background:var(--groen-zacht)}
.apparaatnoot svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--groen)}
.apparaatnoot b{color:var(--ink)}
.apparaatnoot--gedeeld{background:var(--oranje-zacht)}
.apparaatnoot--gedeeld svg{color:var(--oranje)}
.apparaatnoot--onbekend{background:var(--blauw-zacht)}
.apparaatnoot--onbekend svg{color:var(--ink)}
.namen{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.naamknop{height:40px;border:1px solid var(--lijn-zwaar);border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:13.5px;background:var(--vlak);cursor:pointer}
.naamknop input{position:absolute;opacity:0}
.naamknop:has(input:checked){border-color:var(--accent);background:var(--accent-zacht);font-weight:600}
.naamknop .av{width:24px;height:24px;border-radius:50%;background:var(--menu);display:grid;place-items:center;font-size:10.5px;font-weight:700}

/* los scherm (inloggen, uitnodiging) */
body.los{display:flex;align-items:center;justify-content:center;padding:30px 16px}
.los__inhoud{width:100%;display:flex;justify-content:center}
.inlog{width:100%;max-width:440px;background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;padding:26px 28px 24px;box-shadow:0 10px 30px -18px rgba(34,66,58,.4)}
.inlog h1{font-size:22px;font-weight:800;text-align:center}
.sub{color:var(--gedempt);font-size:13px;margin:6px 0 14px}
.inlog .sub{text-align:center}
.voetnoot{text-align:center;color:var(--zacht);font-size:11.5px;margin-top:14px}
/* ── Het kale inlogscherm (19-9-2026): één kaart, grote velden, geen logo of uitleg ── */
.inlog--kaal{max-width:460px;border:0;border-radius:18px;padding:34px 40px 28px;box-shadow:0 24px 60px -30px rgba(34,66,58,.5)}
.inlog--kaal h1{font-size:26px;text-align:left;margin:0 0 18px}
.inlog--kaal .sub{text-align:left;margin:0 0 16px}
.inlog--kaal .veldje{margin-bottom:16px}
.inlog--kaal .veldje label{font-size:13px;color:var(--ink);margin-bottom:6px;display:block}
.inlog--kaal .invoer{height:48px;border-width:1.5px;border-radius:10px;padding:0 14px;font-size:15px}
.inlog--kaal .invoer:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(165,21,128,.14);outline:none}
.inlog--kaal .invoer--pin{max-width:none;text-align:left;letter-spacing:.35em}
.inlog--kaal .veldje--ww{position:relative}
.inlog--kaal .veldje--ww .invoer{padding-right:86px}
.inlog__toon{position:absolute;right:6px;bottom:6px;height:36px;padding:0 10px;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:8px}
.inlog__toon:hover{background:var(--accent-zacht)}
.inlog__eigen{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1.5px solid var(--lijn);border-radius:12px;margin:4px 0 20px;cursor:pointer}
.inlog__eigen input{appearance:none;width:42px;height:24px;border-radius:999px;background:#cfd6d2;position:relative;flex:none;margin:1px 0 0;cursor:pointer;transition:background .15s}
.inlog__eigen input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.inlog__eigen input:checked{background:var(--groen)}
.inlog__eigen input:checked::after{left:21px}
.inlog__eigen input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.inlog__eigen b{display:block;font-size:14px;font-weight:600}
.inlog__eigen small{display:block;color:var(--gedempt);font-size:12.5px;line-height:1.45;margin-top:2px}
.inlog--kaal .knop--breed{height:50px;border-radius:12px;font-size:15px;margin-top:0}
.inlog__links{margin:16px 0 0;font-size:13.5px}
.inlog__links a{color:var(--accent-ink);font-weight:600;text-decoration:none}
.inlog__linkknop{border:0;padding:0;background:none;font:inherit;color:var(--accent-ink);font-weight:600;cursor:pointer}
.inlog__linkknop:hover{text-decoration:underline}
.inlog__links a:hover{text-decoration:underline}
.inlog__voet{margin:28px 0 0;font-size:12.5px;color:var(--zacht)}
.inlog__voet a{color:var(--gedempt)}
.inlog--kaal .namen{grid-template-columns:repeat(2,1fr);margin-bottom:16px}
.inlog--kaal .naamknop{height:46px;border-radius:10px}
@media (max-width:520px){.inlog--kaal{padding:26px 22px 22px}}

.voetnoot a{color:var(--accent-ink);font-weight:600}
body.frame .inlog{margin:20px auto}

/* tegels */
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:22px}
.tegel{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:96px}
.tegel:hover{background:var(--hover)}
.tegel__icoon{position:relative;width:34px;height:34px;display:grid;place-items:center}
.tegel__icoon .tegelsvg{width:34px;height:34px}
.tegel__slot{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;background:var(--vlak);border:1px solid var(--lijn-zwaar);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322423a' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E");background-size:9px;background-repeat:no-repeat;background-position:center}
.tegel b{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;line-height:1.1}
.tegel span{font-size:12px;color:var(--gedempt);line-height:1.35}
.tegel--later{border-style:dashed;background:transparent}
.tegel--later .tegelsvg{opacity:.7}
.tegel--dicht{border-style:dashed;background:transparent}
.tegel--dicht .tegelsvg{opacity:.35}
.tegel--dicht b{color:var(--zacht)}

/* panelen */
.panelen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:start}
.panelen--twee{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.paneel{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;padding:14px 16px;min-width:0}
.paneel--let{border-color:var(--oranje);background:var(--oranje-zacht)}
.paneel__kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.paneel__kop h2{font-size:15.5px;font-weight:700}
.paneel__kop a{font-size:12.5px;color:var(--accent-ink);font-weight:600;white-space:nowrap}
.paneel h3{font-size:14px;margin-bottom:4px}
.sessies{list-style:none;margin:0;padding:0}
.sessies li{display:flex;gap:10px;align-items:center;padding:7px 2px;border-top:1px solid var(--lijn);font-size:13px}
.sessies li:first-child{border-top:0}
.sessies .wat{flex:1;min-width:0}
.sessies .wat em{font-style:normal;font-size:11px;color:var(--accent-ink);font-weight:600}
.sessies .wat small{display:block;color:var(--zacht);font-size:11.5px}
.sessies .bereik{font-size:11px;border-radius:999px;padding:1px 8px;background:var(--groen-zacht);color:var(--groen);font-weight:600;white-space:nowrap}
.sessies .bereik.beperkt{background:var(--oranje-zacht);color:var(--oranje)}
.verzoek{border-top:1px solid var(--lijn);padding:10px 0}
.verzoek:first-of-type{border-top:0}
.verzoek p{margin:0 0 8px}
.verzoek b{display:block}
.verzoek span{font-size:12.5px;color:var(--gedempt)}
.verzoek__knoppen{display:flex;gap:8px}
.cijfers{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.cijfers dt{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;font-size:15px}
.cijfers dt.let{color:var(--oranje)}
.cijfers dd{margin:0;color:var(--gedempt)}
.cijfers dd a{color:var(--accent-ink);font-weight:600}
.log{list-style:none;margin:0;padding:0;font-size:12.5px}
.log li{padding:6px 0;border-top:1px solid var(--lijn)}
.log li:first-child{border-top:0}
.log li span{font-weight:600}
.log li em{color:var(--gedempt);font-style:normal}
.log li small{display:block;color:var(--zacht);font-size:11px}
.dicht{max-width:560px;margin:40px auto;text-align:center}
.dicht__slot{font-size:40px;margin-bottom:10px}
.dicht h1{font-size:22px;font-weight:800}
.dicht p{color:var(--gedempt)}
.dicht a{color:var(--accent-ink);font-weight:600}
.dicht a.knop{color:#fff}

/* tabellen in beheer */
.tabel{border-collapse:collapse;width:100%;min-width:640px;font-size:12.5px}
.tabel th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);font-weight:650;padding:8px 12px;border-bottom:1px solid var(--lijn);background:var(--bg)}
.tabel td{padding:8px 12px;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel tr.uit td{color:var(--zacht)}
.tabel td b{display:block;font-weight:650}
.tabel td small{display:block;color:var(--zacht);font-size:11.5px}
.tabel .acties form{display:flex;gap:10px;flex-wrap:wrap}
.rol{font-size:11px;border-radius:999px;padding:1px 8px;background:var(--bg);border:1px solid var(--lijn);white-space:nowrap;margin-right:4px}
.rol--directie,.rol--beheerder{background:var(--accent-zacht);color:var(--accent-ink);border-color:transparent;font-weight:600}
.rol--wacht{background:var(--oranje-zacht);color:var(--oranje);border-color:transparent;font-weight:600}
.rol--persoonlijk{background:var(--groen-zacht);color:var(--groen);border-color:transparent}
.pbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pbs em{font-style:normal;color:var(--zacht)}
/* Personen (Beheer › Accounts): een rij per persoon in plaats van een tabel, past in elke
   breedte; de acties in een menu rechts. */
.personen{margin:0 -16px -14px;border-top:1px solid var(--lijn)}
.persoon{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--lijn);align-items:flex-start}
.persoon:last-child{border-bottom:0}
.persoon--uit{opacity:.6}
.persoon__kern{flex:1;min-width:0}
.persoon__kop{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.persoon__naam{font-weight:700;font-size:14px}
.persoon__email{color:var(--zacht);font-size:12px;margin-top:1px}
.persoon__meta{display:flex;gap:8px;align-items:baseline;margin-top:6px;font-size:12px;flex-wrap:wrap}
.persoon__label{color:var(--zacht);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;flex:none;width:84px}
.persoon__rechts{display:flex;align-items:center;gap:4px;flex:none}
.persoon__actief{font-size:12px;color:var(--gedempt);white-space:nowrap}
.persoon__meer{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--gedempt);cursor:pointer;list-style:none}
.persoon__meer::-webkit-details-marker{display:none}
.persoon__meer:hover,.menu[open]>.persoon__meer{background:var(--bg);color:var(--ink)}
.menu__lijst form{margin:0;display:contents}
.menu__lijst .rood{color:var(--rood)}
@media(max-width:560px){.persoon__label{width:100%}.persoon__rechts{flex-direction:column;align-items:flex-end}}
/* Het rondje met een letter (avatar_html in lib/weergave.php). */
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;flex:none;font-family:'Baloo 2',sans-serif}
.pbs span{font-size:11px;border-radius:999px;padding:1px 7px;background:var(--bg);border:1px solid var(--lijn);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pbs em{font-style:normal;color:var(--zacht)}
.pbs .x{background:none;border:0;padding:0 0 0 2px;color:var(--zacht);font-size:13px;line-height:1}
.inline{display:inline-flex;gap:6px;align-items:center}
.klein{height:26px;border:1px solid var(--lijn);border-radius:6px;font:inherit;font-size:12px;background:var(--vlak);color:var(--ink)}

@media (max-width:760px){
  .officerail{display:none}
  .werk{padding:18px 16px 40px}
  .orgwissel summary,.orgnaam{font-size:0;gap:0;padding:0 6px}
  .orgwissel summary svg{display:none}
  .groet h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ══ Het Office-menu in de bovenbalk: het rooster met de apps en wie je bent ══ */
/* Het apps-rooster in de bovenbalk staat in Office alleen nog op de telefoon, waar de rail links wegvalt;
   op een groot scherm heb je de rail. Mike, 19-9-2026: "alleen deze niet" bij het paarse Office-blokje. */
.officemenu.menu{display:none;align-items:center;position:relative} /* .menu verderop zet display:inline-block; vandaar de dubbele klasse */
@media (max-width:760px){.officemenu.menu{display:flex}}
.officemenu__knop{list-style:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;cursor:pointer;line-height:0}
.officemenu__knop::-webkit-details-marker{display:none}
.officemenu__knop .tegelsvg{width:32px;height:32px;display:block;transition:transform .12s}
.officemenu__knop:hover .tegelsvg,.officemenu[open] .officemenu__knop .tegelsvg{transform:scale(1.08)}
.officemenu__lijst{position:absolute;right:auto;left:0;top:40px;z-index:30;min-width:330px;background:var(--vlak);border:1px solid var(--lijn-zwaar);border-radius:12px;box-shadow:0 14px 34px -14px rgba(34,66,58,.45);padding:12px 14px 14px}
.officemenu__kop{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);font-weight:650;padding:2px 4px 10px}
.officemenu__rooster{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* Met de lijst ervoor in de selector: de algemene menuregels (.menu__lijst a: blok,
   links, vet) zouden anders winnen en de tegel scheeftrekken. */
.officemenu__lijst .officemenu__app{display:flex;flex-direction:column;align-items:center;gap:6px;width:auto;padding:10px 6px 9px;border-radius:10px;font-size:12px;font-weight:500;color:var(--ink);text-align:center;line-height:1.2}
.officemenu__lijst .officemenu__app:hover{background:var(--bg)}
.officemenu__naam{display:block;text-align:center}
.officemenu__icoon{position:relative;width:40px;height:40px;display:grid;place-items:center}
.officemenu__icoon .tegelsvg{width:40px;height:40px}
.officemenu__lijst .officemenu__app--dicht{color:var(--zacht)}
.officemenu__app--dicht .tegelsvg{opacity:.35}
.officemenu__slot{position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;border-radius:50%;background:var(--vlak);border:1px solid var(--lijn-zwaar);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322423a' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E");background-size:8px;background-repeat:no-repeat;background-position:center}
.officemenu__uitleg{margin-top:12px;padding-top:10px;border-top:1px solid var(--lijn);font-size:12px;line-height:1.45;color:var(--gedempt);max-width:330px}
.officemenu__wie{display:flex;flex-direction:column;line-height:1.15;font-size:12.5px;font-weight:600;color:var(--ink);max-width:190px;overflow:hidden;text-decoration:none}
.officemenu__wie b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.officemenu__wie small{font-size:10.5px;font-weight:400;color:var(--gedempt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.officemenu__meer{font-size:12px;font-weight:600;color:var(--accent-ink);white-space:nowrap;padding:0 4px}
.officemenu__meer:hover{text-decoration:underline}
@media (max-width:760px){
  .officemenu__wie{display:none}
  .officemenu__lijst{position:fixed;left:10px;right:10px;top:60px;min-width:0}
}

/* ── de verzendbalk, linksonder op elke pagina ── */
.verzendbalk{position:fixed;left:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:10px;background:#22423a;color:#fff;font-size:13.5px;box-shadow:0 8px 28px rgba(34,66,58,.35);max-width:calc(100vw - 44px)}
.verzendbalk[hidden]{display:none}
.verzendbalk__tekst{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verzendbalk__tellen{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;flex:none}
.verzendbalk__knop{background:none;border:0;cursor:pointer;font:inherit;font-weight:600;color:#8fd0ff;padding:2px 4px;border-radius:5px;flex:none;text-decoration:none}
.verzendbalk__knop:hover{text-decoration:underline}
.verzendbalk__knop[hidden]{display:none}
@media(max-width:560px){.verzendbalk{left:12px;right:12px;bottom:12px}}
/* Algemene uitklapmenu's (details.menu): in Mail én Drive. */
.menu{position:relative;display:inline-block}
.menu summary{list-style:none;cursor:pointer;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu__lijst{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;background:var(--vlak);border:1px solid var(--lijn-zwaar);border-radius:10px;box-shadow:0 10px 24px var(--lijn);padding:6px;display:flex;flex-direction:column;gap:2px}
.menu__lijst a,.menu__lijst button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.menu__lijst a:hover,.menu__lijst button:hover{background:var(--bg)}
.menu__lijst--links{right:auto;left:0;white-space:nowrap}

/* Bekijken: een pdf in een venster binnen Office, voor Drive en Mail (lib/bekijker.php). */
.bk-balk{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.bk-balk svg{width:22px;height:22px;flex:none}
.bk-naam{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}
.bk-ruimte{flex:1}
.bk-venster{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;overflow:hidden;height:calc(100vh - 170px);min-height:420px}
.bk-venster iframe{width:100%;height:100%;border:0;display:block}
.bk-venster--video{background:#000}
.bk-venster video{width:100%;height:100%;display:block;background:#000}
.bk-hulp{margin:8px 0 0}

/* Het bekijkvenster over de pagina heen (lib/bekijker.php, assets/bekijker.js): donkere grond,
   balk bovenin, pagina's in het midden, paginanummer en zoom in een pil onderin. */
.bekijk{position:fixed;inset:0;z-index:1000;background:rgba(18,20,22,.93);color:#fff;display:flex;flex-direction:column}
.bekijk[hidden]{display:none}
body.bekijk-open{overflow:hidden}
.bekijk__balk{display:flex;align-items:center;gap:6px;padding:8px 12px;flex:none;min-width:0}
.bekijk__icoon svg{width:22px;height:22px;display:block;margin:0 4px 0 6px}
.bekijk__naam{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bekijk__ruimte{flex:1}
.bekijk__knop{width:40px;height:40px;flex:none;border-radius:50%;border:0;padding:0;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;text-decoration:none}
.bekijk__knop:hover,.bekijk__knop:focus-visible{background:rgba(255,255,255,.14);outline:none}
.bekijk__knop[hidden],.bekijk__icoon[hidden]{display:none}
.bekijk__knop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bekijk__inhoud{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.bekijk__paginas{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 16px 90px;min-height:100%;box-sizing:border-box}
.bekijk__pagina{position:relative;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.55);flex:none}
.bekijk__pagina canvas{display:block}
/* De tekstlaag van pdf.js over het canvas (bekijker.js): doorzichtige tekst om te selecteren en te kopiëren.
   Overgenomen uit pdf_viewer.css van pdf.js 4.10.38, alleen wat de laag nodig heeft. pdf.js rondt de maat van
   de laag af op --scale-round-x/-y (standaard 1px); hier zo fijn dat hij net zo groot is als het canvas. */
.bekijk__pagina .textLayer{--scale-round-x:.01px;--scale-round-y:.01px;position:absolute;text-align:initial;inset:0;overflow:clip;opacity:1;line-height:1;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:0}
.bekijk__pagina .textLayer[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}
.bekijk__pagina .textLayer[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}
.bekijk__pagina .textLayer[data-main-rotation="270"]{transform:rotate(270deg) translateX(-100%)}
.bekijk__pagina .textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0;z-index:1}
.bekijk__pagina .textLayer ::-moz-selection{background:rgba(0 0 255 / .25);background:color-mix(in srgb,AccentColor,transparent 75%)}
.bekijk__pagina .textLayer ::selection{background:rgba(0 0 255 / .25);background:color-mix(in srgb,AccentColor,transparent 75%)}
.bekijk__pagina .textLayer br::-moz-selection{background:transparent}
.bekijk__pagina .textLayer br::selection{background:transparent}
.bekijk__pagina .textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.bekijk__pagina .textLayer.selecting .endOfContent{top:0}
.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}
.bekijk__foto{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain;box-shadow:0 2px 14px rgba(0,0,0,.55);background:#fff}
.bekijk__video{max-width:100%;width:min(100%,1100px);max-height:calc(100vh - 110px);box-shadow:0 2px 14px rgba(0,0,0,.55);background:#000}
.bekijk__melding{color:#ddd;padding:48px 20px;text-align:center}
.bekijk__melding a{color:#fff}
.bekijk__voet{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px 6px 4px 14px;border-radius:10px;background:rgba(40,42,45,.97);box-shadow:0 2px 12px rgba(0,0,0,.45);font-size:13.5px;white-space:nowrap}
.bekijk__voet[hidden]{display:none}
.bekijk__voet label{display:flex;align-items:center;gap:6px}
.bekijk__nr{width:44px;height:28px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:transparent;color:#fff;text-align:center;font:inherit;-moz-appearance:textfield;appearance:textfield}
.bekijk__nr::-webkit-outer-spin-button,.bekijk__nr::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bekijk__scheiding{width:1px;height:24px;background:rgba(255,255,255,.25);margin:0 8px}
.bekijk__voet .bekijk__knop{width:34px;height:34px}
.bekijk__voet .bekijk__knop svg{width:18px;height:18px}
@media(max-width:600px){.bekijk__naam{font-size:13px}.bekijk__knop{width:36px;height:36px}}

/* Een venster met een formulier (dialog), buiten Drive ook nodig: Opslaan in Drive vanuit Mail. */
.dialoog{border:0;border-radius:14px;padding:22px 24px;width:min(440px,92vw);box-shadow:0 20px 60px -20px rgba(34,66,58,.5);background:var(--vlak);color:var(--ink)}
.dialoog::backdrop{background:rgba(34,66,58,.35)}
.dialoog h2{margin:0 0 12px;font-size:17px}
.dialoog__knoppen{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.dialoog--breed{width:min(620px,94vw)}
.dialoog__inhoud{max-height:min(70vh,760px);overflow:auto;margin:0 -4px;padding:0 4px}
.dialoog__voetnoot{margin:14px 0 0;border-top:1px solid var(--lijn);padding-top:12px}
.dialoog .melding{margin-bottom:12px}
/* Het bevestigvenster (assets/bevestig.js): bevestigen, melden en vragen in het scherm. */
.bevestig__tekst{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre-line}
.bevestig__invoer{width:100%;box-sizing:border-box;border:1px solid var(--lijn-zwaar);border-radius:9px;padding:9px 12px;font:inherit;font-size:14px;background:var(--vlak);color:var(--ink)}
.bevestig__invoer:focus{outline:none;border-color:var(--accent)}
.bevestig__knoppen{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.bevestig [hidden]{display:none!important}
.knop--gevaar{background:var(--rood)}
.knop--gevaar:hover{background:var(--rood);filter:brightness(.9)}
/* De mapkeuze (mapkeuze_html in lib/drive.php): een boom met een pijltje voor mappen met
   submappen, submappen ingesprongen, de gekozen rij licht op. */
.mapkeuze{max-height:50vh;overflow:auto;border:1px solid var(--lijn);border-radius:10px;padding:4px 6px}
.mapkeuze__rij{display:flex;align-items:center;gap:2px;font-size:13.5px}
.mapkeuze__rij label{flex:1;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;min-width:0}
.mapkeuze__rij label:hover{background:var(--bg)}
.mapkeuze__rij label:has(input:checked){background:var(--bg);font-weight:600}
.mapkeuze__rij label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapkeuze__rij input{margin:0;accent-color:var(--accent);flex:none}
.mapkeuze__rij label svg{width:18px;height:18px;flex:none}
.mapkeuze__pijl{width:22px;height:22px;flex:none;border:0;padding:0;background:none;border-radius:6px;color:var(--gedempt);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mapkeuze__pijl:hover{background:var(--bg);color:var(--ink)}
.mapkeuze__pijl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
.mapkeuze__pijl[aria-expanded=true] svg{transform:rotate(90deg)}
.mapkeuze__pijl--leeg{cursor:default}
.mapkeuze__kinderen{padding-left:20px}
.mapkeuze__kinderen[hidden]{display:none}

/* ── verzoeken van je andere apparaten, rechtsonder (10-9-2026) ── */
#verzoeken,#herinneringen-pop{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 44px))}
.verzoekpop--herinnering{border-left-color:#0f7c80}
.verzoekpop__waar{white-space:pre-line}
.verzoekpop{background:var(--vlak);border:1px solid var(--lijn-zwaar);border-left:4px solid var(--accent);border-radius:12px;padding:14px 16px;box-shadow:0 14px 40px -12px rgba(34,66,58,.45);animation:verzoekpop-in .25s ease-out}
@keyframes verzoekpop-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.verzoekpop{animation:none}}
.verzoekpop__kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.verzoekpop__kop b{font-family:'Baloo 2',sans-serif;font-size:15px}
.verzoekpop__tijd{font-size:11.5px;color:var(--zacht);white-space:nowrap}
.verzoekpop__waar{margin:4px 0 10px;font-size:13px;color:var(--gedempt);line-height:1.45}
.verzoekpop__knoppen{display:flex;gap:8px}
.verzoekpop__knoppen .knop{height:32px;padding:0 14px;font-size:13px}
.verzoekpop__stand{font-size:13px;font-weight:600;color:var(--groen)}
.verzoekpop--klaar{border-left-color:var(--groen)}

/* ══ Beheer: de kolom links met de onderdelen ══
   Mike, 10-9-2026: "kan je beheer pagina ook aanpassen op basis van de nieuwe
   layout?" Dezelfde indeling als Sales: een smalle kolom die op elke beheerpagina
   blijft staan, met de aantallen erbij, en een compacte kop. Zie beheer_kop() in
   lib/beheer.php. */
.bh{display:grid;grid-template-columns:186px minmax(0,1fr);gap:26px;align-items:start}
.bh__zij{position:sticky;top:70px}
.bh__kopje{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--zacht);padding:0 8px 7px}
.bh__item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.2}
.bh__item svg{width:17px;height:17px;flex:none;color:var(--zacht)}
.bh__item:hover{background:var(--hover)}
.bh__item.aan{background:var(--hover);font-weight:600}
.bh__item.aan svg{color:var(--accent)}
.bh__item small{margin-left:auto;color:var(--zacht);font-size:11.5px;font-variant-numeric:tabular-nums}
.bh__inhoud{min-width:0}

@media (max-width:900px){
  .bh{grid-template-columns:1fr;gap:14px}
  /* Op een smal scherm een rij die je opzij schuift, zoals de tabbladen elders. */
  .bh__zij{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
  .bh__kopje{display:none}
  .bh__item{flex:none;border:1px solid var(--lijn)}
}

/* Beheer › Huisstijl: per kleur een regel met uitleg, kiezer en code. */
.huisstijl{display:grid;gap:18px;max-width:680px}
.huisstijl__rij{display:grid;grid-template-columns:minmax(0,1fr) 54px 112px;gap:12px;align-items:center}
.huisstijl__rij label{display:grid;gap:2px}
.huisstijl__rij input[type=color]{width:54px;height:38px;border:1px solid var(--lijn-zwaar);border-radius:8px;padding:3px;background:var(--vlak);cursor:pointer}
.huisstijl__hex{height:38px;border:1px solid var(--lijn-zwaar);border-radius:8px;padding:0 10px;font:13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--vlak)}
.huisstijl__hex[aria-invalid=true]{border-color:var(--rood)}
.huisstijl__knoppen{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:4px}
@media(max-width:560px){.huisstijl__rij{grid-template-columns:minmax(0,1fr) 54px}.huisstijl__hex{grid-column:1/-1}}

/* Het wisselknopje zo breed als de langste naam: alle namen op dezelfde plek, alleen de huidige zichtbaar. Dan
   verspringt de balk niet als je van organisatie wisselt (Mike, 11-9-2026). */
.orgwissel__naam{display:grid;text-align:left}
.orgwissel__naam>span{grid-area:1/1;visibility:hidden;white-space:nowrap}
.orgwissel__naam>span.aan{visibility:visible}

/* Hetzelfde lettertype in Office, Orders en Sales, anders scheelt het knopje een pixel tussen de apps. */
.orgwissel summary,.orgnaam{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;font-weight:600;letter-spacing:0}
/* Op een telefoon alleen het blokje met de eerste letter (zie @media 760px hierboven). Die regel moet ná de regel
   hierboven staan, anders wint de lettergrootte van 13px en schoof de balk op 400px breed opzij (30-9-2026). */
@media (max-width:760px){.orgwissel summary,.orgnaam{font-size:0}}

/* ── Account (19-9-2026): één kolom met menu links, kaarten in de stijl van het inlogscherm ── */
.acc{max-width:1040px}
.acc__kop{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.acc__kop h1{font-size:26px;font-weight:800;margin:0;line-height:1.1}
.acc__kop p{margin:2px 0 0;color:var(--gedempt)}
.acc__av{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.acc__indeling{display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start}
.acc__nav{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px}
.acc__nav a{padding:8px 12px;border-radius:8px;color:var(--gedempt);text-decoration:none;font-weight:500;font-size:13.5px}
.acc__nav a:hover{color:var(--ink);background:var(--vlak)}
.acc__nav a[aria-current]{color:var(--ink);background:var(--vlak);font-weight:600}
.acc__kaarten{display:flex;flex-direction:column;gap:18px;min-width:0}
.acc__kaart{background:var(--vlak);border-radius:16px;padding:22px 24px;box-shadow:0 10px 30px -22px rgba(34,66,58,.5);scroll-margin-top:76px}
.acc__kaart--let{border:1.5px solid var(--accent)}
.acc__kaart h2{font-size:18px;font-weight:800;margin:0 0 2px}
.acc__kaart .sub{color:var(--gedempt);font-size:13px;margin:0 0 16px}
.acc__veld{display:block;margin:0 0 14px}
.acc__veld span{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.acc__veld small{display:block;color:var(--zacht);font-size:12px;margin-top:5px}
.acc__kaart .invoer{height:44px;border-width:1.5px;border-radius:10px;padding:0 13px;font-size:14.5px}
/* Geen gekleurde rand om een veld (Mike: velden zonder accentrand; 30-9-2026 ook op de accountpagina). */
.acc__kaart .invoer:focus{border-color:rgba(34,66,58,.55);box-shadow:none;outline:none}
.acc__push{background:var(--bg);border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;display:grid;gap:6px;max-width:440px}
.acc__push__kop{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600}
.acc__push .sub{margin:0}
.acc__push .acc__chip.aan{background:#e6f3eb;color:#2e7d4f}
.acc__push .knop{justify-self:start}
.push-dicht{border:0;background:none;padding:0;font:inherit;font-size:12px;color:var(--accent-ink);font-weight:600;cursor:pointer;justify-self:start;text-align:left}
.push-dicht:hover{text-decoration:underline}
.acc__kort{max-width:120px;text-align:center;font-weight:600;letter-spacing:.2em}
.acc__kaart .invoer--pin{max-width:180px}
.acc__rij2{display:grid;grid-template-columns:1fr 170px;gap:14px}
.acc__acties{display:flex;justify-content:flex-end;gap:10px;margin:0}
/* ── Dit apparaat (30-9-2026, account.php): een kop met icoon, het account boven het wachtwoord zodat een
   wachtwoordmanager het invult, Tonen zoals bij inloggen, een brede knop en de code in één groot vak. */
.acc__indeling--los{grid-template-columns:minmax(0,1fr)}
.acc__kaart.acc-app{max-width:440px}
.acc-app__kop{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px}
.acc-app__kop i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-zacht);color:var(--accent);flex:none}
.acc-app svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.acc-app__kop h2{margin:1px 0 3px;text-wrap:balance}
.acc-app__kop p{margin:0;color:var(--gedempt);font-size:13px;overflow-wrap:anywhere}
.acc-app__veld{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0 0 14px}
.acc-app__veld>span,.acc-app__veld>label{font-size:13px;font-weight:600}
.acc-app__vast{display:flex;align-items:center;gap:10px;height:44px;padding:0 13px;border-radius:10px;background:#f7f5f0;color:var(--gedempt)}
.acc-app__vast svg{width:16px;height:16px;color:var(--zacht)}
.acc-app__vast input{flex:1;width:100%;min-width:0;border:0;padding:0;background:transparent;font:inherit;font-size:14.5px;color:inherit;outline:none;text-overflow:ellipsis;cursor:default}
.acc-app__ww{position:relative}
.acc__kaart .acc-app__ww .invoer{padding-right:92px}
.acc-app__toon{position:absolute;right:5px;bottom:5px;height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.acc-app__toon:hover{background:var(--accent-zacht)}
.acc-app__toon:focus-visible{outline:2px solid var(--lijn-zwaar);outline-offset:0}
/* De punten van een wachtwoord zo groot als in het voorbeeld; met Tonen gewone tekst. */
.acc__kaart .acc-app__ww .invoer[type=password]{font-size:18px;letter-spacing:2px}
/* text-indent: de letterafstand komt ook na het laatste cijfer, anders staat de code net links van het midden. */
.acc__kaart .acc-app__code{height:54px;text-align:center;text-indent:10px;font-size:24px;font-weight:700;letter-spacing:10px;font-variant-numeric:tabular-nums}
.acc__kaart .acc-app__code::placeholder{color:var(--lijn-zwaar)}
.acc__kaart .acc-app__code--klein{height:44px;max-width:200px;text-align:left;text-indent:0;font-size:18px;letter-spacing:6px}
.acc-app__hint{margin:-4px 0 16px;color:var(--zacht);font-size:12px}
.acc-app__tussen{margin:0 0 12px;font-size:13px;font-weight:700}
.acc__kaart.acc-app .acc-app__knop{width:100%;height:44px;justify-content:center}
/* De tweede knop (Mail me een code, Stuur een nieuwe code) zonder rand, anders lijkt hij een invoerveld. */
.acc__kaart.acc-app .knop--licht{background:#ece8df;border-color:transparent;color:var(--ink)}
.acc__kaart.acc-app .knop--licht:hover{background:#e3ded2}
.acc-app__meer{margin:14px 0 0}
.acc-app__meer[open]{border-top:1px solid var(--lijn);padding-top:14px}
.acc-app__meer summary{cursor:pointer;list-style:none;text-align:center;font-size:12.5px;font-weight:600;color:var(--accent)}
.acc-app__meer summary::-webkit-details-marker{display:none}
.acc-app__meer[open] summary{margin-bottom:12px}
.acc-app__onder{margin:12px 0 0;font-size:12.5px;color:var(--gedempt);text-align:center}
/* Code per sms (30-9-2026): "Liever per mail?" als tekstknop, en de twee knoppen voor een nieuwe code onder elkaar. */
.acc-app__link{border:0;padding:0;background:none;font:inherit;font-weight:600;color:var(--accent);cursor:pointer}
.acc-app__link:hover{text-decoration:underline}
.acc-app__opnieuw{display:grid;gap:8px}
.acc__tussen{margin:14px 0 10px;font-size:13px;font-weight:700}
/* Telefoonnummers (30-9-2026): een lijst per account, onder Account en in Beheer, en de keuze op het wachtende apparaat. */
.acc-tel{border:1px solid var(--lijn);border-radius:12px;overflow:hidden;margin:0 0 14px}
.acc-tel__rij{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--lijn)}
.acc-tel__rij:first-child{border-top:0}
.acc-tel__rij form{margin:0}
.acc-tel__wie{flex:1;min-width:0}
.acc-tel__wie b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-tel__wie small{display:block;color:var(--gedempt);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc-tel__af{border:0;background:none;padding:0;color:var(--accent-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.acc__chip--wacht{background:var(--oranje-zacht);color:var(--oranje)}
.acc-tel__code{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0 14px 12px;background:#fffdf6}
.acc-tel__code .invoer{height:38px;max-width:150px;text-align:center;letter-spacing:6px;font-weight:700;font-variant-numeric:tabular-nums}
.acc-tel__code small{flex:1;min-width:140px;color:var(--gedempt);font-size:12px}
.acc-app__kies{display:grid;gap:8px}
.acc-app__kies label{display:flex;align-items:center;gap:10px;height:44px;padding:0 13px;border:1.5px solid var(--lijn-zwaar);border-radius:10px;cursor:pointer;font-weight:600;font-variant-numeric:tabular-nums}
.acc-app__kies label:has(input:checked){border-color:rgba(34,66,58,.55);background:#f7f5f0}
.acc-app__kies input{margin:0;accent-color:var(--ink)}
.bh-tel .acc-tel{margin:0 0 10px}
.bh-tel__erbij{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:0 0 6px}
@media (max-width:640px){.bh-tel__erbij{grid-template-columns:1fr}}
/* Wachtwoord in Beheer › Accounts › Bewerken (7-10-2026): herstellink, of zelf instellen. */
.bh-ww__link{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px}
.bh-ww__link small{flex:1 1 220px}
.bh-ww__zelf{display:flex;flex-direction:column;gap:8px}
.bh-ww__rij{display:grid;grid-template-columns:1fr auto;gap:8px}
.bh-ww__nieuw:not(:placeholder-shown){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
@media (max-width:640px){.bh-ww__rij{grid-template-columns:1fr}}
/* Eigen wachtwoord kiezen (7-10-2026): de inlogkaart midden in de pagina. */
.ww-kiezen{display:flex;justify-content:center;padding:40px 16px}
.ww-kiezen__uit{margin-top:10px}
.acc__kaart .knop{height:42px;border-radius:10px;font-size:14px;padding:0 18px;margin:0}
.acc__kaart .knop--klein{height:32px;padding:0 12px;font-size:13px;border-radius:8px;display:inline-flex;align-items:center}
.acc__kaart .knop--rood{color:var(--rood);border-color:var(--rood)}
.acc__regel{border-top:1px solid var(--lijn)}
.acc__regel:first-of-type{border-top:0}
.acc__regel summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;cursor:pointer;list-style:none}
.acc__regel summary::-webkit-details-marker{display:none}
.acc__regel summary b{display:block;font-size:14px}
.acc__regel summary small{display:block;color:var(--gedempt);font-size:12.5px}
.acc__uitklap{padding:14px 16px 16px;border:1.5px solid var(--lijn);border-radius:12px;margin:0 0 14px}
.acc__qr{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.acc__qr form{flex:1;min-width:220px}
.acc__qrblok{background:#fff;padding:8px;border:1px solid var(--lijn);border-radius:8px}
.acc__lijst{border:1px solid var(--lijn);border-radius:12px;overflow:hidden}
.acc__item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-top:1px solid var(--lijn)}
.acc__item:first-child{border-top:0}
.acc__item .wat{flex:1;min-width:0}
.acc__item b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.acc__item small{display:block;color:var(--gedempt);font-size:12.5px}
.acc__item .af{border:0;background:none;color:var(--accent-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.acc__item .af--rood{color:var(--rood)}
.acc__chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--groen-zacht);color:var(--groen);margin-left:6px;vertical-align:1px}
.acc__chip--grijs{background:var(--bg);color:var(--gedempt)}
@media (max-width:820px){.acc__indeling{grid-template-columns:1fr}.acc__nav{position:static;flex-direction:row;flex-wrap:wrap}.acc__kaart{padding:18px}.acc__rij2{grid-template-columns:1fr}}

/* De eigen tip bij kleine tekens en icoonknoppen (assets/tip.js): komt na 120 ms in plaats van de
   ruim een seconde die de browser aanhoudt, en staat netjes boven of onder het element. */
.office-tip{position:fixed;z-index:200;max-width:280px;padding:5px 9px;border-radius:7px;background:#32413c;color:#fff;font-size:12.5px;line-height:1.4;font-weight:500;pointer-events:none;box-shadow:0 6px 20px -8px rgba(0,0,0,.5);opacity:0;transition:opacity .1s}
.office-tip.aan{opacity:1}
.office-tip[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.office-tip{transition:none}}

/* De lijst met sneltoetsen (?), in Mail (mail-sneltoetsen.js) en Drive (public/drive/index.php). */
.sneltoetsen__kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 28px}
.sneltoetsen h3{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--gedempt)}
.sneltoetsen dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:13px;align-items:baseline}
.sneltoetsen dt{white-space:nowrap}
.sneltoetsen dd{margin:0;color:var(--gedempt)}
.sneltoetsen kbd{display:inline-block;min-width:1.6em;padding:2px 6px;border:1px solid var(--lijn);border-bottom-width:2px;border-radius:5px;background:var(--bg);font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center}

/* ── Tabbladen in Office (23-9-2026) ──
   Mike: "dat je op rechtermuis knop op een app drukt en tab aanmaken doet zodat je dan switch tussen tabs binnen
   office". /tabbladen.php draagt de tabbladen als iframes op dezelfde host. Een pagina in zo'n tabblad krijgt de
   klasse in-tab op <html> (het scriptje in pagina_kop) en laat de bovenbalk en de rail weg: die heeft de
   tabbladpagina al. --kopbalk is de hoogte van die balk; alles wat eronder plakt, rekent ermee. */
:root{--kopbalk:56px}
:root.in-tab{--kopbalk:0px}
.in-tab .topbalk,.in-tab .officerail{display:none}
.werk--tabbladen{padding:0;max-width:none}
.otabs{flex:1;min-width:0;align-self:stretch;display:flex;align-items:flex-end;gap:2px;overflow:hidden}
.otab{position:relative;display:flex;align-items:center;gap:8px;min-width:72px;max-width:220px;height:40px;padding:0 4px 0 12px;border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;background:transparent;color:var(--gedempt);font-size:13px;font-weight:500;cursor:pointer;margin-bottom:-1px;user-select:none}
.otab:hover{background:var(--bg);color:var(--ink)}
.otab--aan{background:var(--vlak);border-color:var(--lijn);color:var(--ink);font-weight:600}
.otab--aan::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--vlak)}
.otab:focus-visible{outline:2px solid #a51580;outline-offset:-2px}
.otab .tegelsvg{width:18px;height:18px;flex:none}
.otab__naam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otab .officerail__tel{position:static;flex:none;box-shadow:none}
.otab__weg{flex:none;width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--zacht);font-size:16px;line-height:1;cursor:pointer}
.otab__weg:hover{background:var(--bg);color:var(--ink)}
.tabbladen{position:relative;height:calc(100dvh - var(--kopbalk,56px))}
.tabbladen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--vlak)}
.appmenu{position:fixed;z-index:90;width:262px;padding:5px;background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;box-shadow:0 4px 12px rgba(38,32,31,.06),0 14px 36px rgba(38,32,31,.18);font-size:13px}
.appmenu__kop{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;margin-bottom:4px;border-bottom:1px solid var(--lijn);font-size:11.5px;color:var(--zacht)}
.appmenu__kop .tegelsvg{width:16px;height:16px;flex:none}
.appmenu__item{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 9px;border:0;border-radius:6px;background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.appmenu__item:hover,.appmenu__item:focus-visible{background:var(--bg);outline:0}
.appmenu__item svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--gedempt)}
.appmenu__item--hoofd{font-weight:600}
.appmenu__item--hoofd svg{color:#a51580}
.appmenu__noot{padding:6px 9px 4px;font-size:11.5px;color:var(--zacht)}
.tabmelding{position:fixed;z-index:95;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
@media (max-width:760px){.otab{min-width:48px}.otab__naam{display:none}}

/* ── Het venster voor een teamruimte (lib/beheer.php, teamruimte_venster_html), in Notities en Drive ──
   Geen gekleurde rand om het naamveld (Mike), maar een iets donkerdere lijn. */
.teamvenster{width:min(540px,94vw)}
.teamvenster__label{font-size:12px;color:var(--gedempt);font-weight:600}
.teamvenster__fout{color:var(--rood);font-size:12px}
.teamvenster__fout:empty{display:none}
.teamvenster .vinkje em{font-style:normal;color:var(--zacht)}
.teamvenster .invoer:focus,.teamvenster .invoer:focus-visible{outline:none;border-color:rgba(34,66,58,.5)}
.teamvenster .gebeurt[hidden]{display:none}

/* Na het wisselen van organisatie: "Je werkt nu in …", bovenin, een paar seconden (3-11-2026). Vast gepositioneerd,
   dus er schuift niets; pointer-events uit zodra hij weg is. */
.omgevingsmelding{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:12px;background:var(--vlak);border:1px solid var(--lijn);box-shadow:0 14px 36px -12px rgba(34,66,58,.4);max-width:calc(100vw - 32px);animation:omgevingsmelding 4.2s ease forwards}
.omgevingsmelding__blok{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px}
.omgevingsmelding b{display:block;font-size:14px}
.omgevingsmelding small{display:block;color:var(--gedempt);font-size:12px}
@keyframes omgevingsmelding{0%{opacity:0;transform:translate(-50%,-6px)}8%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px);visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.omgevingsmelding{animation:omgevingsmelding-stil 4.2s step-end forwards}@keyframes omgevingsmelding-stil{100%{visibility:hidden}}}
.opstel__sturen{white-space:nowrap}
.huisstijl__foto{display:block;width:100%;max-width:520px;aspect-ratio:3/1;object-fit:cover;border-radius:10px;border:1px solid var(--lijn);margin:4px 0 12px}

/* Geen kop met de naam van de app en de organisatie bovenin het zijmenu (3-11-2026, Mike: "dit is dubbel, dit is bij
   elke app zo"): de app staat al in de bovenbalk en de organisatie rechtsboven. De sluitknop op de telefoon en de
   inklapknop van Personeel blijven. */
.dr-zijkop strong,.dr-organisatie,.pv-zijkop strong,.pv-organisatie,.ag-zijkop,.ag-org,.nt-zij__titel,.sg-zijkop,.sg-org,.bh__zijtitel,.bh__kopje,.pl-zij__kop>div{display:none!important}
.pv-zijkop,.dr-zijkop{justify-content:flex-end}
.pl-zij__kop{justify-content:flex-end}
@media(min-width:761px){.pv-zijkop,.dr-zijkop{display:none!important}}

/* De knop Nieuw staat in elke app op dezelfde plek en is even groot (3-11-2026, Mike: "alle buttons van nieuw op
   dezelfde plek"): 22 px onder de balk, 16 px van de rand van het zijmenu, 37 px hoog. In Personeel gaat de inklapknop
   naar onderen, anders duwt hij de knop omlaag. */
@media(min-width:761px){
  .dr-zij,.ag-zij,.sg-zij,.nt-zij,.werk--mail .pv-zij,.pl-zij{padding-top:22px!important}
  .dr-zij,.werk--mail .pv-zij,.pl-zij{padding-left:12px!important;padding-right:12px!important}
  .ag-zij,.sg-zij{padding-left:16px!important;padding-right:16px!important}
  .nt-zij{padding-left:12px!important;padding-right:12px!important}
  .dr-nieuwmenu{margin:-8px 4px 0!important}
  .dr-nieuwmenu>summary,.ag-nieuw,.sg-nieuw,.nt-schil .nt-nieuw,.werk--mail .pv-opstellen,.werk--personeel .pl-zij__knop{height:37px!important;min-height:37px!important;border-radius:6px!important;font-size:13px!important;font-weight:500!important}
  .nt-schil .nt-nieuw,.werk--mail .pv-opstellen{margin-left:4px!important;margin-right:4px!important;width:calc(100% - 8px)!important}
  .ag-nieuw,.sg-nieuw,.nt-schil .nt-nieuw{margin-top:0!important}
  .werk--personeel .pl:not(.zijmenu--ingeklapt):not(.zijmenu--smal) .pl-zij__knop{margin:0 4px 21px!important}
  .pl:not(.zijmenu--ingeklapt):not(.zijmenu--smal) .pl-zij__kop{order:99;margin-top:auto;padding-top:12px}
}

/* De knop Nieuw in elke app zoals in Sign (3-11-2026, Mike: "het moet allemaal zoals sign worden", "goed dik
   gedrukt"): plus van 15 px, tekst vet en in het midden, en waar hij een menu opent het pijltje direct achter de tekst. */
.dr-nieuwmenu>summary,.ag-nieuw,.sg-nieuw,.nt-schil .nt-nieuw,.werk--mail .pv-opstellen,.werk--personeel .pl-zij__knop{justify-content:center!important;gap:8px!important;font-weight:700!important;letter-spacing:.1px}
:is(.dr-nieuwmenu>summary,.ag-nieuw,.sg-nieuw,.nt-schil .nt-nieuw,.werk--mail .pv-opstellen,.werk--personeel .pl-zij__knop) svg{width:15px!important;height:15px!important;flex:none;fill:none;stroke:currentColor;stroke-width:2.1!important;stroke-linecap:round}
.dr-nieuwmenu>summary .dr-chevron{margin-left:2px!important;width:14px!important;height:14px!important;opacity:1!important}
.sg-starten__pijl svg{width:14px!important;height:14px!important}
.dr-nieuwmenu>summary{margin:0!important;width:100%!important}
/* Links uitgelijnd (3-11-2026, Mike: "het staat in het midden ipv links uitgelijnd"): plus en tekst op dezelfde plek
   in elke app, het pijltje van een menu rechts, en overal Inter. */
.dr-nieuwmenu>summary,.ag-nieuw,.sg-nieuw,.nt-schil .nt-nieuw,.werk--mail .pv-opstellen,.werk--personeel .pl:not(.zijmenu--ingeklapt):not(.zijmenu--smal) .pl-zij__knop{justify-content:flex-start!important;padding:0 14px 0 16px!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;line-height:1!important}
.dr-nieuwmenu>summary .dr-chevron,.sg-starten__pijl{margin-left:auto!important}
.dr-nieuwmenu>summary,.ag-nieuw,.sg-nieuw,.nt-schil .nt-nieuw,.werk--mail .pv-opstellen,.werk--personeel .pl-zij__knop{border:0!important;box-sizing:border-box}
.werk--mail .pv-opstellen span{line-height:1!important}

/* Scrollbalken (3-11-2026, Mike: "door de scrollbalk in Notities krijg je verschuiving als je van app wisselt"):
   elk zijmenu en de pagina zelf houden altijd ruimte voor de balk vrij, of er nu iets te scrollen valt of niet. Zo
   staat alles in elke app op dezelfde plek. De balk zelf is dun, zonder spoor, in de inktkleur van Office. */
html{scrollbar-gutter:stable}
.dr-zij,.ag-zij,.sg-zij,.nt-zij,.werk--mail .pv-zij,.pl-zij,.bh__zij{scrollbar-gutter:stable;overflow-y:auto}
html,.dr-zij,.ag-zij,.sg-zij,.nt-zij,.pv-zij,.pl-zij,.bh__zij,.officerail{scrollbar-width:thin;scrollbar-color:rgba(34,66,58,.22) transparent}
:is(html,.dr-zij,.ag-zij,.sg-zij,.nt-zij,.pv-zij,.pl-zij,.bh__zij):hover{scrollbar-color:rgba(34,66,58,.38) transparent}

/* De organisatieknop en de keuzelijst met de tegel van elke omgeving; de lijst precies zo breed als de knop (4-11-2026). */
.orgtegel{width:20px;height:20px;flex:none;display:block}
.orgwissel{position:relative}
.orgwissel__lijst{left:0!important;right:0!important;min-width:0!important;width:auto!important}
.orgwissel__lijst a{justify-content:flex-start!important;align-items:center;gap:9px!important;padding:7px 8px!important}
.orgwissel__lijst a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgwissel summary .orgtegel,.orgnaam .orgtegel{width:20px!important;height:20px!important;opacity:1!important}

/* Bladeren in de bekijker (4-11-2026, Mike: "pijltjes aan de zijkant, met muis of toetsenbord"): ronde knoppen links en
   rechts op halve hoogte, op een donkere grond net als de knoppen bovenin. */
.bekijk__blader{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;padding:0;background:rgba(0,0,0,.45);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.bekijk__blader:hover,.bekijk__blader:focus-visible{background:rgba(0,0,0,.7);outline:none}
.bekijk__blader[hidden]{display:none}
.bekijk__blader svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bekijk__vorige{left:16px}.bekijk__volgende{right:16px}
.bekijk__teller{font-size:13px;color:rgba(255,255,255,.7);margin-left:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bekijk__teller[hidden]{display:none}
@media(max-width:600px){.bekijk__blader{width:40px;height:40px}.bekijk__vorige{left:8px}.bekijk__volgende{right:8px}}

/* Een vinkje in een menu, zoals "Zonder onderwerp en afzender" bij Afdrukken (4-11-2026). */
.menu__vink{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-top:2px;border-top:1px solid var(--lijn);font-size:13px;font-weight:500;color:var(--gedempt);cursor:pointer;white-space:nowrap}
.menu__vink input{width:15px;height:15px;margin:0;accent-color:var(--ink)}