:root { --navy:#14284b; --flame:#f0a81e; --bg:#f6f7fa; --card:#fff; --text:#1b1f27; --muted:#626a78; --line:#e2e5ec; --err:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f131b; --card:#161b24; --text:#e6e8ee; --muted:#9aa1ad; --line:#2b303b; --err:#ffb4ab; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; gap:12px; align-items:center; padding:10px 16px; background:var(--navy); color:#fff; }
header .brand { color:#fff; font-weight:700; text-decoration:none; margin-right:auto; }
header .who small { opacity:.75; }
header form { margin:0; }
main { max-width:980px; margin:0 auto; padding:16px; }
h1 { font-size:22px; margin:8px 0 12px; } h2 { font-size:17px; margin:0 0 10px; } h2 small { font-weight:400; color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:0 0 14px; overflow-x:auto; }
.narrow { max-width:420px; margin:24px auto; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; color:var(--muted); font-weight:600; } .r { text-align:right; } tr.b td { font-weight:700; }
.neg, .err { color:var(--err); } .muted { color:var(--muted); } .msg { background:#fde7b6; color:#3a2a00; padding:8px 12px; border-radius:8px; }
a { color:inherit; } .btn { display:inline-block; background:var(--flame); color:#2b1a00; padding:8px 14px; border-radius:8px; text-decoration:none; font-weight:600; }
.grid { display:grid; gap:10px; } label { display:grid; gap:4px; font-weight:600; } label small { font-weight:400; color:var(--muted); }
label.check { display:flex; gap:8px; align-items:center; }
input, select { font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); }
button { font:inherit; font-weight:600; padding:10px 14px; border:0; border-radius:8px; background:var(--navy); color:#fff; cursor:pointer; }
@media (prefers-color-scheme: dark) { button { background:#afc6ff; color:#0a1c3b; } }
button.link { background:none; color:inherit; padding:0; text-decoration:underline; font-weight:400; } button.danger { color:var(--err); }
header button.link { color:#fff; }
nav.month { display:flex; align-items:center; gap:14px; margin:6px 0 12px; font-size:18px; }
nav.month a { text-decoration:none; padding:2px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
code { background:var(--line); padding:1px 5px; border-radius:4px; }
/* Leveranciersoverzicht: kaartjes, goed leesbaar op een telefoon. */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.tile { display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; text-decoration:none; }
.tile:hover { border-color:var(--flame); }
.tile-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.tile-head strong { font-size:17px; }
.stock { display:grid; gap:6px; }
.stock > div { display:flex; align-items:baseline; gap:10px; }
.stock .big { font-size:26px; font-weight:800; min-width:2.2ch; text-align:right; }
.tile-foot { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:8px; }
@media (max-width: 600px) {
  main { padding:12px; }
  header .who small { display:none; }
  th, td { padding:6px 4px; font-size:14px; }
}