/* ==========================================================================
   Dataformaat-omzetter (V2.52.0) – huisstijl; kaart, knop, veld, segment en schakel uit css/basis.css
   ========================================================================== */
.do { display: flex; flex-direction: column; gap: 16px; }
.do [hidden] { display: none !important; }
.do .kaart { padding: 20px; }
.do h2 { font: 600 1.1rem/1.3 var(--font-tekst); margin: 0; display: flex; align-items: center; gap: 8px; }
.do h2 svg.i { width: 18px; height: 18px; color: var(--merk); flex: none; }
.do .knop svg.i { width: 16px; height: 16px; }
.do-hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--tekst-3); line-height: 1.5; }

/* stappen */
.do-hoofd { display: flex; flex-direction: column; gap: 14px; }
.do-stap { display: flex; flex-direction: column; gap: 10px; }
.do .do-stap-kop { font-size: var(--fs-m); }
.do-stap-kop > b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--merk); color: #fff; font-size: 12px; flex: none; }
.do-balk { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.do-keuze { display: flex; flex-direction: column; gap: 5px; }
.do-keuze .label { margin: 0; }
.do .do-segment { display: inline-flex; flex-wrap: wrap; }
.do .do-segment button { display: inline-flex; align-items: center; gap: 6px; }
.do .do-segment button svg.i { width: 15px; height: 15px; }
.do .do-segment button:focus-visible { outline: none; box-shadow: var(--ring); }
.do-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.do-bestand { position: relative; cursor: pointer; }
.do-bestand input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.do-bestand:focus-within { box-shadow: var(--ring); }
.do-wissel-rij { display: flex; margin: -2px 0; }

/* editors met regelnummers */
.do-editor { position: relative; display: flex; border: 2px solid var(--merk); border-radius: var(--r-s); background: var(--vlak); overflow: hidden; transition: box-shadow .15s; }
.do-editor:focus-within { box-shadow: var(--ring); }
.do-editor.sleep { box-shadow: 0 0 0 4px var(--merk-zacht); background: var(--merk-zacht); }
.do-editor.do-uit { border: 1px solid color-mix(in srgb, var(--merk) 35%, var(--rand)); background: color-mix(in srgb, var(--merk-zacht) 45%, var(--vlak)); }
/* regelnummers absoluut: even hoog als het tekstvak, ze lopen nooit onder het vak door */
.do-nr {
  position: absolute; top: 0; bottom: 0; left: 0; width: 50px; padding: 10px 8px 10px 4px; overflow: hidden; text-align: right; white-space: pre; user-select: none;
  font: 400 12.5px/20px var(--font-code); color: var(--tekst-3); background: var(--vlak-2); border-right: 1px solid var(--rand);
}
.do-nr b { display: inline-block; min-width: 100%; color: #fff; background: var(--fout); border-radius: 3px; padding: 0 3px; font-weight: 700; }
.do-tekst {
  flex: 1; min-width: 0; height: 300px; min-height: 160px; margin: 0 0 0 50px; padding: 10px 12px; border: 0; outline: none; resize: vertical;
  font: 400 13px/20px var(--font-code); color: var(--tekst); background: transparent; white-space: pre; overflow: auto; tab-size: 2;
}
.do-tekst::placeholder { color: var(--tekst-3); font-family: var(--font-tekst); }
.do-info { margin: 0; font-size: var(--fs-s); font-weight: 600; color: var(--tekst-2); }
.do-info:empty { display: none; }
.do-fout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--fout-zacht); color: var(--tekst); font-size: var(--fs-s); }
.do-fout > svg.i { width: 17px; height: 17px; color: var(--fout); flex: none; }
.do-fout > span:first-of-type { flex: 1; min-width: 220px; font-weight: 600; }
.do-fout-knoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.do-melding { margin: 0; padding: 9px 12px; border-radius: var(--r-s); background: var(--vlak-2); color: var(--tekst-2); font-size: var(--fs-xs); line-height: 1.55; }
.do-melding.let-op { background: var(--let-op-zacht); color: var(--tekst); }
.do-melding.fout { background: var(--fout-zacht); color: var(--tekst); font-size: var(--fs-s); }
.do-melding.ok { background: var(--ok-zacht); color: var(--tekst); font-size: var(--fs-s); }
.do-groot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-s); background: var(--let-op-zacht); font-size: var(--fs-s); }

/* opties */
.do-opties { border: 1px solid var(--rand); border-radius: var(--r-s); padding: 8px 12px; }
.do-opties summary { cursor: pointer; font-size: var(--fs-s); font-weight: 600; color: var(--tekst-2); }
.do-opties summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
.do-opties-rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-top: 8px; }
.do-opties-uit { margin-top: 0; }
.do-optie { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--tekst-2); }
.do .do-optie .veld { height: 36px; min-width: 150px; padding: 0 10px; font-size: var(--fs-s); }
.do .schakel { font-size: var(--fs-s); min-height: 36px; }

