*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mk-achtergrond);
  color: var(--mk-tekst);
  font-family: var(--mk-letter);
  font-size: var(--mk-maat-m);
  line-height: 1.4;
}

h1, h2, h3 { margin: 0 0 var(--mk-ruimte-4); line-height: 1.25; font-weight: 600; }
h1 { font-size: var(--mk-maat-titel); }
h2 { font-size: var(--mk-maat-kop); }
h3 { font-size: var(--mk-maat-l); }
p { margin: 0 0 var(--mk-ruimte-5); color: var(--mk-tekst-zacht); }
img { display: block; }

.mk-getal { font-variant-numeric: tabular-nums; }

.mk-merk { display: flex; align-items: center; gap: var(--mk-ruimte-4); }
.mk-merk img { border-radius: var(--mk-rond-l); }
.mk-merk-naam { font-size: var(--mk-maat-kop); font-weight: 600; }
.mk-merk-naam span { color: var(--mk-woord-112); font-weight: 700; }

.mk-kaart {
  background: var(--mk-vlak);
  border: 1px solid var(--mk-lijn);
  border-radius: var(--mk-rond-m);
  box-shadow: var(--mk-schaduw-1);
}

.mk-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-ruimte-3);
  min-height: 26px;
  padding: 0 var(--mk-ruimte-5);
  border: 1px solid var(--mk-lijn);
  border-radius: var(--mk-rond-m);
  background: var(--mk-vlak);
  color: var(--mk-tekst);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.mk-knop:hover { background: var(--mk-merk-zacht); border-color: var(--mk-merk); }
.mk-knop:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
.mk-knop:focus-visible { outline: none; box-shadow: var(--mk-focus); }
.mk-knop-hoofd { background: var(--mk-merk); border-color: var(--mk-merk); color: var(--mk-op-merk); font-weight: 600; }
.mk-knop-hoofd:hover { background: var(--mk-merk-hover); border-color: var(--mk-merk-hover); }
.mk-knop-zacht { background: var(--mk-vlak-zacht); }
.mk-knop-gevaar { color: var(--mk-fout); }
.mk-knop-gevaar:hover { background: var(--mk-fout); border-color: var(--mk-fout); color: var(--mk-vlak); }
.mk-knop-klein { min-height: 20px; padding: 0 var(--mk-ruimte-4); font-size: var(--mk-maat-s); }
.mk-sneltoets { color: var(--mk-tekst-zacht); font-size: var(--mk-maat-s); font-weight: 400; font-variant-numeric: tabular-nums; }
.mk-knop-hoofd .mk-sneltoets { color: inherit; opacity: 0.8; }

.mk-label { display: block; margin: var(--mk-ruimte-4) 0 var(--mk-ruimte-2); font-size: var(--mk-maat-s); color: var(--mk-tekst-zacht); }
.mk-veld {
  width: 100%;
  min-height: 24px;
  padding: 0 var(--mk-ruimte-3);
  border: 1px solid var(--mk-lijn);
  border-radius: var(--mk-rond-s);
  background: var(--mk-vlak-verhoogd);
  color: var(--mk-tekst);
  font: inherit;
}
.mk-veld:focus { outline: none; border-color: var(--mk-merk); box-shadow: var(--mk-focus); }

.mk-pil {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--mk-ruimte-3);
  border-radius: var(--mk-rond-s);
  background: var(--mk-vlak-zacht);
  color: var(--mk-tekst);
  font-size: var(--mk-maat-s);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.mk-pil-succes { background: var(--mk-succes-zacht); color: var(--mk-succes); }
.mk-pil-waarschuwing { background: var(--mk-waarschuwing-zacht); color: var(--mk-waarschuwing); }
.mk-pil-fout { background: var(--mk-fout-zacht); color: var(--mk-fout); }

