/* ====== BASIS ====== */
.vsr-wrap{max-width:1100px;margin:0 auto;padding:0 12px;box-sizing:border-box}
.vsr-alert{padding:12px;border:1px solid #bbf7d0;background:#ecfdf5;border-radius:12px;color:#166534;margin:12px 0}

/* ====== BUTTONS ====== */
.vsr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:10px;background:#fff;border:1px solid #e5e7eb;
  font-weight:800;font-size:14px;text-decoration:none;line-height:1.2;
  box-shadow:0 2px 6px rgba(0,0,0,.06);white-space:nowrap
}
.vsr-btn--disabled{opacity:.55;pointer-events:none}
.vsr-btn--primary{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 3px 10px rgba(37,99,235,.2)}

/* ====== CHIPS / LABELS ====== */
.vsr-label{display:inline-block;padding:4px 9px;border-radius:999px;border:1px solid #eef2f7;background:#f8fafc;font-weight:700;font-size:12px;white-space:nowrap}
.vsr-label--cancel{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.vsr-date-stack{display:flex;flex-direction:column;gap:4px}
.vsr-label--date{background:#e6f0ff;border-color:#cfe0ff;color:#075985;border-radius:9px;font-weight:700}

/* ====== TOOLBAR (CATEGORIEEN) ====== */
.vsr-course-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.vsr-course-toolbar .vsr-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#f8fafc;border:1px solid #e5e7eb;text-decoration:none;font-weight:800;color:#0b1220}
.vsr-course-toolbar .vsr-chip--active{background:#2563eb;color:#fff;border-color:#2563eb}

/* ====== LIJST WEERGAVE ====== */
.vsr-list{margin:8px 0 18px}
.vsr-table{
  width:100%;
  border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;
  border-collapse:separate;border-spacing:0; /* auto layout: laat browser eerlijk verdelen */
}
.vsr-table th,.vsr-table td{
  padding:12px 14px;border-bottom:1px solid #eef2f7;text-align:left;
  vertical-align:middle; /* <— voorkomt “lege stroken” */
  line-height:1.35
}
.vsr-table th{color:#64748b;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.35px;background:#f8fafc}

/* Kolommen: alleen waar logisch niet breken */
.vsr-table th:nth-child(1), .vsr-table td:nth-child(1){white-space:nowrap}       /* Datum */
.vsr-table th:nth-child(5), .vsr-table td:nth-child(5){white-space:nowrap;text-align:center} /* Duur */
.vsr-table th:nth-child(6), .vsr-table td:nth-child(6){white-space:nowrap}       /* Locatie */
.vsr-table th:nth-child(7), .vsr-table td:nth-child(7){white-space:nowrap;text-align:right}  /* Kosten */
.vsr-table th:nth-child(8), .vsr-table td:nth-child(8){white-space:nowrap;text-align:center} /* Beschikbaar */
.vsr-table th:nth-child(9), .vsr-table td:nth-child(9){white-space:nowrap;text-align:right}  /* Actie */

/* Naam cursus: 2 regels max, geen rare clipping */
.vsr-table td:nth-child(3){
  max-width:340px;      /* geeft ruimte zodat hij minder snel afbreekt */
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* DAGEN: compacte pille‑stapel, breekt op natuurlijke plekken (spatie) */
.vsr-table td:nth-child(4){max-width:340px}
.vsr-label--date{white-space:normal}

/* Categorie‑badge in kolom 2 blijft 1 regel */
.vsr-table td:nth-child(2) .vsr-label{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Actieknop valt nooit buiten de cel */
.vsr-table td:last-child .vsr-btn{display:inline-block;max-width:116px;overflow:hidden;text-overflow:ellipsis}

/* ====== CARDS (mobiel) ====== */
@media (max-width:900px){
  .vsr-table thead{display:none}
  .vsr-table,.vsr-table tbody,.vsr-table tr,.vsr-table td{display:block;width:100%}
  .vsr-table tr{background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,.05);margin-bottom:14px;padding:10px 12px}
  .vsr-table td{padding:6px 0;border-bottom:1px solid #eef2f7}
  .vsr-table td:last-child{border-bottom:none;margin-top:8px;text-align:left}
  .vsr-table td:before{content:attr(data-label);display:block;font-size:12px;font-weight:800;color:#64748b;margin-bottom:4px}
  .vsr-date-stack{flex-direction:row;flex-wrap:wrap;gap:6px}
}
/* === TABLE AUTO LAYOUT + NETTE RIJHOOGTE === */
.vsr-table{
  table-layout:auto !important;   /* laat browser eerlijk verdelen */
  border-collapse:separate;
  border-spacing:0;
}
.vsr-table th,
.vsr-table td{
  height:auto !important;         /* geen vaste hoogte */
  vertical-align: middle !important;
  line-height: 1.35;
}

/* === KOLOM-NIET-BREKEN waar logisch === */
.vsr-table th:nth-child(1), .vsr-table td:nth-child(1){ white-space:nowrap }             /* datum */
.vsr-table th:nth-child(5), .vsr-table td:nth-child(5){ white-space:nowrap; text-align:center } /* duur */
.vsr-table th:nth-child(6), .vsr-table td:nth-child(6){ white-space:nowrap }             /* locatie */
.vsr-table th:nth-child(7), .vsr-table td:nth-child(7){ white-space:nowrap; text-align:right }  /* kosten */
.vsr-table th:nth-child(8), .vsr-table td:nth-child(8){ white-space:nowrap; text-align:center } /* beschikbaar */
.vsr-table th:nth-child(9), .vsr-table td:nth-child(9){ white-space:nowrap; text-align:right; width:1% } /* actie compact */

/* === NAAM CURSUS: 3 regels, nette breukpunten === */
.vsr-table td:nth-child(3){
  max-width:none;                 /* laat meeschalen */
  display:-webkit-box;
  -webkit-line-clamp:3;           /* 3 regels i.p.v. 2 */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break: normal;
  overflow-wrap: anywhere;        /* breekt op spaties/ligaturen, niet per letter */
}

/* === DAGEN: pillen blijven 1 regel; de PILLEN wrappen wel === */
.vsr-table td:nth-child(4){ max-width:none }       /* kolom mag meeschalen */
.vsr-date-stack{
  display:flex;
  flex-direction: row !important; /* naast elkaar */
  flex-wrap: wrap;                 /* en zo nodig door naar volgende regel */
  gap: 6px;
}
.vsr-label--date{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap !important;  /* 1 pil = 1 regel */
  padding:6px 10px;
  border-radius:10px;
  min-width:0;                    /* nooit geforceerd smal */
}

/* === CATEGORIE-BADGE blijft 1 regel in kolom 2 === */
.vsr-table td:nth-child(2) .vsr-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* === ACTIEKNOP past altijd in de cel === */
.vsr-table td:last-child .vsr-btn{
  display:inline-block;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* === iPad/smaller desktop: geef ‘naam’ & ‘dagen’ iets meer adem === */
@media (max-width:1100px){
  .vsr-table td:nth-child(3),
  .vsr-table td:nth-child(4){ word-break: normal; overflow-wrap:anywhere; }
}
/* ——— CATEGORIE: label mag afbreken op 2–3 regels ——— */
.vsr-table td:nth-child(2) .vsr-label{
  white-space: normal !important;     /* niet meer 1 regel */
  overflow: visible;
  text-overflow: clip;
  display: inline-block;
  line-height: 1.25;
  padding: 4px 8px;                    /* iets compacter */
  max-width: 100%;
  word-break: break-word;              /* breekt lange woorden/termen */
}

/* ——— NAAM CURSUS: meer regels, geen “halve titel” ——— */
.vsr-table td:nth-child(3){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;               /* was 2; toon tot 4 regels */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Geef de titel op kleinere schermen net wat extra lucht */
@media (max-width: 1100px){
  .vsr-table td:nth-child(3){ -webkit-line-clamp: 5; }
}

/* ——— DAGEN-pillen: iets compacter, wrappen netjes in de kolom ——— */
.vsr-date-stack{ gap: 6px; flex-wrap: wrap; }
.vsr-label--date{
  font-size: 12px;
  padding: 5px 8px;
  white-space: nowrap;                  /* 1 pil blijft 1 regel */
}

/* ——— Maak “smalle” kolommen echt smal, zodat NAAM meer ruimte krijgt ——— */
.vsr-table th:nth-child(7), .vsr-table td:nth-child(7){ width: 1%; text-align: right; white-space: nowrap; } /* Kosten */
.vsr-table th:nth-child(8), .vsr-table td:nth-child(8){ width: 1%; text-align: center; white-space: nowrap; } /* Beschikbaar */
.vsr-table th:nth-child(9), .vsr-table td:nth-child(9){ width: 1%; text-align: right; white-space: nowrap; }  /* Actie */

/* ——— NAAM CURSUS: netjes afbreken (niet midden in woorden) ——— */
.vsr-table td:nth-child(3){
  /* laat meer regels zien maar zonder lelijke woordbreuken */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;      /* max 4 regels zichtbaar */
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: normal;
  word-break: normal;          /* geen rare breuken */
  overflow-wrap: normal;       /* override op 'anywhere' */
  hyphens: auto;               /* nette syllable-hyphenation waar nodig */
}

/* Geef de naam-kolom wat meer ruimte zodat hij minder snel hoeft te breken */
.vsr-table thead th:nth-child(3),
.vsr-table tbody td:nth-child(3){ width: 280px; }

/* ——— CATEGORIE-LABEL: compact, mag op 2–3 regels, geen mega-pill ——— */
.vsr-table td:nth-child(2) .vsr-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  line-height: 1.15;

  max-width: 130px;            /* cap zodat hij niet uitzet */
  text-align: center;

  white-space: normal;         /* mag afbreken op spaties */
  word-break: normal;
  overflow-wrap: break-word;   /* breek lange termen netjes */
}

/* iets kleinere tekst voor labels met lange namen */
.vsr-table td:nth-child(2) .vsr-label{ font-size: 11.5px; }

/* ——— DAGEN-pillen: compact en op 1 regel per pil ——— */
.vsr-date-stack{ gap: 6px; flex-wrap: wrap; }
.vsr-label--date{ font-size: 12px; padding: 5px 8px; white-space: nowrap; }

/* Smalle kolommen compact houden → meer ruimte voor NAAM */
.vsr-table th:nth-child(7), .vsr-table td:nth-child(7){ width: 1%; white-space: nowrap; text-align: right; }  /* kosten */
.vsr-table th:nth-child(8), .vsr-table td:nth-child(8){ width: 1%; white-space: nowrap; text-align: center; } /* beschikbaar */
.vsr-table th:nth-child(9), .vsr-table td:nth-child(9){ width: 1%; white-space: nowrap; text-align: right; }  /* actie */

/* ==============================
   VS-Reserveringen • Laptop/Tablet styling
   - past binnen frame
   - kleinere typografie
   - categorie = chip met lichte schaduw (gecentreerd)
   - inschrijfknop compacter + rond + schaduw
   - tabel met ronde hoeken en ‘zwevende’ look
   - cursus-chips bovenin subtieler
   ============================== */

/* 1) Frame & basis */
.vsr-wrap{
  max-width:1080px;          /* passend binnen site frame */
  margin:0 auto;
  padding:0 14px;
  box-sizing:border-box;
  overflow-x:hidden;         /* nooit buiten de pagina */
}

/* 2) Subtiele cursus-chips bovenaan (minder prominent) */
.vsr-course-toolbar{ gap:6px; margin-bottom:10px; }
.vsr-course-toolbar .vsr-chip{
  padding:6px 10px;
  font-size:12.5px;
  background:#f6f7fb;
  border:1px solid #e6e8ef;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  color:#0b1220;
}
.vsr-course-toolbar .vsr-chip.vsr-chip--active{
  background:#2a5be7; border-color:#2a5be7; color:#fff;
  box-shadow:0 6px 18px rgba(42,91,231,.18);
}

/* 3) Tabel: zwevend, rond, passend */
.vsr-list{ margin:6px 0 16px; }
.vsr-table{
  width:100%;
  table-layout:auto;               /* inhoud bepaalt, geen rare afbrekingen */
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #e6e8ef;
  border-radius:14px;              /* ronde hoeken */
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 26px rgba(9,18,38,.06); /* ‘zwevend’ */
  font-size:13.5px;                /* kleiner geheel */
  line-height:1.35;
}
.vsr-table th{
  background:#f8fafc;
  font-weight:800;
  font-size:11.5px;                /* kleinere header */
  color:#6b7280;
  letter-spacing:.2px;
  text-transform:uppercase;
  padding:10px 12px;
}
.vsr-table td{
  padding:12px 12px;
  vertical-align:middle;           /* rij wordt netjes even hoog */
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
  border-bottom:1px solid #eef2f7;
}
.vsr-table tr:last-child td{ border-bottom:none; }

/* 4) Kolommen (procentueel; blijft binnen frame) */
.vsr-table thead th:nth-child(1), .vsr-table tbody td:nth-child(1){ width:11%; white-space:nowrap; } /* Datum */
.vsr-table thead th:nth-child(2), .vsr-table tbody td:nth-child(2){ width:13%; text-align:center; }  /* Categorie */
.vsr-table thead th:nth-child(3), .vsr-table tbody td:nth-child(3){ width:23%; }                      /* Naam cursus */
.vsr-table thead th:nth-child(4), .vsr-table tbody td:nth-child(4){ width:21%; }                      /* Dagen */
.vsr-table thead th:nth-child(5), .vsr-table tbody td:nth-child(5){ width:7%;  text-align:center; white-space:nowrap; } /* Duur */
.vsr-table thead th:nth-child(6), .vsr-table tbody td:nth-child(6){ width:12%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Locatie */
.vsr-table thead th:nth-child(7), .vsr-table tbody td:nth-child(7){ width:6%;  text-align:right; white-space:nowrap; } /* Kosten */
.vsr-table thead th:nth-child(8), .vsr-table tbody td:nth-child(8){ width:4%;  text-align:center; white-space:nowrap; } /* Beschikbaar */
.vsr-table thead th:nth-child(9), .vsr-table tbody td:nth-child(9){ width:3%;  text-align:right; }    /* Actie */

/* 5) Categorie = label met lichte schaduw, gecentreerd in kolom */
.vsr-table td:nth-child(2){ text-align:center; }
.vsr-table td:nth-child(2) .vsr-label{
  padding:6px 10px;
  border-radius:999px;
  background:#f2f5fb;
  border:1px solid #e6e8ef;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  font-weight:800;
  font-size:12px;
  color:#0b1220;
  margin:0 auto; display:inline-block; max-width:100%;
  white-space:normal;              /* mag op 2 regels wanneer nodig */
  text-align:center;
}

/* 6) Dagen: pillen iets compacter, wrappen per pil (niet per letter) */
.vsr-date-stack{ display:flex; flex-wrap:wrap; gap:6px; }
.vsr-label--date{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:10px;
  background:#e6f0ff; color:#075985;
  box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px #cfe0ff;
  font-size:12.5px;
  white-space:nowrap;
}

/* 7) Naam cursus: beter leesbaar, max 3 regels i.p.v. agressief afbreken */
.vsr-table td:nth-child(3){
  display:-webkit-box;
  -webkit-line-clamp:3;           /* max 3 regels */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  hyphens:auto;
}

/* 8) Inschrijfknop: kleiner, ronde hoeken, schaduw */
.vsr-btn{
  padding:8px 12px;
  font-size:12.5px;
  border-radius:12px;
  border:1px solid #e6e8ef;
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  min-width:90px;
}
.vsr-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.vsr-btn.vsr-btn--primary{
  background:#2563eb; color:#fff; border-color:#2563eb;
  box-shadow:0 8px 22px rgba(37,99,235,.22);
}
.vsr-table td:last-child .vsr-btn{ display:inline-block; max-width:100%; white-space:nowrap; }

/* 9) Tablet-breedtes: net iets compacter zodat niets ‘uitsteekt’ */
@media (max-width:1100px){
  .vsr-table thead th:nth-child(3), .vsr-table tbody td:nth-child(3){ width:21%; }
  .vsr-table thead th:nth-child(4), .vsr-table tbody td:nth-child(4){ width:23%; }
  .vsr-table thead th:nth-child(9), .vsr-table tbody td:nth-child(9){ width:4%;  }
}

/* Fix voor te smalle "Naam cursus" kolom */
.vsr-table thead th:nth-child(1),
.vsr-table tbody td:nth-child(1){ width: 10%; }  /* Datum compacter */

.vsr-table thead th:nth-child(2),
.vsr-table tbody td:nth-child(2){ width: 12%; }  /* Categorie compacter */

.vsr-table thead th:nth-child(3),
.vsr-table tbody td:nth-child(3){
  width: 28%;                     /* Naam cursus krijgt meer ruimte */
  white-space: normal;
  word-break: keep-all;           /* niet halverwege woorden breken */
  overflow-wrap: break-word;      /* alleen op spaties */
  hyphens: auto;
}

/* Dagen wat smaller maken zodat ze beter naast elkaar passen */
.vsr-table thead th:nth-child(4),
.vsr-table tbody td:nth-child(4){ width: 20%; }

/* Naam cursus kolom - geen rare woordafbreking */
.vsr-table td:nth-child(3),
.vsr-table th:nth-child(3) {
  width: 30%;              /* meer ruimte */
  white-space: normal;     /* tekst mag doorlopen */
  word-break: normal;      /* niet per letter breken */
  overflow-wrap: anywhere; /* alleen bij spaties/te lange woorden */
  hyphens: none;           /* geen afbreekstreepjes */
  font-size: 14px;         /* iets kleinere tekst */
  line-height: 1.4;
}

/* Inschrijven-knop altijd goed zichtbaar */
.vsr-table td:last-child button,
.vsr-table td:last-child a {
  display: inline-block;
  min-width: 100px;        /* altijd ruimte voor hele woord */
  text-align: center;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  white-space: nowrap;     /* tekst blijft op 1 regel */
}
/* === FIX: natural column sizing + readable course names === */

/* 1) Stop forcing fixed widths; let browser size columns naturally */
.vsr-table{
  table-layout: auto !important;
}

/* 2) General cell breaking rules (no per-letter breaks) */
.vsr-table th,
.vsr-table td{
  white-space: normal;       /* allow wrapping, but not per character */
  word-break: normal;        /* don't break inside words */
  overflow-wrap: break-word; /* only break when a word is truly too long */
  hyphens: manual;           /* never auto-hyphenate */
  line-height: 1.35;
}

/* 3) Reserve sensible space for key columns (min-widths, not hard widths) */
.vsr-table td:nth-child(1),  /* Datum */
.vsr-table th:nth-child(1){
  min-width: 110px;
  white-space: nowrap;
}

.vsr-table td:nth-child(2),  /* Categorie */
.vsr-table th:nth-child(2){
  min-width: 140px;
}

.vsr-table td:nth-child(3),  /* Naam cursus */
.vsr-table th:nth-child(3){
  min-width: 280px;          /* give it room so it won't collapse */
  max-width: 520px;          /* but keep it reasonable on wide screens */
  font-size: 14px;
}

/* Dagen: pills can wrap to next line, but each pill stays on one line */
.vsr-table td:nth-child(4),
.vsr-table th:nth-child(4){
  min-width: 220px;
}
.vsr-date-stack{ display:flex; flex-wrap:wrap; gap:6px; }
.vsr-label--date{ white-space: nowrap; }

/* Duur / Locatie / Kosten can be compact */
.vsr-table td:nth-child(5), .vsr-table th:nth-child(5){ white-space: nowrap; }
.vsr-table td:nth-child(6), .vsr-table th:nth-child(6){ white-space: nowrap; }
.vsr-table td:nth-child(7), .vsr-table th:nth-child(7){ white-space: nowrap; }

/* Beschikbaar small and centered */
.vsr-table td:nth-child(8), .vsr-table th:nth-child(8){
  white-space: nowrap;
  text-align: center;
}

/* Actie: make sure the button never truncates */
.vsr-table td:nth-child(9), .vsr-table th:nth-child(9){
  min-width: 120px;
  text-align: right;
}
.vsr-table td:last-child a.vsr-btn,
.vsr-table td:last-child button.vsr-btn{
  display: inline-block;
  white-space: nowrap;
  min-width: 110px;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  font-size: 14px;
}

/* (optional) make the category chip centered with light shadow */
.vsr-table td:nth-child(2) .vsr-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  margin: 0 auto;            /* center in the column */
}
/* === Dagen labels compacter en strakker === */
.vsr-label--date {
  background: #f5f7fb;
  border: 1px solid #d9e0eb;
  border-radius: 6px;
  padding: 4px 8px;          /* compacter */
  font-size: 12px;           /* kleiner lettertype */
  font-weight: 500;
  color: #333;
  white-space: nowrap;       /* tekst blijft op 1 regel */
  line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* meerdere dagen naast elkaar mooi laten stapelen */
.vsr-date-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;             /* horizontaal + verticaal ruimte */
  justify-content: flex-start;
}
/* === Dag labels strakker & subtiel === */
.vsr-label--date {
  display: inline-block;
  background: #f8fafc;
  border: 1px solid #e1e6ee;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #444;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Container voor meerdere dagen */
.vsr-date-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}
/* ==== NO SCROLL – vaste, passende kolommen op laptop/tablet ==== */

/* Hou alles binnen de site-breedte */
.vsr-wrap{max-width:1100px;margin:0 auto;padding:0 12px;box-sizing:border-box}

/* Tabel: vaste kolommen, nooit breder dan container */
.vsr-table{
  width:100%;
  table-layout:fixed;        /* <— belangrijkste: geen “uitrekken” */
  border-collapse:separate;
  border-spacing:0;
}

/* Compactere cellen + kleine tekst */
.vsr-table th,.vsr-table td{
  padding:10px 12px;
  vertical-align:middle;
  font-size:13px;
  line-height:1.35;
  overflow:hidden;           /* hou inhoud binnen kolom */
  word-break:break-word;
  white-space:normal;
}

/* Kolombreedtes in procenten (telt tot 100%, dus geen scroll) */
.vsr-table thead th:nth-child(1), .vsr-table tbody td:nth-child(1){width:10%} /* Datum */
.vsr-table thead th:nth-child(2), .vsr-table tbody td:nth-child(2){width:12%} /* Categorie */
.vsr-table thead th:nth-child(3), .vsr-table tbody td:nth-child(3){width:27%} /* Naam cursus */
.vsr-table thead th:nth-child(4), .vsr-table tbody td:nth-child(4){width:19%} /* Dagen */
.vsr-table thead th:nth-child(5), .vsr-table tbody td:nth-child(5){width:8%; text-align:center; white-space:nowrap} /* Duur */
.vsr-table thead th:nth-child(6), .vsr-table tbody td:nth-child(6){width:10%; white-space:nowrap} /* Locatie */
.vsr-table thead th:nth-child(7), .vsr-table tbody td:nth-child(7){width:7%;  text-align:right; white-space:nowrap} /* Kosten */
.vsr-table thead th:nth-child(8), .vsr-table tbody td:nth-child(8){width:4%;  text-align:center; white-space:nowrap} /* Beschikbaar */
.vsr-table thead th:nth-child(9), .vsr-table tbody td:nth-child(9){width:3%;  text-align:right; white-space:nowrap} /* Knop */

/* Naam cursus: maximaal 2 regels, daarna ellipsis (géén rare hard-wrap) */
.vsr-table td:nth-child(3){
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; white-space:normal;
}

/* Dagen-labels compacter, stapelen binnen de kolom */
.vsr-date-stack{display:flex;flex-direction:column;gap:6px}
.vsr-label--date{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:6px 10px; border-radius:10px;
  background:#eef2ff; box-shadow:inset 0 0 0 1px #dbe4ff;
  white-space:nowrap;           /* 1 regel per label */
}

/* Categorie-labels centreren en laten afbreken op 2 regels indien nodig */
.vsr-table td:nth-child(2){text-align:center}
.vsr-table td:nth-child(2) .vsr-label{
  display:inline-block; max-width:100%;
  font-size:12px; padding:6px 10px; border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  white-space:normal; line-height:1.2;
}

/* Inschrijfknop kleiner, ronde hoeken, blijft in kolom */
.vsr-btn{min-width:auto; padding:6px 10px; font-size:12px; border-radius:12px}
.vsr-table td:last-child .vsr-btn{display:inline-block}

/* “Zwevende” tabel-look + nette rijen */
.vsr-table{border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.vsr-table th{background:#f8fafc;color:#64748b;font-weight:800;letter-spacing:.4px}

/* iPad breedte (krapper): schuif ietsje ruimte naar “Dagen” zodat laatste kolommen niet verdwijnen */
@media (max-width:1100px){
  .vsr-table thead th:nth-child(3), .vsr-table tbody td:nth-child(3){width:25%}
  .vsr-table thead th:nth-child(4), .vsr-table tbody td:nth-child(4){width:21%}
  .vsr-table thead th:nth-child(9), .vsr-table tbody td:nth-child(9){width:4%}
}

/* Mobiel (≤900px): kaartlayout zonder horizontale scroll */
@media (max-width:900px){
  .vsr-table thead{display:none}
  .vsr-table,.vsr-table tbody,.vsr-table tr,.vsr-table td{display:block;width:100%}
  .vsr-table tr{background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,.05);margin-bottom:14px;padding:10px 12px}
  .vsr-table td{padding:6px 0;border-bottom:1px solid #eef2f7}
  .vsr-table td:last-child{border-bottom:none;text-align:left;margin-top:8px}
  .vsr-table td:before{content:attr(data-label);display:block;font-size:12px;font-weight:800;color:#64748b;margin-bottom:4px}
  .vsr-date-stack{flex-direction:row;flex-wrap:wrap;gap:6px}
}
/* === COMPACT, NO-SCROLL, EVERYTHING VISIBLE (laptop/tablet) === */

/* container */
.vsr-wrap{max-width:1100px;margin:0 auto;padding:0 12px;box-sizing:border-box}

/* table core */
.vsr-table{
  width:100%;
  table-layout:fixed;              /* keep columns inside frame */
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* cells: smaller type + tighter paddings */
.vsr-table th,.vsr-table td{
  padding:8px 10px;
  font-size:12.5px;
  line-height:1.3;
  vertical-align:middle;
  overflow:hidden;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;          /* nicer wrapping, no huge breaks */
}
.vsr-table th{
  background:#f8fafc;
  color:#64748b;
  font-weight:800;
  letter-spacing:.3px;
}

/* ------- column widths (sum ≈ 100%) ------- */
.vsr-table thead th:nth-child(1), .vsr-table tbody td:nth-child(1){width:9%;  white-space:nowrap;}  /* Datum  */
.vsr-table thead th:nth-child(2), .vsr-table tbody td:nth-child(2){width:11%; text-align:center;}   /* Categorie */
.vsr-table thead th:nth-child(3), .vsr-table tbody td:nth-child(3){width:30%; }                      /* Naam cursus */
.vsr-table thead th:nth-child(4), .vsr-table tbody td:nth-child(4){width:20%; }                      /* Dagen */
.vsr-table thead th:nth-child(5), .vsr-table tbody td:nth-child(5){width:7%;  text-align:center; white-space:nowrap;} /* Duur */
.vsr-table thead th:nth-child(6), .vsr-table tbody td:nth-child(6){width:9%;  white-space:nowrap;}   /* Locatie */
.vsr-table thead th:nth-child(7), .vsr-table tbody td:nth-child(7){width:6%;  text-align:right;  white-space:nowrap;} /* Kosten */
.vsr-table thead th:nth-child(8), .vsr-table tbody td:nth-child(8){width:4%;  text-align:center; white-space:nowrap;} /* Beschikbaar */
.vsr-table thead th:nth-child(9), .vsr-table tbody td:nth-child(9){width:4%;  text-align:right;  white-space:nowrap;} /* Knop */

/* Naam cursus: only 2 lines then ellipsis (no weird syllable breaks) */
.vsr-table td:nth-child(3){
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis;
  hyphens:auto;
}

/* Dagen: compact “pills”, stack vertically, small type */
.vsr-date-stack{display:flex;flex-direction:column;gap:6px}
.vsr-label--date{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px; padding:5px 9px; border-radius:10px;
  background:#eef2ff; box-shadow:inset 0 0 0 1px #dbe4ff;
  white-space:nowrap;
}

/* Categorie label: centered, may wrap to 2 lines not letter-by-letter */
.vsr-table td:nth-child(2) .vsr-label{
  display:inline-block; max-width:100%;
  padding:6px 10px; font-size:12px; line-height:1.2;
  white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
  border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* Smaller action button, kept inside column */
.vsr-btn{min-width:auto; padding:6px 9px; font-size:12px; border-radius:12px}
.vsr-table td:last-child .vsr-btn{display:inline-block}

/* Slightly more space to “Beschikbaar”/button on tight screens (iPad) */
@media (max-width:1100px){
  .vsr-table thead th:nth-child(3), .vsr-table tbody td:nth-child(3){width:28%}
  .vsr-table thead th:nth-child(4), .vsr-table tbody td:nth-child(4){width:21%}
  .vsr-table thead th:nth-child(9), .vsr-table tbody td:nth-child(9){width:5%}
}

/* Mobile (<=900px): card layout without horizontal scroll */
@media (max-width:900px){
  .vsr-table thead{display:none}
  .vsr-table,.vsr-table tbody,.vsr-table tr,.vsr-table td{display:block;width:100%}
  .vsr-table tr{background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,.05);margin-bottom:14px;padding:10px 12px}
  .vsr-table td{padding:6px 0;border-bottom:1px solid #eef2f7}
  .vsr-table td:last-child{border-bottom:none;text-align:left;margin-top:8px}
  .vsr-table td:before{content:attr(data-label);display:block;font-size:12px;font-weight:800;color:#64748b;margin-bottom:4px}
  .vsr-date-stack{flex-direction:row;flex-wrap:wrap;gap:6px}
  .vsr-label--date{white-space:nowrap}
}
/* === Naam cursus netjes afbreken & centreren === */
.vsr-table td:nth-child(3) {
  text-align: center;              /* centreren in de kolom */
  white-space: normal;             /* tekst mag afbreken */
  word-break: keep-all;            /* geen lelijke syllabe-breuken */
  overflow-wrap: anywhere;         /* afbreken alleen waar nodig */
  line-height: 1.4;
  font-weight: 500;

  /* optioneel max 3 regels, met ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* === Naam cursus, max 2 regels, gecentreerd === */
.vsr-table td:nth-child(3) {
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.3;
  font-weight: 500;

  display: -webkit-box;
  -webkit-line-clamp: 2;     /* max 2 regels */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Laatste kolommen compacter === */
.vsr-table td:last-child,
.vsr-table th:last-child {
  width: 110px; /* inschrijfknop smaller */
  text-align: center;
}

.vsr-table td:nth-last-child(2),
.vsr-table th:nth-last-child(2) {
  width: 90px; /* beschikbaar kolom smaller */
  text-align: center;
}

/* === Inschrijfknop compacter === */
.vsr-table .vsr-inschrijven {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* container */
.vsr-listblocks { display: flex; flex-direction: column; gap: 12px; }

/* item */
.vsr-item{
  display:grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(260px, 1fr);
  gap:16px; padding:14px; border:1px solid #e5e7eb; border-radius:14px;
  background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.vsr-item__meta .vsr-item__date{font-weight:700}
.vsr-item__title{font-weight:800;margin-top:6px}
.vsr-item__cat .vsr-label{margin:6px 0 0}

/* days */
.vsr-item__days{display:flex;flex-direction:column;gap:6px}
.vsr-label{display:inline-block;padding:6px 10px;border-radius:999px;background:#f8fafc;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:12px;font-weight:800}
.vsr-label--date{background:#e6f0ff;color:#075985;border-color:#cfe0ff;border-radius:10px}
.vsr-label--cancel{background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* right info */
.vsr-item__info{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.vsr-item__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}
.vsr-item__grid small{display:block;color:#6b7280;font-weight:700}

/* button klein en rond */
.vsr-btn{padding:8px 12px;border-radius:12px;min-width:96px;box-shadow:0 3px 10px rgba(0,0,0,.06);border:1px solid #e5e7eb;background:#fff}

/* chips bovenin bestaan al in je CSS */

/* ——— Formulier-kaart: strak kadreren, bovenop laten liggen ——— */
.vsr-wrap { position: relative; z-index: 0; }       /* context voor z-index */
.vsr-form--card{
  max-width: 920px;          /* niet te breed */
  margin: 0 auto 24px;       /* centreren, ruimte eronder */
  padding: 20px 22px;        /* wat meer ‘lucht’ */
  background: #fff;          /* echte witte kaart */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;                /* boven content erachter */
}

/* Titel + samenvatting mooi compact */
.vsr-summary{
  font-size: 15px;
  line-height: 1.45;
  color:#0f172a;
  margin: 0 0 14px;
}

/* Raster van velden: 2 kolommen desktop, 1 kolom mobiel */
.vsr-form-grid{ 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 12px;
}
@media (max-width: 700px){
  .vsr-form--card{ padding:16px; }
  .vsr-form-grid{ grid-template-columns: 1fr; }
}

/* Labels en inputs consistent */
.vsr-field label{ font-weight: 700; color:#111827; }
.vsr-field input{
  width:100%; padding:10px 12px;
  border:1px solid #cbd5e1; border-radius:10px; background:#fff;
}

/* Acties rechts, knoppen compacter met schaduw */
.vsr-actions{
  display:flex; gap:8px; justify-content:flex-end; margin-top: 8px;
}
.vsr-btn{
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.vsr-btn.vsr-btn--primary{
  background:#2563eb; color:#fff; border-color:#2563eb;
  box-shadow: 0 6px 18px rgba(37,99,235,.25);
}

/* Repeater-rijen netjes als kaartjes */
.vsr-part-row{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px;
  padding:10px; border:1px solid #e5e7eb; border-radius:10px; background:#fafafa;
}
@media (max-width:700px){ .vsr-part-row{ grid-template-columns:1fr; } }

/* ============= MOBIEL TUNING (telefoon) ============= */
@media (max-width: 768px){
  /* Paginarandjes & tussenruimte */
  .vsr-wrap{padding-left:12px;padding-right:12px}
  .vsr-listblocks{gap:14px}

  /* Chips bovenin: compacter en horizontaal scrollen */
  .vsr-course-toolbar{
    gap:8px; padding-bottom:4px; margin-bottom:10px;
    overflow-x:auto; white-space:nowrap; scrollbar-width:none;
  }
  .vsr-course-toolbar::-webkit-scrollbar{display:none;}
  .vsr-chip{font-size:.9rem; padding:8px 12px}

  /* Kaart als één kolom stapelen */
  .vsr-item{
    display:grid; grid-template-columns:1fr; align-items:flex-start;
    padding:14px; gap:10px;
  }

  /* Volgorde & typografie */
  .vsr-item__meta{order:1}
  .vsr-item__title{font-size:1.15rem; line-height:1.25; margin:0 0 4px}
  .vsr-item__date{font-size:.95rem; margin:0 0 6px}
  .vsr-item__cat{margin-top:6px}
  .vsr-label{font-size:.8rem; padding:4px 10px}
  .vsr-label--cancel{background:#fee2e2;color:#b91c1c} /* rood blijft duidelijk */

  /* Dagen: pills op eigen rij, netjes afbreken/wrap */
  .vsr-item__days{
    order:2; display:flex; flex-wrap:wrap; gap:6px;
  }
  .vsr-label--date{font-size:.8rem; padding:6px 8px}

  /* Rechtsblok (info + knop) onderaan en 2 kolommen */
  .vsr-item__info{order:3}
  .vsr-item__grid{
    display:grid; grid-template-columns:1fr 1fr; gap:8px 12px;
    margin-bottom:10px;
  }
  .vsr-item__grid small{display:block; opacity:.7; margin-bottom:2px; font-size:.75rem}
  .vsr-btn{font-size:.9rem; padding:8px 12px; border-radius:10px; align-self:flex-start}
}

/* Iets strakker op héél smal scherm */
@media (max-width: 420px){
  .vsr-item{padding:12px}
  .vsr-item__title{font-size:1.05rem}
  .vsr-label--date{font-size:.75rem}
  .vsr-item__grid{grid-template-columns:1fr; gap:6px}
}

/* === OVERRIDE • Grotere filterknoppen boven de inschrijvingen === */
.vsr-wrap .vsr-course-toolbar { 
  gap: 12px !important; 
  margin-bottom: 16px !important; 
}

.vsr-wrap .vsr-course-toolbar .vsr-chip{
  font-size: 16px !important;      /* grotere tekst */
  padding: 12px 20px !important;   /* meer ruimte in de knop */
  border-radius: 999px !important; /* mooie “pill” vorm */
  line-height: 1.25 !important;
}

/* Actieve (blauwe) knop iets prominenter */
.vsr-wrap .vsr-course-toolbar .vsr-chip--active{
  box-shadow: 0 8px 24px rgba(37,99,235,.22) !important;
  transform: translateY(-1px);
}

/* Mobiel iets compacter, maar nog steeds groter dan voorheen */
@media (max-width: 900px){
  .vsr-wrap .vsr-course-toolbar .vsr-chip{
    font-size: 15px !important;
    padding: 10px 16px !important;
  }
}