/* Zakelijke, functionele interface. Geen frameworks. */

:root {
  --rand: #d3d6da;
  --tekst: #1a1d21;
  --gedempt: #5b6169;
  --accent: #1f3b52;
  --vlak: #f6f7f8;
  --goed: #0a6b2e;
  --slecht: #a3231b;
  --let-op: #8a6100;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst);
  background: #fff;
}

.balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
}
.balk .merk { font-weight: 600; font-size: 17px; color: #fff; text-decoration: none; }
.balk nav a { color: #cfe0ee; text-decoration: none; margin-left: 18px; }
.balk nav a:hover { color: #fff; text-decoration: underline; }

main { max-width: 1180px; margin: 0 auto; padding: 24px; }

h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 28px 0 12px; }

a { color: var(--accent); }

.voet {
  max-width: 1180px;
  margin: 40px auto 24px;
  padding: 16px 24px 0;
  border-top: 1px solid var(--rand);
  color: var(--gedempt);
  font-size: 13px;
}

/* --- kaarten en formulieren -------------------------------------------- */
.kaart {
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 24px;
  background: #fff;
}
.kaart.smal { max-width: 420px; margin: 40px auto; }
.kaart h2 { margin-top: 0; }

form.raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
form.raster .breed { grid-column: 1 / -1; }

label { display: block; font-weight: 500; font-size: 14px; }
label .hint { font-weight: 400; color: var(--gedempt); font-size: 12.5px; }
input[type=text], input[type=url], input[type=password], input[type=number], input[type=file] {
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button, .knop {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knop:hover { background: #16293a; }
button.klein, .knop.klein { padding: 5px 10px; font-size: 13px; }
button.secundair, .knop.secundair {
  background: #fff; color: var(--accent);
}
button.secundair:hover, .knop.secundair:hover { background: var(--vlak); }
form.inline { display: inline; }

/* --- tabellen ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.lijst th, .lijst td, .gegevens th, .gegevens td {
  border-bottom: 1px solid var(--rand);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.lijst thead th { background: var(--vlak); font-size: 13px; border-bottom: 2px solid var(--rand); }
.gegevens th { width: 190px; background: var(--vlak); font-weight: 600; }
.lijst tbody tr:hover { background: #fafbfc; }
td.url, .url { word-break: break-all; font-size: 13px; }
td.acties { white-space: nowrap; }
td.acties > * { margin-right: 6px; }

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.klein { font-size: 12.5px; color: var(--gedempt); }
.foutlijst { margin: 0; padding-left: 16px; }

/* --- statusaanduidingen ------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  background: #e8eaed;
  color: #3c4043;
  white-space: nowrap;
}
.badge-done, .badge-actief { background: #e2f0e6; color: var(--goed); }
.badge-failed { background: #fbe6e4; color: var(--slecht); }
.badge-running { background: #fdf0d5; color: var(--let-op); }
.badge-queued { background: #e6ecf2; color: var(--accent); }
.badge-takedown, .badge-gesloten { background: #eceef0; color: var(--gedempt); }

.goed { color: var(--goed); font-weight: 600; }
.slecht { color: var(--slecht); font-weight: 600; }

.melding, .fout {
  padding: 11px 14px;
  border-radius: 3px;
  margin-bottom: 18px;
  font-size: 14px;
}
.melding { background: #e6f0e9; border-left: 3px solid var(--goed); }
.fout { background: #fbe9e7; border-left: 3px solid var(--slecht); }
.leeg { color: var(--gedempt); font-style: italic; }
.kruimel { font-size: 13px; margin-bottom: 6px; }
.hint { color: var(--gedempt); font-size: 13.5px; }

/* --- beeldkandidaten ---------------------------------------------------- */
.kandidaten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.kandidaat {
  margin: 0;
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 10px;
  background: #fff;
}
.kandidaat img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--vlak);
  display: block;
}
.kandidaat figcaption { margin-top: 8px; }
.kandidaat form { margin-top: 8px; }

@media (max-width: 760px) {
  form.raster { grid-template-columns: 1fr; }
  .gegevens th { width: auto; }
}

/* --- voortgang van een lopende vastlegging ------------------------------ */
.balk-buiten {
  height: 6px;
  background: #e3e6e9;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
  min-width: 150px;
}
.balk-binnen {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .4s ease;
}
.voortgang-cel.heeft-fouten .balk-binnen { background: var(--let-op); }
.voortgang-tekst, .voortgang { display: block; line-height: 1.35; }

.badge-voorlopig { background: #fdf0d5; color: var(--let-op); }

.kaart.nummer-invullen {
  border-left: 3px solid var(--let-op);
  background: #fffdf7;
}
.kaart.nummer-invullen h2 { margin-top: 0; font-size: 16px; }
form.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
form.inline-form input[type=text] { width: auto; min-width: 220px; margin-top: 0; }