/**
 * Gedeelde stijlen voor de labo-, werf- en meetstrategie-app.
 *
 * Het palet komt uit het logo: navy, blauw en groen op een lichte achtergrond. Elke app
 * zet enkel zijn eigen --accent in de <head> (labo blauw, werf groen, meetstrategie navy),
 * zodat op een gedeeld toestel in één oogopslag te zien is welke app openstaat.
 */

:root {
  /* Huisstijl Control_SG: het blauw en het groen uit het logo. Deze twee staan hier
     en niet per app, want ze zijn van het bedrijf en niet van een van de apps. */
  --merk-navy: #1B3A6B;
  --merk-blauw: #1C60AC;
  --merk-blauw-diep: #154C8A;
  --merk-groen: #4E9A2A;
  --merk-groen-diep: #3B7F21;

  /* Licht basispalet, voor elke app hetzelfde; een app zet enkel zijn accent. */
  --bg: #F5F8FC;
  --surface: #FFFFFF;
  --surface-alt: #EEF3F9;
  --line: #E1E8F0;
  --ink-faint: #8A97A6;
  --accent: var(--merk-blauw);
  --accent-ink: var(--merk-blauw-diep);
  --accent-soft: #E8F0FA;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --ink: #1B2A3A;
  --ink-muted: #5B6B7C;
  --success: #2E8B57;
  --success-soft: #E5F3EA;
  --danger: #C0392B;
  --danger-soft: #FAEAE7;
  --warn: #C7861E;
  --warn-soft: #FBF1DF;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(27, 58, 107, .04), 0 8px 24px -16px rgba(27, 58, 107, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* Het blauw-groene lint onder het logo. */
  background-image: linear-gradient(90deg, var(--merk-blauw), var(--merk-groen));
  background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.mark { width: 34px; height: 34px; flex: none; color: var(--accent); }

/* Woordmerk, opgebouwd zoals de e-mailsignature: Control in blauw, _SG in groen.
   Als tekst en niet als afbeelding, zodat het scherp blijft op elk toestel en
   meebuigt met de lettergrootte die de gebruiker instelt. */
.merk {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.merk-c { color: var(--merk-blauw); }
.merk-sg { color: var(--merk-groen); }

/* Microscoop uit het logo, woordmerk, en daaronder welke app. */
.brand {
  display: grid; grid-template-columns: 34px auto; column-gap: 10px; align-items: center; line-height: 1.15;
}
.brand::before {
  content: ""; grid-row: 1 / 3; width: 34px; height: 34px;
  background: url('icoon.png') center / contain no-repeat;
}
.brand .merk { font-size: 17px; }
.brand > span:not(.merk) { font-size: 11.5px; color: var(--ink-muted); font-weight: 500; }

.merk-groot { font-size: 30px; letter-spacing: -.02em; }

/* Het volledige logo, alleen waar er ruimte voor is: het inlogscherm.
   255px is precies de helft van de 510px van het bestand, dus scherp op elk scherm. */
.logo {
  display: block;
  width: 100%;
  max-width: 255px;
  height: auto;
  margin: 0 auto 10px;
}

.role-pill {
  margin-left: auto;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  padding: 6px 11px; border-radius: 999px; letter-spacing: .02em;
}

.back-btn {
  border: none; background: none; color: var(--ink-muted); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 6px 4px 6px 0;
}
.back-btn:hover { color: var(--ink); }
.back-btn svg { width: 20px; height: 20px; }

/* Accountknop rechts in de balk — toont wie aangemeld is, klik om af te melden. */
.account {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  border: none; background: none; cursor: pointer; padding: 4px;
  font-family: var(--font-body); text-align: right;
}
.account .naam { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.account .rol { font-size: 10.5px; color: var(--ink-faint); }
.account .avatar {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}

/* Terug naar het kantoordashboard, rechts naast de accountknop. */
.kantoor-link {
  display: flex; align-items: center; gap: 5px; margin-left: 4px; padding: 6px 9px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink-muted);
  font-family: var(--font-display); font-weight: 600; font-size: 12px; text-decoration: none;
}
.kantoor-link:hover { color: var(--accent-ink); border-color: var(--accent); }
.kantoor-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kantoor-link svg { width: 15px; height: 15px; }
@media (max-width: 420px) { .kantoor-link span { display: none; } }

main { flex: 1; padding: 20px 18px 110px; }

/* ------------------------------------------------------------------ koppen */

.dash-head { margin-bottom: 18px; }
.dash-head h1, h1.title { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
.dash-head p, p.sub { margin: 0; color: var(--ink-muted); font-size: 14px; }
p.sub { margin-bottom: 22px; }

.form-header { margin-bottom: 20px; }
.form-header h1 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }
.form-header p { margin: 0; color: var(--ink-muted); font-size: 13.5px; }

.section-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px;
}

.stage-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-ink); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.stage-eyebrow .pumpbadge { background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; }

