/* ==========================================================================
   HelloPoen — stijl
   Neutraal zink-grijs, Nunito, dunne randen, subtiele schaduwen.
   ========================================================================== */
:root {
  --bg: #f4f8f6;             /* heel licht mintgrijs */
  --paneel: #ffffff;
  --tekst: #0b1712;
  --tekst-2: #34423b;
  --zacht: #66756d;
  --vaag: #9aa8a0;
  --lijn: #dfe8e3;
  --lijn-zacht: #edf3f0;
  --vlak: #eef5f1;
  --donker: #0a5c3f;
  --merk: #0f8a5f;          /* HelloPoen-groen */
  --merk-licht: #19a371;
  --merk-donker: #0b6f4c;
  --merk-zacht: #e3f5ec;     /* lichte groene achtergrond */
  --zijbalk: #0c3b2c;        /* diep bosgroen */
  --wit: #fff;

  --ok: #15803d; --ok-bg: #f0fdf4; --ok-rand: #bbf7d0;
  --fout: #dc2626; --fout-bg: #fef2f2; --fout-rand: #fecaca;
  --waarsch: #b45309; --waarsch-bg: #fffbeb; --waarsch-rand: #fde68a;

  /* vaste kleur per luik (kalender, grafieken, legende) */
  --luik-video: #2a78d6; --luik-online: #eb6834; --luik-overig: #1baf7a;

  --h: 36px;                 /* één hoogte voor alle velden, knoppen en keuzebalken */
  --radius: 12px;
  --radius-s: 8px;
  --schaduw-xs: 0 1px 2px rgba(9, 9, 11, .05);
  --schaduw: 0 1px 2px rgba(9, 9, 11, .04), 0 1px 3px rgba(9, 9, 11, .06);
  --schaduw-l: 0 24px 48px -12px rgba(9, 9, 11, .25);
  --focus: 0 0 0 3px rgba(15, 138, 95, .22);
  --zij: 248px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--tekst);
  font: 14px/1.5 "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;   /* Nunito iets voller dan normaal */
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: #e4e4e7; }

