/* ═══════════════════════════════════════════════════════════════════════
   MEDUTI Partnerportaal — licht, officieel, in de MEDUTI-huisstijl.
   Wit met veel rust, zwarte accentkaarten en het vertrouwde limegroen.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F7F7F4;            /* achtergrond van de pagina           */
  --card:#FFFFFF;             /* kaarten                              */
  --ink:#0A0A0A;              /* tekst                                */
  --sub:#5C5C54;              /* secundaire tekst                     */
  --mute:#8B8B81;             /* stille tekst                         */
  --border:#E5E5DE;           /* randen                               */
  --border-lt:#3A3A3A;        /* randen ín donkere kaarten            */
  --dim:#A8A8A0;              /* stille tekst ín donkere kaarten      */
  --dark:#0A0A0A;             /* de donkere accentkaart               */
  --dark-2:#141414;
  --accent:#C8FF00;           /* MEDUTI-lime                          */
  --accent-ink:#5E7A00;       /* lime, donker genoeg als tekstkleur   */
  --accent-soft:rgba(200,255,0,.14);
  --ok:#127A4A;
  --err:#C0362C;
  --err-soft:#FDECEA;
  --ok-soft:#E7F6EE;
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --rad:14px;
  --rad-sm:9px;
  --pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 2px rgba(10,10,10,.04),0 8px 24px rgba(10,10,10,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(10,10,10,.25);text-underline-offset:2px}
a:hover{text-decoration-color:var(--ink)}
h1,h2{font-family:var(--display);letter-spacing:-.015em;line-height:1.12;margin:0}
h1{font-size:26px;font-weight:700}
h2{font-size:19px;font-weight:700}

.pt-wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ── bovenbalk ─────────────────────────────────────────────────────── */
.pt-top{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.pt-top__in{display:flex;align-items:center;justify-content:space-between;height:64px}
.pt-logo{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);
}
.pt-logo span{color:var(--accent-ink)}
.pt-logo em{font-style:normal;font-weight:500;color:var(--mute);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;margin-left:6px}
.pt-top__r{display:flex;align-items:center;gap:16px}
.pt-who{color:var(--sub);font-size:13.5px}
.pt-link{font-size:13.5px;font-weight:600;color:var(--ink)}

.pt-main{padding:34px 0 60px;display:grid;gap:22px;align-content:start}

/* ── voettekst ─────────────────────────────────────────────────────── */
.pt-foot{border-top:1px solid var(--border);padding:20px 0 26px;background:var(--card)}
.pt-foot .pt-wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:var(--mute);font-size:12.5px}
.pt-foot a{color:var(--sub)}

/* ── kaarten ───────────────────────────────────────────────────────── */
.pt-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad);
  padding:24px 26px;box-shadow:var(--shadow);
}
.pt-card__h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.pt-card--dark{
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 100%);
  border-color:var(--dark);color:#F5F1EC;
}
.pt-card--dark h1,.pt-card--dark h2{color:#F5F1EC}
.pt-card--dark a{color:#F5F1EC}
.pt-darksub{color:var(--dim);font-size:14px;max-width:70ch;margin:4px 0 14px}
.pt-bigmoney{font-family:var(--display);font-size:30px;font-weight:700;color:var(--accent)}

.pt-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute)}
.pt-card--dark .pt-k{color:var(--dim)}

/* ── inlogscherm ───────────────────────────────────────────────────── */
.pt-login{max-width:460px;margin:5vh auto 0;width:100%}
.pt-login .pt-card{padding:30px 32px}
.pt-login h1{margin-bottom:6px}
.pt-login .sub{color:var(--sub);font-size:14px;margin:0 0 20px}
.pt-langbar{display:flex;justify-content:flex-end;gap:0;margin:-6px -8px 10px 0}
.pt-langbar a{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-decoration:none;
  color:var(--mute);padding:5px 10px;border-radius:var(--pill);
}
.pt-langbar a.is-on{background:var(--ink);color:var(--accent)}

/* ── formulieren ───────────────────────────────────────────────────── */
.pt-f{margin-bottom:14px}
.pt-f label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.pt-f .hint,.pt-check .hint{color:var(--mute);font-weight:400}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--rad-sm);
  color:var(--ink);font:inherit;font-size:14.5px;padding:10px 13px;min-height:44px;
  transition:border-color .18s,box-shadow .18s;
}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft);
}
.pt-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.pt-grid2{grid-template-columns:1fr}}
.pt-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--sub);
  margin:6px 0 16px;cursor:pointer}
.pt-check input{width:17px;height:17px;min-height:0;margin-top:2px;accent-color:var(--ink)}
.pt-hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.pt-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pt-inline select,.pt-inline input{width:auto;min-height:40px}
.pt-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}

