/* BikeMeet Partners — portal stylesheet
   Design tokens en form/button-stijlen gespiegeld uit index.html,
   zodat portal-pagina's identiek ogen aan de landingspagina.
   --volt = acties (CTA, submit, actieve staat). --brass = status/partner-accent. */

:root{
  --asphalt:#16181A;
  --asphalt2:#1F2225;
  --line:#33383D;
  --white:#F5F6F4;
  --muted:#9AA1A6;
  --volt:#CFFF04;
  --brass:#C9A04E;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  background:var(--asphalt);
  color:var(--white);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,label:focus-within{
  outline:2px solid var(--volt);outline-offset:2px;border-radius:4px;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(22,24,26,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-weight:900;font-stretch:110%;font-size:1.15rem;letter-spacing:.01em;text-decoration:none}
.logo em{font-style:normal;color:var(--brass);font-weight:700;font-stretch:90%}
.nav a.cta{
  background:var(--volt);color:#101200;text-decoration:none;
  font-weight:800;font-size:.95rem;padding:10px 20px;border-radius:999px;
  transition:transform .15s ease;
}
.nav a.cta:hover{transform:translateY(-1px)}
.nav a.plain{
  text-decoration:none;color:var(--muted);font-weight:700;font-size:.95rem;
}
.nav a.plain:hover{color:var(--white)}
.navright{display:flex;align-items:center;gap:18px}
.whoami{color:var(--muted);font-size:.9rem}
.whoami b{color:var(--white);font-weight:800}

/* ---------- auth-pagina's (login / register) ---------- */
.authpage{min-height:calc(100vh - 64px);display:flex;align-items:flex-start;justify-content:center;padding:56px 24px 72px}
.authcard{
  background:var(--asphalt2);border:1px solid var(--line);border-radius:20px;
  padding:36px;width:100%;max-width:560px;
}
.authcard.narrow{max-width:440px}
.eyebrow{
  color:var(--brass);font-weight:700;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:14px;
}
h1{font-weight:900;font-stretch:115%;font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.12;margin-bottom:12px}
h2{font-weight:900;font-stretch:112%;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.15;margin-bottom:10px}
h3{font-weight:800;font-size:1.05rem;margin-bottom:8px}
.sub{color:var(--muted);max-width:38em;margin-bottom:28px}
.sub.tight{margin-bottom:18px}

/* ---------- formulieren ---------- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.frow.full{grid-template-columns:1fr}
label.fl{display:block;font-size:.85rem;font-weight:700;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%;background:var(--asphalt);border:1px solid var(--line);border-radius:10px;
  color:var(--white);font:inherit;font-size:.95rem;padding:12px 14px;
}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
textarea{min-height:100px;resize:vertical}
.hint{color:var(--muted);font-size:.82rem;margin-top:6px}

/* chip-checkboxes — zelfde patroon als het leadformulier */
.types{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.types label{
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;
  font-size:.92rem;font-weight:700;color:var(--muted);user-select:none;
}
.types input{position:absolute;opacity:0;pointer-events:none}
.types label:has(input:checked){border-color:var(--volt);color:var(--volt)}
.types label:has(input:disabled){opacity:.5;cursor:not-allowed}

/* knoppen */
button[type=submit],.btn-volt{
  background:var(--volt);color:#101200;border:none;font:inherit;font-weight:800;
  font-size:1rem;padding:14px 30px;border-radius:999px;cursor:pointer;
  transition:transform .15s ease;text-decoration:none;display:inline-block;
}
button[type=submit]:hover,.btn-volt:hover{transform:translateY(-1px)}
button[type=submit]:disabled,.btn-volt:disabled{opacity:.6;cursor:wait;transform:none}
.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--white);font:inherit;
  font-weight:700;font-size:.9rem;padding:10px 20px;border-radius:999px;cursor:pointer;
  transition:transform .15s ease;text-decoration:none;display:inline-block;
}
.btn-ghost:hover{transform:translateY(-1px)}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-link{
  background:none;border:none;color:var(--muted);font:inherit;font-size:.9rem;
  text-decoration:underline;cursor:pointer;padding:0;
}
.btn-link:hover{color:var(--white)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* meldingen */
.formmsg{margin-top:16px;font-size:.95rem;display:none}
.formmsg.ok{display:block;color:var(--volt)}
.formmsg.err{display:block;color:#ff8a80}
.formfoot{margin-top:20px;color:var(--muted);font-size:.9rem}
.formfoot a{color:var(--white);font-weight:700}

/* succesvlak na registratie */
.done{display:none}
.done.on{display:block}
.done .tick{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(207,255,4,.14);border:1px solid var(--volt);margin-bottom:18px;
}

/* ---------- dashboard ---------- */
main{padding:40px 0 72px}
.banner{
  border:1px dashed var(--brass);border-radius:var(--radius);
  padding:18px 22px;margin-bottom:32px;background:rgba(201,160,78,.06);
}
.banner b{color:var(--brass);display:block;margin-bottom:4px}
.banner p{color:var(--muted);font-size:.95rem}
.statusdot{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;border:1px solid var(--brass);color:var(--brass);
}
/* Statuschips zijn altijd status => brass, nooit volt. De .ok-variant (Actief
   partner) gebruikt dezelfde brass als de pending-chip; alleen de tekst verschilt. */
.statusdot.ok{border-color:var(--brass);color:var(--brass)}

.panel{
  background:var(--asphalt2);border:1px solid var(--line);border-radius:20px;
  padding:30px 26px;margin-bottom:24px;
}
.panelhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.panelhead .sub{margin-bottom:0}

/* lessenlijst */
.groupttl{
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 10px;
}
.lesson{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.lesson:last-child{border-bottom:none}
.lesson .when{
  flex:none;width:104px;font-weight:800;font-size:.9rem;line-height:1.35;
}
.lesson .when span{display:block;color:var(--muted);font-weight:600;font-size:.85rem}
.lesson .body{flex:1;min-width:0}
.lesson .body b{display:block;font-size:1rem}
.lesson .body span{display:block;color:var(--muted);font-size:.9rem}
.lesson.past{opacity:.55}
.lesson .del{
  flex:none;background:none;border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:.82rem;font-weight:700;padding:6px 14px;border-radius:999px;cursor:pointer;
}
.lesson .del:hover{border-color:#ff8a80;color:#ff8a80}
.lesson .del:disabled{opacity:.4;cursor:not-allowed}

.empty{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:28px 24px;text-align:center;color:var(--muted);font-size:.95rem;
}
.empty b{display:block;color:var(--white);font-weight:800;margin-bottom:4px}
.loading{color:var(--muted);font-size:.95rem}

/* footer */
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:840px){
  .frow{grid-template-columns:1fr}
  .authcard{padding:26px 20px}
  .panel{padding:24px 20px}
  .lesson{flex-wrap:wrap}
  .lesson .when{width:100%}
  .navright{gap:12px}
  .whoami{display:none}
}

/* ===========================================================================
   Ronde 2 — gedeelde nav, dashboard-hub, profielformulier en kaart-pinpicker.
   =========================================================================== */

/* ---------- gedeelde nav (js/nav.js) ---------- */
.navlinks{display:flex;gap:18px;align-items:center}
.navlink{
  text-decoration:none;color:var(--muted);font-weight:700;font-size:.95rem;
  padding:4px 0;border-bottom:2px solid transparent;
}
.navlink:hover{color:var(--white)}
.navlink.on{color:var(--white);border-bottom-color:var(--volt)}

/* ---------- dashboard-hub ---------- */
.hubhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.hubcard{
  background:var(--asphalt2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;text-decoration:none;color:inherit;display:block;
  transition:transform .15s ease,border-color .15s ease;
}
a.hubcard:hover{transform:translateY(-2px);border-color:var(--muted)}
.hubcard h3{font-weight:800;font-size:1.08rem;margin-bottom:8px}
.hubcard p{color:var(--muted);font-size:.93rem}
.hubcard.soon{opacity:.6}
.hubcard .soontag{
  display:inline-block;margin-top:12px;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass);
  border:1px solid var(--brass);border-radius:999px;padding:3px 10px;
}

/* ---------- profielformulier ---------- */
.fieldset{border:none;padding:0;margin:0 0 8px}
.fieldset legend{
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:0;margin-bottom:16px;
}
.frow.adres{grid-template-columns:2fr 1fr}
.frow.pc{grid-template-columns:1fr 2fr}
input[aria-invalid="true"]{border-color:#ff8a80}
.fielderr{display:none;color:#ff8a80;font-size:.82rem;margin-top:6px}
.fielderr.on{display:block}
.savebar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:24px;margin-top:8px;
}
.savebar .formmsg{margin-top:0}

/* ---------- kaart / pin-picker ---------- */
#map{
  height:380px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--asphalt2);z-index:0;
}
.maptools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.readout{
  color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums;
}
.readout b{color:var(--white);font-weight:800}
.readout .none{color:var(--brass);font-weight:700}
.maphint{color:var(--muted);font-size:.88rem;margin-top:12px}

/* eigen marker in partner-brass i.p.v. de standaard Leaflet-afbeelding:
   geen afhankelijkheid van de icon-path van de CDN-build. */
.pinicon{background:none;border:none}
.pinicon svg{display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}

/* Leaflet op donkere achtergrond */
.leaflet-container{background:#1B1E21;font-family:inherit}
.leaflet-control-attribution{
  background:rgba(22,24,26,.86)!important;color:var(--muted)!important;font-size:.7rem!important;
}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-bar a{
  background:var(--asphalt2)!important;color:var(--white)!important;
  border-bottom-color:var(--line)!important;
}
.leaflet-bar a:hover{background:var(--line)!important}

@media (max-width:840px){
  .cards{grid-template-columns:1fr}
  .frow.adres,.frow.pc{grid-template-columns:1fr}
  .navlinks{gap:14px}
  .navlink{font-size:.9rem}
  #map{height:300px}
}

/* ===========================================================================
   Ronde 3a — visuele upgrade: page-header, widget-grid, skeletons, empty-states.
   Alles additief; bestaande klassen (.panel, .cards, .empty, .lesson) blijven werken.
   Merkregel: --volt = acties/actief, --brass = status/verdiend. Nooit wisselen.
   =========================================================================== */

/* ---------- gedeeld paginakop-patroon ---------- */
.page-header{margin-bottom:6px}
.page-header .eyebrow{margin-bottom:10px}
.page-header .titlerow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.page-header .titlerow h1,.page-header .titlerow h2{margin-bottom:0}
.page-header .sub{margin:12px 0 0}

/* route-lijn: het streepjesmotief van de landingspagina als subtiele scheiding */
.route-line{display:block;width:100%;height:22px;color:var(--line);margin:6px 0 28px}

/* ---------- dashboard-widgetraster (12 koloms) ---------- */
.grid-dash{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:8px}
.grid-dash>.span-4{grid-column:span 4}
.grid-dash>.span-8{grid-column:span 8}
.grid-dash>.span-12{grid-column:span 12}

.widget{
  background:var(--asphalt2);border:1px solid var(--line);border-radius:18px;
  padding:24px;display:flex;flex-direction:column;
  scroll-margin-top:84px;transition:border-color .15s ease;
}
.widget:hover{border-color:#3d444a}
.widget-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.widget-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:.01em}
.widget-title svg{width:20px;height:20px;flex:none;color:var(--muted)}
.widget-link{color:var(--muted);font-size:.85rem;font-weight:700;text-decoration:none;white-space:nowrap}
.widget-link:hover{color:var(--white)}
.widget-fail{color:var(--muted);font-size:.92rem}
.widget-fail b{color:#ff8a80;display:block;font-weight:700;margin-bottom:2px}

/* ---------- skeleton-laadstaat ---------- */
.skeleton{position:relative;overflow:hidden;background:#24282c;border-radius:8px}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-line{height:12px;margin-bottom:12px}
.skeleton-line.w40{width:40%}.skeleton-line.w60{width:60%}.skeleton-line.w80{width:80%}
.skeleton-line:last-child{margin-bottom:0}
.skeleton-block{height:180px;border-radius:var(--radius)}
.skeleton-ring{width:92px;height:92px;border-radius:50%}

/* ---------- generieke lege staat ---------- */
.empty-state{
  border:1px dashed var(--line);border-radius:var(--radius);padding:26px 22px;
  text-align:center;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.empty-state svg{width:30px;height:30px;color:var(--muted)}
.empty-state p{font-size:.94rem;max-width:30em;margin:0}
.empty-state b{color:var(--white);font-weight:800}

/* icoon-in-knop */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-icon svg{width:18px;height:18px;flex:none}

/* ---------- widget a — agenda ---------- */
.widget .groupttl:first-child{margin-top:0}
.agenda-row{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.agenda-row:last-child{border-bottom:none}
.agenda-row .tijd{flex:none;width:52px;font-weight:800;font-variant-numeric:tabular-nums;font-size:.95rem}
.agenda-row .info{min-width:0}
.agenda-row .info b{display:block;font-weight:700;font-size:.98rem}
.agenda-row .info span{display:block;color:var(--muted);font-size:.88rem}

/* vergrendelde staat (in behandeling) */
.locked{
  display:flex;gap:12px;align-items:center;color:var(--muted);font-size:.93rem;
  border:1px dashed var(--line);border-radius:var(--radius);padding:18px 20px;
}
.locked svg{flex:none;color:var(--brass)}

/* ---------- widget b — profiel-compleetheid ---------- */
.compleet{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ring{
  --pct:0;position:relative;width:92px;height:92px;flex:none;border-radius:50%;
  background:conic-gradient(var(--brass) calc(var(--pct)*1%),var(--line) 0);
  display:flex;align-items:center;justify-content:center;
}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--asphalt2)}
.ring b{position:relative;z-index:1;font-weight:900;font-size:1.15rem;font-variant-numeric:tabular-nums}
.compleet-body{flex:1;min-width:150px}
.compleet-lead{color:var(--muted);font-size:.92rem;margin-bottom:10px}
.compleet-lead.done{color:var(--white);margin-bottom:0}
.missing{list-style:none;display:flex;flex-direction:column;gap:7px}
.missing a{
  display:inline-flex;align-items:center;gap:6px;color:var(--volt);
  text-decoration:none;font-weight:700;font-size:.9rem;
}
.missing a:hover{text-decoration:underline}
.missing a svg{width:14px;height:14px;flex:none}

/* ---------- widget c — mini-kaart ---------- */
#minimap{
  height:230px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--asphalt2);z-index:0;
}
.leaflet-tooltip.minilabel{
  background:rgba(22,24,26,.94);border:1px solid var(--line);color:var(--white);
  font-weight:700;font-size:.8rem;border-radius:8px;padding:4px 9px;box-shadow:none;
}
.leaflet-tooltip.minilabel::before{display:none}

/* ---------- widget d — snelacties ---------- */
.snel-acties{display:flex;flex-direction:column;gap:12px}
.snel-acties>a{width:100%}

/* ---------- widget e — bereik (binnenkort) ---------- */
.widget-soon{border-color:rgba(201,160,78,.45);background:rgba(201,160,78,.05)}
.widget-soon .widget-title svg{color:var(--brass)}
.soon-badge{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass);border:1px solid var(--brass);border-radius:999px;padding:3px 10px;
}
.bereik-line{color:var(--muted);font-size:.95rem;max-width:44em;margin:0}

/* ---------- login/register kaart-polish (CSS-only, geen HTML/logica) ---------- */
.authcard{box-shadow:0 24px 60px rgba(0,0,0,.35)}

/* panels krijgen ook een ankermarge zodat #hash-links niet onder de sticky nav vallen */
.panel{scroll-margin-top:84px}

@media (max-width:840px){
  .grid-dash{grid-template-columns:1fr}
  .grid-dash>.span-4,.grid-dash>.span-8,.grid-dash>.span-12{grid-column:auto}
  .widget{padding:22px 20px}
  #minimap{height:200px}
}

/* ===========================================================================
   Ronde 3b — slimmere planner: duur, bewerken, weekweergave, type-woordenschat.
   Additief; bestaande klassen (.lesson, .panel, .agenda-row) blijven werken.
   =========================================================================== */

/* ---------- formulier: modus-kop + bewerkknoppen ---------- */
.formmode{margin-bottom:16px}
.formmode b{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);
}
.btn-ghost.danger{border-color:rgba(255,138,128,.5);color:#ff8a80}
.btn-ghost.danger:hover{border-color:#ff8a80}

/* klikbare lijstregel (bewerken-op-klik) */
.lesson{cursor:pointer;border-radius:10px;transition:background .12s ease}
.lesson:hover{background:rgba(255,255,255,.03)}
.agenda-row{cursor:pointer;text-decoration:none;color:inherit;border-radius:8px;transition:background .12s ease}
.agenda-row:hover{background:rgba(255,255,255,.04)}

/* ---------- segmented control (Lijst | Week) ---------- */
.seg{display:inline-flex;background:var(--asphalt);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg-btn{
  background:none;border:none;font:inherit;font-weight:700;font-size:.9rem;color:var(--muted);
  padding:7px 20px;border-radius:999px;cursor:pointer;transition:color .12s ease;
}
.seg-btn:hover{color:var(--white)}
.seg-btn.on{background:var(--volt);color:#101200}
.seg-btn.on:hover{color:#101200}

/* ---------- weekweergave: navigatie ---------- */
.wk-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.wk-pijl{padding:8px 16px;font-size:1.2rem;line-height:1}
.wk-label{margin-left:6px;font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums}

/* ---------- weekweergave: desktop-tijdraster ---------- */
.wk-grid{display:grid;grid-template-columns:48px repeat(7,minmax(0,1fr));gap:0}
.wk-as{position:relative;margin-top:44px}
.wk-uur{
  position:absolute;right:8px;transform:translateY(-50%);
  font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wk-dag{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.wk-dag:last-child{border-right:1px solid var(--line)}
.wk-dagkop{
  height:44px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.78rem;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line);
  text-transform:capitalize;
}
.wk-dag.vandaag .wk-dagkop{color:var(--brass);font-weight:800}
.wk-dag.vandaag{background:rgba(201,160,78,.05)}
.wk-dag.vandaag .wk-baan{box-shadow:inset 2px 0 0 var(--brass)}
.wk-baan{position:relative}
.wk-lijn{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.5}
.wk-blok{
  position:absolute;overflow:hidden;text-align:left;cursor:pointer;
  background:rgba(207,255,4,.12);border:1px solid rgba(207,255,4,.5);border-left:3px solid var(--volt);
  border-radius:7px;padding:4px 6px;color:var(--white);font:inherit;
  display:flex;flex-direction:column;gap:1px;line-height:1.2;
}
.wk-blok:hover{background:rgba(207,255,4,.2)}
.wk-blok b{font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums}
.wk-blok .wk-titel{font-size:.76rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-blok .wk-klant{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-blok.past{background:rgba(154,161,166,.1);border-color:var(--line);border-left-color:var(--muted);opacity:.7}
.wk-blok:disabled{cursor:default}

/* gestapelde valstaat bij >3 overlappende afspraken */
.wk-stapel{
  position:absolute;left:2px;right:2px;overflow:hidden;
  background:var(--asphalt);border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:7px;padding:4px 6px;display:flex;flex-direction:column;gap:2px;
}
.wk-badge{font-size:.68rem;font-weight:800;color:var(--brass);text-transform:uppercase;letter-spacing:.06em}
.wk-stapelrij{
  background:none;border:none;font:inherit;font-size:.72rem;color:var(--white);text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 0;
}
.wk-stapelrij:hover{color:var(--volt)}
.wk-stapelrij.past{opacity:.6}

/* ---------- weekweergave: mobiele dagenlijst ---------- */
.wk-lijst{display:none}
.wk-dagsectie{margin-bottom:18px}
.wk-dagsectiekop{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:capitalize;
  color:var(--muted);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.wk-dagsectie.vandaag .wk-dagsectiekop{color:var(--brass);border-bottom-color:var(--brass)}
.wk-dagleeg{color:var(--muted);font-size:.85rem;padding:2px 0 4px}
.wk-lijstrij{
  display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;font:inherit;color:inherit;padding:9px 0;border-bottom:1px solid var(--line);
}
.wk-lijstrij:last-child{border-bottom:none}
.wk-lijstrij:hover{background:rgba(255,255,255,.03)}
.wk-lijstrij b{flex:none;width:96px;font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums}
.wk-lijstrij span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wk-lijstrij.past{opacity:.55}

@media (max-width:840px){
  .wk-grid{display:none}
  .wk-lijst{display:block}
}