/* ------------------------------------------------------------------- kaarten */

.dash-head-acties { display: flex; gap: 10px; margin-bottom: 22px; }
.new-btn {
  flex: 1; display: flex; align-items: center; gap: 12px;
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  padding: 16px 18px; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  cursor: pointer; box-shadow: var(--shadow); text-decoration: none; /* ook als <a> */
}
.new-btn svg { width: 20px; height: 20px; flex: none; }
.new-btn:hover { background: var(--accent-ink); }

/* -------------------------------------------------------------- kalender */

.kal-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.kal-kop h1 {
  font-family: var(--font-display); font-size: 18px; margin: 0; min-width: 160px; text-align: center;
}
.kal-vandaag-btn { margin-left: auto; }
.kal-weekdagen {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; color: var(--ink-faint); text-align: center;
}
.kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-dag {
  min-height: 74px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: 5px; overflow: hidden;
}
.kal-dag.buiten { background: var(--surface-alt); opacity: .55; }
.kal-dag.vandaag { border-color: var(--accent); border-width: 1.5px; }
.kal-nr { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); margin-bottom: 3px; }
.kal-chip {
  display: block; margin: 0 0 3px; padding: 2px 6px; font-size: 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}

.project-card, .sum-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 14px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.project-card .row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.project-card .order { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.project-card h3 { font-family: var(--font-display); font-size: 16.5px; margin: 2px 0; }
.project-card .meta { font-size: 13px; color: var(--ink-muted); }

.soort-badge {
  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
  padding: 3px 8px; border-radius: 6px; background: var(--surface-alt); color: var(--ink-muted);
  white-space: nowrap;
}

.status-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; margin-top: 8px;
  background: var(--surface-alt); color: var(--ink-muted);
}
.status-badge.actief { background: var(--accent-soft); color: var(--accent-ink); }
.status-badge.klaar { background: var(--success-soft); color: var(--success); }
.status-badge.wacht { background: var(--warn-soft); color: var(--warn); }

.proj-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 10px; cursor: pointer; box-shadow: var(--shadow);
}
.proj-card:active { border-color: var(--accent); }
.proj-card .order { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.proj-card h3 { font-family: var(--font-display); font-size: 16px; margin: 2px 0 4px; }
.proj-card .meta { font-size: 13px; color: var(--ink-muted); }
.proj-card .npumps {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px;
  background: var(--surface-alt); padding: 4px 9px; border-radius: 999px; color: var(--ink-muted); font-weight: 600;
}

.pump-progress { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.pump-progress .track { flex: 1; height: 6px; background: var(--surface-alt); border-radius: 99px; overflow: hidden; }
.pump-progress .fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.pump-progress .lbl { font-size: 11.5px; font-family: var(--font-mono); color: var(--ink-muted); white-space: nowrap; }

.card-actions { display: flex; gap: 8px; }
.chip-btn {
  flex: 1; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.chip-btn svg { width: 16px; height: 16px; }
.chip-btn.done { background: var(--success-soft); border-color: transparent; color: var(--success); }
.chip-btn:hover { border-color: var(--ink-faint); }
.chip-btn[disabled] { opacity: .45; pointer-events: none; }

/* -------------------------------------------------------------------- velden */

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  margin-bottom: 6px; letter-spacing: .01em;
}
.field .hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }

input[type=text], input[type=date], input[type=time], input[type=number], input[type=search],
select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 13px; font-family: var(--font-body);
  /* 16px voorkomt dat iOS bij focus inzoomt — op een werftablet is dat hinderlijk. */
  font-size: 16px;
  color: var(--ink); background: var(--surface);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[disabled], select[disabled] { background: var(--surface-alt); color: var(--ink-faint); }
.numfield input { font-family: var(--font-mono); font-weight: 600; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

fieldset { border: none; padding: 0; margin: 0 0 20px; }
legend {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 0 0 10px; width: 100%;
  border-bottom: 1px solid var(--line); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Grid en geen flex: de uitleg loopt over de volle breedte onder het label en de
   waarde, zodat "3,4% afwijking" niet tussen de twee in geperst wordt. */
.avg-box {
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 2px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
}
.avg-box .l { font-size: 12.5px; color: var(--accent-ink); font-weight: 600; }
.avg-box .v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--accent-ink); }
.avg-box .uitleg { grid-column: 1 / -1; font-size: 12px; color: var(--accent-ink); opacity: .85; }

/* Het oordeel over de 5%-tolerantie. Kleur alleen is niet genoeg — de tekst eronder
   zegt hetzelfde in cijfers, voor wie rood en groen niet uit elkaar houdt. */
.avg-box.goed { background: var(--success-soft); }
.avg-box.goed .l, .avg-box.goed .v, .avg-box.goed .uitleg { color: var(--success); }
.avg-box.fout { background: var(--danger-soft); }
.avg-box.fout .l, .avg-box.fout .v, .avg-box.fout .uitleg { color: var(--danger); }

/* Onleesbaar getal: niet opgeslagen, dus dat moet te zien zijn terwijl je typt. */
input.ongeldig { border-color: var(--danger); background: var(--danger-soft); }

/* Een afgekeurde pomp is wél ingevuld — vandaar dat 'filled' blijft en alleen de kleur
   verspringt. Anders lijkt het alsof er nog werk aan is. */
.pump-tab.afgekeurd { color: var(--danger); }
.pump-tab.afgekeurd .dot { background: var(--danger); }
.afgekeurd-tel { color: var(--danger); font-weight: 600; font-size: 12px; margin-left: 6px; }

.readonly-melding {
  background: var(--warn-soft); color: #7a5310; border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 12.5px; margin-bottom: 16px; line-height: 1.45;
}

/* Uitleg onder een veldenrij die niet klopt — zelfde toon, maar tegen de velden aan
   zodat duidelijk is waarover het gaat. */
.veld-melding {
  background: var(--warn-soft); color: #7a5310; border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 12.5px; margin: -6px 0 16px; line-height: 1.45;
}

/* -------------------------------------------------------------- dash-tabs */

.dash-tabs { display: flex; gap: 6px; margin: 4px 0 18px; }
.dash-tab {
  flex: none; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.dash-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- pomp-tabs */

.pump-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }
.pump-tab {
  flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.pump-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pump-tab .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-faint); }