.do-snel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tekst-3); font-weight: 600; }
.do-snel button {
  height: 30px; padding: 0 12px; border-radius: var(--r-rond); border: 1px solid var(--rand); background: var(--vlak);
  color: var(--tekst-2); font: 500 var(--fs-xs)/1 var(--font-tekst); cursor: pointer; transition: border-color .15s, color .15s;
}
.do-snel button:hover { border-color: color-mix(in srgb, var(--merk) 60%, var(--rand)); color: var(--tekst); }
.do-snel button:focus-visible { outline: none; box-shadow: var(--ring); }

.do-uit-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.do-stats { font: 600 var(--fs-xs) var(--font-code); color: var(--tekst-3); }
.do-status { font-size: var(--fs-s); font-weight: 600; color: var(--ok); }
.do-status.fout { color: var(--fout); }

/* tabel en boom */
.do-bekijk-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.do-tabel-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--rand); border-radius: var(--r-s); }
.do-tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.do-tabel th, .do-tabel td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--rand-zacht); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.do-tabel thead th { position: sticky; top: 0; z-index: 1; background: var(--vlak-2); padding: 0; }
.do-tabel thead th.nr { padding: 6px 10px; }
.do-tabel thead button { width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--tekst-2); font: 700 var(--fs-xs) var(--font-code); text-align: left; cursor: pointer; }
.do-tabel th[aria-sort="ascending"] button::after { content: " ▲"; color: var(--merk); }
.do-tabel th[aria-sort="descending"] button::after { content: " ▼"; color: var(--merk); }
.do-tabel thead button:focus-visible { outline: none; box-shadow: inset var(--ring); }
.do-tabel td { font-family: var(--font-code); color: var(--tekst); }
.do-tabel td.getal { text-align: right; color: var(--merk-tekst); }
.do-tabel td.bool { color: var(--ok); }
.do-tabel .nr { color: var(--tekst-3); text-align: right; width: 1%; }
.do-tabel tbody tr:hover { background: var(--merk-zacht); }
.do-pad { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tekst-3); font-weight: 600; }
.do-pad code { font: 600 var(--fs-xs) var(--font-code); padding: 3px 8px; border-radius: 6px; background: var(--vlak-2); color: var(--tekst); overflow-wrap: anywhere; }
.do-kopieer-pad { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--tekst-3); cursor: pointer; }
.do-kopieer-pad:hover { background: var(--vlak-2); color: var(--tekst); }
.do-kopieer-pad.ok { color: var(--ok); background: var(--ok-zacht); }
.do-kopieer-pad svg.i { width: 14px; height: 14px; }
.do-boom-in { max-height: 460px; overflow: auto; padding: 8px 10px; border: 1px solid var(--rand); border-radius: var(--r-s); font: 400 var(--fs-xs)/1.7 var(--font-code); }
.do-boom-in summary { cursor: pointer; list-style-position: outside; margin-left: 14px; }
.do-boom-in summary::marker { color: var(--tekst-3); }
.do-kinderen { padding-left: 16px; border-left: 1px dashed var(--rand); margin-left: 4px; }
.do-blad { padding-left: 14px; }
.do-sleutel { border: 0; background: none; padding: 0 2px; border-radius: 4px; color: var(--merk-tekst); font: 600 var(--fs-xs) var(--font-code); cursor: pointer; }
.do-sleutel:hover, .do-sleutel.actief { background: var(--merk-zacht); }
.do-sleutel:focus-visible { outline: none; box-shadow: var(--ring); }
.do-teller { color: var(--tekst-3); }
.do-boom-in i { font-style: normal; }
.do-boom-in i.str { color: var(--ok); }
.do-boom-in i.number { color: var(--merk-tekst); }
.do-boom-in i.boolean { color: var(--let-op); }
.do-boom-in i.null { color: var(--tekst-3); }
.do-meer { padding-left: 14px; color: var(--tekst-3); }

.do-uitleg ul { margin: 10px 0 0; padding-left: 20px; color: var(--tekst-2); line-height: 1.7; }
.do-uitleg li + li { margin-top: 6px; }
.do-uitleg b { color: var(--tekst); }
.do-uitleg a { color: var(--merk-tekst); }

@media (max-width: 600px) {
  .do .kaart { padding: 14px; }
  .do-tekst { height: 220px; font-size: 12.5px; }
  .do-balk { align-items: stretch; }
  .do-uit-balk .do-knoppen, .do-uit-balk .knop { width: 100%; justify-content: center; }
}