:root {
  --merk: #bbce09;   /* Aegis-groen uit het logo */
  --bg: #0f1216;
  --card: #171b21;
  --card2: #1e232b;
  --line: #2a313b;
  --tekst: #e6e9ee;
  --zacht: #98a2b3;
  --mgmt: #a78bfa;
  --ctrl: #fb923c;
  --data: #38bdf8;
  --retry: #f43f5e;
  --ok: #34d399;
  --waarschuwing: #fbbf24;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f9; --card: #fff; --card2: #f2f4f7; --line: #e3e7ed;
    --tekst: #131720; --zacht: #5b6472;
    --mgmt: #7c3aed; --ctrl: #ea580c; --data: #0284c7; --retry: #e11d48;
    --ok: #059669; --waarschuwing: #b45309;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; padding: 24px 20px 80px;
  background: var(--bg); color: var(--tekst);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* De pagina mag meegroeien met het venster: de Flow-tabel heeft negen kolommen
   en die horen zonder horizontaal scrollen te passen. Lopende tekst blijft wel
   smal (zie .hint/.sub/p hieronder), want een zin van 1700 px leest slecht. */
:root { --paginabreedte: min(1700px, calc(100vw - 48px)); }
header { max-width: var(--paginabreedte); margin: 0 auto 22px; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 0; }
h3 { font-size: 14px; margin: 26px 0 10px; color: var(--zacht);
     text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.sub, .hint { color: var(--zacht); font-size: 13px; margin: 0; }
.hint { margin: 4px 0 0; }

main, .card { max-width: var(--paginabreedte); margin: 0 auto; }

/* Tekst binnen een kaart houdt een leesbare regellengte, ook als de kaart zelf
   breed is. Tabellen en grafieken gebruiken de volle breedte. */
.card > p, .card > .hint, .card > .melding, .card-head + .hint { max-width: 96ch; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 22px; margin-bottom: 18px;
}
@media (max-width: 1400px) {
  body { padding-left: 12px; padding-right: 12px; }
  .card { padding-left: 14px; padding-right: 14px; }
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}

/* ---- upload ---- */
#dropzone {
  border: 2px dashed var(--line); border-radius: 10px;
  padding: 44px 20px; text-align: center; transition: .15s;
}
#dropzone.over { border-color: var(--data); background: var(--card2); }
.drop-title { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.drop-sub { color: var(--zacht); font-size: 13px; margin: 0; }
.link { color: var(--data); cursor: pointer; text-decoration: underline; }

.opties { margin-top: 14px; }
.opties summary { cursor: pointer; color: var(--zacht); font-size: 13px; }
.opt-grid { display: grid; gap: 8px; margin: 12px 0 6px;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.opt-grid label { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.opt-grid .wide { grid-column: 1 / -1; }
.opt-grid input[type=text] {
  flex: 1; background: var(--card2); border: 1px solid var(--line);
  color: var(--tekst); border-radius: 6px; padding: 6px 9px; font-size: 13px;
}

.status { margin-top: 14px; padding: 11px 14px; border-radius: 8px; font-size: 14px;
          background: var(--card2); border: 1px solid var(--line); }
.status.fout { border-color: var(--retry); color: var(--retry); }

button {
  font: inherit; font-size: 13px; border-radius: 7px; cursor: pointer;
  padding: 7px 14px; border: 1px solid var(--line); background: var(--card2);
  color: var(--tekst);
}
button:hover { border-color: var(--zacht); }
button.primary { background: var(--data); border-color: var(--data); color: #04121c;
                 font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; }

/* ---- tabellen ---- */
.tabel-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.ladder-wrap { max-height: 620px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 11px; text-align: left; white-space: nowrap; }
/* De Flow-tabel heeft de meeste kolommen; iets krappere cellen schelen daar
   ruim honderd pixels, wat op een laptopscherm het verschil maakt tussen wel
   en niet scrollen. */
#ladder th, #ladder td { padding-left: 8px; padding-right: 8px; }
/* Notes is vrije tekst en daarmee de breedste kolom. Alle andere kolommen
   moeten op een regel blijven, deze mag afbreken: dat scheelt honderden pixels
   en kost alleen wat rijhoogte bij de frames die veel te melden hebben. */
#ladder td:last-child {
  white-space: normal;
  min-width: 190px;
  max-width: 380px;
  line-height: 1.35;
}
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--card2); color: var(--zacht); font-weight: 600;
  font-size: 12px; border-bottom: 1px solid var(--line);
}
tbody tr { border-top: 1px solid var(--line); }
tbody tr:first-child { border-top: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

#clients tbody tr { cursor: pointer; }
#clients tbody tr:hover { background: var(--card2); }
#clients tbody tr.gekozen { background: color-mix(in srgb, var(--data) 16%, transparent); }

/* ---- ladder ---- */
tr.f0 td.frame-label { color: var(--mgmt); }
tr.f1 td.frame-label { color: var(--ctrl); }
tr.f2 td.frame-label { color: var(--data); }
tr.retry td { color: var(--retry); }
tr.retry td.frame-label { color: var(--retry); font-weight: 600; }

.pijl { font-family: ui-monospace, Menlo, monospace; letter-spacing: -0.5px; }
/* frame-kleuren komen uit het Wireshark-profiel; die zetten hun eigen contrast */
td.frame-label { border-radius: 4px; padding-left: 8px; padding-right: 8px; }
tr.f0 td.frame-label, tr.f1 td.frame-label, tr.f2 td.frame-label,
tr.retry td.frame-label { font-weight: 500; }
td.num.laag { color: var(--waarschuwing); font-weight: 600; }

button.mini {
  border: none; background: none; color: var(--zacht); cursor: pointer;
  padding: 0 6px; font-size: 13px; line-height: 1; opacity: .55;
}
button.mini:hover { opacity: 1; color: var(--data); }
.badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; margin-right: 5px;
  border: 1px solid currentColor;
}
.badge.retry { color: var(--retry); }
.badge.ok { color: var(--ok); }
.badge.ack { color: var(--ctrl); }
.zacht { color: var(--zacht); }

/* ---- filters ---- */
.filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-label { color: var(--zacht); font-size: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; background: var(--card2); user-select: none;
}
.chip:has(input:checked) { border-color: currentColor; }
.chip-mgmt:has(input:checked) { color: var(--mgmt); }
.chip-ctrl:has(input:checked) { color: var(--ctrl); }
.chip-data:has(input:checked) { color: var(--data); }
.chip-retry:has(input:checked) { color: var(--retry); }

/* ---- kpi's ---- */
.kpis { display: grid; gap: 12px; margin: 16px 0 4px;
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.kpi { background: var(--card2); border: 1px solid var(--line);
       border-radius: 9px; padding: 12px 14px; }
.kpi .kop { font-size: 11px; color: var(--zacht); text-transform: uppercase;
            letter-spacing: .05em; }
.kpi .waarde { font-size: 23px; font-weight: 650; margin-top: 3px;
               font-variant-numeric: tabular-nums; }
.kpi .voet { font-size: 12px; color: var(--zacht); margin-top: 2px; }
.kpi.goed .waarde { color: var(--ok); }
.kpi.matig .waarde { color: var(--waarschuwing); }
.kpi.slecht .waarde { color: var(--retry); }

.melding { border-left: 3px solid var(--waarschuwing); background: var(--card2);
           padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 14px 0;
           font-size: 13px; }
.melding.ok { border-left-color: var(--ok); }
.melding ul { margin: 6px 0 0; padding-left: 18px; }

/* ---- grafieken ---- */
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; min-width: 560px; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px;
           color: var(--zacht); margin: 8px 0 0; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
             margin-right: 5px; vertical-align: -1px; }
svg text { fill: var(--zacht); font-size: 11px;
           font-family: ui-sans-serif, system-ui, sans-serif; }
svg .as { stroke: var(--line); stroke-width: 1; }
svg .raster { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }

/* ---- logo ---- */
header .logo { height: 62px; width: auto; display: block; margin-bottom: 6px;
               color: var(--tekst); }
@media (prefers-color-scheme: dark) { header .logo { color: var(--tekst); } }
button.primary { background: var(--merk); border-color: var(--merk); color: #11150a; }
.kpi.merk .waarde { color: var(--merk); }
td.ds { font-size: 12px; color: var(--zacht); white-space: nowrap; }
td.mcs { font-size: 12px; white-space: nowrap; }
tr.bcast td.pijl { font-style: italic; }
.addr-detail { font-size: 11px; color: var(--zacht); margin-top: 3px; }
.addr-detail b { color: var(--tekst); font-weight: 600; }

/* ---- ACK-tijden ---- */
tr.gemarkeerd { outline: 2px solid var(--merk); outline-offset: -2px; }
#ack-stats table td.mono { cursor: pointer; color: var(--data); }
#ack-stats table td.mono:hover { text-decoration: underline; }

/* kolomkop met extra uitleg: subtiel stippellijntje zodat de tooltip vindbaar is */
thead th.met-uitleg { cursor: help; text-decoration: underline dotted; }