.mk-melding, .mk-voertuig {
  display: flex;
  align-items: center;
  gap: var(--mk-ruimte-4);
  padding: var(--mk-ruimte-3) var(--mk-ruimte-4);
  border-radius: var(--mk-rond-s);
}
.mk-melding:hover, .mk-voertuig:hover { background: var(--mk-merk-zacht); }
.mk-melding img { width: 26px; height: auto; flex: none; }
.mk-voertuig img { flex: none; }
.mk-melding-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mk-melding-tekst span { color: var(--mk-tekst-zacht); font-size: var(--mk-maat-s); }

.mk-werkplek { display: flex; flex-direction: column; height: 100vh; min-height: 560px; }

.mk-titelbalk {
  display: flex;
  align-items: center;
  gap: var(--mk-ruimte-6);
  padding: var(--mk-ruimte-2) var(--mk-ruimte-5);
  background: var(--mk-vlak);
}
.mk-titelbalk .mk-merk img { width: 22px; height: 22px; }
.mk-titelbalk .mk-merk-naam { font-size: var(--mk-maat-l); }
.mk-titelbalk-rechts { display: flex; align-items: center; gap: var(--mk-ruimte-6); margin-left: auto; color: var(--mk-tekst-zacht); font-variant-numeric: tabular-nums; }
.mk-klok { color: var(--mk-tekst); font-size: var(--mk-maat-kop); font-weight: 600; }

.mk-menubalk { display: flex; gap: var(--mk-ruimte-1); padding: 0 var(--mk-ruimte-4) var(--mk-ruimte-2); background: var(--mk-vlak); }
.mk-menubalk button {
  padding: var(--mk-ruimte-1) var(--mk-ruimte-5);
  border: 0;
  border-radius: var(--mk-rond-s);
  background: transparent;
  color: var(--mk-tekst);
  font: inherit;
  cursor: pointer;
}
.mk-menubalk button:hover { background: var(--mk-merk-zacht); }

.mk-tabs { display: flex; align-items: flex-end; gap: var(--mk-ruimte-1); padding: var(--mk-ruimte-3) var(--mk-ruimte-4) 0; background: var(--mk-kop); }
.mk-tab {
  padding: var(--mk-ruimte-2) var(--mk-ruimte-6);
  border: 1px solid transparent;
  border-radius: var(--mk-rond-m) var(--mk-rond-m) 0 0;
  background: transparent;
  color: var(--mk-tekst-zacht);
  font: inherit;
  cursor: pointer;
}
.mk-tab:hover { color: var(--mk-tekst); background: var(--mk-vlak-zacht); }
.mk-tab[aria-selected="true"] { background: var(--mk-vlak-zacht); border-color: var(--mk-lijn) var(--mk-lijn) transparent; color: var(--mk-tekst); font-weight: 600; }

.mk-werkbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mk-ruimte-3);
  padding: var(--mk-ruimte-3) var(--mk-ruimte-4);
  background: var(--mk-vlak-zacht);
}
.mk-werkbalk .mk-veld { width: auto; }
.mk-werkbalk-rechts { display: flex; align-items: center; gap: var(--mk-ruimte-4); margin-left: auto; color: var(--mk-tekst-zacht); font-size: var(--mk-maat-s); }

.mk-panelen { flex: 1; min-height: 0; display: grid; gap: var(--mk-ruimte-3); padding: var(--mk-ruimte-3); }

.mk-paneel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--mk-vlak);
  border: 1px solid var(--mk-lijn);
  border-radius: var(--mk-rond-s);
  overflow: hidden;
}
.mk-paneel-kop {
  display: flex;
  align-items: center;
  gap: var(--mk-ruimte-4);
  min-height: var(--mk-regel);
  padding: var(--mk-ruimte-1) var(--mk-ruimte-4);
  background: var(--mk-kop);
  font-weight: 600;
}
.mk-paneel-kop .mk-aantal { margin-left: auto; color: var(--mk-tekst-zacht); font-weight: 400; font-variant-numeric: tabular-nums; }
.mk-paneel-balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-ruimte-3); padding: var(--mk-ruimte-3) var(--mk-ruimte-4); background: var(--mk-vlak-zacht); }
.mk-paneel-inhoud { flex: 1; min-height: 0; overflow: auto; }
.mk-paneel-voet { padding: var(--mk-ruimte-2) var(--mk-ruimte-4); background: var(--mk-vlak-zacht); color: var(--mk-tekst-zacht); font-size: var(--mk-maat-s); }