/* ── knoppen ───────────────────────────────────────────────────────── */
.pt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:var(--pill);border:1px solid var(--ink);
  background:var(--ink);color:var(--accent);
  font-family:var(--display);font-weight:600;font-size:14.5px;cursor:pointer;
  text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;
}
.pt-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(10,10,10,.18)}
.pt-btn:active{transform:none}
.pt-btn--sm{min-height:38px;padding:0 16px;font-size:13.5px}
.pt-btn--ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.pt-btn--ghost:hover{border-color:var(--ink);box-shadow:none}
.pt-btn--danger{color:var(--err);border-color:#F5CBC6}
.pt-btn--danger:hover{border-color:var(--err)}
.pt-card--dark .pt-btn{background:var(--accent);color:var(--ink);border-color:var(--accent)}

/* ── meldingen ─────────────────────────────────────────────────────── */
.pt-flash{
  border-radius:var(--rad-sm);padding:12px 16px;font-size:14px;font-weight:500;
  margin-bottom:16px;border:1px solid transparent;
}
.pt-flash.is-ok{background:var(--ok-soft);color:var(--ok);border-color:#C9E9D8}
.pt-flash.is-err{background:var(--err-soft);color:var(--err);border-color:#F5CBC6}

/* ── statistieken ──────────────────────────────────────────────────── */
.pt-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.pt-stats{grid-template-columns:repeat(2,1fr)}}
.pt-stat{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad);
  padding:16px 18px;box-shadow:var(--shadow);
}
.pt-stat__v{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.01em}
.pt-stat__k{font-size:12px;color:var(--mute);margin-top:2px;letter-spacing:.02em}
.pt-stat--hl{background:var(--ink);border-color:var(--ink)}
.pt-stat--hl .pt-stat__v{color:var(--accent)}
.pt-stat--hl .pt-stat__k{color:var(--dim)}

/* ── tabbladen ─────────────────────────────────────────────────────── */
.pt-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pt-tab{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--sub);padding:9px 16px;border-radius:var(--pill);
  border:1px solid var(--border);background:var(--card);
}
.pt-tab:hover{border-color:var(--ink);color:var(--ink)}
.pt-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--accent)}

/* ── tabellen ──────────────────────────────────────────────────────── */
.pt-tablewrap{overflow-x:auto;margin:0 -6px}
.pt-t{width:100%;border-collapse:collapse;min-width:640px}
.pt-t th{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-align:left;font-weight:500;
  padding:8px 10px;border-bottom:1px solid var(--border);
}
.pt-t td{padding:13px 10px;border-bottom:1px solid var(--border);vertical-align:top;font-size:14px}
.pt-t tbody tr:last-child td{border-bottom:none}
.pt-t .r{text-align:right}
.pt-t strong{font-weight:600}

.pt-badge{
  display:inline-block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:5px 11px;border-radius:var(--pill);white-space:nowrap;
  color:#0A0A0A;background:var(--border);
}
.pt-sub{color:var(--mute);font-size:12.5px}
.mono{font-family:var(--mono);font-size:13px}

/* ── open/dicht-blokken ────────────────────────────────────────────── */
.pt-drawer{
  background:var(--paper);border:1px solid var(--border);border-radius:var(--rad-sm);
  padding:18px 20px;margin-top:4px;
}
.pt-empty{
  border:1px dashed var(--border);border-radius:var(--rad-sm);padding:26px;
  text-align:center;color:var(--mute);font-size:14px;
}

/* ── sleutel/waarde-lijsten ────────────────────────────────────────── */
.pt-kv{display:grid;grid-template-columns:150px 1fr;gap:7px 16px;margin:0;font-size:14px}
.pt-kv dt{color:var(--mute)}
.pt-kv dd{margin:0}
@media(max-width:560px){.pt-kv{grid-template-columns:1fr}.pt-kv dt{margin-top:6px}}
.pt-note{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--rad-sm);padding:12px 15px;font-size:14px;white-space:pre-wrap;
}

/* ── kopieerknoppen en reflinks ────────────────────────────────────── */
.pt-copy{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--border);color:var(--sub);
  border-radius:var(--pill);padding:5px 12px;cursor:pointer;transition:all .18s;
}
.pt-copy:hover{border-color:var(--ink);color:var(--ink)}
.pt-copy.is-done{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pt-card--dark .pt-copy{border-color:var(--border-lt);color:var(--dim)}
.pt-card--dark .pt-copy:hover{border-color:var(--accent);color:var(--accent)}
.pt-card--dark .pt-copy.is-done{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pt-reflink{
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
  border:1px solid var(--border-lt);border-radius:var(--rad-sm);
  padding:11px 14px;margin-top:10px;
}
.pt-reflink code{
  font-family:var(--mono);font-size:12.5px;color:var(--accent);
  overflow-wrap:anywhere;flex:1;
}

/* ── wachtwoordvenster (eenmalig tonen) ────────────────────────────── */
.pt-pw{
  font-family:var(--mono);font-size:22px;letter-spacing:.06em;color:var(--accent);
  margin:10px 0 8px;
}

/* ── stappen en staffels in de donkere kaart ───────────────────────── */
.pt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}
@media(max-width:820px){.pt-steps{grid-template-columns:repeat(2,1fr)}}
.pt-step__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.pt-step__t{font-family:var(--display);font-weight:600;font-size:14.5px;margin-bottom:4px;color:#F5F1EC}
.pt-step__d{font-size:12.5px;color:var(--dim);line-height:1.5}
.pt-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:820px){.pt-tiers{grid-template-columns:repeat(2,1fr)}}
.pt-tier{
  border:1px solid var(--border-lt);border-radius:var(--rad-sm);padding:12px 14px;
  transition:border-color .2s;
}
.pt-tier:hover{border-color:rgba(200,255,0,.45)}
.pt-tier__v{font-family:var(--display);font-weight:700;font-size:19px;color:var(--accent)}
.pt-tier__k{font-size:11.5px;color:var(--dim);margin-top:2px}

/* ── klein leed ────────────────────────────────────────────────────── */
::selection{background:var(--accent);color:var(--ink)}