:root {
  --bg: #0a0b0d;
  --kaart: #15171b;
  --kaart-op: #1d2026;
  --rand: #272b32;
  --rand-sterk: #3a3f48;
  --tekst: #f2f3f5;
  --tekst-2: #9aa1ab;
  --tekst-3: #6b727c;
  --geel: #ffd60a;
  --groen: #38d47a;
  --rood: #f8615a;
  --tabbalk-h: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
.verborgen { display: none !important; }

/* ---------- inlogscherm ---------- */

.inlog {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.inlog-doos { width: 100%; max-width: 320px; }
.inlog-titel {
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: -0.02em;
}
.inlog-label { display: block; font-size: 14px; color: var(--tekst-2); margin-bottom: 8px; }
.inlog input {
  width: 100%;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 17px;
  outline: none;
}
.inlog input:focus { border-color: var(--geel); }
.inlog-fout { color: var(--rood); font-size: 14px; min-height: 20px; margin: 8px 0 0; }
.inlog button {
  width: 100%;
  margin-top: 12px;
  background: var(--geel);
  color: #17190d;
  border: 0;
  border-radius: 12px;
  padding: 15px;
  font-size: 17px;
  font-weight: 600;
}
.inlog button:disabled { opacity: 0.45; }

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

.app { min-height: 100dvh; display: flex; flex-direction: column; }

.kop {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
}
.kop-titel { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.verbinding {
  font-size: 12px;
  color: var(--rood);
  border: 1px solid var(--rood);
  border-radius: 999px;
  padding: 2px 9px;
}

.inhoud {
  flex: 1;
  padding: 16px 14px calc(var(--tabbalk-h) + env(safe-area-inset-bottom) + 24px);
}

.tabbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(13, 14, 17, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  background: none;
  border: 0;
  padding: 9px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--tekst-3);
  font-size: 10.5px;
  min-height: var(--tabbalk-h);
}
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.actief { color: var(--geel); }

/* ---------- dagkaart ---------- */

.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}
.kaart.vandaag {
  border: 3px solid var(--geel);
  box-shadow: 0 0 0 5px rgba(255, 214, 10, 0.13);
  padding: 15px;
}

.kaart-kop { margin-bottom: 14px; }
.kaart-datum { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.kaart.vandaag .kaart-datum { font-size: 21px; }
.kaart-cyclus { font-size: 14px; color: var(--tekst-2); margin-top: 1px; }
.kaart-vlag {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 11px;
  background: rgba(255, 214, 10, 0.14);
  color: var(--geel);
}

.dagdeel { margin-top: 14px; }
.dagdeel:first-of-type { margin-top: 0; }
.dagdeel-kop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 9px;
}
.dagdeel-naam { font-size: 15px; font-weight: 600; }
.dagdeel-tijd { font-size: 13px; color: var(--tekst-3); }
.dagdeel-teller { margin-left: auto; font-size: 12.5px; color: var(--tekst-3); }
.dagdeel-teller.klaar { color: var(--groen); }
.dagdeel-teller.gemist { color: var(--rood); }

.pil {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--kaart-op);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--kleur, var(--rand-sterk));
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 7px;
}
.pil:last-child { margin-bottom: 0; }
.pil-vink {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--rand-sterk);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pil-vink svg { width: 15px; height: 15px; fill: none; stroke: #0d1a12; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pil-tekst { min-width: 0; flex: 1; }
.pil-naam { font-size: 14px; color: var(--tekst); font-weight: 500; }
.pil-dosis { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pil-aantal { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pil-sterkte { font-size: 12px; color: var(--tekst-3); }

.pil.ingenomen { background: rgba(56, 212, 122, 0.09); border-color: rgba(56, 212, 122, 0.32); }
.pil.ingenomen .pil-vink { background: var(--groen); border-color: var(--groen); }
.pil.ingenomen .pil-vink svg { opacity: 1; }
.pil.ingenomen .pil-aantal { color: var(--groen); }
.pil.gemist { border-color: rgba(248, 97, 90, 0.45); }
.pil.gemist .pil-vink { border-color: var(--rood); }
.pil-gemist-label { font-size: 11.5px; font-weight: 600; color: var(--rood); }

.tellers { margin: 4px 2px 22px; }
.teller-regel { font-size: 15.5px; color: var(--tekst-2); padding: 3px 0; }
.teller-regel b { color: var(--tekst); font-weight: 600; }
.teller-regel.nu b { color: var(--geel); }

/* ---------- configuratie ---------- */

.sectie {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: 18px;
  padding: 15px;
  margin-bottom: 14px;
}
.sectie-titel { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.sectie-uitleg { font-size: 13px; color: var(--tekst-3); margin: 0 0 14px; }

.rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--rand);
}
.rij:first-of-type { border-top: 0; }
.rij-tekst { flex: 1; min-width: 0; }
.rij-naam { font-size: 15px; font-weight: 500; }
.rij-sub { font-size: 12.5px; color: var(--tekst-3); }
.stip { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }

.veld { margin-bottom: 11px; }
.veld label { display: block; font-size: 12.5px; color: var(--tekst-2); margin-bottom: 5px; }
.veld input, .veld select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 16px;
  outline: none;
}
.veld input:focus, .veld select:focus { border-color: var(--rand-sterk); }
.veld-groep { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.veld-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.knop {
  background: var(--kaart-op);
  border: 1px solid var(--rand-sterk);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 500;
}
.knop.primair { background: var(--geel); color: #17190d; border-color: var(--geel); font-weight: 600; }
.knop.gevaar { color: var(--rood); border-color: rgba(248, 97, 90, 0.4); }
.knop.klein { padding: 7px 11px; font-size: 13px; border-radius: 9px; }
.knop.breed { width: 100%; }
.knop:disabled { opacity: 0.45; }
.knoppen { display: flex; gap: 9px; margin-top: 4px; }
.knoppen .knop { flex: 1; }

.leeg { color: var(--tekst-3); font-size: 14px; padding: 10px 0; }
.hint { font-size: 12.5px; color: var(--tekst-3); margin-top: 9px; }
.waarschuwing {
  font-size: 12.5px;
  color: var(--geel);
  background: rgba(255, 214, 10, 0.09);
  border: 1px solid rgba(255, 214, 10, 0.25);
  border-radius: 10px;
  padding: 9px 11px;
  margin-top: 11px;
}

/* ---------- schema-afbeeldingen ---------- */

.foto-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.foto {
  position: relative;
  border: 1px solid var(--rand);
  border-radius: 14px;
  overflow: hidden;
  background: var(--kaart-op);
}
.foto img { display: block; width: 100%; height: 128px; object-fit: cover; }
.foto-titel { font-size: 12px; padding: 7px 9px; color: var(--tekst-2); }
.foto-weg {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: var(--rood);
  font-size: 17px;
  line-height: 1;
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.viewer img { max-width: 100%; max-height: 100dvh; object-fit: contain; }
.viewer-sluit {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

/* ---------- melding ---------- */

.melding {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tabbalk-h) + env(safe-area-inset-bottom) + 16px);
  z-index: 90;
  background: var(--kaart-op);
  border: 1px solid var(--rand-sterk);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 14px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.melding.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }
.melding.fout { border-color: var(--rood); color: var(--rood); }