/* =========================================================
   VEZELMETER — vezels.nl
   Emerald Amber. Hoort bij [vezelmeter] en [vezeltabel].
   v2 — mobiel: balkkolom verborgen, geen horizontale scroll
   ========================================================= */

.vzm, .vzt {
  --vz-bosgroen:#0B3D2E;
  --vz-emerald:#00A860;
  --vz-amber:#E8A33D;
  --vz-mint:#EAF6EF;
  --vz-inkt:#12241B;
  --vz-lijn:#D8E4DC;
  --vz-amber-zacht:#FBF0DA;
  --vz-grijs:#5E7268;
  --vz-wit:#FFFFFF;
  --vz-display:'Fraunces', Georgia, serif;
  --vz-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vz-radius:18px;
}

/* alleen voor schermlezers */
.vzt__sr {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------
   MINI-VEZELMETER
   --------------------------------------------------------- */

.vzm { margin:0 0 2.5rem; font-family:var(--vz-body); }

.vzm__title {
  font-family:var(--vz-display);
  font-weight:700;
  font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  line-height:1.25;
  color:var(--vz-inkt);
  margin:0 0 1.25rem;
}

.vzm__card {
  border:1.5px solid var(--vz-lijn);
  border-radius:var(--vz-radius);
  overflow:hidden;
  background:var(--vz-wit);
}

.vzm__head {
  background:var(--vz-bosgroen);
  color:var(--vz-wit);
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:-0.01em;
  padding:1.1rem 1.5rem;
}

.vzm__list { list-style:none; margin:0; padding:0; }

.vzm__row {
  display:grid;
  grid-template-columns:minmax(120px,180px) 1fr auto;
  align-items:center;
  gap:1.25rem;
  padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--vz-lijn);
}
.vzm__row:last-child { border-bottom:0; }
.vzm__row.is-highlight { background:var(--vz-amber-zacht); }

.vzm__name { font-weight:700; font-size:1rem; color:var(--vz-inkt); }
.vzm__val  { font-size:1.0625rem; color:var(--vz-inkt); font-variant-numeric:tabular-nums; white-space:nowrap; }

.vzm__bar {
  display:block; height:11px;
  border-radius:99px;
  background:var(--vz-mint);
  overflow:hidden;
}
.vzm__fill {
  display:block; height:100%;
  width:var(--pct,0%);
  border-radius:99px;
  background:linear-gradient(90deg, var(--vz-emerald) 0%, var(--vz-amber) 100%);
}

.vzm__foot {
  margin:0;
  padding:1rem 1.5rem 1.15rem;
  border-top:1px solid var(--vz-lijn);
  font-size:0.8125rem;
  line-height:1.55;
  color:var(--vz-grijs);
}
.vzm__foot a { color:var(--vz-bosgroen); text-decoration:underline; text-underline-offset:3px; }
.vzm__foot a:hover { color:var(--vz-emerald); }

@media (max-width:560px) {
  .vzm__row {
    grid-template-columns:1fr auto;
    grid-template-areas:"naam waarde" "balk balk";
    gap:0.7rem 1rem;
    padding:1rem 1.15rem;
  }
  .vzm__name { grid-area:naam; }
  .vzm__val  { grid-area:waarde; }
  .vzm__bar  { grid-area:balk; height:9px; }
  .vzm__head, .vzm__foot { padding-left:1.15rem; padding-right:1.15rem; }

  /* v2 — naam mag afbreken, nooit de kaart oprekken */
  .vzm__name { overflow-wrap:anywhere; }
}

/* ---------------------------------------------------------
   GROTE VEZELTABEL
   --------------------------------------------------------- */

.vzt { font-family:var(--vz-body); margin:0 0 2.5rem; }

.vzt__card {
  border:1.5px solid var(--vz-lijn);
  border-radius:var(--vz-radius);
  overflow:hidden;
  background:var(--vz-wit);
}

