/* Extra stijl voor de module dashboard. Alleen deze module schrijft hier.
   Gebruik eerst de klassen uit base.css; voeg hier alleen toe wat echt mist. */

.dash2{display:flex;flex-direction:column;gap:18px;max-width:1240px}

/* De stijl voor de oude "cockpitregel" (omzet, omzetdoel, banksaldo) is
   weg. Geld hoort niet op het dashboard — zie de toelichting in
   js/dashboard.js. Zet hier dus geen .cockpit-stijl terug. */

/* ═══ HOOFDINDELING — drie banen ═══════════════════════════════════
   Smal (telefoon, tablet): alles onder elkaar, agenda eerst.
   Vanaf 1000px: agenda + "Jouw maand" links, taken rechts, rail eronder.
   Vanaf 1500px: drie echte banen naast elkaar.
   De regel uit base.css blijft gelden: extra breedte vullen we met MEER
   inhoud naast elkaar, nooit met dezelfde inhoud uitgerekt.

   Smal: alles onder elkaar, op volgorde van dringendheid. .dash-links is
   dan geen kolom maar lost zich op (display:contents), zodat "Jouw maand"
   helemaal onderaan kan staan in plaats van meteen onder de agenda. */
.dash2-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;
  grid-template-areas:"agenda" "taken" "rail" "maand"}
.dash-links{display:contents}
.dash-agenda,.dash-taken,.dash-rail,.dash-maand{min-width:0}
.dash-agenda{grid-area:agenda}
.dash-taken{grid-area:taken}
.dash-rail{grid-area:rail}
.dash-maand{grid-area:maand}
.zij{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-sec{display:flex;flex-direction:column;gap:9px}
.dash-sec .sec-kop{display:block}

@media (min-width:1000px){
  /* Laptop: links de agenda met "Jouw maand" eronder, rechts de taken, en
     de rail over de volle breedte daaronder. .dash-links wordt hier een
     échte kolom: dan sluit "Jouw maand" direct op de agenda aan in plaats
     van uitgelijnd te worden op de onderkant van het takenpaneel. */
  .dash2-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    grid-template-areas:"links taken" "rail rail";
  }
  .dash-links{display:flex;flex-direction:column;gap:18px;grid-area:links;min-width:0}
  .dash-agenda,.dash-maand{grid-area:auto}
  /* De rail als raster: hoeveel blokken een rol ook heeft (een marketeer
     ziet andere dan een AM, zonder Outlook vervalt "Je mail"), ze verdelen
     samen de volle breedte. auto-fit i.p.v. auto-fill, anders blijft er een
     leeg spoor staan zodra iemand één blok minder heeft. */
  .dash-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:16px;align-content:start;align-items:start}
}

@media (min-width:1500px){
  .dash2{max-width:none}
  /* Drie banen. De taken krijgen de grootste fr-factor: dat is de baan waar
     de meeste regels in staan en waar tekst, naam en datum naast elkaar
     moeten passen. De agenda groeit het minst mee — een dagbaan van 800px
     maakt de dag niet overzichtelijker, dat is dezelfde dag maar breder.
     De rail bepaalt zelf of hij één of twee kolommen wordt (auto-fit
     hierboven): op een gewoon breed scherm één, op een heel breed scherm
     twee. Zo blijft er geen halve strook over, ongeacht hoeveel blokken
     iemands rol oplevert. */
  .dash2-grid{
    grid-template-columns:minmax(360px,1fr) minmax(420px,1.3fr) minmax(300px,.85fr);
    grid-template-areas:"links taken rail";
  }
}

/* Geen meldingen, geen mailkoppeling, geen hot vacatures: dan is er geen
   rail en hoort er ook geen lege derde baan te staan. Dit is precies het
   geval dat op het echte scherm misging — in de demo heeft iedereen alles,
   in productie heeft lang niet elke AM een hot vacature open. */
@media (min-width:1000px){
  .dash2-grid.geenrail{grid-template-areas:"links taken"}
  .dash2-grid.geenrail .dash-rail{display:none}
}
@media (min-width:1500px){
  .dash2-grid.geenrail{grid-template-columns:minmax(380px,1fr) minmax(420px,1.3fr)}
}

/* ─── Agenda ingeklapt ───────────────────────────────────────────
   De vrijgekomen ruimte blijft niet leeg: de agenda wordt één regel over
   de volle breedte, en taken en rail schuiven eronder en verdelen álles.
   De rail is daar breed genoeg voor twee of drie kolommen, met "Jouw
   maand" eronder. */
