/* DR Lister Pro — blauw, donker, gemaakt voor een telefoon.
   Geen framework: één bestand, laadt meteen, ook op 4G onderweg. */

:root {
  --blauw: #2563eb;
  --blauw-licht: #60a5fa;
  --grond: #0b1220;
  --paneel: #111c30;
  --rand: #1f2f4a;
  --tekst: #e8eefc;
  --zacht: #8fa3c4;
  --groen: #34d399;
  --oranje: #fbbf24;
  --rood: #f87171;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Ruimte voor de streep onderaan een iPhone zonder thuisknop. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
}

.omhulsel { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; }

header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
header img { width: 36px; height: 36px; border-radius: 9px; }
header h1 { font-size: 1.15rem; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
header .rechts { margin-left: auto; }

.kaart {
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}

label { display: block; font-size: 0.8rem; color: var(--zacht); margin: 0 0 6px; font-weight: 600; }

input, select, textarea, button {
  font: inherit;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: #0d1729;
  color: var(--tekst);
  padding: 12px 14px;
  /* 16px voorkomt dat Safari inzoomt bij het aantikken van een veld. */
  font-size: 16px;
}

textarea { min-height: 140px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blauw); outline-offset: 1px; border-color: transparent; }

.veld { margin-bottom: 16px; }
.veld:last-child { margin-bottom: 0; }

button.hoofd {
  background: var(--blauw);
  border-color: var(--blauw);
  font-weight: 700;
  cursor: pointer;
  padding: 15px;
}
button.hoofd:active { background: #1d4ed8; }
button.hoofd:disabled { opacity: 0.5; cursor: default; }

button.klein {
  width: auto; padding: 8px 14px; font-size: 0.85rem; background: transparent; color: var(--zacht);
  cursor: pointer;
}

.keuze { display: flex; gap: 8px; }
.keuze label {
  flex: 1; margin: 0; text-align: center; padding: 11px 6px; border: 1px solid var(--rand);
  border-radius: 10px; cursor: pointer; font-size: 0.85rem; color: var(--zacht); background: #0d1729;
}
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze input:checked + span { color: var(--tekst); }
.keuze label:has(input:checked) { border-color: var(--blauw); background: #132446; color: var(--tekst); }

.melding { padding: 12px 14px; border-radius: 10px; font-size: 0.9rem; margin-bottom: 16px; }
.melding.fout { background: #3b1219; border: 1px solid #7f1d29; color: #fecdd3; }
.melding.goed { background: #0c2b22; border: 1px solid #14543f; color: #a7f3d0; }

.rij { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.rij:last-child { border-bottom: none; }
.rij .naam { flex: 1; min-width: 0; }
.rij .naam b { display: block; font-weight: 600; font-size: 0.95rem; }
.rij .naam small { color: var(--zacht); font-size: 0.78rem; }

.bal { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.bal.wacht { background: var(--zacht); }
.bal.bezig { background: var(--blauw-licht); animation: kloppen 1.2s ease-in-out infinite; }
.bal.klaar { background: var(--groen); }
.bal.mislukt { background: var(--rood); }
@keyframes kloppen { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.balk { height: 4px; background: var(--rand); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.balk i { display: block; height: 100%; background: var(--blauw); transition: width 0.4s; }

pre.verslag {
  white-space: pre-wrap; word-break: break-word;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--zacht); margin: 0;
}
pre.verslag b { color: var(--tekst); font-weight: 600; }

a { color: var(--blauw-licht); }
.leeg { color: var(--zacht); font-size: 0.9rem; text-align: center; padding: 24px 0; }
h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zacht); margin: 24px 0 10px; }