:root {
  --bg: #f4f5f3; --kaart: #ffffff; --tekst: #1d2321; --zacht: #5f6b67; --lijn: #dde2df;
  --accent: #1f6f5c; --accent-tekst: #ffffff; --accent-zacht: #e2f0eb;
  --storing: #c2402a; --storing-bg: #fbe7e3;
  --aandacht: #a86a00; --aandacht-bg: #fbf0d9;
  --todo: #2b5fa8; --todo-bg: #e3ecf8;
  --klaar: #6b7570;
  --schaduw: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121615; --kaart: #1b2120; --tekst: #e6ebe9; --zacht: #9aa6a2; --lijn: #2d3533;
    --accent: #3fae90; --accent-tekst: #08130f; --accent-zacht: #183029;
    --storing: #f07a63; --storing-bg: #3a1e19;
    --aandacht: #e6ac3c; --aandacht-bg: #362a12;
    --todo: #78a6ea; --todo-bg: #1a2638;
    --klaar: #8a948f;
    --schaduw: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); }

.balk {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--accent); color: var(--accent-tekst);
}
.merk { color: inherit; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.wie { background: rgba(255,255,255,.18); border: 0; border-radius: 999px; padding: 6px 12px; color: inherit; cursor: pointer; }

main { max-width: 760px; margin: 0 auto; padding: 16px; }
.laden, .leeg { color: var(--zacht); text-align: center; padding: 40px 0; }

h1 { font-size: 1.3rem; margin: 4px 0 16px; }
h2 { font-size: 1.05rem; margin: 24px 0 8px; }

.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: var(--schaduw); }
.paneel { padding: 16px; }

/* --- knoppen --- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border-radius: 10px; border: 1px solid var(--lijn); background: var(--kaart); cursor: pointer; text-decoration: none; color: var(--tekst);
}
.knop.hoofd { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); font-weight: 600; }
.knop.gevaar { color: var(--storing); }
.knop.breed { width: 100%; }
.knop:disabled { opacity: .55; cursor: default; }
.rij { display: flex; gap: 8px; flex-wrap: wrap; }

.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 6;
  background: var(--accent); color: var(--accent-tekst); text-decoration: none; font-weight: 700;
  padding: 16px 22px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* --- filters --- */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.tab {
  flex: 0 0 auto; border: 1px solid var(--lijn); background: var(--kaart); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.tab[aria-pressed="true"] { background: var(--tekst); color: var(--bg); border-color: var(--tekst); }
.tab .n { opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
.zoek { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--kaart); margin-bottom: 14px; }

/* --- lijst --- */
.lijst { display: grid; gap: 10px; }
.item { display: flex; gap: 12px; padding: 10px; text-decoration: none; color: inherit; align-items: stretch; }
.item .mini { flex: 0 0 76px; height: 76px; border-radius: 10px; object-fit: cover; background: var(--lijn); }
.item .mini.geen { display: grid; place-items: center; color: var(--zacht); font-size: 1.6rem; }
.item .tekst { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.item .titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item .meta { color: var(--zacht); font-size: .85rem; }
.item.klaar { opacity: .65; }
.item.klaar .titel { text-decoration: line-through; }

.labels { display: flex; gap: 6px; flex-wrap: wrap; }
.label { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.label.storing { color: var(--storing); background: var(--storing-bg); }
.label.aandachtspunt { color: var(--aandacht); background: var(--aandacht-bg); }
.label.todo { color: var(--todo); background: var(--todo-bg); }
.label.hoog { color: #fff; background: var(--storing); }
.label.status { color: var(--zacht); background: var(--bg); border: 1px solid var(--lijn); }
.label.status.bezig { color: var(--accent); border-color: var(--accent); }

/* --- formulier --- */
.veld { display: grid; gap: 6px; margin-bottom: 16px; }
.veld > span { font-weight: 600; font-size: .92rem; }
.veld input, .veld textarea, .veld select {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--kaart);
}
.veld textarea { min-height: 96px; resize: vertical; }
.hint { color: var(--zacht); font-size: .85rem; }
.keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.keuze button { min-height: 44px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--kaart); cursor: pointer; padding: 6px; }
.keuze button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px dashed var(--lijn); background: transparent; border-radius: 999px; padding: 5px 11px; cursor: pointer; font-size: .9rem; }

.fotoknop {
  display: grid; place-items: center; gap: 4px; width: 100%; min-height: 140px; border: 2px dashed var(--lijn); border-radius: 14px;
  background: var(--kaart); cursor: pointer; color: var(--zacht); font-weight: 600; text-align: center; padding: 16px;
}
.fotoknop .groot { font-size: 2.2rem; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fotos .f { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--lijn); }
.fotos .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos .f button {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1;
}
.fotos .plus { display: grid; place-items: center; border: 2px dashed var(--lijn); background: transparent; border-radius: 10px; cursor: pointer; font-size: 1.6rem; color: var(--zacht); aspect-ratio: 1; }
.ai { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--accent-zacht); margin-bottom: 16px; font-size: .92rem; }
.ai.fout { background: var(--aandacht-bg); }
.draai { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: draai .8s linear infinite; flex: 0 0 auto; }
@keyframes draai { to { transform: rotate(360deg); } }

/* --- detail --- */
.galerij { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 12px; padding: 0 16px; }
.galerij img { flex: 0 0 auto; width: min(100%, 520px); max-height: 60vh; object-fit: contain; border-radius: 12px; background: #000; scroll-snap-align: center; cursor: zoom-in; }
.detailkop { display: grid; gap: 8px; margin-bottom: 12px; }
.feiten { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .92rem; margin: 12px 0; }
.feiten dt { color: var(--zacht); }
.feiten dd { margin: 0; }
.omschrijving { white-space: pre-wrap; margin: 0 0 12px; }
.statusknoppen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.historie { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.historie li { font-size: .92rem; }
.historie .wanneer { color: var(--zacht); font-size: .8rem; }
.historie .wijziging { color: var(--zacht); }
.historie .notitie { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; }

.lichtbak { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 20; display: grid; place-items: center; }
.lichtbak img { max-width: 100vw; max-height: 100vh; object-fit: contain; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 30;
  background: var(--tekst); color: var(--bg); padding: 10px 16px; border-radius: 10px; max-width: calc(100% - 32px);
}
.namen { display: grid; gap: 8px; }
.namen .knop { justify-content: flex-start; font-size: 1.05rem; }