.mk-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.mk-tabel th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--mk-regel);
  padding: 0 var(--mk-ruimte-3);
  background: var(--mk-vlak-zacht);
  box-shadow: inset 0 -1px 0 var(--mk-lijn);
  color: var(--mk-tekst-zacht);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.mk-tabel td { height: var(--mk-regel); padding: 0 var(--mk-ruimte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tabel tbody tr:nth-child(even) { background: var(--mk-zebra); }
.mk-tabel tbody tr:hover { background: var(--mk-merk-zacht); }
.mk-tabel tbody tr.is-gekozen { background: var(--mk-selectie); color: var(--mk-op-selectie); }
.mk-tabel tbody tr.is-gekozen .mk-zacht { color: inherit; }
.mk-tabel .mk-smal { width: 30px; padding: 0 var(--mk-ruimte-2); text-align: center; }
.mk-tabel .mk-rechts { text-align: right; }
.mk-tabel td img { display: inline-block; vertical-align: middle; }
.mk-zacht { color: var(--mk-tekst-zacht); }

.mk-statuscel { color: #FFFFFF; font-weight: 600; }
.mk-st-vrij { background: var(--mk-voertuig-vrij); }
.mk-st-aanrijdend-prio { background: var(--mk-voertuig-aanrijdend-prio); }
.mk-st-ter-plaatse { background: var(--mk-voertuig-ter-plaatse); }
.mk-st-niet-beschikbaar { background: var(--mk-voertuig-niet-beschikbaar); }
.mk-st-spraakaanvraag { background: var(--mk-voertuig-spraakaanvraag); animation: mk-knipper 1s steps(1, end) infinite; }
.mk-st-vervoer { background: var(--mk-voertuig-vervoer); }
@keyframes mk-knipper { 50% { background: var(--mk-voertuig-spraakaanvraag-knipper); } }
@media (prefers-reduced-motion: reduce) { .mk-st-spraakaanvraag { animation: none; } }
.mk-st-open { background: var(--mk-melding-open); }
.mk-st-aanrijdend { background: var(--mk-melding-aanrijdend); }
.mk-st-bezig { background: var(--mk-melding-bezig); }

.mk-blokje { display: inline-block; width: 10px; height: 10px; margin-right: var(--mk-ruimte-2); border-radius: var(--mk-rond-s); vertical-align: -1px; }

.mk-voortgang { position: relative; height: 6px; border-radius: var(--mk-rond-s); background: var(--mk-vlak-zacht); box-shadow: inset 0 0 0 1px var(--mk-lijn); overflow: hidden; }
.mk-voortgang span { position: absolute; inset: 0 auto 0 0; }

.mk-kladblok { padding: var(--mk-ruimte-3) var(--mk-ruimte-4); background: var(--mk-kladblok); }

.mk-statusbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mk-ruimte-3) var(--mk-ruimte-6);
  padding: var(--mk-ruimte-2) var(--mk-ruimte-5);
  background: var(--mk-vlak);
  color: var(--mk-tekst-zacht);
  font-size: var(--mk-maat-s);
}
.mk-statusbalk-rechts { display: flex; gap: var(--mk-ruimte-6); margin-left: auto; }

.mk-venster { background: var(--mk-vlak); border: 1px solid var(--mk-lijn); border-radius: var(--mk-rond-l); box-shadow: var(--mk-schaduw-3); }