/* =========================================================
   vaten.css — interactieve vaten van Liebig
   Bouwt voort op general.css (variabelen en lettertypes).
   Alle klassen beginnen met .vat- zodat niets botst met de
   bestaande sitebrede styling.
   ========================================================= */

/* ---------- kleuren van de tekening (canvas) ---------- */
:root {
  --vat-water:            var(--graph-blauw);
  --vat-water-diep:       #34587e;
  --vat-water-oppervlak:  var(--graph-blauw-light);
  --vat-hout:             #a8723a;
  --vat-hout-binnen:      #4a3018;
  --vat-hoepel:           #5d666b;
  --vat-plank-tekst:      #fff8ee;
  --vat-inkt:             #474747;
  --vat-papier:           #f6f6f6;
  --vat-lek:              var(--contrast-color);
  --vat-ok:               var(--main-color);
  --vat-overschot:        #f39a3d;
}

[data-theme="dark"] {
  --vat-water:            #6d93bd;
  --vat-water-diep:       #2e4d70;
  --vat-water-oppervlak:  #a9c0d9;
  --vat-hout:             #9c6a37;
  --vat-hout-binnen:      #2a1b0d;
  --vat-hoepel:           #7d878c;
  --vat-inkt:             #dcdcdc;
  --vat-papier:           #2b2b2b;
  --vat-overschot:        #fbbe7c;
}

/* ---------- vlak van de figuur ---------- */
.vat-figuur {
  background-color: var(--grey-overlay);
  border-radius: 10px;
  padding: 1rem clamp(10px, 2.5%, 24px);
  margin: 1em 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.3;
}

.vat-vaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}

.vat-vaten.vat-enkel {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.vat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vat h3 {
  text-align: center;
}

.vat-paneel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.vat-paneel:empty {
  display: none;
}

.vat-canvas {
  width: 100%;
  max-width: 430px;
}

.vat-canvas canvas {
  display: block;
  width: 100%;
}

.vat-canvas canvas.vat-sleepbaar {
  touch-action: pan-y;
}

.vat-status {
  margin: 0;
  min-height: 1.4em;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.vat-status.is-lek { color: var(--vat-lek); }
.vat-status.is-ok  { color: var(--vat-ok); }

/* ---------- lijst met ambities (vinkjes en balkjes) ---------- */
.vat-lijst {
  background-color: var(--white-overlay);
  border-radius: 6px;
  padding: 8px 14px 10px;
  max-width: 100%;
}

.vat-lijst-titel {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
}

.vat-lijst ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vat-lijst li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.vat-lijst label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}

.vat-lijst input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 3px 0 0;
  flex: none;
  cursor: pointer;
  border: 1.5px solid var(--text);
  border-radius: 1px;
  background-color: var(--white-overlay);
}

.vat-lijst input:checked {
  border: 0;
}

.vat-lijst input:checked::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1.27px;
  width: 16.9px;
  height: 15.25px;
  background-color: var(--main-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='33.3 28 85.5 77.1'%3E%3Cpath d='M85.9 37.9H36.8V101.6H100.6V54' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M50.35 51.34a7.13 7.13 0 0 0-3.62 7.18c.83 3.18 7.59 4.03 15.36 17.88l4.2 8.3a7.14 7.14 0 0 0 12.25 .36l4.42-9.58c13.44-26.59 29.5-34.45 30.37-36.12 2.48-4.76-4.1-10.97-11.42-8.77-2.01.61-14.17 8.66-28.3 31.6l-1.57 2.55-2.16-3.07C61.7 51.31 56.65 47.34 50.35 51.34Z'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='33.3 28 85.5 77.1'%3E%3Cpath d='M85.9 37.9H36.8V101.6H100.6V54' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M50.35 51.34a7.13 7.13 0 0 0-3.62 7.18c.83 3.18 7.59 4.03 15.36 17.88l4.2 8.3a7.14 7.14 0 0 0 12.25 .36l4.42-9.58c13.44-26.59 29.5-34.45 30.37-36.12 2.48-4.76-4.1-10.97-11.42-8.77-2.01.61-14.17 8.66-28.3 31.6l-1.57 2.55-2.16-3.07C61.7 51.31 56.65 47.34 50.35 51.34Z'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
}

.vat-lijst input:not(:checked) + span {
  opacity: .5;
  text-decoration: line-through;
}

.vat-balk {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.vat-balk-spoor {
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--very-subtle-text);
  overflow: hidden;
}

.vat-balk-vulling {
  display: block;
  height: 100%;
  background-color: var(--vat-water);
  border-radius: 3px;
  transition: width .35s;
}

.vat-balk-getal {
  font-size: 11px;
  opacity: .75;
  width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vat-uit .vat-balk-naam {
  opacity: .5;
}

/* ---------- schuifje (fig. communicerend) ---------- */
.vat-schuif {
  background-color: var(--white-overlay);
  border-radius: 6px;
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 270px);
}

.vat-schuif label {
  font-weight: 600;
  text-align: center;
}

.vat-schuif-rij {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vat-schuif input {
  flex: 1;
  min-width: 0;
  margin: 0;
  accent-color: var(--main-color);
}

.vat-schuif output {
  width: 2.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vat-schuif-effect {
  font-size: 11px;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}

/* ---------- bediening onder de vaten ---------- */
.vat-voet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: center;
  border-top: .75px solid var(--very-subtle-text);
  padding-top: 12px;
}

.vat-keuze-groep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
}

.vat-keuze-label {
  font-size: 12px;
  font-weight: 600;
}

.vat-keuze {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  border: .75px solid var(--very-subtle-text);
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--white-overlay);
}

.vat-keuze input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vat-keuze label {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  border-left: .75px solid var(--very-subtle-text);
}

.vat-keuze label:first-of-type {
  border-left: none;
}

.vat-keuze input:checked + label {
  background-color: var(--text);
  color: var(--background);
}

.vat-keuze input:focus-visible + label {
  outline: 2px solid var(--main-color);
  outline-offset: -2px;
}

.vat-schakelaar {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}

.vat-schakelaar input {
  appearance: none;
  flex: none;
  width: 38px;
  height: 21px;
  border-radius: 11px;
  background-color: var(--very-subtle-text);
  position: relative;
  cursor: pointer;
  margin: 0;
  transition: background-color .2s;
}

.vat-schakelaar input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--white-overlay);
  transition: transform .2s;
}

.vat-schakelaar input:checked {
  background-color: var(--main-color);
}

.vat-schakelaar input:checked::after {
  transform: translateX(17px);
}

.vat-figuur :focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

/* ---------- oranje vakje in een onderschrift ---------- */
.vat-swatch {
  display: inline-block;
  width: .8em;
  height: .8em;
  border: 2px solid var(--vat-overschot);
  vertical-align: -.05em;
  margin: 0 .15em;
}

/* ---------- mobiel: keuzeknoppen onder elkaar ---------- */
@media (max-width: 600px) {
  .vat-keuze {
    flex-direction: column;
    flex-wrap: nowrap;
    width: min(100%, 260px);
  }

  .vat-keuze label {
    text-align: center;
    border-left: none;
    border-top: .75px solid var(--very-subtle-text);
  }

  .vat-keuze label:first-of-type {
    border-top: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vat-figuur * { transition: none !important; }
}