:root {
    --black: #000;
    --dark: #545658;
    --light: #fff;
    --highlite: #ac9988;
    --bg: #f4f2f0;
    --border: #ddd6cf;
    --ok: #2e7d32;
    --ok-bg: #e8f5e9;
    --warn: #b26a00;
    --warn-bg: #fff4e0;
    --error: #c62828;
    --error-bg: #fdecea;
    --idle: #8a8a8a;
    --idle-bg: #f0f0f0;
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--black); background: var(--bg); }
a { color: var(--dark); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }
.muted { color: var(--dark); }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: .75rem 1.5rem; background: var(--dark); color: var(--light); }
.topbar a { color: var(--light); text-decoration: none; }
.brand { font-weight: 600; }
.topnav { display: flex; gap: 1.25rem; flex: 1; }
.topnav a:hover { text-decoration: underline; }
.user { font-size: .9rem; opacity: .9; }

.page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.card { background: var(--light); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; }

.alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-success { background: var(--ok-bg); color: var(--ok); }

.form-stack { display: flex; flex-direction: column; gap: .5rem; }
.form-stack input[type=email], .form-stack input[type=password], .form-stack input[type=text], .form-stack select, .form-stack textarea {
    padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 6px; font: inherit;
}
.checkbox { display: flex; align-items: center; gap: .4rem; }
.btn { display: inline-block; padding: .55rem 1rem; border-radius: 6px; border: 1px solid var(--dark); background: var(--light); color: var(--dark); font: inherit; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--dark); color: var(--light); }

.auth-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; }

.klein { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.sectie { margin-bottom: 2rem; }
.smal { max-width: 560px; }
code { font-size: .85em; background: var(--idle-bg); padding: .1em .35em; border-radius: 4px; }
.token { display: inline-block; margin-top: .5rem; word-break: break-all; user-select: all; }
.bestandsnaam { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; overflow-wrap: anywhere; }
.btn-klein { padding: .3rem .6rem; font-size: .85rem; }
fieldset { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .75rem; }
.checkbox.inline { display: inline-flex; margin-right: .75rem; }

/* Tegels */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.tegel { display: flex; flex-direction: column; gap: .35rem; background: var(--light); border: 1px solid var(--border); border-left: 6px solid var(--idle); border-radius: 8px; padding: 1rem; color: inherit; text-decoration: none; }
.tegel:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tegel h3 { margin: 0; font-size: 1.05rem; }
.tegel-status { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.stip { width: .7rem; height: .7rem; border-radius: 50%; background: var(--idle); }
.tegel-groen { border-left-color: var(--ok); } .tegel-groen .stip { background: var(--ok); } .tegel-groen .tegel-status { color: var(--ok); }
.tegel-oranje { border-left-color: var(--warn); } .tegel-oranje .stip { background: var(--warn); } .tegel-oranje .tegel-status { color: var(--warn); }
.tegel-rood { border-left-color: var(--error); } .tegel-rood .stip { background: var(--error); } .tegel-rood .tegel-status { color: var(--error); }
.tegel-grijs .tegel-status { color: var(--idle); }
.tegel-bestand { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 .75rem; font-size: .9rem; }
.tegel-bestand > span:last-child { white-space: nowrap; margin-left: auto; }
.tegel-signalen { font-size: .85rem; font-weight: 600; }

/* Signalen */
.signaal { background: var(--light); border: 1px solid var(--border); border-left: 6px solid var(--idle); border-radius: 8px; padding: .75rem 1rem; margin-bottom: .75rem; }
.signaal-rood { border-left-color: var(--error); }
.signaal-oranje { border-left-color: var(--warn); }
.signaal-dicht { opacity: .8; }
.signaal-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.signaal-details { white-space: pre-line; margin: .35rem 0; font-size: .92rem; }
.signaal-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.signaal-form input { flex: 1 1 220px; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }

/* Procesdetail */
.feiten { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.feiten dt { color: var(--dark); }
.feiten dd { margin: 0; }
.tabel-wrap { overflow-x: auto; background: var(--light); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; }
.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th, .tabel td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabel th { font-weight: 600; color: var(--dark); background: #faf9f8; }
.label { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.label-ok { background: var(--ok-bg); color: var(--ok); }
.label-waarschuwing { background: var(--warn-bg); color: var(--warn); }
.label-fout { background: var(--error-bg); color: var(--error); }

/* Grafiek */
.grafieken { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.grafiek { margin: 0; background: var(--light); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; }
.grafiek figcaption { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; margin-bottom: .25rem; }
.grafiek svg { width: 100%; height: auto; display: block; }
.grafiek .lijn { fill: none; stroke: var(--dark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek .stip-grafiek { fill: var(--dark); stroke: var(--light); stroke-width: 2; }
.grafiek .punt:hover .stip-grafiek { fill: var(--highlite); }
.grafiek .as { stroke: #bbb; stroke-width: 1; }
.grafiek .raster { stroke: #eee; stroke-width: 1; }
.grafiek .as-tekst { font-size: 11px; fill: var(--dark); }