@media (min-width:1000px){
  .dash2-grid.dicht{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    grid-template-areas:"agenda agenda" "taken rail" "taken maand";
    /* Het takenpaneel loopt over rij 2 én 3. Zonder deze regel verdeelt de
       browser die hoogte over beide rijen en valt er een gat van een paar
       honderd pixels tussen de rail en "Jouw maand". Met 1fr op de laatste
       rij krijgt die de rest en sluit alles netjes aan. */
    grid-template-rows:auto auto 1fr;
  }
  .dash2-grid.dicht .dash-links{display:contents}
  .dash2-grid.dicht .dash-agenda{grid-area:agenda}
  .dash2-grid.dicht .dash-maand{grid-area:maand}
  .dash2-grid.dicht .dash-rail{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
}
@media (min-width:1000px){
  .dash2-grid.dicht.geenrail{grid-template-areas:"agenda agenda" "taken maand"}
}

/* ─── Agendakaart ────────────────────────────────────────────── */
.tl2-card .card-b.tl2-b{padding:8px 20px 18px}
.tl2-leeg{padding:2px 2px 10px}

/* De in-/uitklapknop is tegelijk de titel van de kaart: één ding om aan
   te wijzen in plaats van een kopje met een pijltje ernaast. */
.tl2-kop{gap:10px}
.tl2-vouwknop{
  display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:2px 0;
  font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;
}
.tl2-vouwknop:hover{color:var(--olive)}
.tl2-caret{font-size:10px;color:var(--muted);width:10px;line-height:1}
/* Ingeklapt: één regel met wat er vandaag vaststaat, zodat je na het
   inklappen nog steeds weet dat je om tien uur zit. */
.tl2-card.dicht .card-h{border-bottom:none;border-radius:var(--r-l)}
.tl2-dichtzin{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl2-olrow{display:flex;align-items:center;gap:12px;padding:8px 2px 10px;flex-wrap:wrap}
/* Vandaag ↔ Week: kleiner dan de standaard .seg, hij staat naast een titel. */
.tl2-seg button{padding:4px 12px;font-size:12px}

/* Weken bladeren — alleen zichtbaar in weekweergave. Twee kale pijlen en
   het label ertussen: geen derde knop in de schakelaar, zodat de pil niet
   langer wordt dan de kop. Het label heeft een vaste minimumbreedte, anders
   springen de pijlen bij elke wissel ("Deze week" ↔ "18 – 24 aug"). */
.tl2-wknav{display:flex;align-items:center;gap:4px;min-width:0}
.tl2-wkpijl{background:none;border:1px solid var(--line);border-radius:99px;
  width:24px;height:24px;line-height:1;padding:0;cursor:pointer;
  font:600 15px/1 var(--body);color:var(--txt-2);flex:0 0 24px}
.tl2-wkpijl:hover:not(:disabled){border-color:var(--line-2);color:var(--ink);background:var(--card-2)}
.tl2-wkpijl:disabled{opacity:.35;cursor:default}
.tl2-wkpijl:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.tl2-wklbl{font-size:12px;font-weight:600;color:var(--txt-2);
  min-width:92px;text-align:center;white-space:nowrap;
  background:none;border:0;padding:2px 4px;font-family:var(--body)}
/* Sta je in een andere week, dan brengt het label je terug naar nu. */
.tl2-wklbl.terug{cursor:pointer;color:var(--olive);border-bottom:1px solid transparent}
.tl2-wklbl.terug:hover{border-bottom-color:currentColor}
.tl2-wklbl.terug:focus-visible{outline:2px solid var(--olive);outline-offset:2px;border-radius:2px}
/* Eén regel uitleg boven de weekbaan (wat Outlook wel/niet levert). */
.tl2-wknoot{padding:2px 2px 10px;max-width:70ch;line-height:1.45}
.tl2-week.leeg{padding:6px 0 4px}

@media(max-width:640px){ .tl2-wklbl{min-width:0} }

/* Zachte nadruk als een melding naar de tijdlijn springt. */
.tl2-card.flits,.tk-card.flits{border-color:var(--olive-l);transition:border-color .5s}

/* Eén uur = tijdlabel links + slot rechts. */
.tl2-uur{display:flex;gap:12px;border-top:1px solid var(--line);min-height:44px}
.tl2-tijd{width:44px;flex:0 0 44px;padding-top:8px;font-size:11px;color:var(--muted);font-weight:500}
.tl2-slot{flex:1;min-width:0;position:relative;padding:3px 0}
.tl2-uur.voorbij .tl2-tijd{color:var(--line-2)}
.tl2-uur.voorbij .tl2-items{opacity:.55}

/* Dichtgeklapt stuk lege uren — één rustige regel, klikbaar om te openen. */
.tl2-vouw{
  display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);
  padding:7px 0;cursor:pointer;transition:background .12s;
}
.tl2-vouw:hover{background:#f7f9f1}
.tl2-vouw .tl2-tijd{padding-top:0}
.tl2-vouw-t{flex:1;min-width:0;color:var(--line-2)}
.tl2-vouw-x{opacity:0;transition:opacity .12s;white-space:nowrap;padding-right:2px}
.tl2-vouw:hover .tl2-vouw-x,.tl2-vouw:focus-visible .tl2-vouw-x{opacity:1;color:var(--olive)}

/* Dun olijf "nu"-lijntje in het huidige uur. */
.tl2-nulijn{position:absolute;left:-56px;right:0;border-top:1px solid var(--olive);z-index:2;pointer-events:none}
.tl2-nulijn span{
  position:absolute;left:0;top:-8px;background:var(--olive);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:1px 7px;line-height:1.4;
}

/* Regels in de tijdlijn. */
.tl2-item{
  display:flex;align-items:center;gap:10px;padding:6px 8px;margin:2px -8px;
  border-radius:var(--r-s);transition:background .12s;position:relative;z-index:1;
}
.tl2-item.klik{cursor:pointer}
.tl2-item.klik:hover{background:#f7f9f1}
.tl2-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tl2-t b{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl2-s{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Subregel met een knop erin (Outlook-afspraak met Teams-link): de tekst
   kapt af, de link niet — anders viel "Teams" op smal weg achter een lange
   locatienaam en kon je vanaf je telefoon de call niet openen. */
.tl2-s.metlink{display:flex;align-items:baseline;gap:8px;overflow:visible}
.tl2-s.metlink .tl2-sub-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl2-s .tl2-teams{flex:0 0 auto;white-space:nowrap;font-weight:600}
.tl2-w{font-size:12px;color:var(--txt-2);white-space:nowrap;flex:0 0 auto}

/* Zonder tijdstip — onderaan de agenda. */
.tl2-rest{border-top:1px solid var(--line);margin-top:2px;padding-top:12px}
.tl2-rest .label{margin-bottom:4px}

/* ═══ TAKENPANEEL ═════════════════════════════════════════════════
   Taken en opvolging stonden vroeger als "ruimte: …" tussen de uren van
   de agenda. Hier staan ze in hun eigen kaart: een lijst waarin je kunt
   prioriteren, verzetten en afvinken.                                  */
.tk-kop{gap:10px 14px}
.tk-seg button{padding:4px 12px;font-size:12px}
.tk-voor{width:auto;min-width:130px;padding:4px 8px;font-size:12px}
.tk-vg{display:flex;align-items:center;gap:10px;min-width:0}
.tk-vg .meta{white-space:nowrap}
.bar.tk-vgbar{width:84px;flex:0 0 84px;height:5px}
.tk-card .card-b.tk-b{padding:12px 18px 16px}
/* Bij zestig taken hoort de pagina niet drie schermen lang te worden: dan
   staan de agenda en de rail ergens boven in het niets. Het paneel schuift
   dan in zichzelf — één scrollgebied, niet twee, anders weet je nooit welk
   van de twee je onder je muis hebt. Op een telefoon niet: daar scrollt de
   pagina toch al en is een kadertje-in-een-kadertje alleen maar lastig. */
@media (min-width:1000px){
  .tk-card .card-b.tk-b{max-height:min(74vh,780px);overflow-y:auto}
}

/* Snel iets opschrijven. Staat bovenaan en niet achter een knop: een taak
   die je pas na twee klikken kunt noteren, noteer je niet. Blijft staan bij
   het scrollen, zodat je ook onder in de lijst iets kunt bijschrijven. */
.tk-nieuw{display:flex;gap:8px;align-items:center;margin-bottom:12px;
  position:sticky;top:0;z-index:2;background:var(--card);padding:2px 0 8px}
.tk-nieuw input{flex:1;min-width:0;font-size:13px;padding:7px 11px}
.tk-nieuw .btn{flex:0 0 auto}

.tk-lijst{display:flex;flex-direction:column;gap:2px}
.tk-groep{padding-top:2px}
.tk-glabel{display:flex;align-items:center;gap:7px;padding:12px 0 5px;color:var(--muted)}
.tk-groep:first-child .tk-glabel{padding-top:2px}
.tk-groep.urgent .tk-glabel{color:var(--oranje)}
.tk-gtel{background:var(--card-2);border:1px solid var(--line);border-radius:999px;
  font-size:10.5px;padding:0 6px;color:var(--txt-2);letter-spacing:0}
.tk-groep.urgent .tk-gtel{background:var(--amber-bg);border-color:var(--amber-line);color:#b03d1c}

/* Eén regel: vinkje, prioriteit, tekst, wanneer. */
.tk-rij{
  display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0 -8px;
  border-left:2px solid transparent;border-radius:var(--r-s);
  transition:background .12s;
}
.tk-rij:hover{background:#f7f9f1}
.tk-vink{width:15px;height:15px;flex:0 0 15px;margin:0;cursor:pointer}
.tk-geenvink{width:15px;flex:0 0 15px;text-align:center;color:var(--line-2);font-size:13px;line-height:1}
.tk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tk-t[data-mod]{cursor:pointer}
.tk-t b{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-s{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-w{font-size:11.5px;color:var(--txt-2);white-space:nowrap;flex:0 0 auto}
/* Oranje alléén voor urgentie — huisstijl: kleur is betekenis. */
.tk-w.oranje,.tk-rij.urgent .tk-w{color:var(--oranje);font-weight:600}

/* Prioriteit: één rond knopje dat de ronde normaal → hoog → laag doorloopt.
   Hoog krijgt er een oranje streep langs de regel bij, zodat je bij zestig
   taken kunt scannen zonder te lezen. */
.tk-prio{
  width:19px;height:19px;flex:0 0 19px;padding:0;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--card-2);border:1px solid var(--line);
  font:700 11px/1 var(--body);color:var(--muted);transition:border-color .12s,color .12s;
}
.tk-prio:hover{border-color:var(--olive-l);color:var(--olive)}
.tk-rij.prio-hoog{border-left-color:var(--oranje)}
.tk-rij.prio-hoog .tk-prio{background:var(--amber-bg);border-color:var(--amber-line);color:var(--oranje)}
.tk-rij.prio-laag{opacity:.78}
.tk-rij.prio-laag .tk-prio{background:transparent;color:var(--line-2)}

/* Wanneer: een gewone select, maar hij oogt pas als bedienbaar zodra je
   erbij bent. Anders staan er zestig invoervelden onder elkaar. */
.tk-wanneer{
  width:auto;flex:0 0 auto;max-width:140px;cursor:pointer;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--txt-2);
  background-color:transparent;border-color:transparent;border-radius:999px;
  padding:2px 22px 2px 8px;background-position:right 7px center;
}
.tk-rij:hover .tk-wanneer,.tk-wanneer:focus{border-color:var(--line-2);background-color:#fff}

/* Bewerken: onderwerp en tijd horen niet op de rij zelf (te veel velden
   voor één regel), dus dit potloodje opent het volledige taakvenster.
   Pas zichtbaar bij hover/focus — anders staat elke rij vol knopjes. */
.tk-bewerk{
  width:19px;height:19px;flex:0 0 19px;padding:0;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;
  font-size:11px;color:var(--line-2);opacity:0;transition:opacity .12s,border-color .12s,color .12s;
}
.tk-rij:hover .tk-bewerk,.tk-bewerk:focus{opacity:1;border-color:var(--line);color:var(--muted)}
.tk-bewerk:hover{border-color:var(--olive-l);color:var(--olive)}

/* Afgevinkt blijft staan waar het stond, doorgestreept. Zie de toelichting
   in js/dashboard.js: opnieuw sorteren haalt de regel onder je muis weg. */
.tk-rij.af{opacity:.55}
.tk-rij.af .tk-t b,.tk-rij.af .tk-s{color:var(--muted);text-decoration:line-through}
.tk-rij.af .tk-w{color:var(--muted);font-weight:400}

.tk-meer{
  background:none;border:none;padding:10px 0 2px;cursor:pointer;text-align:left;
  font-family:var(--body);font-size:12px;color:var(--muted);
}
.tk-meer:hover{color:var(--olive)}
.tk-leeg{padding:10px 0 6px;line-height:1.5}

/* ─── Opvolging: eigen sectie onder de taken ─────────────────────
   Bewust afgescheiden met een lijn: het ritme komt uit js/opvolging.js,
   je kunt er geen datum of prioriteit op zetten, en afvinken geldt alleen
   voor vandaag. Zie de toelichting bij opvolgingRijen(). */
.tk-opv{border-top:1px solid var(--line);margin-top:14px}
.tk-opv .tk-rij{cursor:pointer}
.tk-opvkop{padding-top:12px;color:var(--olive)}
.tk-komt{color:var(--muted)}
.tk-rij.opv .tk-t b{font-weight:500;color:var(--txt)}

/* ─── Weekweergave: dagblokken onder elkaar ──────────────────────
   Zelfde vorm als de dagbaan (label links, inhoud rechts), zodat het
   schakelen geen nieuw scherm oplevert maar dezelfde lijst, uitgerekt. */
.tl2-dag{display:flex;gap:12px;border-top:1px solid var(--line);padding:6px 0 8px;min-height:44px}
.tl2-dag:first-child{border-top:none}
.tl2-dkop{width:74px;flex:0 0 74px;display:flex;flex-direction:column;gap:1px;padding-top:8px}
.tl2-dnaam{font-size:12px;font-weight:600;color:var(--txt-2);text-transform:capitalize;line-height:1.2}
.tl2-ddat{font-size:11px;color:var(--muted);font-weight:500}
.tl2-dnu{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);margin-top:2px}
.tl2-ditems{flex:1;min-width:0;padding:2px 0}
.tl2-dleeg{padding:7px 0 5px;color:var(--line-2)}
/* Vandaag krijgt een dun olijf streepje; verleden wordt gedempt. */
.tl2-dag.vandaag{border-left:2px solid var(--olive);margin-left:-14px;padding-left:12px}
.tl2-dag.voorbij .tl2-dnaam,.tl2-dag.voorbij .tl2-ddat{color:var(--line-2)}
.tl2-dag.voorbij .tl2-ditems{opacity:.55}

/* ─── Rechterkolom ───────────────────────────────────────────── */
.zij .card-b.zij-b{padding:12px 18px}
.zij .card.klik{cursor:pointer;transition:border-color .12s}
.zij .card.klik:hover{border-color:var(--olive-l)}
.zij-rij{display:flex;flex-direction:column;gap:5px;padding:9px 0;border-top:1px solid var(--line)}
.zij-rij:first-child{border-top:none;padding-top:4px}
.zij-rij.klik{cursor:pointer;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:var(--r-s);transition:background .12s}
.zij-rij.klik:hover{background:#f7f9f1}
.zij-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.zij-t b{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zij-s{font-size:11.5px;color:var(--muted)}
.zij-urgent{color:var(--amber);font-weight:600}
.zij-rij{position:relative}
.zij-rij .zij-w{position:absolute;right:8px;top:10px;font-size:11.5px;color:var(--txt-2)}
.bar.zij-bar{height:4px}
.zij-maand{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.zij-maand .big{font-size:28px}
.zij-van{font-size:15px;color:var(--muted);font-weight:500}

/* ─── Meldingen ("Voor jou") — collegiaal, geen alarm ────────── */
.meld-card{border-left:2px solid var(--olive)}
.meld-card .card-b.meld-b{padding:8px 18px}
.meld-rij{
  display:flex;align-items:center;gap:10px;padding:9px 8px;margin:0 -8px;
  border-top:1px solid var(--line);border-radius:var(--r-s);
  cursor:pointer;transition:background .12s;
}
.meld-rij:first-child{border-top:none}
.meld-rij:hover{background:#f7f9f1}
.meld-stip{width:7px;height:7px;border-radius:50%;background:var(--olive-l);flex:0 0 7px}
.meld-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.meld-tekst{font-size:12.5px;color:var(--ink);line-height:1.4}
.meld-w{white-space:nowrap}
.meld-af{
  width:26px;height:26px;flex:0 0 26px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-2);border-radius:999px;
  font-size:12px;color:var(--txt-2);cursor:pointer;font-family:var(--body);
  transition:border-color .12s,color .12s,background .12s;
}
.meld-af:hover{border-color:var(--olive);color:var(--olive);background:#fff}

/* ─── Je mail — venster op de inbox, geen samenvatting ────────── */
.dash-sec .sec-kop.rij{display:flex;align-items:center;gap:8px}
.mail-ver{
  background:none;border:none;padding:0 2px;cursor:pointer;line-height:1;
  color:var(--muted);font-size:12px;font-family:var(--body);
}
.mail-ver:hover{color:var(--olive)}
.mail-ver:disabled{opacity:.4;cursor:default}
.zij .card-b.mail-b{padding:10px 18px 12px}
.mail-kop{padding:2px 0 8px;border-bottom:1px solid var(--line);margin-bottom:2px;line-height:1.45}
.mail-kop b{color:var(--ink)}
/* De periode op een eigen regel: anders breekt de kopregel rommelig af. */
.mail-per{display:block;font-size:11px;color:var(--muted);opacity:.8}
/* Het adres van de postbus die hier gelezen wordt. Gedempt en klein: het is
   geruststelling, geen mededeling. Alleen als het níét je eigen CRM-account
   is wordt het een waarschuwing — dan is het wél een mededeling. */
.mail-bus{margin-left:8px;font-size:11px;font-weight:500;color:var(--muted);
  text-transform:none;letter-spacing:0;opacity:.85}
.mail-bus.let{color:var(--amber);font-weight:600;opacity:1}
.mail-groep{display:block;padding:11px 0 3px;color:var(--muted)}
.mail-groep:first-child{padding-top:2px}
.mail-leeg{padding:4px 0 2px}

.mail-rij{
  display:flex;align-items:flex-start;gap:9px;padding:8px;margin:0 -8px;
  border-radius:var(--r-s);text-decoration:none;color:inherit;
  transition:background .12s;
}
a.mail-rij:hover{background:#f7f9f1;text-decoration:none}
.mail-stip{width:6px;height:6px;border-radius:50%;flex:0 0 6px;margin-top:6px;background:transparent}
/* Oranje = urgentie (huisstijl): alleen mail die als belangrijk staat gemarkeerd. */
.mail-stip.hoog{background:var(--oranje)}
.mail-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mail-van{display:flex;align-items:baseline;gap:7px;min-width:0}
.mail-van b{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-koppel{
  font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:0 7px;white-space:nowrap;flex:0 0 auto;cursor:pointer;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;transition:border-color .12s,color .12s;
}
.mail-koppel:hover{border-color:var(--olive-l);color:var(--olive)}
.mail-o{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-w{white-space:nowrap;flex:0 0 auto;margin-top:1px}
/* "Overig" mag compacter: alleen afzender en onderwerp. */
.mail-rij.compact{padding-top:5px;padding-bottom:5px}
.mail-rij.compact .mail-van b{font-weight:500}
.mail-meerknop{
  background:none;border:none;padding:6px 0 0;cursor:pointer;
  font-family:var(--body);font-size:11.5px;color:var(--muted);
}
.mail-meerknop:hover{color:var(--olive)}

/* ─── Sparkline — dun olijflijntje, richting zonder woorden ──────
   Geen assen, geen raster, geen tooltip: het is richting, geen grafiek.
   Nog één plek over: "Jouw maand" in de rechterkolom. */
.zij-spark svg{display:block;opacity:.85;flex:0 0 auto}
.zij-spark{display:flex;align-items:center;gap:8px;margin-top:10px}

/* ─── Mobiel ─────────────────────────────────────────────────────
   Alles onder elkaar (de basisregel van .dash2-grid doet dat al), en de
   onderdelen die op 375px niet passen vallen weg of worden smaller.
   Niets krijgt een vaste breedte, dus er ontstaat geen paginascroll. */
@media (max-width:700px){
  .bar.tk-vgbar{display:none}
  .tl2-tijd{width:38px;flex:0 0 38px}
  .tl2-nulijn{left:-50px}
  /* Weekweergave: dagkop smaller, verder exact dezelfde lijst. */
  .tl2-dag{gap:10px}
  .tl2-dkop{width:56px;flex:0 0 56px}
  .tl2-dag.vandaag{margin-left:-8px;padding-left:6px}
  /* De voortgangsteller mag onder de titel wegvallen op smal. */
  .tl2-card .card-h,.tk-card .card-h{gap:8px 10px}
  .mail-koppel{max-width:52%}
  /* De knop "Toevoegen" is op 375px overbodig: daar is de Enter-toets van
     het toetsenbord dichterbij dan een knop naast het veld. */
  .tk-nieuw #tk_snelok{display:none}
  .tk-card .card-b.tk-b{padding:10px 14px 14px}
  .tk-rij{gap:7px}
  .tk-wanneer{max-width:104px}
}

/* ─── Klantupdates op vrijdag — het detailpaneel ──────────────────
   De belronde uit js/opvolging.js. Staat hier en niet in klanten.css
   omdat het paneel vanaf het dashboard opengaat: het is de vrijdagtaak
   van de AM, geen onderdeel van de klantenmodule.
   Bewust rustig: één regel per klant, feiten in gedempte tekst, en pas
   kleur waar het iets betekent (gedaan, nooit contact). */
.ovk-h{flex:1;min-width:0}
.ovk-kop{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ovk-kop .bar{flex:1;max-width:220px}

.ovk-lijst{display:flex;flex-direction:column;gap:2px}
.ovk-r{padding:12px 0;border-bottom:1px solid var(--line)}
.ovk-r:last-child{border-bottom:none}
.ovk-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}

/* De naam is de ingang naar de klantkaart, maar oogt als tekst — een rij
   knoppen onder elkaar leest niet als een lijst. */
.ovk-naam{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:700;color:var(--ink);
  text-align:left;border-bottom:1px solid transparent;
}
.ovk-naam:hover{color:var(--olive);border-bottom-color:var(--olive-l)}

.ovk-feit{margin-top:4px;line-height:1.5}
.ovk-contact{font-size:12.5px;color:var(--txt-2);margin-top:3px}
.ovk-contact a{font-variant-numeric:tabular-nums}
/* De vacaturevraag is de tweede helft van het rondje en mag daarom als
   enige regel in de rij donker zijn — niet gekleurd, wel gelezen. */
.ovk-vraag{font-size:13px;color:var(--txt);margin-top:6px;max-width:74ch;line-height:1.5}

/* Afgeronde klant: blijft staan (je wilt zien dat het gebeurd is), maar
   zakt visueel weg zodat je oog bij het werk blijft. */
.ovk-r.af .ovk-naam{color:var(--muted);font-weight:600}
.ovk-r.af .ovk-feit,.ovk-r.af .ovk-contact{opacity:.75}

/* Op het teamscherm is het paneel 1180px breed; een notitieveld van die
   breedte nodigt uit tot één lange regel. Zelfde leesmaat als de vraag. */
.ovk-noteer{display:none;margin-top:10px;max-width:74ch}
.ovk-noteer.open{display:block}
.ovk-noteer textarea{
  width:100%;min-height:74px;font-family:var(--body);font-size:13.5px;
  line-height:1.5;resize:vertical;
}
.ovk-noteer-f{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

.ovk-uit{margin:16px 0 0;max-width:70ch;line-height:1.5}

/* Smal scherm: de knop onder de naam in plaats van ernaast, en de feiten
   krijgen de volle breedte. */
@media (max-width:700px){
  .ovk-top .spacer{display:none}
  .ovk-top{gap:6px}
  .ovk-top .btn{margin-left:auto}
  .ovk-kop{flex-wrap:wrap;gap:8px}
  .ovk-kop .bar{max-width:none;flex:1 0 100%}
}

/* ═══ DE KOP — team, glas en cockpitstrook (26 okt 2026) ═══════════
   Gekozen na een reeks proeven ("optie 2, warme studio" + "optie A"):
   - Achtergrond: zachte studio in zand en perzik met een vleugje lime.
     Geen olijfgroen: daarop zag je het glas niet.
   - Bovenaan het team (assets/team/), gecentreerd en scherp.
   - Daaroverheen één groot licht glazen paneel waarin álles staat. Je ziet
     de hesjes en Peter Ploeg er wazig doorheen; dát maakt het glas.
   - Kaarten ín het paneel zijn géén tweede laag matglas: glas kan niet door
     glas heen kijken, dan wordt het grijs. Ze zijn helder wit met een
     lichtrand.
   - Zwarte pil met lime = actief/positief (lime mag op donker). Oranje =
     wat je nog moet doen. */
#viewmount:has(> .dash2.dk){padding:0}
.dash2.dk{position:relative;max-width:none;gap:0;padding:0 26px 40px;isolation:isolate;
  background:
    radial-gradient(60% 70% at 18% 20%,#f3b48f 0%,rgba(243,180,143,0) 60%),
    radial-gradient(50% 60% at 85% 15%,#e2ec9e 0%,rgba(226,236,158,0) 60%),
    radial-gradient(70% 60% at 60% 90%,#d9b892 0%,rgba(217,184,146,0) 65%),
    linear-gradient(160deg,#efe6da,#e4d6c4);
  min-height:100%}

/* Team: vijf losse uitsneden, absoluut geplaatst over de volle breedte. */
.dk-team{position:relative;height:300px;margin:0 -26px;pointer-events:none}
.dk-team img{position:absolute;bottom:-210px;height:490px;width:auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.22))}
/* Gelijk verdeeld tussen de twee buitenste hoofden (2 nov 2026, Tjeerd:
   eerst "rechts meer witruimte", daarna "links te veel ruimte").
   --a = hoofd Tjeerd vanaf links, --b = hoofd Tjerk vanaf rechts; de vier
   in het midden staan op 1/5, 2/5, 3/5 en 4/5 van de ruimte daartussen,
   met het midden van het hoofd op die plek (--h = hoofd naast het midden
   van de uitsnede, alleen bij de hamer). Doos en Tjerk blijven tegen de rand. */
.dk-team{--a:235px;--b:105px;--h:28px;--s:calc(100% - var(--a) - var(--b))}
.dk-team .t-doos{left:0;z-index:1}
.dk-team .t-helm{left:calc(var(--a) + var(--s)*.2);transform:translateX(-50%);height:480px;z-index:3}
.dk-team .t-peter{left:calc(var(--a) + var(--s)*.4);transform:translateX(-50%);height:460px;bottom:-170px;z-index:5}
.dk-team .t-daan{left:calc(var(--a) + var(--s)*.6);transform:translateX(-50%);height:430px;bottom:-160px;z-index:4}
.dk-team .t-hamer{left:calc(var(--a) + var(--s)*.8 - var(--h));transform:translateX(-50%);height:440px;bottom:-180px;z-index:2}
.dk-team .t-food{right:0;height:500px;z-index:3}

/* Het paneel. De lichtbreking langs de rand zet js/dashboard.js erbij
   (lensOpPaneel); dit is het matglas waar het op terugvalt. */
.dk-paneel{position:relative;z-index:5;border-radius:30px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:18px;
  background:linear-gradient(170deg,rgba(255,252,246,.18),rgba(255,250,240,.08));
  backdrop-filter:blur(9px) saturate(1.7) brightness(1.05);-webkit-backdrop-filter:blur(9px) saturate(1.7) brightness(1.05);
  box-shadow:0 40px 90px rgba(60,30,10,.22),0 2px 6px rgba(60,30,10,.06),
    inset 0 2px 1px #fff,inset 0 -2px 2px rgba(255,255,255,.55),
    inset 2px 0 2px rgba(255,255,255,.45),inset -2px 0 2px rgba(255,255,255,.45),inset 0 0 40px rgba(255,255,255,.22)}
.dk-paneel::before,.cp-strook::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.25) 30%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.35) 80%,#fff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.dk-paneel > *{position:relative;z-index:1}

.dk-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 4px}
.dk-naam{font-family:var(--disp);font-size:24px;text-transform:uppercase;letter-spacing:.3px;color:var(--oranje);line-height:1;
  padding:7px 16px 6px;border-radius:99px;background:rgba(255,255,255,.62);box-shadow:inset 0 1px 1px #fff,0 4px 14px rgba(60,30,10,.08)}
.dk-datum{font-size:12px;font-weight:600;color:var(--ink);padding:4px 11px;border-radius:99px;
  background:rgba(255,255,255,.55);box-shadow:inset 0 1px 1px #fff}
.dk-datum::first-letter{text-transform:uppercase}

/* ─── Cockpitstrook ─── */
.cp-strook{position:relative;display:flex;align-items:center;gap:0 24px;padding:14px 22px;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.40));
  box-shadow:0 14px 34px rgba(60,30,10,.12),inset 0 1.5px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.6)}
.cp-strook > *{position:relative}
.cp-sep{width:1px;align-self:stretch;margin:6px 0;background:rgba(26,31,10,.10);flex:0 0 1px}
.cp-c{all:unset;box-sizing:border-box;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px;font-family:var(--body)}
button.cp-c{cursor:pointer;border-radius:14px}
button.cp-c:focus-visible{outline:2px solid var(--olive-l);outline-offset:4px}
.cp-bel{flex:1.5 1 0;flex-direction:row;align-items:center;gap:14px}
.cp-meter{width:128px;height:120px;flex:0 0 128px;margin:-10px 0}
.cp-streep line{stroke:rgba(26,31,10,.16);stroke-linecap:round}
.cp-streep line.aan{stroke:rgba(26,31,10,.82)}
.cp-boog-bg{fill:none;stroke:rgba(26,31,10,.08);stroke-width:6;stroke-linecap:round}
.cp-boog{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.cp-knop{fill:var(--oranje);stroke:#fff;stroke-width:2.5}
.cp-n{font:700 44px var(--body);letter-spacing:-.03em;fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.cp-van{font:600 11px var(--body);fill:rgba(26,31,10,.5);text-anchor:middle}
.cp-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.cp-l{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,31,10,.55)}
.cp-s{font-size:12px;color:rgba(26,31,10,.6)} .cp-s b{color:var(--ink)}
.cp-rij{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-big{font-weight:700;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.cp-big small{font-size:18px;font-weight:600;color:rgba(26,31,10,.38)}
.cp-pil{display:inline-flex;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:#141710;color:var(--lime);white-space:nowrap}
.cp-pil.or{background:rgba(212,82,42,.14);color:#c4461f}
.cp-dots{display:flex;gap:6px}
.cp-dots i{width:22px;height:8px;border-radius:99px;background:rgba(26,31,10,.12)}
.cp-dots i.v{background:var(--ink)}
.cp-bar{display:block;height:6px;border-radius:99px;background:rgba(26,31,10,.10);overflow:hidden}
.cp-bar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.cp-belronde{align-self:flex-start;font:700 12.5px var(--body);color:#fff;padding:8px 16px;border-radius:99px;border:none;cursor:pointer;
  background:var(--oranje);box-shadow:0 8px 18px rgba(212,82,42,.32),inset 0 1.5px 1px rgba(255,220,200,.9),inset 0 -2px 4px rgba(120,30,0,.25)}
.cp-belronde:hover{filter:brightness(1.06)}

/* ─── De werkbanen in het paneel: helder glas in plaats van papier ─── */
.dk-paneel .dash2-grid{gap:16px}
.dk-paneel .card{background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.48));border:none;border-radius:20px;
  box-shadow:0 14px 34px rgba(60,30,10,.10),inset 0 1.5px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.6)}
.dk-paneel .card-h{background:transparent;border-bottom:1px solid rgba(26,31,10,.07)}
.dk-paneel .seg{background:rgba(255,255,255,.5);border-color:transparent}
.dk-paneel .seg button.on{background:#141710;color:var(--lime)}
.dk-paneel .sec-kop{color:rgba(26,31,10,.6)}

/* Laptop: iets kleiner en dichter naar de randen, anders schuift
   Peter Ploeg over de hamer heen. */
@media (max-width:1600px){
  .dk-team{--a:206px;--b:92px;--h:25px}
  .dk-team .t-doos,.dk-team .t-helm{height:430px;bottom:-180px}
  .dk-team .t-hamer{height:395px;bottom:-150px}
  .dk-team .t-food{height:440px;bottom:-180px}
  .dk-team .t-daan{height:385px;bottom:-135px}
  .dk-team .t-peter{height:380px;bottom:-125px}
}
/* Smal: team kleiner, cockpitstrook onder elkaar. */
@media (max-width:1200px){
  .dk-team{height:220px;--a:173px;--b:76px;--h:21px}
  .dk-team .t-doos,.dk-team .t-helm,.dk-team .t-food{height:360px;bottom:-150px}
  .dk-team .t-hamer{height:330px;bottom:-120px}
  .dk-team .t-peter{height:310px;bottom:-110px}
  .dk-team .t-daan{height:322px;bottom:-112px}
  .cp-strook{flex-wrap:wrap;gap:16px 24px}
  .cp-sep{display:none}
  .cp-c{flex:1 1 220px}
}
@media (max-width:700px){
  .dash2.dk{padding:0 12px 24px}
  .dk-team{height:150px;margin:0 -12px}
  .dk-team .t-doos,.dk-team .t-food{height:230px;bottom:-90px}
  .dk-team .t-helm,.dk-team .t-hamer,.dk-team .t-daan{display:none}
  .dk-team .t-peter{left:50%;height:220px;bottom:-78px}
  .dk-paneel{padding:14px;border-radius:22px}
}

/* Geen paginakop boven het dashboard op de desktop: de teamband begint
   bovenaan. Op mobiel blijft hij staan, daar zit de menuknop in. */
@media (min-width:901px){
  main.content:has(.dash2.dk) > header.pagehead{display:none}
}
.dk-bel{margin-left:auto;background:rgba(255,255,255,.62)!important;border-color:transparent!important}
.dk-bel + .dk-ver{margin-left:0}
.dk-ver{margin-left:auto;background:rgba(255,255,255,.62)!important;border-color:transparent!important;box-shadow:inset 0 1px 1px #fff}

/* ─── Routines op een rij (eigenaar) — groen gelukt, oranje wacht op jou, rood mislukt ─── */
.card-b.rt-b{padding:6px 18px}
.rt-rij{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.rt-rij:first-child{border-top:none}
.rt-stip{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:5px;background:var(--muted)}
.rt-stip.groen{background:var(--green)}
.rt-stip.oranje{background:#e3a21a}
.rt-stip.rood{background:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.rt-t{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.rt-t b{font-size:13px;font-weight:600;color:var(--ink)}
.rt-t .meta{font-size:11px}
.rt-tekst{flex-basis:100%;font-size:12.5px;line-height:1.4;color:var(--ink)}
.rt-w{white-space:nowrap;font-size:11.5px;padding-top:1px}

/* Nieuwe vacatures (werkenbij-wacht) */
.vs-rij{flex-direction:row;align-items:center;gap:10px}
.vs-rij .zij-t{flex:1}
.vs-naam{cursor:pointer}
.vs-naam:hover{text-decoration:underline}
.vs-rij .zij-s a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
.vs-act{display:flex;gap:4px;flex-shrink:0}
.vs-act .btn{text-decoration:none}