/* De samensteller: een stuklijst opbouwen door te kiezen wat erin gaat
   (js/schermen/artikelen/delen-samensteller.js). Bovenaan wat erin zit met het aantal als
   invulvak, daaronder de kiezer, en onderaan de opslaanbalk die altijd in beeld blijft. */

.samensteller {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-4);
}

.samensteller-leeg {
  display: flex;
  gap: var(--ruimte-4);
  align-items: center;
  padding: var(--ruimte-5);
  border: 2px dashed var(--kleur-rand);
  border-radius: var(--radius-groot);
  color: var(--kleur-tekst-zacht);
  background: var(--kleur-vlak);
}

.samensteller-leeg p {
  margin: 0;
}

.samensteller-leeg .icoon {
  width: 36px;
  height: 36px;
  color: var(--kleur-subassemblage);
}

/* Het aantal met de eenheid erachter, rechts uitgelijnd zoals de getallen eronder. */
.aantalvak {
  display: inline-flex;
  gap: var(--ruimte-2);
  align-items: center;
  justify-content: flex-end;
}

.tabel .aantalvak input {
  width: 90px;
  font-weight: 600;
}

.aantalvak-eenheid {
  min-width: 3.2em;
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
  text-align: left;
}

.samensteller-tabel td {
  vertical-align: middle;
}

/* De soort als klein gekleurd icoon voor de naam: zo past de rij met de prijzen erbij. */
.tabel .soort-cel {
  width: 1%;
  padding-right: 0;
}

.soort-cel .soort-tegel {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
}

.soort-cel .soort-tegel .icoon {
  width: 17px;
  height: 17px;
}

.knop-weg {
  width: 36px;
  min-height: 36px;
  padding: 0;
}

.knop-weg:hover:not(:disabled) {
  border-color: var(--kleur-gevaar);
  color: var(--kleur-gevaar);
}

/* ── De kiezer ──────────────────────────────────────────────────────────── */

.kiezer {
  padding: var(--ruimte-4);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot);
  background: var(--kleur-vlak-zacht);
}

.kiezer h3 {
  margin-bottom: var(--ruimte-3);
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kiezer-balk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  align-items: center;
  margin-bottom: var(--ruimte-3);
}

/* Eén kolom die niet breder wordt dan de kiezer, ook als een naam lang is (op een telefoon). */
.kiezer-lijst {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ruimte-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kiezer-rij {
  display: flex;
  gap: var(--ruimte-3);
  align-items: center;
  min-height: 52px;
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--kleur-rand-zacht);
  border-radius: var(--radius);
  background: var(--kleur-vlak);
}

.kiezer-rij .soort-tegel {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
}

.kiezer-rij .soort-tegel .icoon {
  width: 18px;
  height: 18px;
}

.kiezer-naam {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kiezer-naam .onder {
  display: block;
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
}

.kiezer-rij.erin {
  background: var(--kleur-vlak-zacht);
}

.kiezer-erin {
  display: inline-flex;
  gap: var(--ruimte-1);
  align-items: center;
  padding: 0 var(--ruimte-3);
  color: var(--kleur-goed);
  font-weight: 600;
}

.kiezer-niets,
.kiezer-meer {
  margin: var(--ruimte-3) 0 0;
}

/* ── De opslaanbalk ─────────────────────────────────────────────────────── */

/* Plakt onderaan het werkvlak zolang het formulier in beeld is. */
.opslaanbalk {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  margin: 0 calc(-1 * var(--ruimte-2));
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot);
  background: var(--kleur-vlak);
  box-shadow: 0 -6px 16px -8px rgb(35 40 43 / 22%);
}

.opslaanbalk.open {
  border-color: var(--kleur-waarschuwing);
}

.opslaanbalk-rij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  align-items: center;
  justify-content: space-between;
}

.opslaanbalk-stand {
  color: var(--kleur-waarschuwing);
  font-weight: 600;
}

.opslaanbalk-knoppen {
  display: flex;
  gap: var(--ruimte-2);
  margin-left: auto;
}

/* De uitleg links mag afbreken; de knoppen blijven rechts op dezelfde regel. */
.opslaanbalk-rij > span:first-child {
  flex: 1 1 220px;
}