.vzt__head { background:var(--vz-bosgroen); color:var(--vz-wit); padding:1.25rem 1.5rem; }
.vzt .vzt__head h2 {
  font-family:var(--vz-display);
  font-weight:700;
  font-size:clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height:1.25;
  margin:0 0 0.9rem;
  padding:0;
  color:var(--vz-wit);
}

.vzt__search { position:relative; }
.vzt .vzt__search input[type="search"] {
  appearance:none; -webkit-appearance:none;
  width:100%; box-sizing:border-box; height:auto; min-height:0;
  font-family:var(--vz-body); font-size:1rem; line-height:1.4;
  color:var(--vz-inkt);
  background:var(--vz-wit); background-image:none;
  border:0; border-radius:10px;
  box-shadow:none;
  padding:0.8rem 2.6rem 0.8rem 1rem;
  margin:0;
}
.vzt .vzt__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
.vzt__search input::placeholder { color:#8C9E95; }
.vzt__search input:focus-visible { outline:2.5px solid var(--vz-amber); outline-offset:2px; }
.vzt__search svg {
  position:absolute; right:0.95rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:#8C9E95; fill:none; stroke-width:2;
  pointer-events:none;
}

.vzt .vzt__chips { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; }

.vzt .vzt__chip,
.vzt button.vzt__chip {
  appearance:none; -webkit-appearance:none;
  display:inline-block; width:auto; min-width:0; min-height:0; height:auto;
  font-family:var(--vz-body); font-size:0.8125rem; font-weight:600;
  line-height:1.3; letter-spacing:normal; text-transform:none; text-decoration:none;
  color:var(--vz-mint);
  background:transparent; background-image:none;
  border:1.5px solid rgba(234,246,239,0.4);
  border-radius:99px;
  padding:0.42rem 0.9rem;
  margin:0;
  box-shadow:none;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vzt .vzt__chip:hover,
.vzt button.vzt__chip:hover {
  background:transparent; border-color:var(--vz-mint); color:var(--vz-wit);
}
.vzt .vzt__chip[aria-pressed="true"],
.vzt button.vzt__chip[aria-pressed="true"] {
  background:var(--vz-amber); border-color:var(--vz-amber); color:var(--vz-inkt);
}
.vzt .vzt__chip:focus-visible { outline:2.5px solid var(--vz-mint); outline-offset:2px; }

.vzt__scroll {
  max-height:560px;
  overflow-y:auto;
  overflow-x:hidden;          /* v2 — expliciet: nooit horizontaal scrollen */
  overscroll-behavior:contain;
}

.vzt table {
  width:100%; border-collapse:collapse; border-spacing:0;
  margin:0; border:0; background:none; font-size:inherit;
}
.vzt table tr, .vzt table td, .vzt table th { background-image:none; }
.vzt tbody tr:nth-child(odd) td, .vzt tbody tr:nth-child(even) td { background:transparent; }

.vzt thead th {
  position:sticky; top:0; z-index:2;
  background:var(--vz-mint); color:var(--vz-bosgroen);
  font-size:0.75rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  text-align:left;
  padding:0.75rem 1.5rem;
  border-bottom:1.5px solid var(--vz-lijn);
  white-space:nowrap;
}
.vzt thead th button {
  appearance:none; -webkit-appearance:none;
  font:inherit; color:inherit;
  background:none; background-image:none;
  border:0; border-radius:0; box-shadow:none;
  padding:0; margin:0; min-height:0; height:auto; width:auto;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:0.35rem;
  text-transform:inherit; letter-spacing:inherit;
}
.vzt th button:focus-visible { outline:2.5px solid var(--vz-emerald); outline-offset:3px; }
.vzt th .vzt__caret { opacity:0.35; font-size:0.7em; display:inline-block; }
.vzt th[aria-sort="ascending"] .vzt__caret,
.vzt th[aria-sort="descending"] .vzt__caret { opacity:1; }
.vzt th[aria-sort="descending"] .vzt__caret { transform:rotate(180deg); }

.vzt tbody td {
  padding:0.95rem 1.5rem;
  border-bottom:1px solid var(--vz-lijn);
  font-size:0.9375rem;
  color:var(--vz-inkt);
  vertical-align:middle;
}
.vzt tbody tr:last-child td { border-bottom:0; }
.vzt tbody tr:hover { background:#F7FBF8; }
.vzt tbody tr.is-highlight,
.vzt tbody tr.is-highlight:hover { background:var(--vz-amber-zacht); }

.vzt__naam { font-weight:700; }
.vzt__cat  { color:var(--vz-grijs); font-size:0.8125rem; }
.vzt__num  { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vzt__num--sterk { font-weight:600; }

.vzt__barcel { width:30%; min-width:110px; }
.vzt__bar {
  display:block; height:9px; border-radius:99px;
  background:var(--vz-mint); overflow:hidden;
}
.vzt__fill {
  display:block; height:100%; width:var(--pct,0%);
  border-radius:99px;
  background:linear-gradient(90deg, var(--vz-emerald) 0%, var(--vz-amber) 100%);
}
.vzt__bar.is-max .vzt__fill {
  background:linear-gradient(90deg, var(--vz-emerald) 0%, var(--vz-amber) 78%, #C97F16 100%);
}

.vzt__leeg { padding:2.5rem 1.5rem; text-align:center; color:var(--vz-grijs); font-size:0.9375rem; }
.vzt__leeg strong { display:block; color:var(--vz-inkt); margin-bottom:0.3rem; }

.vzt__foot {
  display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem;
  justify-content:space-between; align-items:baseline;
  padding:1rem 1.5rem 1.15rem;
  border-top:1.5px solid var(--vz-lijn);
  background:var(--vz-wit);
  font-size:0.8125rem; line-height:1.55; color:var(--vz-grijs);
}
.vzt__telling { font-weight:600; color:var(--vz-inkt); white-space:nowrap; }

/* ---------------------------------------------------------
   MOBIEL — alleen verticaal scrollen
   --------------------------------------------------------- */

@media (max-width:700px) {
  .vzt thead th, .vzt tbody td { padding-left:1.15rem; padding-right:1.15rem; }
  .vzt__col-cat, .vzt__col-portie { display:none; }
  .vzt__head, .vzt__foot { padding-left:1.15rem; padding-right:1.15rem; }
  .vzt__scroll { max-height:70vh; }

  /* v2 — balkkolom verbergen (th én td) */
  .vzt__barcel,
  .vzt thead th:nth-child(2),
  .vzt tbody td:nth-child(2) { display:none; }

  /* v2 — kolombreedtes hard vastzetten, min-width uitschakelen */
  .vzt table { table-layout:fixed; width:100%; }
  .vzt thead th:nth-child(1), .vzt tbody td:nth-child(1) { width:70%; min-width:0; }
  .vzt thead th:nth-child(3), .vzt tbody td:nth-child(3) { width:30%; min-width:0; }

  /* v2 — headers mogen over twee regels */
  .vzt thead th { white-space:normal; }

  /* v2 — hele woorden schuiven door naar de volgende regel.
     Alleen woorden van 12+ tekens krijgen een afbreekstreepje. */
  .vzt tbody td, .vzt__naam, .vzt__cat {
    overflow-wrap:break-word;
    word-break:normal;
    -webkit-hyphens:auto;
    hyphens:auto;
    -webkit-hyphenate-limit-before:6;
    -webkit-hyphenate-limit-after:4;
    hyphenate-limit-chars:12 6 4;
  }

  /* v2 — kaart kan nooit breder worden dan de viewport */
  .vzt, .vzt__card { max-width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .vzm *, .vzt * { transition:none !important; animation:none !important; }
}