/* De vaste onderdelen: knoppen, formulieren, kaarten, tabellen, labels, meldingen en het
   bevestigvenster. De kop van een detailpagina en de tabbladen staan in kop.css. Klikdoelen
   van minstens 44px hoog. */

/* ── Knoppen ────────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex;
  gap: var(--ruimte-2);
  align-items: center;
  justify-content: center;
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.knop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.knop-hoofd {
  color: var(--kleur-tekst-op-accent);
  background: var(--kleur-accent);
}

.knop-hoofd:hover:not(:disabled) {
  color: var(--kleur-tekst-op-accent);
  background: var(--kleur-accent-donker);
}

.knop-stil {
  border-color: var(--kleur-rand);
  color: var(--kleur-tekst-zacht);
  background: var(--kleur-vlak);
}

.knop-stil:hover:not(:disabled) {
  border-color: var(--kleur-tekst-gedempt);
  color: var(--kleur-tekst);
}

.knop-gevaar {
  color: var(--kleur-tekst-op-accent);
  background: var(--kleur-gevaar);
}

.knop-gevaar-stil {
  border-color: var(--kleur-gevaar);
  color: var(--kleur-gevaar);
  background: var(--kleur-vlak);
}

.knop-klein {
  min-height: 32px;
  padding: 0 var(--ruimte-3);
  font-weight: 500;
}

.knop-breed {
  width: 100%;
}

.knop-icoon,
.knop-link {
  border: 0;
  color: var(--kleur-accent);
  background: none;
  cursor: pointer;
}

.knop-link {
  min-height: var(--klikdoel);
  padding: 0;
  text-decoration: underline;
}

/* ── Formulieren ────────────────────────────────────────────────────────── */

.formulier {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
}

.velden-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ruimte-3);
}

.veld {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-1);
}

.veld label {
  font-weight: 500;
  color: var(--kleur-tekst-zacht);
}

.veld input,
.veld select,
.veld textarea {
  min-height: var(--klikdoel);
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  background: var(--kleur-vlak);
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  border-color: var(--kleur-focus);
  outline: 0;
}

.veld-vinkje {
  flex-flow: row wrap;
  align-items: center;
}

.veld-vinkje input {
  width: 20px;
  min-height: 20px;
  height: 20px;
}

.veld-hulp {
  width: 100%;
  margin: 0;
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
}

.verplicht {
  color: var(--kleur-gevaar);
}

.formulier-fout {
  margin: 0;
  padding: var(--ruimte-3);
  border-radius: var(--radius);
  color: var(--kleur-gevaar);
  background: var(--kleur-gevaar-zacht);
}

.formulier-knoppen {
  display: flex;
  gap: var(--ruimte-2);
  justify-content: flex-end;
}

/* ── Kaarten met label en waarde ────────────────────────────────────────── */

.kaart {
  margin-bottom: var(--ruimte-4);
  padding: var(--ruimte-4) var(--ruimte-5);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot);
  background: var(--kleur-vlak);
  box-shadow: var(--schaduw-klein);
}

.kaart-bewerken {
  border-color: var(--kleur-accent);
}

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

.kaart-kop h2 {
  margin: 0;
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kv {
  margin: 0;
}

.kv-rij {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--ruimte-3);
  padding: var(--ruimte-1) 0;
}

.kv dt {
  color: var(--kleur-tekst-gedempt);
}

.kv dd {
  min-width: 0;
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ── Labels ─────────────────────────────────────────────────────────────── */

.label {
  display: inline-block;
  padding: 2px var(--ruimte-2);
  border-radius: 99px;
  font-size: var(--tekst-klein);
  font-weight: 600;
  white-space: nowrap;
}

.label-neutraal { color: var(--kleur-tekst-zacht); background: var(--kleur-rand-zacht); }
.label-goed { color: var(--kleur-goed); background: var(--kleur-goed-zacht); }
.label-waarschuwing { color: var(--kleur-waarschuwing); background: var(--kleur-waarschuwing-zacht); }
.label-gevaar { color: var(--kleur-gevaar); background: var(--kleur-gevaar-zacht); }
.label-info { color: var(--kleur-info); background: var(--kleur-info-zacht); }

/* ── Meldingen ──────────────────────────────────────────────────────────── */

.meldingen {
  position: fixed;
  top: var(--ruimte-4);
  right: var(--ruimte-4);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  max-width: 420px;
}

.melding {
  display: flex;
  gap: var(--ruimte-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}

.melding-gelukt { color: var(--kleur-goed); background: var(--kleur-goed-zacht); }
.melding-fout { color: var(--kleur-gevaar); background: var(--kleur-gevaar-zacht); }
.melding .knop-icoon { color: inherit; }

.melding-blok {
  margin: var(--ruimte-6);
  padding: var(--ruimte-4);
  border-radius: var(--radius);
}

.melding-blok.fout { color: var(--kleur-gevaar); background: var(--kleur-gevaar-zacht); }
.melding-blok.let-op { color: var(--kleur-waarschuwing); background: var(--kleur-waarschuwing-zacht); }

/* ── Bevestigvenster ────────────────────────────────────────────────────── */

.dialoog {
  max-width: 480px;
  padding: var(--ruimte-6);
  border: 0;
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-groot);
}

.dialoog::backdrop {
  background: var(--kleur-sluier);
}

.dialoog-knoppen {
  display: flex;
  gap: var(--ruimte-2);
  justify-content: flex-end;
  margin-top: var(--ruimte-4);
}