/* Beheerscherm CPMS — sober, technisch, leesbaar.
   Geen sierlijkheden: dit is een instrument, geen etalage. */

:root {
    --lijn: #d8d8d4;
    --lijn-licht: #ebebe8;
    --tekst: #1a1a19;
    --gedempt: #6b6b66;
    --vlak: #f7f7f5;
    --goed: #1d6f42;
    --let-op: #8a5a00;
    --fout: #a32020;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--tekst);
    background: #fff;
}

a { color: #1a4f8a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── kop ── */
header {
    border-bottom: 1px solid var(--lijn);
    padding: 0 24px;
}
.kopbalk {
    display: flex;
    align-items: baseline;
    gap: 28px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 0 0;
}
.merk { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.merk span { color: var(--gedempt); font-weight: 400; }

nav { display: flex; gap: 22px; margin-left: auto; }
nav a { color: var(--gedempt); padding-bottom: 12px; border-bottom: 2px solid transparent; }
nav a.hier { color: var(--tekst); border-bottom-color: var(--tekst); }

/* ── kerncijfers ── */
.cijfers {
    display: flex;
    gap: 36px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 0 16px;
    flex-wrap: wrap;
}
.cijfer .getal { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cijfer .naam { font-size: 12px; color: var(--gedempt); text-transform: lowercase; }
.cijfer.aandacht .getal { color: var(--let-op); }

main { max-width: 1400px; margin: 0 auto; padding: 26px 24px 60px; }

h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 30px 0 10px; }
.onderschrift { color: var(--gedempt); margin: 0 0 20px; font-size: 14px; }

/* ── tabellen ── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--gedempt);
    padding: 7px 10px;
    border-bottom: 1px solid var(--lijn);
    white-space: nowrap;
}
td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--lijn-licht);
    vertical-align: top;
}
tr:hover td { background: var(--vlak); }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.leeg { color: var(--gedempt); padding: 24px 10px; }

/* ── toestand: kleur draagt betekenis, vorm niet ── */
.toestand { font-weight: 500; }
.toestand.verbonden { color: var(--goed); }
.toestand.stil { color: var(--let-op); }
.toestand.weg, .toestand.nooit { color: var(--fout); }

.nee { color: var(--fout); }
.ja { color: var(--goed); }
.grijs { color: var(--gedempt); }

/* ── detailblokken ── */
.blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border: 1px solid var(--lijn); }
.blok { padding: 12px 14px; border-right: 1px solid var(--lijn-licht); }
.blok:last-child { border-right: none; }
.blok .naam { font-size: 12px; color: var(--gedempt); }
.blok .waarde { font-size: 15px; margin-top: 2px; }

/* ── aanmelden ── */
.aanmeldvak { max-width: 340px; margin: 90px auto; }
.aanmeldvak h1 { margin-bottom: 18px; }
label { display: block; font-size: 13px; color: var(--gedempt); margin-bottom: 5px; }
input[type=password] {
    width: 100%; padding: 8px 10px; font-size: 15px;
    border: 1px solid var(--lijn); background: #fff; color: var(--tekst);
}
input[type=password]:focus { outline: 2px solid #1a4f8a; outline-offset: -1px; }
button {
    margin-top: 14px; padding: 8px 16px; font-size: 14px;
    border: 1px solid var(--tekst); background: var(--tekst); color: #fff; cursor: pointer;
}
button:hover { background: #000; }
.melding { color: var(--fout); font-size: 14px; margin-top: 12px; }
.uitleg { color: var(--gedempt); font-size: 13px; margin-top: 16px; }

@media (max-width: 720px) {
    .kopbalk { flex-wrap: wrap; gap: 12px; }
    nav { margin-left: 0; width: 100%; }
    main { padding: 20px 14px 40px; }
    table { font-size: 13px; }
    .tabelrol { overflow-x: auto; }
}

/* ── commando's ── */
.commandogroep { margin-bottom: 14px; }
.commandogroep .kop {
    font-size: 12px; color: var(--gedempt); margin-bottom: 7px;
}
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.knoppen button {
    margin: 0; padding: 6px 12px; font-size: 13px;
    background: #fff; color: var(--tekst); border: 1px solid var(--lijn);
}
.knoppen button:hover:not(:disabled) { background: var(--vlak); border-color: var(--gedempt); }
.knoppen button:disabled { color: var(--gedempt); cursor: default; }
.knoppen button.ingrijpend { border-color: #c9a0a0; color: #8a2020; }
.knoppen button.ingrijpend:hover:not(:disabled) { background: #fdf5f5; border-color: var(--fout); }

.uitslag { margin-top: 14px; border: 1px solid var(--lijn); padding: 10px 12px; }
.uitslag-kop { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.uitslag pre {
    margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px; white-space: pre-wrap; word-break: break-word;
    color: var(--gedempt); max-height: 260px; overflow: auto;
}
.uitslag.goed { border-color: #b6d4c1; } .uitslag.goed .uitslag-kop { color: var(--goed); }
.uitslag.let-op { border-color: #ddc9a0; } .uitslag.let-op .uitslag-kop { color: var(--let-op); }
.uitslag.fout { border-color: #d9b0b0; } .uitslag.fout .uitslag-kop { color: var(--fout); }
.uitslag.bezig .uitslag-kop { color: var(--gedempt); }

/* ── formulieren voor acties ── */
.formulieren { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.actieform { border: 1px solid var(--lijn); padding: 12px 14px; }
.actieform.breed { max-width: 560px; }
.actieform .kop { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.actieform label { margin-top: 8px; }
.actieform input, .actieform select {
    width: 100%; padding: 6px 8px; font-size: 14px;
    border: 1px solid var(--lijn); background: #fff; color: var(--tekst);
}
.actieform input:focus, .actieform select:focus { outline: 2px solid #1a4f8a; outline-offset: -1px; }
.actieform button { margin-top: 12px; margin-right: 6px; padding: 6px 12px; font-size: 13px; }
.actieform button[type=submit] { background: var(--tekst); color: #fff; border: 1px solid var(--tekst); }
.actieform button.ingrijpend { background: #fff; border: 1px solid #c9a0a0; color: #8a2020; }
button.klein { margin: 0; padding: 3px 9px; font-size: 12px; background: #fff; border: 1px solid var(--lijn); color: var(--tekst); }
button.klein.ingrijpend { border-color: #c9a0a0; color: #8a2020; }
button.klein:hover:not(:disabled) { background: var(--vlak); }

/* ── koppel-URL ── */
.koppelvak { border: 1px solid var(--lijn); padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.koppel-url { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; word-break: break-all; }
.koppelvak .melding { width: 100%; margin: 4px 0 0; font-size: 13px; }