.pump-tab.active .dot { background: #fff; }
.pump-tab.filled .dot { background: var(--success); }
.pump-tab.active.filled .dot { background: #8FE0B4; }

.steps { display: flex; gap: 5px; padding: 12px 18px 0; }
.step-dot { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-alt); }
.step-dot.done { background: var(--accent); }
.step-dot.active { background: var(--accent); }

/* -------------------------------------------------------------- technicus-picker */

.picker { position: relative; }
.picker-resultaten {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto;
}
.picker-item {
  padding: 11px 13px; cursor: pointer; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover, .picker-item.actief { background: var(--accent-soft); }
.picker-item b { font-size: 14px; font-weight: 600; }
.picker-item span { font-size: 12px; color: var(--ink-muted); }
.picker-leeg { padding: 14px; font-size: 13px; color: var(--ink-faint); text-align: center; }

.gekozen-technicus {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-soft); border-radius: var(--radius-sm); padding: 11px 13px;
}
.gekozen-technicus b { font-size: 14px; color: var(--accent-ink); }
.gekozen-technicus span { font-size: 12px; color: var(--accent-ink); opacity: .75; }
.gekozen-technicus button {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: var(--accent-ink); font-size: 12.5px; font-weight: 600; text-decoration: underline;
}

/* ------------------------------------------------------------------- foto */

.photo-zone {
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 28px 16px; text-align: center; margin-bottom: 14px; background: var(--surface);
}
.photo-zone svg { width: 30px; height: 30px; color: var(--ink-faint); margin-bottom: 8px; }
.photo-zone p { margin: 0; font-size: 13.5px; color: var(--ink-muted); }
.photo-zone input { display: none; }
.take-photo-btn {
  margin-top: 12px; background: var(--accent); color: #fff; border: none; border-radius: 999px;
  padding: 11px 22px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.take-photo-btn svg { width: 17px; height: 17px; color: #fff; margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.photo-thumb {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 1; border: 1px solid var(--line); background: var(--surface-alt);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb.bezig::after {
  content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------- handtekening */

.sig-block { margin-bottom: 22px; }
.sig-block h4 { font-family: var(--font-display); font-size: 14.5px; margin: 0 0 10px; }
canvas.sig-pad {
  width: 100%; height: 150px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); touch-action: none; display: block;
}
.sig-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.sig-clear { border: none; background: none; color: var(--ink-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.sig-status { font-size: 11.5px; color: var(--ink-faint); }
.sig-status.ok { color: var(--success); }

/* ------------------------------------------------------------------ overzicht */

.sum-card h4 { font-family: var(--font-display); font-size: 14.5px; margin: 0 0 8px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--ink-muted); }
.sum-row b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- SEM-resultaat */

/* Alles hieronder staat binnen een pompkaart in het overzicht van de labo-app: het
   bevestigde SEM-resultaat, of het bestand kiezen en de gevonden blokken vergelijken. */

.sem-zone {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
}
.sem-kies-btn {
  background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px;
  padding: 9px 16px; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.sem-kies-btn svg { width: 15px; height: 15px; }
/* De eigen knop van de browser is niet te stijlen en heet in elke taal anders; het
   label eromheen doet het werk. Zie renderSemKiezer in labo/app.js. */
.sem-kies-btn input { display: none; }
.sem-kies-btn.bezig { opacity: .55; pointer-events: none; }
.sem-uitleg { font-size: 11.5px; color: var(--ink-faint); }

.sem-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-size: 13.5px; margin-bottom: 8px;
}
.sem-sluit {
  border: none; background: none; color: var(--ink-muted); font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-decoration: underline;
}
.sem-blokchip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--surface-alt); color: var(--ink-muted); padding: 3px 8px; border-radius: 6px;
}

.sem-resultaat {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.sem-resultaat .sum-row { color: var(--accent-ink); }
.sem-resultaat .sum-row b { color: var(--accent-ink); font-family: var(--font-mono); }
.sem-bron { color: var(--accent-ink); font-size: 13px; font-weight: 600; }
/* Bevestigen overschrijft zonder te vragen — de backend doet dat ook. Dan hoort er
   wel te staan wat er gebeurt vóór iemand een tweede bestand kiest. */
.sem-vervang { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }

.sem-voorbeeld {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.sem-staal { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 10px; }

.sem-waarschuwingen {
  background: var(--warn-soft); color: #7a5310; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12px; line-height: 1.45; margin-bottom: 12px;
  /* Een export met veel meldingen mag de blokken niet wegduwen. */
  max-height: 140px; overflow-y: auto;
}
.sem-waarschuwingen ul { margin: 6px 0 0; padding-left: 16px; }
.sem-waarschuwingen li { margin-bottom: 3px; }
.sem-ernst { font-family: var(--font-mono); font-weight: 600; }

.sem-blok {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 10px; background: var(--surface);
}
/* Twee blokken voor dezelfde stub: de rand markeert welke rijen bij elkaar horen te
   worden gelegd. De uitleg in .sem-dubbel zegt waar het verschil aan af te lezen is —
   kleur alleen vertelt niet wat er aan de hand is. */
.sem-blok.dubbel { border-color: var(--warn); }
.sem-blok-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-size: 14px;
}
.sem-blok-meta { font-size: 12px; color: var(--ink-muted); margin: 4px 0 8px; }
.sem-dubbel {
  background: var(--warn-soft); color: #7a5310; border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 12px; line-height: 1.45; margin-bottom: 10px;
}

/* De tabel mag breder zijn dan de kaart op een smal scherm; dan schuift ze in haar
   eigen kader in plaats van de hele pagina mee te trekken. */
.sem-tabelrand { overflow-x: auto; margin-bottom: 10px; }
.sem-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sem-tabel th {
  text-align: left; font-weight: 600; color: var(--ink-faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 0 8px 6px 0; white-space: nowrap;
}
.sem-tabel td {
  padding: 5px 8px 5px 0; border-top: 1px solid var(--line); color: var(--ink);
  white-space: nowrap;
}
.sem-tabel td:first-child { white-space: normal; }
.sem-tabel td + td { font-family: var(--font-mono); }
.sem-bevestig { width: 100%; }

/* ------------------------------------------------------------------- rapport */

/* De rapportsectie onderaan het overzicht van de labo-app: het PDF-rapport laten maken,
   en daarna de link naar het bestand in de projectmap. Zie renderRapportBlok. */

.rapport-link {
  display: inline-block; margin-top: 4px;
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
}
.rapport-knop { width: 100%; margin-top: 10px; }
/* De reden waarom het nog niet kan staat ónder de knop en niet erin: het zijn pompnamen,
   en met tien pompen past die opsomming niet in een knop. Bovendien maakt .btn[disabled]
   de knop lichtgrijs, en juist die uitleg moet leesbaar blijven. */
.rapport-belet {
  margin-top: 8px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: #7a5310; font-size: 12px; line-height: 1.45;
}
.rapport-uitleg { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; }

.success-box {
  background: var(--success-soft); border-radius: var(--radius); padding: 22px 18px;
  text-align: center; margin-bottom: 16px;
}
.success-box svg { width: 38px; height: 38px; color: var(--success); margin-bottom: 8px; }
.success-box h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 4px; color: var(--success); }
.success-box p { margin: 0; font-size: 13.5px; color: #3b6b52; }

/* ------------------------------------------------------------------ knoppen */

.footer-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; max-width: 640px; margin: 0 auto;
}
.btn {
  flex: 1; border: none; border-radius: var(--radius-sm); padding: 15px 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; /* ook als <a>: de link naar de meetstrategie-app */
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: var(--surface-alt); color: var(--ink); flex: 0 0 auto; padding: 15px 18px; }
.btn-ghost:hover { background: var(--line); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ------------------------------------------------- toast, status, laden, leeg */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--merk-navy); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 100; box-shadow: var(--shadow);
  max-width: calc(100% - 36px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 16px; height: 16px; color: var(--success); flex: none; }
.toast.fout { background: var(--danger); }
.toast.fout svg { color: #fff; }

/* Opslagstatus in de topbar: rustig als alles bewaard is, zichtbaar als dat niet zo is. */
.opslag-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--success-soft); color: var(--success);
}
.opslag-status.wachtend { background: var(--warn-soft); color: var(--warn); }
.opslag-status .bol { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.opslag-status.wachtend .bol { animation: pulseer 1.4s ease-in-out infinite; }
@keyframes pulseer { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.laden { text-align: center; padding: 60px 20px; color: var(--ink-faint); font-size: 14px; }
.laden .spin {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  border-radius: 99px; animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.empty { text-align: center; padding: 50px 20px; color: var(--ink-faint); }
.empty svg { width: 44px; height: 44px; margin-bottom: 12px; opacity: .5; }
.empty p { margin: 0; font-size: 14px; }

.foutblok {
  background: var(--danger-soft); border-radius: var(--radius); padding: 18px;
  color: #8c2d20; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px;
}
.foutblok b { display: block; font-family: var(--font-display); font-size: 14.5px; margin-bottom: 4px; }
.foutblok button {
  margin-top: 12px; border: none; background: var(--danger); color: #fff;
  border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 600; cursor: pointer;
  font-family: var(--font-display); font-size: 13.5px;
}

/* --------------------------------------------------------------- aanmeldscherm */

.login {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center; gap: 6px;
}
.login .mark { width: 54px; height: 54px; margin-bottom: 10px; }
.login .merk-groot { margin-bottom: 2px; }
/* Op een laag scherm in liggende stand vreet het logo de knop van het scherm. */
@media (max-height: 560px) {
  .logo { max-width: 190px; margin-bottom: 4px; }
}
/* Onder het woordmerk staat alleen nog de rol, dus die hoeft niet even zwaar te zijn
   als het merk zelf — anders concurreren ze. */
.login h1 {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--ink-muted); letter-spacing: .04em; text-transform: uppercase;
  margin: 0 0 4px;
}
.login p { color: var(--ink-muted); font-size: 14px; margin: 0 0 22px; max-width: 320px; }
.login .btn { flex: none; min-width: 240px; }

::selection { background: var(--accent-soft); }

/* ---------------------------------------------------------------- meetstrategie */

.eenheid { color: var(--ink-faint); font-weight: 400; }

/* Ja/Nee als twee grote knoppen: sneller en duidelijker dan een keuzelijst met twee opties. */
.janee { display: flex; gap: 8px; }
.janee button {
  flex: 1; font: inherit; font-weight: 600; font-size: 14px; padding: 11px 8px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-muted);
  border-radius: var(--radius-sm);
}
.janee button.actief { background: var(--accent); border-color: var(--accent); color: #fff; }

.naam-rij { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.naam-rij input { flex: 1; }

.pomp-voorbeeld em { font-style: normal; color: var(--ink-faint); font-size: 11.5px; }

/* Waarschuwing bovenaan het dashboard (bv. geen dagstart vandaag). */
.warn-banner {
  background: var(--warn-soft); color: #7a5310; border: 1px solid #F0DDB8;
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.45;
}

/* Titels in het navy van het logo. */
.dash-head h1, h1.title, .form-header h1, .kal-kop h1 { color: var(--merk-navy); }

/* Werf-app: werfverslag (vóór de start, per pomp). */
.field .field-row + .field-row { margin-top: 8px; }
.field-row > input, .field-row > select { flex: 1; min-width: 0; }
.vink { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 500; }
.vink input { width: 22px; height: 22px; }
.veld-uitleg { color: var(--ink3); font-size: 13px; margin: 6px 0 0; }
.met-knop { display: flex; gap: 6px; align-items: stretch; }
.met-knop input { flex: 1; min-width: 0; }
.nu-knop { padding-inline: 12px; flex: none; }