/* ---------- zijbalk (grijs van het logo) ---------- */
.zijbalk {
  position: fixed; inset: 0 auto 0 0; width: var(--zij); z-index: 30;
  display: flex; flex-direction: column; padding: 20px 14px;
  background: var(--merk);
  color: #fff; border-right: 1px solid rgba(0,0,0,.18);
}
.merk { display: block; padding: 4px 10px 22px; }
.merk img { height: 30px; display: block; filter: brightness(0) invert(1); }
.zijbalk nav { display: flex; flex-direction: column; gap: 2px; }
.navkop { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); padding: 14px 10px 6px; }
.zijbalk nav a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-s);
  color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; transition: background .12s, color .12s;
}
.zijbalk nav a svg { color: rgba(255,255,255,.6); transition: color .12s; }
.zijbalk nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.zijbalk nav a.actief { background: #fff; color: var(--tekst); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.zijbalk nav a.actief svg { color: var(--merk); }
.zijbalk nav a:hover svg { color: #fff; }
.zijvoet { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.zijvoet .knop { background: #fff; color: var(--tekst); border-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.zijvoet .knop:hover { background: #f1f1f1; }
.profiel { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid rgba(255,255,255,.14); }
.profiel b { display: block; font-size: 13px; font-weight: 700; }
.profiel small { display: block; font-size: 12px; color: rgba(255,255,255,.6); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
          background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* ---------- inhoud ---------- */
main { margin-left: var(--zij); padding: 32px 40px 72px; max-width: calc(1280px + var(--zij)); }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: var(--h); }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
code { font: 12px ui-monospace, "SF Mono", Menlo, monospace; background: var(--vlak); padding: 2px 6px; border-radius: 5px; }

.werkbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.werkbalk h1 { margin-right: auto; }
.filters { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filters select { width: auto; }

/* ---------- kaarten ---------- */
.paneel {
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw); padding: 22px; margin-bottom: 20px;
}
.paneel.vlak { padding: 0; overflow-x: auto; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.twee > .paneel { margin-bottom: 0; }

/* ---------- formulieren ---------- */
.rij { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rij + .rij, .hint + .rij, .hint + .acties { margin-top: 16px; }
.rij > label, .rij > .veld { flex: 1 1 160px; min-width: 0; }
label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--tekst-2); white-space: nowrap;
  overflow: hidden; padding: 0 3px 3px; margin: 0 -3px -3px;   /* lange labels afknippen, focusrand blijft zichtbaar */
}
.veldlabel { display: block; font-size: 13px; font-weight: 600; color: var(--tekst-2); white-space: nowrap; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; height: var(--h); padding: 0 11px; font: inherit; color: var(--tekst);
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-s);
  box-shadow: var(--schaduw-xs); transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--vaag); }
textarea { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; }
select { appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center; }
input:hover, select:hover, textarea:hover { border-color: #d4d4d8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #a1a1aa; box-shadow: var(--focus); }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--donker); box-shadow: none; cursor: pointer; }
input[type=date] { padding-right: 8px; }
.vink { flex-direction: row; align-items: center; gap: 10px; height: var(--h); font-size: 14px; font-weight: 500; color: var(--tekst); }
.smal { flex: 0 0 110px !important; }
.middel { flex: 0 0 160px !important; }

/* ---------- knoppen ---------- */
.knop, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h); padding: 0 14px;
  font: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--wit); border: 1px solid var(--merk-donker); border-radius: var(--radius-s);
  background: var(--merk);
  box-shadow: var(--schaduw-xs);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.knop:hover, button:hover { background: var(--merk-donker); border-color: var(--merk-donker); }
.knop:active, button:active { transform: translateY(.5px); }
.knop:focus-visible, button:focus-visible, .zijbalk a:focus-visible { outline: none; box-shadow: var(--focus); }
.knop.licht, button.licht { color: var(--tekst); background: var(--wit); border-color: var(--lijn); box-shadow: var(--schaduw-xs); }
.knop.licht:hover, button.licht:hover { background: var(--vlak); border-color: #d4d4d8; }
.knop.klein, button.klein { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.knop.icoon, button.icoon { width: var(--h); padding: 0; }
.knop.klein.icoon, button.klein.icoon { width: 28px; }
.knop.volledig { width: 100%; }
button.gevaar { color: var(--fout); background: var(--wit); border-color: var(--lijn); box-shadow: var(--schaduw-xs); }
button.gevaar:hover { background: var(--fout-bg); border-color: var(--fout-rand); }

/* ---------- keuzebalk (duur, lijst/kalender) ---------- */
.segment { display: inline-flex; height: var(--h); padding: 3px; gap: 2px; background: var(--vlak); border-radius: var(--radius-s); }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment label, .segment a {
  display: flex; flex-direction: row; align-items: center; margin: 0; padding: 0 12px; overflow: visible;
  font-size: 13px; font-weight: 600; color: var(--zacht); border-radius: 6px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, color .12s;
}
.segment label:hover, .segment a:hover { color: var(--tekst); }
.segment input:checked + label, .segment a.actief { color: var(--tekst); background: var(--wit); box-shadow: var(--schaduw); }
.segment input:focus-visible + label { box-shadow: var(--focus); }

/* ---------- tabellen ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--zacht); white-space: nowrap;
  padding: 10px 12px; border-bottom: 1px solid var(--lijn); background: #fcfcfd;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: middle; }
.paneel:not(.vlak) th { background: none; }
.paneel.vlak th:first-child, .paneel.vlak td:first-child { padding-left: 20px; }
.paneel.vlak th:last-child, .paneel.vlak td:last-child { padding-right: 20px; }
tr:last-child td { border-bottom: none; }
tbody tr, table.hover tr { transition: background .1s; }
tbody tr:hover td, table.hover tr:hover td { background: #fafafa; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acties { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.acties form { margin: 0; display: flex; }
.paneel > .acties, form > .acties, .paneel > form > .acties { margin-top: 20px; }
tr.gefactureerd td { color: var(--vaag); }
tr.totaalrij td { font-weight: 700; border-top: 1px solid var(--lijn); background: #fcfcfd; }

/* ---------- labels ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid var(--lijn); background: var(--wit); color: var(--tekst-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vaag); }
.badge.open, .badge.te-factureren { color: var(--waarsch); background: var(--waarsch-bg); border-color: var(--waarsch-rand); }
.badge.open::before, .badge.te-factureren::before { background: #f59e0b; }
.badge.betaald { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-rand); }
.badge.betaald::before { background: #22c55e; }
.badge.vervallen { color: var(--fout); background: var(--fout-bg); border-color: var(--fout-rand); }
.badge.vervallen::before { background: #ef4444; }

/* ---------- meldingen ---------- */
.melding {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px;
  font-weight: 600; background: var(--wit); border: 1px solid var(--lijn); box-shadow: var(--schaduw);
}
.melding.ok { border-left: 3px solid #22c55e; }
.melding.fout { border-left: 3px solid #ef4444; color: var(--fout); }
.meldingen { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: min(440px, calc(100vw - 48px)); }
.meldingen .melding { margin: 0; box-shadow: var(--schaduw-l); animation: in .25s ease-out; transition: opacity .3s, transform .3s; }
.meldingen .melding.weg { opacity: 0; transform: translateY(8px); }
.melding .sluit { margin-left: auto; height: 24px; width: 24px; padding: 0; font-size: 11px; color: var(--zacht); background: none; border: none; box-shadow: none; }
.melding .sluit:hover { background: var(--vlak); color: var(--tekst); }
@keyframes in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- kerncijfers ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw); }
.kpi span { display: block; font-size: 13px; color: var(--zacht); font-weight: 600; }
.kpi strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.kpi small { display: block; font-size: 12.5px; color: var(--zacht); margin-top: 2px; }
.kpi.hoofd { background: var(--merk); border-color: var(--merk-donker); color: var(--wit); }
.kpi.hoofd span, .kpi.hoofd small { color: rgba(255,255,255,.68); }

.zacht { color: var(--zacht); }
.hint { font-size: 12.5px; color: var(--zacht); margin: 10px 0 0; line-height: 1.55; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--zacht); }
.legende span { display: inline-flex; align-items: center; }

/* factuurformulier */
.lijnen th { background: none; padding: 8px 4px; }
.lijnen td { padding: 4px; border-bottom: none; }
.lijnen input, .lijnen select { height: 34px; }
.lijnen tr:hover td, .totalen tr:hover td { background: none; }
.totalen { max-width: 440px; margin-left: auto; }
.totalen td { padding: 6px 8px; border: none; }
.totalen tr.groot td { font-weight: 800; font-size: 17px; border-top: 1px solid var(--lijn); padding-top: 12px; }

.maandnav { display: flex; align-items: center; gap: 6px; }
.maandnav strong { font-size: 15px; font-weight: 700; min-width: 150px; text-align: center; text-transform: capitalize; }

/* ---------- maandregister: lijst ---------- */
.register td { white-space: nowrap; height: 46px; padding-top: 8px; padding-bottom: 8px; }
.register td.opm { white-space: normal; min-width: 150px; color: var(--tekst-2); }
.register td.klant { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.register td.dag { width: 84px; vertical-align: top; padding-top: 13px; }
.register td.dag b { display: inline-block; min-width: 24px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.register td.dag span { color: var(--vaag); font-size: 12.5px; margin-left: 4px; }
.register tr.weekend td { background: #fbfbfc; }
.register tr.vandaag td.dag b { color: var(--wit); background: var(--donker); border-radius: 6px; padding: 1px 6px; text-align: center; }
.register tr.nieuwe-dag td { border-top: 1px solid var(--lijn); }
.register tr.leeg td { color: var(--vaag); }
.register td.plus { width: 52px; vertical-align: top; padding-top: 9px; }
.register tr.leeg td.plus button { opacity: 0; transition: opacity .12s; }
.register tr:hover td.plus button, .register td.plus button:focus-visible { opacity: 1; }
.luikbolletje { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; flex: none; }
.g-videoredactie { background: var(--luik-video); }
.g-online-redactie { background: var(--luik-online); }
.g-overig { background: var(--luik-overig); }

/* ---------- maandregister: kalender ---------- */
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender .kop { padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--zacht); border-bottom: 1px solid var(--lijn); background: #fcfcfd; text-transform: capitalize; }
.kalender .cel { min-height: 124px; padding: 8px; border-right: 1px solid var(--lijn-zacht); border-bottom: 1px solid var(--lijn-zacht);
                 cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: background .1s; }
.kalender .cel:nth-child(7n) { border-right: none; }
.kalender .cel:hover { background: #fafafa; }
.kalender .cel.weekend { background: #fbfbfc; }
.kalender .cel.buiten { background: #f7f7f8; cursor: default; }
.kalender .nr { font-size: 12.5px; font-weight: 700; color: var(--tekst-2); font-variant-numeric: tabular-nums; align-self: flex-start; padding: 0 5px; line-height: 22px; border-radius: 6px; }
.kalender .vandaag .nr { color: var(--wit); background: var(--donker); }
.chip { --kleur: #a1a1aa; display: block; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 5px 8px; border-radius: 6px;
        color: var(--tekst); border-left: 3px solid var(--kleur); background: color-mix(in srgb, var(--kleur) 14%, #fff);
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip:hover { background: color-mix(in srgb, var(--kleur) 22%, #fff); }
.chip.dicht { opacity: .55; }

/* ---------- dialoog ---------- */
dialog { border: 1px solid var(--lijn); border-radius: 16px; padding: 0; width: min(860px, calc(100vw - 32px)); box-shadow: var(--schaduw-l); color: var(--tekst); }
dialog[open] { animation: dialoog .18s ease-out; }
@keyframes dialoog { from { opacity: 0; transform: translateY(6px) scale(.99); } }
dialog::backdrop { background: rgba(9, 9, 11, .4); backdrop-filter: blur(2px); }
dialog .dkop { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--lijn); }
dialog .dkop h2 { margin: 0; font-size: 16px; }
dialog .dinhoud { padding: 22px; }
dialog .dvoet { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--lijn); background: #fcfcfd; border-radius: 0 0 16px 16px; }
dialog .dvoet .links { margin-right: auto; }

/* ---------- klantblok ---------- */
.klantkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
            margin: -22px -22px 18px; padding: 14px 22px; border-bottom: 1px solid var(--lijn); background: #fcfcfd;
            border-radius: var(--radius) var(--radius) 0 0; }
.klantkop h2 { margin: 0; }
.inline { display: flex; align-items: center; gap: 10px; margin: 0; }
.inline label { flex-direction: row; align-items: center; gap: 8px; }
.inline label input { width: 92px; }

/* ---------- inkomsten ---------- */
.grafiek { position: relative; height: 270px; margin: 12px 0 0 56px; }
.grafiek .rooster { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--lijn); }
.grafiek .rooster span { position: absolute; left: -56px; top: -9px; width: 46px; text-align: right; font-size: 11.5px; color: var(--vaag); font-variant-numeric: tabular-nums; }
.grafiek .rooster.nul { border-top: 1px solid #d4d4d8; }
.grafiek .kolommen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 10px; }
.grafiek .kolom { position: relative; }
.grafiek .kolom .seg { position: absolute; left: 20%; right: 20%; border-bottom: 2px solid var(--wit); }
.grafiek .kolom .seg.boven { border-radius: 4px 4px 0 0; }
.grafiek .kolom .raak { position: absolute; inset: 0; border-radius: 6px; }
.grafiek .kolom .raak:hover { background: rgba(9, 9, 11, .03); }
.maandlabels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 10px; margin-left: 56px; font-size: 12px; color: var(--zacht); text-align: center; padding-top: 8px; }
.tip { position: fixed; pointer-events: none; z-index: 70; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px;
       padding: 10px 12px; font-size: 12.5px; box-shadow: var(--schaduw-l); display: none; min-width: 190px; }
.tip b { display: block; margin-bottom: 6px; text-transform: capitalize; }
.tip div { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; line-height: 1.7; }
.balkje { height: 6px; border-radius: 999px; background: var(--vlak); overflow: hidden; min-width: 80px; }
.balkje i { display: block; height: 100%; border-radius: 999px; background: var(--donker); }

details.paneel summary { list-style: none; display: flex; align-items: center; gap: 8px; }
details.paneel summary::before { content: "›"; font-size: 18px; line-height: 1; color: var(--zacht); transition: transform .15s; }
details.paneel[open] summary::before { transform: rotate(90deg); }

/* ---------- smalle schermen ---------- */
@media (max-width: 1100px) {
  .twee { grid-template-columns: 1fr; }
  main { padding: 28px 24px 64px; }
}
@media (max-width: 860px) {
  .zijbalk { position: sticky; top: 0; inset: auto; width: auto; height: auto; flex-direction: row; align-items: center; gap: 12px;
             padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--lijn); overflow-x: auto; }
  .merk { padding: 0; } .merk img { height: 22px; }
  .zijbalk nav { flex-direction: row; }
  .navkop, .profiel { display: none; }
  .zijvoet { margin: 0 0 0 auto; }
  .zijbalk nav a { white-space: nowrap; }
  main { margin-left: 0; padding: 20px 16px 48px; }
  .kalender .cel { min-height: 86px; }
  .chip { font-size: 11px; padding: 3px 5px; }
  .grafiek, .maandlabels { margin-left: 44px; }
}
.register td { padding-left: 10px; padding-right: 10px; }
.register td.opm { min-width: 120px; }
.register td.acties-cel { width: 44px; }
.paneel.vlak .register td:last-child { padding-right: 10px; }
.paneel.vlak .register td.plus, .paneel.vlak .register th:last-child { padding-right: 20px; }

/* ---------- lijsten (facturen) ---------- */
.lijst td { white-space: nowrap; height: 52px; }
td.afkap { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
a.nummer { font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
a.nummer:hover { text-decoration: underline; text-underline-offset: 3px; }
.rood { color: var(--fout) !important; }
.paneelkop { padding: 18px 20px 4px; }
.paneelkop h2 { margin: 0 0 10px; }
.leegstaat { padding: 48px 20px; text-align: center; }
.leegstaat p { margin: 6px 0 0; }
.kpi strong { white-space: nowrap; font-size: clamp(18px, 1.55vw, 24px); }

/* ---------- uitklapmenu ---------- */
details.menu { position: relative; }
details.menu summary { list-style: none; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu[open] summary { background: var(--vlak); }
.menu-lijst {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px; padding: 5px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; box-shadow: var(--schaduw-l);
  display: flex; flex-direction: column; animation: in .12s ease-out;
}
.menu-lijst form { display: block; margin: 0; }
.menu-lijst a, .menu-lijst button {
  display: flex; align-items: center; width: 100%; height: 32px; padding: 0 10px; border-radius: 6px;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--tekst); background: none; border: none; box-shadow: none;
  text-decoration: none; justify-content: flex-start; cursor: pointer;
}
.menu-lijst a:hover, .menu-lijst button:hover { background: var(--vlak); }
.menu-lijst hr { border: none; border-top: 1px solid var(--lijn); margin: 4px 0; }
.paneel.vlak.met-menu { overflow: visible; }
.paneel.vlak.met-menu thead th:first-child { border-top-left-radius: var(--radius); }
.paneel.vlak.met-menu thead th:last-child { border-top-right-radius: var(--radius); }
td.afkap { max-width: 170px; }
table.import td { white-space: nowrap; }
table.import input, table.import select { height: 32px; }
table.import td:nth-child(4) input { min-width: 140px; }
table.import td:nth-child(5) select { min-width: 150px; }
table.import td:nth-child(6) select { min-width: 140px; }
table.import td:nth-child(7) select { min-width: 170px; }
.bulkbalk { display: none; align-items: center; gap: 14px; padding: 10px 20px; background: var(--merk); color: var(--wit);
            border-radius: var(--radius) var(--radius) 0 0; font-size: 13.5px; }
.bulkbalk.zichtbaar { display: flex; }
.bulkbalk button { background: var(--wit); color: var(--tekst); border-color: var(--wit); }
.bulkbalk button:hover { background: var(--vlak); }


/* ---------- register: selecteren en direct invullen ---------- */
.vinkcel { width: 40px; }
.register td.vinkcel { vertical-align: top; padding-top: 15px; }
.linkknop { all: unset; cursor: pointer; font-weight: 600; }
.linkknop:hover { text-decoration: underline; text-underline-offset: 3px; }
.register td.opdracht { white-space: nowrap; }
input.cel { height: 30px; width: 72px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums;
            background: transparent; border-color: transparent; box-shadow: none; }
input.cel.breed { width: 100%; min-width: 130px; text-align: left; }
tr:hover input.cel, input.cel:focus { background: var(--wit); border-color: var(--lijn); }
input.cel:focus { border-color: #a1a1aa; box-shadow: var(--focus); }
input.cel.ok { border-color: #22c55e !important; background: var(--ok-bg) !important; transition: none; }
input.cel.fout { border-color: #ef4444 !important; background: var(--fout-bg) !important; }
.register td.getal:has(input.cel) { padding-top: 4px; padding-bottom: 4px; }
.bulkbalk .gevaar { background: #fff; }

/* ---------- offertes ---------- */
.badge.of-concept { color: var(--tekst-2); }
.badge.of-verstuurd { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.badge.of-verstuurd::before { background: #3b82f6; }
.badge.of-aanvaard, .badge.of-gefactureerd { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-rand); }
.badge.of-aanvaard::before, .badge.of-gefactureerd::before { background: #22c55e; }
.badge.of-geweigerd { color: var(--fout); background: var(--fout-bg); border-color: var(--fout-rand); }
.badge.of-geweigerd::before { background: #ef4444; }
a.badge { text-decoration: none; font-variant-numeric: tabular-nums; }
a.badge:hover { filter: brightness(.97); }
.register td.opm.vast { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register td.klant { max-width: 140px; }

/* kleuren per functie (instellingen) */
.kleurrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
.kleurrij label { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--tekst); }
.kleurrij input[type=color] { width: 36px; height: 28px; padding: 2px; border-radius: 6px; cursor: pointer; flex: none; }

/* details van een opdracht */
dl.details { margin: 0; display: grid; gap: 0; }
dl.details > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn-zacht); }
dl.details > div:last-child { border-bottom: none; }
dl.details dt { color: var(--zacht); font-size: 13px; }
dl.details dd { margin: 0; font-weight: 600; }
.dvoet .links { align-self: center; }

/* kalender: andere klanten effen zwart met witte tekst, lange dagen (anderhalve dag) in een donkere tint */
.chip.klantchip { background: #18181b; color: #fff; border-left-color: #18181b; }
.chip.klantchip:hover { background: #3f3f46; }
.chip.lang { background: color-mix(in srgb, var(--kleur) 30%, #fff); }
.chip.lang:hover { background: color-mix(in srgb, var(--kleur) 38%, #fff); }

/* ---------- instellingen: tabbladen ---------- */
.instellingen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.tabs { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.tabknop { justify-content: flex-start; width: 100%; gap: 10px; color: var(--tekst-2); background: none; border-color: transparent; box-shadow: none; font-weight: 600; }
.tabknop svg { color: var(--zacht); }
.tabknop:hover { background: var(--vlak); border-color: transparent; color: var(--tekst); }
.tabknop.actief { background: var(--wit); border-color: var(--lijn); color: var(--tekst); box-shadow: var(--schaduw-xs); }
.tabknop.actief svg { color: var(--merk); }
.tabinhoud .paneel h2 { margin-top: 0; }
.hint.onder-kop { margin: -8px 0 16px; }
.opslaanbalk { position: sticky; bottom: 16px; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 14px;
               padding: 10px 12px 10px 18px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw); }
.opslaanbalk.actief { border-color: var(--merk); box-shadow: var(--schaduw-l); }
.opslaanbalk.actief #gewijzigd { color: var(--tekst); font-weight: 600; }
.opslaanbalk[hidden] { display: none; }
.geheim { display: flex; gap: 8px; }
.geheim input { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.afkap-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
input.kleurknop { width: 52px; padding: 3px; cursor: pointer; }
.kleurveld { display: flex; align-items: center; gap: 10px; height: var(--h); }
.kleurveld input[type=color] { width: 52px; padding: 3px; cursor: pointer; flex: none; }
table.afkortingen td { padding: 6px 4px; }
table.afkortingen input { height: 32px; }
details.paneel summary { cursor: pointer; }
details.paneel summary::-webkit-details-marker { display: none; }
@media (max-width: 1000px) {
  .instellingen { grid-template-columns: 1fr; }
  .tabs { position: static; flex-direction: row; flex-wrap: wrap; }
  .tabknop { width: auto; }
}

/* ---------- dashboard ---------- */
.db-kop h1 { line-height: 1.25; }
a.kpi.klikbaar { text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
a.kpi.klikbaar:hover { border-color: #d4d4d8; box-shadow: 0 6px 16px -6px rgba(9, 9, 11, .14); transform: translateY(-1px); }
a.kpi.hoofd.klikbaar:hover { border-color: var(--merk-donker); background: var(--merk-licht); }
.trend { font-weight: 700; }
.kpi.hoofd .trend.op { color: #86efac; }
.kpi.hoofd .trend.neer { color: #fca5a5; }
.db-rij { display: grid; gap: 20px; margin-bottom: 20px; align-items: stretch; }
.db-rij > .paneel { margin: 0; min-width: 0; }
.db-2-1 { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.db-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paneeltitel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.paneeltitel h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.meer { font-size: 12.5px; font-weight: 600; color: var(--zacht); text-decoration: none; white-space: nowrap; }
.meer:hover { color: var(--tekst); }
.teller { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
          font-size: 11.5px; font-weight: 700; background: var(--vlak); color: var(--tekst-2); }

.db-grafiek { height: 220px; }
.grafiek .kolom.nu .raak { box-shadow: inset 0 0 0 1px var(--lijn); }
.maandlabels span.nu { color: var(--tekst); font-weight: 700; }

/* mini-kalender */
.minikal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.minikal .kop { font-size: 11px; font-weight: 600; color: var(--vaag); text-align: center; text-transform: uppercase; padding-bottom: 2px; }
.minikal .dag { --kleur: transparent; position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 40px;
                border-radius: 8px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tekst-2);
                text-decoration: none; transition: transform .1s; }
.minikal .dag.weekend { color: var(--vaag); }
.minikal .dag:hover { background: var(--vlak); }
.minikal .dag.gewerkt { background: var(--kleur); color: #fff; font-weight: 700; }
.minikal .dag.gewerkt:hover { transform: scale(1.06); background: var(--kleur); }
.minikal .dag.vandaag { box-shadow: 0 0 0 2px var(--wit), 0 0 0 4px var(--tekst); }
.minikal .dag .extra { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #fff; }
.ministats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 18px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--radius-s); overflow: hidden; }
.ministats > div { background: var(--wit); padding: 10px 12px; }
.ministats span { display: block; font-size: 12px; color: var(--zacht); }
.ministats b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* lijstpanelen */
.lijstpaneel { overflow: hidden; display: flex; flex-direction: column; }
.lijstpaneel .paneeltitel { padding: 18px 20px 10px; margin: 0; }
.lijstpaneel .tussenkop { border-top: 1px solid var(--lijn); margin-top: auto; padding-top: 16px; }
.regel { display: flex; align-items: center; gap: 12px; padding: 10px 20px; text-decoration: none; color: inherit;
         border-top: 1px solid var(--lijn-zacht); transition: background .1s; min-width: 0; }
.regel:hover { background: #fafafa; }
.regel .stip { width: 8px; height: 30px; border-radius: 4px; flex: none; }
.regel .hoofdtekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.regel b { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regel small { font-size: 12px; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regel .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-variant-numeric: tabular-nums; }
.regel .rechts .badge { height: 20px; font-size: 11.5px; }
.datumblok { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
             border-radius: 9px; background: var(--vlak); line-height: 1.1; }
.datumblok small { font-size: 10.5px; text-transform: uppercase; color: var(--zacht); font-weight: 600; }
.datumblok b { font-size: 15px; }
.datumblok.vandaag { background: var(--merk); color: #fff; }
.datumblok.vandaag small { color: rgba(255,255,255,.7); }
.db-leeg { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px 34px; color: var(--zacht); text-align: center; border-top: 1px solid var(--lijn-zacht); }
.db-leeg svg { color: var(--ok); }
.db-leeg.klein { padding: 18px 20px; }

/* donut per klant */
.donutrij { display: flex; align-items: center; gap: 22px; }
.donut { width: 132px; height: 132px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.donut > div { width: 84px; height: 84px; border-radius: 50%; background: var(--wit); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut b { font-size: 22px; font-weight: 800; line-height: 1; }
.donut small { font-size: 11.5px; color: var(--zacht); }
.donutlegende { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.donutlegende a { display: flex; align-items: center; gap: 0; font-size: 13px; text-decoration: none; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; min-width: 0; }
.donutlegende a:hover { background: var(--vlak); }
.donutlegende b { margin-left: auto; padding-left: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* auteursrechten */
.groot-getal { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.voortgang { height: 10px; border-radius: 999px; background: var(--vlak); overflow: hidden; }
.voortgang i { display: block; height: 100%; border-radius: 999px; background: var(--merk); }
.voortgang-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--zacht); font-variant-numeric: tabular-nums; }

.db-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .db-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .db-kpis .hoofd { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .db-2-1, .db-3 { grid-template-columns: 1fr; }
}
.vink.lang { white-space: normal; height: auto; min-height: var(--h); align-items: flex-start; line-height: 1.45; }
.vink.lang input { margin-top: 2px; flex: none; }
a.kpi.hoofd.klikbaar { color: var(--wit); }
.btb { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--ok); }

/* Billtobox: knop per factuur en verbindingsstatus */
.btbknop { color: var(--tekst); background: var(--wit); border-color: var(--lijn); box-shadow: var(--schaduw-xs); }
.btbknop:hover { background: var(--vlak); border-color: #d4d4d8; }
.btbknop.verstuurd { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-rand); }
.btbknop.verstuurd:hover { background: #dcfce7; border-color: #86efac; }
.btbknop.bezig { opacity: .6; pointer-events: none; }
.mailstatus { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; margin: -4px 0 18px;
              border-radius: var(--radius-s); border: 1px solid var(--lijn); background: var(--vlak); font-weight: 600; font-size: 13.5px; }
.mailstatus span { flex: 1; min-width: 0; }
.mailstatus i { width: 9px; height: 9px; border-radius: 50%; background: var(--vaag); flex: none; }
.mailstatus.bezig i { animation: knipper 1s infinite; }
.mailstatus.ok { background: var(--ok-bg); border-color: var(--ok-rand); color: var(--ok); }
.mailstatus.ok i { background: #22c55e; }
.mailstatus.fout { background: var(--fout-bg); border-color: var(--fout-rand); color: var(--fout); }
.mailstatus.fout i { background: #ef4444; }
@keyframes knipper { 50% { opacity: .3; } }
.tabknop[data-status]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-left: auto; }
.tabknop[data-status="ok"]::after { background: #22c55e; }
.tabknop[data-status="fout"]::after { background: #ef4444; }
.lijst td.tweeregels { white-space: normal; line-height: 1.35; max-width: 260px; }
.lijst td.tweeregels b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lijst td.tweeregels small { display: block; font-size: 12px; color: var(--zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werkjaar { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--vlak); color: var(--tekst-2); }
@media (max-width: 1280px) { .excl-kol { display: none; } }
@media (max-width: 1180px) {
  .lijst td.tweeregels { max-width: 190px; }
  .btbknop .knoptekst { display: none; }
  .btbknop { width: 28px; padding: 0; }
}
.btbknop svg { flex: none; }
@media (max-width: 1100px) { .datum-kol { display: none; } }

/* dashboard: titel */
.db-titel { font-weight: 900; font-size: 56px; letter-spacing: -.035em; line-height: 1; color: var(--tekst); margin: 0 0 20px; }
.db-titel span { color: var(--vaag); }
.db-kop h1 { font-size: 20px; }

/* register: één lijn per dag, opdrachten van dezelfde dag als groep */
.register tbody td { border-bottom: none; border-top: none; }
.register tbody tr.nieuwe-dag td { border-top: 1px solid var(--lijn); }
.register tbody tr:first-child td { border-top: none; }
.register tbody tr.zelfde-dag td:not(.vinkcel) { border-top: 1px dashed var(--lijn-zacht); }
.register tbody tr.zelfde-dag td.vinkcel { border-top: none; }

/* planning: modern hover — geen grijze balk, de hele dag licht op met een accentstreep */
button.linkknop, button.linkknop:hover, button.linkknop:active { background: none; border: none; box-shadow: none; color: inherit; transform: none; }
button.linkknop:hover { text-decoration: underline; text-decoration-color: var(--vaag); text-underline-offset: 4px; }
.register tbody tr:hover td { background: inherit; }
.register tbody tr td { transition: background .12s, box-shadow .12s; }
.register tbody tr.dag-hover td { background: #f6f6f7; }
.register tbody tr.dag-hover td:first-child { box-shadow: inset 3px 0 0 var(--merk); }
.register tbody tr.dag-hover td.dag b { color: var(--tekst); }
.afsluitknop { width: 30px; height: 30px; padding: 0; border-radius: 8px; background: none; border: none; box-shadow: none; color: rgba(255,255,255,.6); }
.afsluitknop:hover { background: rgba(255,255,255,.12); color: #fff; border: none; }

/* exportmenu: heel jaar, periode of selectie */
.menu-lijst.exportmenu { width: 300px; padding: 12px; gap: 0; }
.exportmenu form { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.exportmenu b { font-size: 13px; font-weight: 700; }
.exportmenu small { font-size: 12px; color: var(--zacht); }
.exportmenu hr { margin: 12px -12px; }
.exportmenu .formaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.menu-lijst.exportmenu .formaten button { justify-content: center; height: 32px; border: 1px solid var(--lijn); background: var(--wit);
  border-radius: 7px; font-weight: 600; font-size: 13px; }
.menu-lijst.exportmenu .formaten button:hover { background: var(--merk); border-color: var(--merk); color: #fff; }
.exportmenu .periode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.exportmenu .periode label { font-size: 12px; gap: 3px; }
.exportmenu .periode input, .exportmenu .periode select { height: 32px; font-size: 13px; padding: 0 8px; }
.exportmenu .periode select { padding-right: 26px; background-position: right 6px center; }
.tip-selectie { line-height: 1.45; }
.bulk-export { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; opacity: .9; }

b, strong, th { font-weight: 800; }
th { font-weight: 700; }

/* instellingen: invulvelden met eenheid, optioneel-label, samenvatting in uitklapper */
.met-eenheid { position: relative; display: block; }
.met-eenheid input { padding-right: 52px; }
.met-eenheid i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12.5px;
                 color: var(--zacht); pointer-events: none; }
.optioneel { font-weight: 500; color: var(--vaag); font-size: 12px; }
label .optioneel { display: inline; }
details.paneel summary .samenvatting { margin-left: auto; font-size: 13px; }
.tabblad > .mailstatus { margin: 0 0 16px; }
.tabinhoud .paneel .hint a { color: var(--tekst); }

/* vernieuwen: overlay terwijl het programma herstart */
.herstartlaag { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(247, 247, 248, .82); backdrop-filter: blur(2px); }
.herstartlaag[hidden] { display: none; }
.herstartlaag > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 36px; text-align: center;
                      background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-l); }
.herstartlaag small { color: var(--zacht); font-size: 13px; }
.draaier { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--lijn); border-top-color: var(--merk); animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* dashboard: bladeren in de kleine kalender */
.minikal-nav { display: flex; align-items: center; gap: 6px; }
.minikal-nav h2 { text-align: center; margin: 0 2px; white-space: nowrap; }
#minikal .paneeltitel { flex-wrap: wrap; row-gap: 6px; }
#minikal { transition: opacity .15s; }
#minikal.laden { opacity: .55; }


/* ---------- HelloPoen: groene huisstijl ---------- */
.zijbalk { background: var(--zijbalk); border-right-color: rgba(0,0,0,.25); }
.zijbalk nav a:hover { background: rgba(255,255,255,.08); }
.zijbalk nav a.actief { background: var(--merk); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.zijbalk nav a.actief svg { color: #fff; }
.navkop { color: rgba(214, 245, 229, .55); }
.avatar { background: var(--merk); }
.zijvoet .knop { background: #fff; color: var(--zijbalk); }
.zijvoet .knop:hover { background: var(--merk-zacht); }
.kpi.hoofd { background: var(--merk); border-color: var(--merk-donker); }
a.kpi.hoofd.klikbaar:hover { background: var(--merk-licht); border-color: var(--merk-donker); }
.kpi.hoofd .trend.op { color: #c9f5de; }
.segment input:checked + label, .segment a.actief { color: var(--merk-donker); }
.tabknop.actief { border-color: var(--merk-zacht); background: var(--merk-zacht); color: var(--merk-donker); }
.tabknop.actief svg { color: var(--merk); }
.knop.licht:hover, button.licht:hover { background: var(--merk-zacht); border-color: #c5e6d6; }
input:focus, select:focus, textarea:focus { border-color: var(--merk-licht); }
input[type=checkbox] { accent-color: var(--merk); }
.db-titel { color: var(--tekst); }
.db-titel span { color: var(--vaag); }
.meer:hover, a.nummer:hover { color: var(--merk-donker); }
.voortgang i { background: var(--merk); }
.balkje i { background: var(--merk); }
.minikal .dag.vandaag { box-shadow: 0 0 0 2px var(--wit), 0 0 0 4px var(--merk); }
.datumblok.vandaag, .kalender .vandaag .nr, .register tr.vandaag td.dag b { background: var(--merk); color: #fff; }
.register tbody tr.dag-hover td { background: #f1f8f4; }
.register tbody tr.dag-hover td:first-child { box-shadow: inset 3px 0 0 var(--merk); }
.opslaanbalk.actief { border-color: var(--merk); }
.draaier { border-top-color: var(--merk); }
::selection { background: #c9eedb; }
.merk.woordmerk { display: flex; align-items: center; gap: 10px; padding: 2px 8px 22px; text-decoration: none; }
.merk.woordmerk img { height: 30px; width: 30px; filter: none; border-radius: 8px; }
.merk.woordmerk span { font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1; }
.merk.woordmerk b { font-weight: 900; color: #7fe0b3; }
@media (max-width: 860px) { .merk.woordmerk span { font-size: 18px; } .merk.woordmerk { padding: 0; } }
.db-titel { display: flex; align-items: center; gap: 16px; }
.db-titel .db-logo { width: 54px; height: 54px; border-radius: 14px; flex: none; box-shadow: 0 6px 16px -6px rgba(12, 59, 44, .45); }
.db-titel .woord { color: var(--tekst); }
.db-titel .woord span { color: var(--vaag); }

/* ---------- dashboardtitel in groentinten ---------- */
.db-titel .woord { color: var(--merk-donker); }
.db-titel .woord span { color: #3fbf8a; }

/* ---------- navigatiekolom in-/uitklappen ---------- */
.zijbalk { transition: width .2s ease; }
main { transition: margin-left .2s ease; }
.zijknop { position: absolute; top: 22px; right: 12px; width: 28px; height: 28px; padding: 0; border-radius: 8px;
           background: none; border: none; box-shadow: none; color: rgba(255,255,255,.55); }
.zijknop:hover { background: rgba(255,255,255,.1); color: #fff; border: none; }
.zijknop svg { transition: transform .2s ease; }
html.zij-dicht { --zij: 72px; }
.zij-dicht .zijbalk { padding-left: 12px; padding-right: 12px; }
.zij-dicht .zijknop { position: static; margin: 0 auto 14px; display: flex; }
.zij-dicht .zijknop svg { transform: rotate(180deg); }
.zij-dicht .merk.woordmerk { justify-content: center; padding: 2px 0 12px; }
.zij-dicht .merk.woordmerk span, .zij-dicht .navtekst, .zij-dicht .navkop, .zij-dicht .profieltekst { display: none; }
.zij-dicht .zijbalk nav a { justify-content: center; padding: 0; gap: 0; }
.zij-dicht .zijbalk nav { gap: 4px; }
.zij-dicht .zijvoet .knop.volledig { padding: 0; gap: 0; }
.zij-dicht .profiel { flex-direction: column; gap: 8px; padding: 12px 0 0; }
.zij-dicht .profiel .afsluitknop { margin: 0 !important; }
@media (max-width: 860px) { .zijknop { display: none; } html.zij-dicht { --zij: 248px; } }

/* GIF van de dag */
.zijbalk nav .navknop { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin-top: 10px; border-radius: var(--radius-s);
  width: 100%; justify-content: flex-start; font: inherit; font-weight: 600; color: rgba(255,255,255,.82);
  background: rgba(127, 224, 179, .1); border: 1px dashed rgba(127, 224, 179, .35); box-shadow: none; }
.zijbalk nav .navknop svg { color: #7fe0b3; }
.zijbalk nav .navknop:hover { background: rgba(127, 224, 179, .2); color: #fff; border-color: rgba(127, 224, 179, .6); }
.zij-dicht .zijbalk nav .navknop { justify-content: center; padding: 0; gap: 0; }
.gifvenster { width: min(560px, calc(100vw - 32px)); }
.gifvak { padding: 18px 22px; display: grid; place-items: center; min-height: 260px; background: var(--vlak); }
.gifvak img { max-width: 100%; max-height: 380px; border-radius: 12px; box-shadow: var(--schaduw); transition: opacity .2s; }
.gifvak img.laden { opacity: .25; }

/* uitgaven: sleepzone */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; margin-bottom: 20px; text-align: center;
            border: 1.5px dashed #bfe0cf; border-radius: var(--radius); background: var(--merk-zacht); color: var(--merk-donker); transition: all .15s; }
.dropzone small { color: var(--zacht); }
.dropzone.actief { border-color: var(--merk); background: #d4f0e2; transform: scale(1.01); }

/* uitgaven: klikbare rijen en betaald-schakelaar */
.klikrij { cursor: pointer; }
.betaalknop { height: 26px; padding: 0 10px 0 8px; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 700;
              background: var(--waarsch-bg); color: var(--waarsch); border: 1px solid var(--waarsch-rand); box-shadow: none; }
.betaalknop i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; flex: none; position: relative; }
.betaalknop:hover { background: #fef3c7; border-color: #fcd34d; }
.betaalknop.aan { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-rand); }
.betaalknop.aan i { background: currentColor; }
.betaalknop.aan i::after { content: ""; position: absolute; left: 3px; top: 0; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.betaalknop.aan:hover { background: #dcfce7; }
.bulkbalk .klein-select { height: 28px; width: auto; font-size: 12.5px; padding: 0 26px 0 8px; background-position: right 6px center; }

/* dashboard: resultaat (omzet − uitgaven) */
.resultaat { display: flex; flex-direction: column; gap: 12px; }
.res-rij { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 14px; font-size: 13.5px; }
.res-rij span { color: var(--zacht); font-weight: 600; }
.res-rij b { font-variant-numeric: tabular-nums; min-width: 110px; text-align: right; }
.res-balk { height: 12px; border-radius: 999px; background: var(--vlak); overflow: hidden; }
.res-balk i { display: block; height: 100%; border-radius: 999px; background: var(--merk); }
.res-rij.uit .res-balk i { background: #f0a868; }
.res-totaal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1.4px solid var(--merk);
              font-weight: 800; color: var(--merk-donker); }
.res-totaal b { font-size: 22px; letter-spacing: -.02em; }
.catlijst { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.meerregel { justify-content: center; font-size: 12.5px; }
.uitgavenlijst td.tweeregels { max-width: 240px; }
@media (max-width: 1280px) { .uitgavenlijst .btw-kol { display: none; } }
.uitgavenlijst td:nth-child(3) { white-space: nowrap; }

/* uitgaven: overzicht per categorie en categoriekeuze in de lijst */
.catoverzicht { display: flex; align-items: center; gap: 28px; }
.catbalken { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.catrij { display: grid; grid-template-columns: minmax(170px, 230px) 1fr 42px 100px; align-items: center; gap: 12px;
  padding: 5px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: var(--tekst); font-size: 13.5px; }
.catrij:hover, .catrij.actief { background: var(--vlak); }
.catrij.gedimd { opacity: .45; }
.catnaam { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catnaam small { color: var(--zacht); font-weight: 500; }
.catbalk { height: 8px; border-radius: 999px; background: var(--vlak); overflow: hidden; }
.catrij:hover .catbalk, .catrij.actief .catbalk { background: var(--wit); }
.catbalk i { display: block; height: 100%; border-radius: 999px; }
.catpct { color: var(--zacht); text-align: right; font-variant-numeric: tabular-nums; }
.catrij b { text-align: right; font-variant-numeric: tabular-nums; }
.catkeuze { position: relative; display: inline-flex; align-items: center; margin: 0; }
.catkeuze::before { content: ""; position: absolute; left: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); pointer-events: none; }
.catkeuze select { appearance: none; -webkit-appearance: none; height: 26px; width: auto; max-width: 210px; padding: 0 24px 0 24px;
  border-radius: 999px; border: 1px solid var(--lijn); background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--tekst); cursor: pointer; text-overflow: ellipsis; }
.catkeuze select:hover { border-color: var(--c); }
.catkeuze.leeg select { color: var(--zacht); border-style: dashed; }
.catkeuze.bewaard select { border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-zacht); }
.melding button.klein { margin-left: 8px; }
/* dashboard: uitgaven per categorie */
.catstapel { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin-top: 18px; background: var(--vlak); }
.catstapel i { display: block; height: 100%; }
.catlegende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin-top: 12px; }
.catlegende a { display: flex; align-items: center; gap: 8px; font-size: 13px; text-decoration: none; color: var(--tekst); padding: 3px 6px; margin: 0 -6px; border-radius: 6px; min-width: 0; }
.catlegende a:hover { background: var(--vlak); }
.catlegende span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catlegende b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) {
  .catoverzicht { flex-direction: column; align-items: stretch; }
  .catoverzicht .donut { align-self: center; }
  .catrij { grid-template-columns: minmax(0, 1fr) 60px 36px 90px; }
  .catlegende { grid-template-columns: 1fr; }
}
.catnaam .luikbolletje, .catlegende .luikbolletje { margin-right: 0; }

/* analyse: inkomsten tegenover uitgaven */
.vgl-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.vgl-svg .rooster { stroke: var(--lijn); stroke-dasharray: 3 4; }
.vgl-svg .nul { stroke: #c4c4c8; }
.vgl-svg text { font-family: inherit; font-size: 12px; fill: var(--vaag); }
.vgl-svg .as { text-anchor: end; font-variant-numeric: tabular-nums; }
.vgl-svg .maand { text-anchor: middle; font-weight: 600; fill: var(--zacht); }
.vgl-svg .b-omzet { fill: var(--merk); }
.vgl-svg .b-uit { fill: #f0a868; }
.vgl-svg rect:hover { filter: brightness(1.1); }
.vgl-svg .lijn { fill: none; stroke: var(--zijbalk); stroke-width: 2.5; stroke-linejoin: round; }
.vgl-svg .punt { fill: var(--wit); stroke: var(--zijbalk); stroke-width: 2.5; }
.vergelijk { display: flex; flex-direction: column; gap: 14px; }
.vgl-rij { display: grid; grid-template-columns: 80px 1fr 58px; gap: 14px; align-items: center; }
.vgl-naam { font-weight: 700; font-size: 13.5px; }
.vgl-balken { display: flex; flex-direction: column; gap: 5px; }
.vgl-balken div { position: relative; display: flex; align-items: center; gap: 8px; }
.vgl-balken i { display: block; height: 10px; border-radius: 999px; background: var(--merk); min-width: 3px; }
.vgl-balken i.vorig { background: #cfd8d3; }
.vgl-balken i.uit { background: #f0a868; }
.vgl-balken small { font-size: 11.5px; color: var(--zacht); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vgl-pct { text-align: right; font-variant-numeric: tabular-nums; }
.vgl-pct.goed { color: var(--ok); }
.vgl-pct.slecht { color: var(--fout); }
.catstapel.groot { height: 22px; border-radius: 8px; margin-top: 4px; }
.topduo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.topduo h3 { font-size: 13px; margin: 0 0 10px; }
.topduo h3 small { color: var(--zacht); font-weight: 500; }
.toprij { display: grid; grid-template-columns: minmax(0, 1fr) 60px auto; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.toprij span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toprij .balkje { min-width: 0; }
.toprij b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.balkje.uit i { background: #f0a868; }
@media (max-width: 900px) { .topduo { grid-template-columns: 1fr; } }

/* fun facts */
.ff-held { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; margin-bottom: 20px; border-radius: 18px;
  color: #fff; background: radial-gradient(circle at 85% 30%, #1a9e6e 0, transparent 55%), linear-gradient(135deg, var(--zijbalk), var(--merk-donker)); }
.ff-held p { margin: 10px 0 0; color: rgba(255, 255, 255, .78); max-width: 620px; }
.ff-held p b { color: #fff; }
.ff-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.ff-teller { font-size: 54px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 6px; }
.ff-munt { width: 110px; height: 110px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 52px; font-weight: 900; color: #7a5a00;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c542 45%, #c9950f); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25), 0 10px 30px -8px rgba(0, 0, 0, .5);
  animation: ff-draai 4s ease-in-out infinite; }
@keyframes ff-draai { 0%, 100% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(180deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ff-munt { animation: none; } }
.ff-tempo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ff-tempokaart { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; background: var(--vlak); }
.ff-tempokaart small { color: var(--zacht); font-weight: 600; margin-bottom: 4px; }
.ff-tempokaart .plus { color: var(--merk); font-variant-numeric: tabular-nums; font-size: 14px; }
.ff-tempokaart .min { color: #d9822b; font-variant-numeric: tabular-nums; font-size: 14px; }
.ff-tempokaart .netto { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--lijn); font-weight: 800; font-variant-numeric: tabular-nums; }
.ff-icoon { font-size: 22px; line-height: 1; }
.ff-europa { display: flex; flex-direction: column; gap: 6px; }
.ff-land { display: grid; grid-template-columns: 24px 130px 1fr 96px; align-items: center; gap: 10px; font-size: 13px; padding: 3px 8px; margin: 0 -8px; border-radius: 8px; }
.ff-land .vlag { font-size: 17px; }
.ff-land .balk { height: 10px; border-radius: 999px; background: var(--vlak); overflow: hidden; }
.ff-land .balk i { display: block; height: 100%; border-radius: 999px; background: #b8c9c0; }
.ff-land b { text-align: right; font-variant-numeric: tabular-nums; }
.ff-land.jij { background: var(--merk-zacht); font-weight: 800; }
.ff-land.jij .balk { background: var(--wit); }
.ff-land.jij .balk i { background: var(--merk); }
.ff-conclusie { margin: 14px 0 0; font-size: 14.5px; }
.ff-dingen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ff-dingen > div { padding: 16px; border-radius: 12px; background: var(--vlak); display: flex; flex-direction: column; gap: 4px; }
.ff-groot { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--merk-donker); }
.ff-dingen small { color: var(--zacht); }
.ff-kalender-wrap { overflow-x: auto; padding-bottom: 4px; }
.ff-kalender { display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; gap: 4px 6px; width: max-content; }
.ff-maanden { grid-column: 2; display: grid; grid-template-columns: repeat(var(--weken), 13px); gap: 3px; font-size: 11px; color: var(--zacht); font-weight: 600; }
.ff-maanden span { white-space: nowrap; }
.ff-dagnamen { display: grid; grid-template-rows: repeat(7, 13px); gap: 3px; font-size: 10px; color: var(--vaag); line-height: 13px; }
.ff-rooster { display: grid; grid-template-rows: repeat(7, 13px); grid-auto-flow: column; grid-template-columns: repeat(var(--weken), 13px); gap: 3px; }
.ff-vakje { display: inline-block; width: 13px; height: 13px; border-radius: 3px; background: var(--vlak); }
.ff-vakje.n1 { background: #9fdcc0; }
.ff-vakje.n2 { background: var(--merk); }
.ff-vakje.n3 { background: var(--zijbalk); }
.ff-vakje.toekomst { opacity: .4; }
.ff-vakje.buiten { visibility: hidden; }
.legende .ff-vakje { width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; visibility: visible; }
.ff-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ff-stats div { display: flex; flex-direction: column; }
.ff-stats b { font-size: 22px; font-weight: 900; color: var(--merk-donker); }
.ff-stats small { color: var(--zacht); }
.ff-kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.ff-kaart { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; background: var(--wit); border: 1px solid var(--lijn); box-shadow: var(--schaduw, none); transition: transform .15s; }
.ff-kaart:hover { transform: translateY(-2px); }
.ff-kaart small { color: var(--zacht); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; margin-top: 8px; }
.ff-kaart b { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.ff-kaart p { margin: 2px 0 0; color: var(--tekst-2); font-size: 13px; }
.ff-kaart.groen { background: linear-gradient(160deg, var(--merk-zacht), var(--wit)); border-color: #bfe6d2; }
@media (max-width: 1100px) { .ff-tempo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ff-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ff-held { flex-direction: column; align-items: flex-start; } .ff-teller { font-size: 38px; } .ff-tempo, .ff-dingen, .ff-kaarten { grid-template-columns: 1fr 1fr; } .ff-stats { grid-template-columns: 1fr 1fr; } .ff-land { grid-template-columns: 24px 1fr 60px 90px; } }

/* zoekbalk (inkomsten en uitgaven) */
.zoekbalk { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; margin-bottom: 20px;
  border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); color: var(--zacht); }
.zoekbalk:focus-within { border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-zacht); }
.zoekbalk input { flex: 1; border: none; outline: none; box-shadow: none; background: none; height: 100%; padding: 0; font: inherit; font-size: 14px; color: var(--tekst); }
.zoekbalk input:focus { box-shadow: none; }
.zoekbalk kbd { font: inherit; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--lijn); color: var(--vaag); }
.zoekresultaten { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 440px; overflow-y: auto; padding: 6px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: var(--schaduw-l); }
.zr { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--tekst); }
.zr:hover, .zr.gekozen { background: var(--vlak); }
.zr-soort { font-size: 11px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 999px; background: var(--vlak); color: var(--zacht); }
.zr-soort.factuur { background: var(--merk-zacht); color: var(--merk-donker); }
.zr-soort.uitgave { background: #fdeede; color: #b4661f; }
.zr-tekst { display: flex; flex-direction: column; min-width: 0; }
.zr-tekst b, .zr-tekst small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zr-tekst small, .zr-meer { color: var(--zacht); font-size: 12.5px; }
.zr-bedrag { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-variant-numeric: tabular-nums; }
.zr-bedrag small { font-size: 11px; }
.zr-meer { padding: 10px; }
.ff-bruto { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--merk-donker); background: var(--merk-zacht); border: 1px solid #bfe6d2; }
.ff-bruto.klein { height: 20px; padding: 0 8px; font-size: 11px; margin-left: 6px; vertical-align: 2px; }
.ff-held p small { color: rgba(255, 255, 255, .6); font-size: 12px; }
/* fun facts: berg muntjes */
.ff-held { padding: 26px 32px; min-height: 200px; overflow: hidden; }
.ff-held-tekst { display: flex; flex-direction: column; gap: 4px; }
.ff-klein { font-size: 13px; color: rgba(255, 255, 255, .65); font-weight: 600; }
.ff-berg { position: relative; flex: 0 1 440px; align-self: stretch; min-height: 170px; margin: -10px -12px -26px 0; }
.ff-berg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-zakken { position: absolute; left: 0; bottom: 30px; font-size: 22px; letter-spacing: 2px; color: #fff; }
.ff-zakken b { font-size: 14px; margin-left: 4px; }
.ff-zakken.plop { animation: ff-plop .45s ease-out; }
@keyframes ff-plop { 0% { transform: scale(.6); opacity: .2; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 640px) { .ff-berg { flex-basis: auto; width: 100%; min-height: 150px; margin: 0; } }

/* contrast: nooit witte tekst op lichtgroen (hover, open menu's, selectie) */
::selection { background: var(--merk-donker); color: #fff; }
details.menu[open] summary.knop:not(.licht) { background: var(--merk-donker); border-color: var(--merk-donker); color: #fff; }
details.menu[open] summary.knop.licht, details.menu[open] summary.licht { background: var(--merk-zacht); border-color: #c5e6d6; color: var(--merk-donker); }
.knop.licht:hover, button.licht:hover { color: var(--merk-donker); }
.menu-lijst a:hover, .menu-lijst button:hover { color: var(--merk-donker); background: var(--merk-zacht); }
.menu-lijst.exportmenu .formaten button:hover { background: var(--merk); border-color: var(--merk); color: #fff; }
.bulkbalk button:hover { background: var(--merk-zacht); border-color: var(--merk-zacht); color: var(--merk-donker); }
.zijvoet .knop:hover { color: var(--zijbalk); }
.ff-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 190px; margin-top: 6px; }
.ff-weekdag { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ff-weekdag b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--zacht); }
.ff-weekbalk { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end; border-radius: 10px; background: var(--vlak); overflow: hidden; }
.ff-weekbalk i { display: block; width: 100%; min-height: 4px; border-radius: 10px; background: #9fdcc0; transition: height .6s; }
.ff-weekdag span { font-weight: 700; font-size: 13px; color: var(--tekst-2); }
.ff-weekdag.top .ff-weekbalk i { background: var(--merk); }
.ff-weekdag.top b, .ff-weekdag.top span { color: var(--merk-donker); }
.ff-weekdag.laag .ff-weekbalk i { background: #d4d4d8; }
.ff-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ff-mini .ff-kaart { margin: 0; }

/* vergrendelscherm */
.slotpagina { min-height: 100vh; display: grid; place-items: center; margin: 0;
  background: radial-gradient(circle at 70% 20%, #1a9e6e 0, transparent 50%), linear-gradient(150deg, var(--zijbalk), #072a1f); }
.slotkaart { width: min(380px, calc(100vw - 32px)); margin: 0; max-width: none; box-sizing: border-box; padding: 40px 32px 34px; border-radius: 24px; text-align: center; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.slotlogo { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.slotkaart h1 { font-size: 34px; font-weight: 900; letter-spacing: -.03em; margin: 16px 0 6px; color: #fff; }
.slotkaart h1 span { color: #9fe3c3; }
.slotkaart p { color: rgba(255, 255, 255, .72); margin: 0 0 24px; min-height: 42px; }
.slotknop { height: 48px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 800; gap: 10px;
  background: #fff; color: var(--zijbalk); border: none; }
.slotknop:hover { background: var(--merk-zacht); color: var(--zijbalk); }
.slotknop.bezig svg { animation: slotpuls 1.2s ease-in-out infinite; }
@keyframes slotpuls { 50% { opacity: .35; } }
.beveiligingslijst { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--tekst-2); }

/* welkomstscherm en hulp (standaardversie) */
.welkompagina { margin: 0; background: linear-gradient(180deg, var(--merk-zacht), var(--bg) 340px); }
.welkom { max-width: 860px; margin: 0 auto; padding: 44px 20px 80px; }
.welkomkop { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.welkomkop img { border-radius: 14px; box-shadow: 0 8px 20px -8px rgba(12, 59, 44, .5); }
.welkomkop h1 { font-size: 32px; font-weight: 900; letter-spacing: -.03em; margin: 0; color: var(--merk-donker); }
.welkomkop h1 span { color: var(--merk-donker); }
.welkomkop p { margin: 4px 0 0; color: var(--tekst-2); font-size: 15px; }
.welkomform .paneel h2 { display: flex; align-items: center; gap: 10px; }
.stapnr { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--merk); color: #fff; font-size: 13px; font-weight: 800; }
.welkomknoppen { display: flex; justify-content: flex-end; }
button.groot { height: 48px; padding: 0 28px; font-size: 16px; font-weight: 800; border-radius: 12px; }
.welkomform .vink.lang { margin-top: 10px; align-items: flex-start; }
.hulpstappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.hulpstap { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--wit); border: 1px solid var(--lijn); text-decoration: none; color: var(--tekst); transition: transform .15s, border-color .15s; }
.hulpstap:hover { transform: translateY(-2px); border-color: var(--merk); }
.hulpstap p { margin: 4px 0 0; color: var(--tekst-2); font-size: 13.5px; }
details.vraag { border-top: 1px solid var(--lijn); padding: 10px 0; }
details.vraag:first-of-type { border-top: none; }
details.vraag summary { cursor: pointer; font-weight: 700; }
details.vraag p { margin: 8px 0 2px; color: var(--tekst-2); }
.startlijst { display: flex; flex-direction: column; gap: 8px; }
.startlijst a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--vlak); text-decoration: none; color: var(--tekst); font-weight: 600; }
.startlijst a:hover { background: var(--merk-zacht); color: var(--merk-donker); }
.startlijst a.klaar { opacity: .55; text-decoration: line-through; }
.startlijst a.klaar .stapnr { background: var(--ok); }
.startlijst small { margin-left: auto; color: var(--zacht); font-weight: 500; }
.logovoorbeeld { max-height: 56px; max-width: 220px; display: block; margin-bottom: 10px; }
@media (max-width: 900px) { .hulpstappen { grid-template-columns: 1fr; } }

/* online: aanmelden */
.slotform { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.slotform label { color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 700; gap: 5px; }
.slotform input { height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .95); font-size: 15px; }
.slotform .slotknop { margin-top: 8px; align-self: center; }
.slotfout { margin: -8px 0 16px; padding: 10px 12px; border-radius: 10px; background: rgba(239, 68, 68, .18); border: 1px solid rgba(254, 202, 202, .5); color: #fff; font-size: 13.5px; }

/* ---------- welkomst in stappen (standaardversie) ---------- */
body.wz { margin: 0; min-height: 100vh; background: var(--bg); }
.wz-raam { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; margin: 0; }
.wz-links { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px 32px; color: #fff;
  background: radial-gradient(circle at 80% 10%, #1a9e6e 0, transparent 45%), radial-gradient(circle at 10% 95%, #0f8a5f 0, transparent 40%), linear-gradient(160deg, var(--zijbalk), #072a1f); }
.wz-merk { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.wz-merk img { border-radius: 9px; }
.wz-merk b { color: #9fe3c3; font-weight: 900; }
.wz-toneel { flex: 1; display: grid; place-items: center; position: relative; padding: 20px 0; }
.wz-onderschrift { margin: 0; text-align: center; color: rgba(255, 255, 255, .75); font-weight: 600; min-height: 22px; transition: opacity .2s; }
.wz-muntje { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 900; font-size: 22px; color: #7a5a00;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c542 45%, #c9950f); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 10px 22px -8px rgba(0, 0, 0, .5); animation: wz-zweef 6s ease-in-out infinite; }
.wz-muntje.m1 { top: 9%; left: 8%; }
.wz-muntje.m2 { bottom: 12%; right: 6%; width: 58px; height: 58px; font-size: 27px; animation-delay: -2s; }
.wz-muntje.m3 { top: 18%; right: 12%; width: 32px; height: 32px; font-size: 15px; animation-delay: -4s; }
@keyframes wz-zweef { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
.wz-blad { position: relative; width: min(100%, 400px); padding: 22px 22px 18px; border-radius: 14px; background: #fff; color: #0b1712; font-size: 10.5px; line-height: 1.45;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-2deg); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.wz-blad:hover { transform: rotate(0); }
.wz-blad-kop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.wz-blad-kop b { font-size: 15px; font-weight: 900; }
.wz-blad-kop img { max-height: 34px; max-width: 150px; display: block; }
.wz-blad-titel { text-align: right; }
.wz-blad-titel b { color: var(--merk-donker); font-size: 18px; display: block; line-height: 1; }
.wz-blad-titel small { color: #71717a; font-weight: 700; }
.wz-blad-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.wz-blad-rij.onder { align-items: start; margin: 12px 0 0; }
.wz-zone { border-radius: 8px; padding: 5px 7px; margin: -5px -7px; transition: background .25s, box-shadow .25s, opacity .25s; display: flex; flex-direction: column; min-width: 0; }
.wz-zone i { font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; }
.wz-zone span, .wz-zone b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-blad.gedimd .wz-zone:not(.licht-op), .wz-blad.gedimd .wz-voetnoot { opacity: .35; }
.wz-zone.licht-op { background: var(--merk-zacht); box-shadow: 0 0 0 2px var(--merk); animation: wz-puls 1.6s ease-in-out infinite; }
@keyframes wz-puls { 50% { box-shadow: 0 0 0 5px rgba(15, 138, 95, .25); } }
.wz-lijnen { margin: 0; padding: 0; }
.wz-lijn { display: grid; grid-template-columns: 1fr 44px 62px 66px; gap: 6px; padding: 6px 7px; border-bottom: 1px solid #e4e4e7; }
.wz-lijn.kop { font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; border-bottom: 1.5px solid var(--merk); }
.wz-lijn span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.wz-betaal { background: #eef5f1; margin: 0; padding: 9px 10px; }
.wz-betaal.licht-op { background: var(--merk-zacht); }
.wz-totalen { margin: 0; padding: 4px 7px; gap: 3px; }
.wz-totalen div { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.wz-totalen .tot { border-top: 1.5px solid var(--merk); padding-top: 5px; margin-top: 3px; color: var(--merk-donker); font-weight: 800; }
.wz-totalen .tot b { font-size: 14px; }
.wz-voetnoot { margin-top: 10px; font-size: 8.5px; color: #71717a; }
.wz-rechts { display: flex; flex-direction: column; max-width: 640px; width: 100%; margin: 0 auto; padding: 0 40px 36px; box-sizing: border-box; min-height: 100vh; }
.wz-voortgang { height: 5px; border-radius: 999px; background: var(--vlak); margin: 34px 0 14px; overflow: hidden; }
.wz-voortgang i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--merk), #3fbf8a); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.wz-teller { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--merk); min-height: 18px; }
.wz-stap { display: none; flex-direction: column; gap: 14px; flex: 1; justify-content: center; padding: 20px 0; }
.wz-stap.actief { display: flex; animation: wz-in .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes wz-in { from { opacity: 0; transform: translateX(26px); } }
.wz-stap h1 { font-size: 34px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.wz-intro { font-size: 16px; color: var(--tekst-2); margin: 0 0 8px; max-width: 520px; }
.wz-stap label { font-size: 13.5px; }
.wz-stap input:not([type=radio]):not([type=checkbox]) { height: 46px; font-size: 16px; border-radius: 12px; }
.wz-stap .met-eenheid input { border-radius: 12px; }
.wz-zwaai { font-size: 56px; line-height: 1; transform-origin: 70% 70%; animation: wz-zwaai 2.4s ease-in-out infinite; width: max-content; }
@keyframes wz-zwaai { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.wz-punten { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wz-punten li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--wit); border: 1px solid var(--lijn); }
.wz-punten li > span { font-size: 24px; }
.wz-punten small { display: block; color: var(--zacht); }
.wz-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-keuze { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 18px; border-radius: 16px; background: var(--wit); border: 2px solid var(--lijn); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.wz-keuze:hover { transform: translateY(-2px); border-color: #9fdcc0; }
.wz-keuze input { position: absolute; opacity: 0; }
.wz-keuze:has(input:checked) { border-color: var(--merk); background: var(--merk-zacht); box-shadow: 0 8px 20px -10px rgba(15, 138, 95, .5); }
.wz-keuze:has(input:checked)::after { content: "✓"; position: absolute; top: 12px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--merk); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.wz-keuze:has(input:focus-visible) { box-shadow: var(--focus); }
.wz-keuze-icoon { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.wz-keuze b { font-size: 17px; }
.wz-keuze small { color: var(--zacht); font-weight: 500; }
.wz-schakel { flex-direction: row !important; align-items: flex-start; gap: 12px !important; padding: 14px; border-radius: 14px; background: var(--wit); border: 1px solid var(--lijn); cursor: pointer; }
.wz-schakel input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.wz-schakel small { display: block; color: var(--zacht); font-weight: 500; }
.wz-chips { display: flex; gap: 10px; margin: -6px 0 6px; }
.wz-chips label { position: relative; margin: 0; }
.wz-chips input { position: absolute; opacity: 0; }
.wz-chips span { display: block; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--lijn); background: var(--wit); font-weight: 700; cursor: pointer; }
.wz-chips input:checked + span { border-color: var(--merk); background: var(--merk-zacht); color: var(--merk-donker); }
.wz-logovak { align-items: center; justify-content: center; gap: 6px !important; padding: 34px 20px; border: 2px dashed #bfe0cf; border-radius: 18px; background: var(--merk-zacht); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.wz-logovak:hover { border-color: var(--merk); }
.wz-logovak.gekozen { border-style: solid; border-color: var(--merk); background: var(--wit); }
.wz-logo-icoon { font-size: 34px; }
.wz-logovak small { color: var(--zacht); }
.wz-knoppen { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.wz-knoppen .groot { margin-left: auto; }
.wz-overslaan { background: none; border: none; box-shadow: none; color: var(--zacht); margin-left: auto; }
.wz-overslaan:hover { background: var(--vlak); color: var(--tekst); }
.wz-overslaan:not([hidden]) + .groot { margin-left: 0; }
.wz-vink { color: var(--merk); width: max-content; }
.wz-vink circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.wz-vink path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.wz-klaar.actief .wz-vink circle { animation: wz-teken .6s ease-out forwards; }
.wz-klaar.actief .wz-vink path { animation: wz-teken .4s .5s ease-out forwards; }
@keyframes wz-teken { to { stroke-dashoffset: 0; } }
.wz-samenvatting { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-samenvatting li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--wit); border: 1px solid var(--lijn); font-weight: 600; min-width: 0; }
.wz-samenvatting span { font-size: 20px; }
input.schud { border-color: var(--fout) !important; animation: wz-schud .4s; }
@keyframes wz-schud { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 900px) { .wz-raam { grid-template-columns: 1fr; } .wz-links { display: none; } .wz-rechts { padding: 0 20px 28px; } .wz-stap h1 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .wz-muntje, .wz-zwaai, .wz-zone.licht-op { animation: none; } }

/* ---------- rondleiding ---------- */
.rl-gat { position: fixed; z-index: 1000; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(7, 30, 22, .62), 0 0 0 3px #3fbf8a; pointer-events: none; transition: all .35s cubic-bezier(.2, .8, .2, 1); }
.rl-vang { position: fixed; inset: 0; z-index: 999; }
.rl-kaart { position: fixed; z-index: 1001; width: min(340px, calc(100vw - 32px)); padding: 20px; border-radius: 18px; background: var(--wit); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .45); transition: top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1); }
.rl-kaart .rl-icoon { font-size: 30px; line-height: 1; }
.rl-kaart h3 { margin: 8px 0 4px; font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.rl-kaart p { margin: 0; color: var(--tekst-2); }
.rl-voet { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.rl-stippen { display: flex; gap: 5px; margin-right: auto; }
.rl-stippen i { width: 7px; height: 7px; border-radius: 50%; background: var(--lijn); }
.rl-stippen i.aan { background: var(--merk); }
.rl-kaart.midden { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); text-align: center; padding: 30px 28px 24px; }
.rl-kaart.midden .rl-icoon { font-size: 48px; }
.rl-kaart.midden .rl-voet { justify-content: center; }
.rl-kaart.midden .rl-stippen { display: none; }

.wz [hidden] { display: none !important; }

/* strakke iconen in plaats van emoji's (welkomst en rondleiding) */
.wz-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--merk-zacht); color: var(--merk-donker); font-size: 0; }
.wz-ic.groot { width: 54px; height: 54px; border-radius: 15px; background: var(--wit); }
.wz-ic.groot svg { width: 28px; height: 28px; }
.wz-keuze .wz-ic { margin-bottom: 10px; }
.wz-keuze:has(input:checked) .wz-ic { background: var(--merk); color: #fff; }
.wz-punten li > span.wz-ic { font-size: 0; }
.wz-startlogo { border-radius: 16px; box-shadow: 0 10px 24px -10px rgba(12, 59, 44, .5); }
.wz-samenvatting li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--merk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.rl-logo { border-radius: 13px; margin: 0 auto 4px; display: block; }
.rl-nr { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--merk); }
.rl-kaart h3 { margin-top: 4px; }

/* planning (lijst): een lege dag of de datum aanklikken om een opdracht toe te voegen */
.register tbody tr.leeg, .register tbody td.dag { cursor: pointer; }
.register tbody tr.leeg:hover td { background: var(--merk-zacht); }

/* online: direct de PDF van een nieuwe factuur downloaden */
.klaarbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px;
  background: var(--merk-zacht); border: 1px solid #bfe6d2; color: var(--merk-donker); }
.klaarbalk span { margin-right: auto; }

/* foutpagina en foutmeldingen bij formuliervelden */
.foutpagina { max-width: 480px; margin: 12vh auto; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.foutcode { font-size: 72px; font-weight: 900; letter-spacing: -.04em; color: var(--merk); line-height: 1; }
.foutpagina h1 { margin: 6px 0 0; }
.foutpagina p { margin: 0 0 14px; color: var(--tekst-2); }
.veldfout { display: block; margin-top: 4px; color: var(--fout); font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: normal; text-align: left; }
.veldfout[hidden] { display: none; }
input.ongeldig, textarea.ongeldig { border-color: var(--fout) !important; box-shadow: 0 0 0 3px var(--fout-bg, rgba(239, 68, 68, .15)) !important; }
td .veldfout { font-size: 11.5px; min-width: 140px; }
input.schud { animation: wz-schud .35s; }