/* 85-verdiensten.css — /mijn-verdiensten/ (templates/tb-verdiensten.php, plugin verdiensten.php).
 *
 * Bord: verdiensten.png (2026-09-11); instructie: verdiensten-instructie.md. Eén
 * groot bedrag met drie cijfers eronder, de uitbetaalstappen ernaast, de tabel over
 * de volle breedte, bereik, btw als één regel. Alleen tokens uit 00-tokens.css.
 */

.tb-verdiensten{background:var(--tb-ground);padding-bottom:var(--tb-ruimte-m,56px);}

/* ---- band ------------------------------------------------------------------ */
.tb-vd-band{background:var(--tb-wash);border-bottom:1px solid var(--tb-line);}
.tb-vd-band-in{max-width:var(--tb-container);margin:0 auto;padding:22px 24px 28px;box-sizing:border-box;}
.tb-vd-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:10px;}
.tb-verdiensten .tb-vd-kop h1{margin:0;font:600 40px/1.1 var(--tb-serif);letter-spacing:-.02em;color:var(--tb-ink);}

.tb-vd-periode{display:inline-flex;gap:4px;padding:4px;border-radius:var(--tb-r-ctrl);background:var(--tb-tint);box-shadow:inset 0 0 0 1px var(--tb-line);}
.tb-vd-periode a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border-radius:calc(var(--tb-r-ctrl) - 2px);font:500 15px/1 var(--tb-sans);color:var(--tb-body);text-decoration:none;
}
.tb-vd-periode a:hover{color:var(--tb-ink);}
.tb-vd-periode a[aria-current="page"]{font-weight:700;color:var(--tb-ink);background:var(--tb-surface);box-shadow:0 1px 3px rgba(20,26,51,.12);}
.tb-vd-periode a:focus-visible{outline:2px solid var(--tb-action);outline-offset:-2px;}

/* ---- raster ------------------------------------------------------------------ */
.tb-vd-raster{
  max-width:var(--tb-container);margin:28px auto 0;padding:0 24px;box-sizing:border-box;
  display:grid;gap:24px;align-items:start;grid-template-columns:minmax(0,1fr);
}
.tb-vd-raster.heeft-rail{grid-template-columns:240px minmax(0,1fr);}
.tb-vd-hoofd{min-width:0;}
.tb-vd{display:grid;gap:20px;min-width:0;}

/* ---- kaarten ------------------------------------------------------------------ */
.tb-vd-kaart{
  background:var(--tb-surface);border-radius:var(--tb-r-card);box-shadow:var(--tb-lift);
  padding:26px 30px;box-sizing:border-box;min-width:0;
}
/* De twee kaartlabels van het bord: in kapitalen, maar 13 px en op contrast (§5.4 gaat
   over de kleine grijze tegelkoppen, die er niet meer zijn). */
.tb-vd-label{margin:0 0 6px;font:700 13px/1.3 var(--tb-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tb-warn-ink);}
.tb-vd-kaart h2:not(.tb-vd-label){margin:0;font:700 19px/1.3 var(--tb-sans);color:var(--tb-ink);}
.tb-vd-klein{display:block;margin-top:3px;font:400 14px/1.45 var(--tb-sans);color:var(--tb-muted);}

.tb-vd-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tb-h-ctrl);padding:0 22px;border:0;border-radius:var(--tb-r-ctrl);
  font:700 16px/1 var(--tb-sans);text-decoration:none;cursor:pointer;box-sizing:border-box;
}
.tb-vd-knop--vol{background:var(--tb-action);color:#FFF;}
.tb-vd-knop--vol:hover{background:var(--tb-action-hover);color:#FFF;}
.tb-vd-knop--vol[disabled]{opacity:.6;cursor:wait;}
.tb-vd-knop--zacht{background:var(--tb-surface);color:var(--tb-ink);box-shadow:inset 0 0 0 1px var(--tb-border);}
.tb-vd-knop--zacht:hover{box-shadow:inset 0 0 0 1px var(--tb-border-strong);color:var(--tb-ink);}
.tb-vd-knop:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}

/* ---- geld + uitbetaling -------------------------------------------------------- */
.tb-vd-boven{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch;}
.tb-vd-geld{box-shadow:var(--tb-lift),inset 0 0 0 1px var(--tb-accent-line);}
.tb-vd-geld-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.tb-vd-geld-tekst{min-width:0;flex:1 1 280px;}
.tb-vd-groot{margin:0;font:600 clamp(40px,4.6vw,60px)/1 var(--tb-serif);letter-spacing:-.02em;color:var(--tb-ink);font-variant-numeric:tabular-nums;}
.tb-vd-uitleg{margin:12px 0 0;font:400 16px/1.5 var(--tb-sans);color:var(--tb-body);max-width:52ch;}

.tb-vd-aanvraag{display:grid;gap:8px;justify-items:end;flex:0 1 280px;min-width:0;}
.tb-vd-aanvraag label{justify-self:stretch;font:500 14px/1.3 var(--tb-sans);color:var(--tb-body);}
.tb-vd-aanvraag input{
  width:100%;height:var(--tb-h-ctrl);padding:0 14px;box-sizing:border-box;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);background:var(--tb-surface);
  font:400 15px/1 var(--tb-sans);color:var(--tb-ink);
}
.tb-vd-aanvraag input:focus{outline:2px solid var(--tb-action);outline-offset:1px;border-color:var(--tb-action);}
.tb-vd-rekening{margin:0;font:400 14px/1.4 var(--tb-sans);color:var(--tb-muted);}
.tb-vd-melding{margin:0;font:500 14px/1.4 var(--tb-sans);color:var(--tb-body);}
.tb-vd-melding:empty{display:none;}

