/* Gedeelde stijl voor de beheerpagina's (overzicht, taken, analytics). */
:root { --bg:#F1F4F8; --surface:#fff; --ink:#1A2433; --muted:#5B687A; --line:#DCE2EA; --accent:#1B5AD6; --accent-soft:#E5EDFC; --warn:#8A5A00; --warn-soft:#FBF0D6; --good:#1E7A45; --good-soft:#E1F3E8; --bad:#A3271F; --bad-soft:#FBE4E1; --off:#8893A3 }
@media (prefers-color-scheme: dark) { :root { --bg:#0F151C; --surface:#18212B; --ink:#E7EDF3; --muted:#94A2B0; --line:#2B3847; --accent:#8FB2FA; --accent-soft:#1F3157; --warn:#F0C56A; --warn-soft:#3A2E12; --good:#7FD6A0; --good-soft:#15321F; --bad:#F08A80; --bad-soft:#3A1A17; --off:#6E7B8B } }
* { box-sizing: border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif }
main { max-width:1040px; margin:0 auto; padding:22px max(16px, env(safe-area-inset-left,0px)) 56px; display:grid; gap:20px }
h1 { font-size:24px; margin:0 } h2 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px } h3 { margin:0; font-size:16px }
p { margin:0 } .hint { color:var(--muted); font-size:13.5px }
.raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px }
.box, .tegel { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; min-width:0; text-decoration:none; color:inherit }
a.tegel:hover { border-color:var(--accent) }
.tegel p, .box p.klein { color:var(--muted); font-size:13.5px }
.tag { font-size:12px; font-weight:600; width:fit-content; border-radius:999px; padding:1px 9px; background:var(--accent-soft); color:var(--accent) }
.tag.good { background:var(--good-soft); color:var(--good) } .tag.bad { background:var(--bad-soft); color:var(--bad) } .tag.warn { background:var(--warn-soft); color:var(--warn) } .tag.off { background:var(--bg); color:var(--off); border:1px solid var(--line) }
.getal { font-size:30px; line-height:1.1; font-weight:700; font-variant-numeric:tabular-nums } .getal small { font-size:13px; font-weight:400; color:var(--muted) }
.balk { height:8px; border-radius:4px; background:var(--line); overflow:hidden } .balk i { display:block; height:100%; background:var(--accent) } .balk i.warn { background:var(--warn) } .balk i.bad { background:var(--bad) }
table { border-collapse:collapse; width:100%; font-size:13.5px } th, td { text-align:left; padding:5px 10px 5px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums } th { color:var(--muted); font-weight:600; font-size:12px }
.scroll { overflow-x:auto }
svg text { fill:var(--muted); font-size:11px }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }