@font-face { font-family: Lato; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/lato-300.woff2') format('woff2'); }
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: Lato; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/lato-900.woff2') format('woff2'); }

:root {
  --blauw: #0a64aa;
  --blauw-donker: #0b3a61;
  --blauw-label: #08497e;
  --tint: #f2f7fb;
  --lijn: #dfe7ee;
  --inkt: #15202b;
  --grijs: #67707a;
  --signaal: #a8521b;
  --groen: #1d6b43;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Lato, "Segoe UI", system-ui, sans-serif;
  color: var(--inkt);
  background: #f4f6f8;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--blauw-label); }

/* ---------- inloggen ---------- */

.inlog {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff 0%, #dde9f4 46%, #4a86c0 100%);
  padding: 20px;
}
.inlog form {
  width: 100%;
  max-width: 380px;
  background: #fff;
  padding: 32px;
  box-shadow: 0 2px 20px rgba(11, 58, 97, 0.14);
}
.inlog h1 { font-size: 22px; margin: 0 0 4px; color: var(--blauw-donker); }
.inlog .sub { color: var(--grijs); font-size: 14px; margin-bottom: 24px; }
.inlog .fout { background: #fdf0ea; color: #8a3b12; padding: 10px 12px; margin-bottom: 16px; font-size: 14px; }

/* ---------- raamwerk ---------- */

header.balk {
  background: #fff;
  border-bottom: 2px solid var(--blauw);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
header.balk .titel { font-weight: 700; color: var(--blauw-donker); font-size: 17px; }
header.balk .titel { display: flex; align-items: center; gap: 12px; }
header.balk .merk { height: 34px; width: auto; padding-right: 14px; border-right: 1px solid var(--lijn); }
header.balk .wie { font-weight: 400; font-size: 14px; color: var(--grijs); }
@media (max-width: 520px) {
  header.balk .merk { height: 28px; padding-right: 10px; }
}
header.balk { flex-wrap: wrap; gap: 10px; }
header.balk .rechts { flex-wrap: wrap; }
header.balk .rechts { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--grijs); }

main { max-width: 900px; margin: 0 auto; padding: 24px 20px calc(130px + env(safe-area-inset-bottom)); }

section.kaart {
  background: #fff;
  border: 1px solid var(--lijn);
  margin-bottom: 20px;
}
section.kaart > h2 {
  margin: 0;
  background: var(--blauw);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
}
section.kaart .inhoud { padding: 18px; }

.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.raster .breed { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .raster { grid-template-columns: 1fr; }
  main { padding: 16px 16px calc(140px + env(safe-area-inset-bottom)); }
}

label { display: block; font-size: 12px; font-weight: 700; color: var(--blauw-label); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #c6d2dd;
  background: #fff;
  font-family: inherit;
  /* 16px of groter: daaronder zoomt iOS automatisch in zodra je een veld aanraakt */
  font-size: 16px;
  color: var(--inkt);
  border-radius: 0;
}
/* Agendaveld: op iPad en iPhone even hoog en links uitgelijnd als de andere velden */
input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 43px; line-height: 1.4; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }

/* Voorbeeldtekst: duidelijk lichter dan echte invoer, zodat niemand denkt dat het al is ingevuld */
input::placeholder, textarea::placeholder { color: #a3acb6; font-style: italic; opacity: 1; }

/* Voorbeeld van de apparatuurzin zoals die in het rapport komt */
.voorbeeldzin { margin-top: 16px; background: var(--tint); border-left: 4px solid var(--blauw); padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.voorbeeldzin .voorbeeldkop { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blauw-label); margin-bottom: 4px; }

input:focus, textarea:focus, select:focus { outline: 2px solid var(--blauw); outline-offset: -1px; border-color: var(--blauw); }
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }

input[type="file"] { width: 100%; font-size: 15px; padding: 8px 0; }

.hint { font-size: 12px; color: var(--grijs); margin-top: 4px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- methoden ---------- */

.methodelijst { display: flex; flex-direction: column; }
.methoderegel { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eef3f7; }
.methoderegel:last-child { border-bottom: none; }
.methoderegel input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blauw); flex: none; }
.methoderegel .naam { font-weight: 700; font-size: 14px; }
.methoderegel .oms { font-size: 13px; color: var(--grijs); }

/* ---------- herhaalbare blokken ---------- */

.blokken { display: flex; flex-direction: column; gap: 16px; }
.blok {
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--blauw);
  padding: 16px;
  background: #fcfdfe;
}
.blok.uitsluiting { border-left-color: #9aa7b3; }
.blok .blokkop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.blok .bloktitel { font-weight: 900; color: var(--blauw); font-size: 15px; }
.blok.uitsluiting .bloktitel { color: #5a6672; }

button {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 18px;
  min-height: 44px;
  border: none;
  background: var(--blauw);
  color: #fff;
  cursor: pointer;
}
button:hover { background: #08528c; }
button.stil { background: #fff; color: var(--blauw-label); border: 1px solid #c6d2dd; }
button.stil:hover { background: var(--tint); }
button.klein { padding: 7px 12px; min-height: 36px; font-size: 14px; }
button.weg { background: #fff; color: #8a3b12; border: 1px solid #e3c7b8; padding: 5px 10px; font-size: 13px; }
button.weg:hover { background: #fdf0ea; }
button:disabled { opacity: 0.55; cursor: progress; }

.toevoegen { margin-top: 14px; }

/* ---------- actiebalk ---------- */

.acties {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--lijn);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 -2px 12px rgba(11, 58, 97, 0.07);
  z-index: 10;
}
.acties .melding { margin-right: auto; font-size: 14px; }
.acties .melding.goed { color: var(--groen); }
.acties .melding.fout { color: #8a3b12; }

.checkregel { display: flex; align-items: center; gap: 10px; }
.checkregel input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--blauw); }
.checkregel label { margin: 0; }

/* ---------- tabellen (rapporten, gebruikers) ---------- */

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--blauw-label); padding: 8px; border-bottom: 2px solid var(--blauw); white-space: nowrap;
}
.tabel td { padding: 9px 8px; border-bottom: 1px solid #eef3f7; vertical-align: middle; }
.tabel tr.uit td { color: #9aa3ad; }
.tabel .acties-cel { white-space: nowrap; text-align: right; }
.tabel .acties-cel button { margin-left: 6px; }
.tabelhouder { overflow-x: auto; }

.label {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; background: #eef4fa; color: var(--blauw-label);
}
.label.beheer { background: #fdf0ea; color: #8a3b12; }
.label.uit { background: #f0f2f5; color: #5a6672; }

.melding-blok { padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.melding-blok.goed { background: #eaf6ef; color: var(--groen); }
.melding-blok.fout { background: #fdf0ea; color: #8a3b12; }

.zoek { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.zoek input, .zoek select { max-width: 280px; }