.tb-vd-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--tb-line);}
.tb-vd-drie > div{padding:0 18px;border-left:1px solid var(--tb-line);min-width:0;}
.tb-vd-drie > div:first-child{padding-left:0;border-left:0;}
.tb-vd-drie p{margin:0;}
.tb-vd-drie-kop{font:400 15px/1.3 var(--tb-sans);color:var(--tb-muted);}
.tb-vd-drie-getal{margin-top:6px !important;font:600 24px/1.1 var(--tb-sans);color:var(--tb-ink);font-variant-numeric:tabular-nums;}  /* wint van `.tb-vd-drie p{margin:0}` hierboven */

/* Het doel van "Uitbetaling" in het menu: niet onder de plakkende kop verdwijnen, en even
   laten zien waar je bent geland. */
#uitbetaling{scroll-margin-top:96px;}
#uitbetaling:target .tb-vd-kaart,.tb-vd-leegstaat:target{animation:tb-vd-geland 1.6s ease-out 1;}
@keyframes tb-vd-geland{0%{box-shadow:var(--tb-lift),0 0 0 3px var(--tb-accent-line);}100%{box-shadow:var(--tb-lift);}}
@media (prefers-reduced-motion:reduce){#uitbetaling:target .tb-vd-kaart,.tb-vd-leegstaat:target{animation:none;}}

.tb-vd-zij{display:flex;flex-direction:column;gap:8px;min-width:0;}
.tb-vd-beheer{margin:0;font:600 13px/1.3 var(--tb-sans);color:var(--tb-warn-ink);}
.tb-vd-regelen{flex:1 1 auto;}
.tb-vd-regelen .tb-vd-label{color:var(--tb-muted);}
.tb-vd-stappen{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;}
.tb-vd-stappen li{display:flex;gap:12px;align-items:flex-start;}
.tb-vd-stip{flex:0 0 22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--tb-muted);}
.tb-vd-stappen .is-klaar .tb-vd-stip{color:var(--tb-ok-ink);}
.tb-vd-stappen .is-loopt .tb-vd-stip{color:var(--tb-warn-ink);}
.tb-vd-stap{display:block;font:600 16px/1.35 var(--tb-sans);color:var(--tb-ink);}
.tb-vd-stappen .is-open .tb-vd-stap,.tb-vd-stappen .is-info .tb-vd-stap{font-weight:500;color:var(--tb-body);}
.tb-vd-voet{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--tb-line);font:400 14px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-vd-regelen form{margin:14px 0 0;}

/* ---- tabel ---------------------------------------------------------------------- */
.tb-vd-sectiekop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 16px;}
.tb-vd-meta{margin:0;font:400 15px/1.4 var(--tb-sans);color:var(--tb-muted);}
.tb-vd-meta a{color:var(--tb-action);text-decoration:underline;text-underline-offset:3px;}
.tb-vd-verkopen{padding:22px 0 0;overflow:hidden;}
.tb-vd-verkopen .tb-vd-sectiekop{padding:0 30px;}
.tb-vd-scroll{overflow-x:auto;}
.tb-vd-tabel{width:100%;min-width:680px;border-collapse:collapse;font:400 15px/1.4 var(--tb-sans);color:var(--tb-body);}
.tb-vd-tabel th{
  padding:12px 14px;text-align:left;white-space:nowrap;
  background:var(--tb-ground-alt);border-top:1px solid var(--tb-line);border-bottom:1px solid var(--tb-line);
  font:700 13px/1.2 var(--tb-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--tb-muted);
}
.tb-vd-tabel td{padding:12px 14px;border-bottom:1px solid var(--tb-line);white-space:nowrap;}
.tb-vd-tabel tr > :first-child{padding-left:30px;}
.tb-vd-tabel tr > :last-child{padding-right:30px;}
.tb-vd-tabel .is-getal{text-align:right;font-variant-numeric:tabular-nums;}
.tb-vd-datum{color:var(--tb-muted);}
.tb-vd-tijd{display:block;margin-top:2px;font-size:13px;color:var(--tb-muted);}   /* onder de datum: scheelt een kolombreedte */
.tb-vd-wat{white-space:normal !important;min-width:170px;font-weight:700;color:var(--tb-ink);}  /* wint van `.tb-vd-tabel td{white-space:nowrap}` */
.tb-vd-wat svg{flex:0 0 auto;margin-right:8px;vertical-align:-4px;}
.tb-vd-tabel .is-netto{font-weight:700;color:var(--tb-ink);}
/* De terugboeking herkenbaar aan kleur, pictogram en bijschrift (§1). */
.tb-vd-tabel tr.is-terug td{background:var(--tb-ground-alt);color:var(--tb-muted);}
.tb-vd-tabel tr.is-terug .tb-vd-wat{font-weight:400;color:var(--tb-muted);}
.tb-vd-tabel tr.is-terug .is-netto{color:var(--tb-body);}
.tb-vd-afwijkend{margin-left:6px;font-size:13px;color:var(--tb-warn-ink);}
.tb-vd-tabel tfoot th,.tb-vd-tabel tfoot td{
  padding-top:16px;padding-bottom:16px;border-top:2px solid var(--tb-line);border-bottom:0;background:none;
  font:700 16px/1.3 var(--tb-sans);letter-spacing:0;text-transform:none;color:var(--tb-ink);
}
.tb-vd-voetnoot{margin:0;padding:12px 30px 18px;font:400 14px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-vd-leeg{margin:0;padding:0 30px 24px;font:400 15px/1.5 var(--tb-sans);color:var(--tb-muted);}

/* ---- bereik ---------------------------------------------------------------------- */
.tb-vd-cijfers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.tb-vd-cijfers li{padding:0 22px;border-left:1px solid var(--tb-line);min-width:0;}
.tb-vd-cijfers li:first-child{padding-left:0;border-left:0;}
.tb-vd-getal{display:block;font:600 34px/1.1 var(--tb-serif);color:var(--tb-ink);font-variant-numeric:tabular-nums;}
.tb-vd-cijfer-wat{display:block;margin-top:6px;font:500 15px/1.35 var(--tb-sans);color:var(--tb-body);}

/* ---- btw ---------------------------------------------------------------------------- */
.tb-vd-btw{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;padding:20px 30px;}
.tb-vd-btw > svg{flex:0 0 auto;color:var(--tb-muted);}
.tb-vd-btw-tekst{flex:1 1 320px;min-width:0;}
.tb-vd-btw-tekst p{margin:0;font:400 16px/1.5 var(--tb-sans);color:var(--tb-body);}
.tb-vd-btw-tekst p + p{margin-top:2px;font-size:14px;color:var(--tb-muted);}
.tb-vd-btw-tekst strong{color:var(--tb-ink);}
.tb-vd-btw-tekst a{color:var(--tb-action);text-decoration:underline;text-underline-offset:3px;}
.tb-vd-btw-wijzig{flex:0 0 auto;}
.tb-vd-btw-wijzig > summary{list-style:none;}
.tb-vd-btw-wijzig > summary::-webkit-details-marker{display:none;}
.tb-vd-btw-wijzig[open]{flex:1 1 100%;}
.tb-vd-btw form{display:grid;gap:10px;max-width:440px;margin-top:16px;}
.tb-vd-btw label{font:500 14px/1.3 var(--tb-sans);color:var(--tb-body);}
.tb-vd-btw select,.tb-vd-btw input{
  width:100%;height:var(--tb-h-ctrl);padding:0 14px;box-sizing:border-box;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);background:var(--tb-surface);
  font:400 15px/1 var(--tb-sans);color:var(--tb-ink);
}
.tb-vd-btw form .tb-vd-knop{justify-self:start;}

/* ---- lege staat ------------------------------------------------------------------------ */
.tb-vd-leegstaat{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:center;padding:40px 48px;}
.tb-vd-leegstaat .tb-vd-leeg-tekst h2{margin:0 0 10px;font:600 32px/1.2 var(--tb-serif);letter-spacing:-.01em;color:var(--tb-ink);}
.tb-vd-leeg-tekst p{margin:0;font:400 17px/1.6 var(--tb-sans);color:var(--tb-body);max-width:52ch;}
.tb-vd-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.tb-vd-knoppen form{margin:0;}
.tb-vd-voorbeeld{background:var(--tb-ground-alt);border-radius:var(--tb-r-card);padding:22px 24px;}
.tb-vd-voorbeeld .tb-vd-label{color:var(--tb-muted);}
.tb-vd-voorbeeld dl{margin:12px 0 0;display:grid;gap:8px;}
.tb-vd-voorbeeld dl > div{display:flex;justify-content:space-between;gap:16px;font:400 15px/1.4 var(--tb-sans);}
.tb-vd-voorbeeld dt{color:var(--tb-muted);}
.tb-vd-voorbeeld dd{margin:0;color:var(--tb-body);font-variant-numeric:tabular-nums;}
.tb-vd-voorbeeld dl > .is-totaal{margin-top:6px;padding-top:12px;border-top:1px solid var(--tb-line);}
.tb-vd-voorbeeld .is-totaal dt,.tb-vd-voorbeeld .is-totaal dd{font-weight:700;color:var(--tb-ink);}

/* ---- smal ---------------------------------------------------------------------------------- */
@media (max-width:1099px){
  .tb-vd-boven{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:899px){
  .tb-vd-raster.heeft-rail{grid-template-columns:minmax(0,1fr);}
  .tb-vd-raster{padding:0 20px;margin-top:20px;}
  .tb-vd-band-in{padding:18px 20px 22px;}
  .tb-verdiensten .tb-vd-kop h1{font-size:32px;}
  .tb-vd-periode{width:100%;box-sizing:border-box;}
  .tb-vd-periode a{flex:1 1 0;justify-content:center;padding:0 8px;}
  .tb-vd-kaart{padding:22px 20px;}
  .tb-vd-verkopen{padding:20px 0 0;}
  .tb-vd-verkopen .tb-vd-sectiekop{padding:0 20px;}
  .tb-vd-tabel tr > :first-child{padding-left:20px;}
  .tb-vd-tabel tr > :last-child{padding-right:20px;}
  .tb-vd-voetnoot,.tb-vd-leeg{padding-left:20px;padding-right:20px;}
  .tb-vd-aanvraag{flex:1 1 100%;justify-items:stretch;}
  .tb-vd-drie{grid-template-columns:minmax(0,1fr);gap:16px;}
  .tb-vd-drie > div{padding:0;border-left:0;}
  .tb-vd-cijfers{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0;}
  .tb-vd-cijfers li:nth-child(odd){padding-left:0;border-left:0;}
  .tb-vd-btw{padding:20px;}
  .tb-vd-leegstaat{grid-template-columns:minmax(0,1fr);padding:28px 22px;gap:24px;}
  .tb-vd-leegstaat .tb-vd-leeg-tekst h2{font-size:26px;}
}

/* ---- telefoon: elke regel een kaartje --------------------------------------------------
   Op 390 px scrolde de tabel zijwaarts binnen de kaart (gemeten 2026-09-11). Onder 640 px
   wordt elke regel een blok: datum en wat bovenaan, de bedragen als "label … bedrag"
   eronder, "Jij ontvangt" vet onderaan. De kolomkoppen blijven er voor schermlezers. */
@media (max-width:640px){
  .tb-vd-tabel{min-width:0;}
  .tb-vd-tabel thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .tb-vd-tabel,.tb-vd-tabel tbody,.tb-vd-tabel tfoot{display:block;}
  .tb-vd-tabel tr{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 20px;border-bottom:1px solid var(--tb-line);}
  .tb-vd-tabel tr > :first-child,.tb-vd-tabel tr > :last-child,.tb-vd-tabel tr > td,.tb-vd-tabel tr > th{padding:0;border:0;background:none;white-space:normal;}
  .tb-vd-tabel tr.is-terug{background:var(--tb-ground-alt);}
  .tb-vd-tabel tr.is-terug td{background:none;}
  .tb-vd-datum{display:flex;gap:8px;align-items:baseline;font-size:14px;}
  .tb-vd-tijd{display:inline;margin:0;}
  .tb-vd-wat{min-width:0;margin-bottom:4px;}
  .tb-vd-tabel td.is-getal{display:flex;justify-content:space-between;gap:16px;}
  .tb-vd-tabel td.is-getal::before{content:attr(data-label);font-weight:400;color:var(--tb-muted);text-align:left;}
  .tb-vd-tabel td.is-netto{margin-top:4px;padding-top:8px;border-top:1px solid var(--tb-line);}
  .tb-vd-tabel tfoot tr{border-top:2px solid var(--tb-line);border-bottom:0;}
  .tb-vd-tabel tfoot th,.tb-vd-tabel tfoot td{padding-top:0;padding-bottom:0;border-top:0;font-size:15px;}
  .tb-vd-tabel tfoot td.is-netto{padding-top:8px;border-top:1px solid var(--tb-line);font-size:16px;}
}

/* Via OPP betaald (tb-marketplace/opp-afrekenen.php): staat apart, want OPP maakt het zelf over. */
.tb-vd-opp{margin:18px 0 0;padding:12px 14px;border-radius:var(--tb-r-img);background:var(--tb-tint);font:400 14px/1.5 var(--tb-sans);color:var(--tb-body);}
.tb-vd-opp b{margin-right:6px;color:var(--tb-ink);font-weight:700;}