/* Wat maar op één soort scherm voorkomt, per bakje een eigen bestand:
     schermen.css            algemeen voor detailpagina's, relaties en artikelen
     schermen-inkoop.css     inkooporders, ontvangst en de afdruk op A4
     schermen-productie.css  productie, de kostprijskaart en herleiding op een batch, planning
     schermen-account.css    inloggen en het rechtenraster in Beheer
   Per scherm een eigen blok. */

/* ── Algemeen voor detailpagina's ───────────────────────────────────────── */

.sectie {
  margin-bottom: var(--ruimte-6);
}

.sectie-kop {
  display: flex;
  gap: var(--ruimte-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ruimte-3);
}

.sectie-kop h2 {
  margin: 0;
}

/* Een formulier binnen een kaart, onder een lijst: een eigen vak op een zachte achtergrond,
   zodat je ziet waar het bij hoort. */
.formulier-ingesprongen {
  margin: var(--ruimte-3) 0;
  padding: var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  background: var(--kleur-vlak-zacht);
}

/* Wat de server over een regel zegt, zoals "reken 990 af in plaats van 1.000" of "+2 uitval".
   Een zin die mag afbreken, geen label: anders duwt hij de knoppen uit de tabel. */
.signaal {
  display: block;
  margin-top: var(--ruimte-1);
  color: var(--kleur-waarschuwing);
  font-size: var(--tekst-klein);
  font-weight: 600;
}

/* ── Relaties ───────────────────────────────────────────────────────────── */

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

.contactregel {
  display: flex;
  gap: var(--ruimte-3);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--kleur-rand-zacht);
}

.contactregel:last-child {
  border-bottom: 0;
}

/* ── Artikelen ──────────────────────────────────────────────────────────── */

.vlaggen {
  display: grid;
  gap: var(--ruimte-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.vlaggen legend {
  margin-bottom: var(--ruimte-2);
  font-weight: 600;
}

.inline-formulier {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ruimte-1);
  align-items: center;
  justify-content: flex-end;
}

.inline-formulier input {
  width: 90px;
  min-height: 32px;
  padding: 0 var(--ruimte-2);
  border: 1px solid var(--kleur-focus);
  border-radius: var(--radius-klein);
  text-align: right;
}

/* De knoppen van een rij blijven rechts in beeld, ook als de tabel breder is dan zijn vak
   en opzij schuift: op een laptop viel "Wijzigen" anders buiten beeld, en niemand ziet dat
   een tabel kan schuiven. De rest van de rij schuift eronderdoor. */
.tabel td.acties {
  position: sticky;
  right: 0;
  text-align: right;
  white-space: nowrap;
  background: var(--kleur-vlak);
  box-shadow: -8px 0 8px -8px rgb(35 40 43 / 18%);
}

.tabel tbody tr:hover td.acties {
  background: var(--kleur-vlak-zacht);
}

/* Op een laptop staan de knoppen van een rij onder elkaar: zo blijft er naast de knoppen
   ruimte voor de prijs en de status, in plaats van dat de knoppen eroverheen schuiven. */
@media (width <= 1440px) {
  .tabel td.acties .knop {
    display: flex;
    width: 100%;
  }

  .tabel td.acties .knop + .knop {
    margin-top: var(--ruimte-1);
  }
}

.richtprijs {
  margin: var(--ruimte-4) 0;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--radius);
  background: var(--kleur-vlak);
}

.richtprijs p {
  margin: 0 0 var(--ruimte-1);
}

.ontbreekt {
  margin: var(--ruimte-2) 0 0;
  color: var(--kleur-waarschuwing);
}

.keurmerken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.keurmerk-keuze {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-1);
  padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--kleur-rand-zacht);
}

.keurmerk-keuze input[type="text"] {
  min-height: 36px;
  padding: 0 var(--ruimte-2);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
}