:root {
  --agter: #081F30; --vlak: #0E2A40; --vlak2: #133550; --lyn: #1D4362;
  --teks: #E6EEF5; --dof: #8FA6BA; --aksent: #1E88E5;
  --groen: #00C853; --rooi: #FF4136; --geel: #F2D518; --oranje: #F97316;
  --kop: 56px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--agter); color: var(--teks);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.ik { width: 20px; height: 20px; flex: none; }

#kop {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  min-height: calc(var(--kop) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--agter); border-bottom: 1px solid var(--lyn);
}
.kopikoon { border-radius: 6px; }
.koptitel { font-weight: 700; font-size: 17px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ikknop {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px;
  background: transparent; border: 1px solid var(--lyn); border-radius: 10px; cursor: pointer;
}
.ikknop:hover { background: var(--vlak); }

main { max-width: 980px; margin: 0 auto; padding: 12px max(12px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }

/* oortjies */
.oortjies { display: flex; gap: 8px; margin-bottom: 12px; }
.oortjie {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  background: var(--vlak); border: 1px solid var(--lyn); border-radius: 10px; cursor: pointer; color: var(--dof);
}
.oortjie.aan { color: var(--teks); border-color: var(--aksent); background: var(--vlak2); }

/* app-teëls */
.teels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
@media (max-width: 640px) { .teels { grid-template-columns: repeat(2, 1fr); } }
.teel {
  text-align: left; background: var(--vlak); border: 1px solid var(--lyn); border-left: 4px solid var(--kleur);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 44px;
}
.teel.aan { background: var(--vlak2); border-color: var(--kleur); }
.teel b { display: block; font-size: 14px; }
.teel .getal { font-size: 22px; font-weight: 700; }
.teel .klein { color: var(--dof); font-size: 12px; }
.teel .nou { color: var(--groen); }
.teel .rooi { color: var(--rooi); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.skyfies { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.skyfies::-webkit-scrollbar { display: none; }
.skyf {
  flex: none; min-height: 36px; padding: 0 12px; border-radius: 18px; cursor: pointer;
  background: var(--vlak); border: 1px solid var(--lyn); color: var(--dof);
}
.skyf.aan { background: var(--aksent); border-color: var(--aksent); color: #fff; }
.soek { position: relative; flex: 1 1 220px; }
.soek .ik { position: absolute; left: 12px; top: 12px; color: var(--dof); pointer-events: none; }
.soek input {
  width: 100%; min-height: 44px; padding: 0 12px 0 40px; border-radius: 10px;
  background: var(--vlak); border: 1px solid var(--lyn); color: var(--teks); font: inherit;
}
.soek input:focus { outline: 2px solid var(--aksent); outline-offset: -1px; }

.stand { display: flex; align-items: center; gap: 8px; color: var(--dof); font-size: 13px; margin: 4px 0 8px; }
.kol { width: 8px; height: 8px; border-radius: 50%; background: var(--groen); flex: none; }
.kol.af { background: var(--dof); }
.stand .ikknop { margin-left: auto; min-height: 36px; }
.filterstrook {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 8px;
  background: var(--vlak2); border: 1px solid var(--aksent); border-radius: 10px; font-size: 14px;
}
.filterstrook span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tydlyn */
.dag { position: sticky; top: calc(var(--kop) + env(safe-area-inset-top)); z-index: 5; background: var(--agter);
  color: var(--dof); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 8px 2px 4px; }
.ry {
  display: grid; grid-template-columns: 62px 4px 22px 1fr; gap: 0 8px; align-items: start;
  padding: 8px 6px; border-bottom: 1px solid var(--lyn); cursor: pointer;
}
.ry:hover { background: var(--vlak); }
.ry.nuut { animation: flits 1.6s ease-out; }
@keyframes flits { from { background: var(--vlak2); } to { background: transparent; } }
.ry .tyd { color: var(--dof); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 1px; }
.ry .streep { align-self: stretch; border-radius: 2px; background: var(--kleur); }
.ry .ik { color: var(--dof); margin-top: 0; }
.ry.foutry .ik, .ry.foutry .hoofteks { color: #FF8A80; }
.ry.bedienerry .ik { color: var(--aksent); }
.hoofteks { overflow-wrap: anywhere; }
.hoofteks .wie { font-weight: 600; }
.subteks { color: var(--dof); font-size: 12px; overflow-wrap: anywhere; }
.detail {
  grid-column: 1 / -1; margin: 8px 0 0; padding: 10px; border-radius: 8px; background: var(--vlak);
  font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--teks);
}
.detail .knoppe { display: flex; gap: 8px; margin-top: 8px; font-family: system-ui, sans-serif; flex-wrap: wrap; }
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--lyn); background: var(--vlak2); cursor: pointer;
}
.knop.hoof { background: var(--aksent); border-color: var(--aksent); color: #fff; }
.leeg { color: var(--dof); text-align: center; padding: 40px 12px; }
.meer { display: flex; justify-content: center; margin: 14px 0; }

/* toestelle */
.toestel {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 12px; margin-bottom: 8px; background: var(--vlak); border: 1px solid var(--lyn); border-radius: 10px; cursor: pointer;
}
.toestel b { font-size: 15px; }
.toestel .subteks { grid-column: 1; }
.toestel .apps { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.merkie { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--kleur); color: var(--teks); }

/* aanmeld */
.aanmeld { max-width: 360px; margin: 12vh auto 0; text-align: center; }
.aanmeld img { width: 72px; height: 72px; border-radius: 14px; }
.aanmeld input {
  width: 100%; min-height: 48px; margin: 16px 0 10px; padding: 0 14px; border-radius: 10px; text-align: center;
  background: var(--vlak); border: 1px solid var(--lyn); color: var(--teks); font: 18px/1 inherit; letter-spacing: .08em;
}
.aanmeld .knop { width: 100%; }
.foutteks { color: #FF8A80; min-height: 20px; margin-top: 8px; }

/* naam-vel */
.vel-agter { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vel { width: 100%; max-width: 380px; background: var(--vlak); border: 1px solid var(--lyn); border-radius: 14px; padding: 16px; }
.vel h2 { margin: 0 0 4px; font-size: 17px; }
.vel input { width: 100%; min-height: 44px; margin: 12px 0; padding: 0 12px; border-radius: 10px; background: var(--agter); border: 1px solid var(--lyn); color: var(--teks); font: inherit; }
.vel .knoppe { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) {
  .vel-agter { align-items: flex-end; padding: 0; }
  .vel { max-width: none; border-radius: 14px 14px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}