:root{
  --navy:#1F2A44; --blue:#2E5496; --gold:#B08D57; --green:#1E7A46; --red:#B3261E;
  --line:#dfe4ec; --bg:#f4f5f7; --card:#fff; --grey:#5A6B85; --ink:#16202f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%;
}
.num{font-variant-numeric:tabular-nums}
a{color:var(--blue)}

/* kop en navigatie */
header.top{background:var(--navy); color:#fff; padding:14px 18px 0}
.top .bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.top h1{margin:0; font-size:17px; font-weight:700; letter-spacing:.2px}
.top .adres{font-size:12px; opacity:.72; margin-top:2px}
.top .who{font-size:12px; opacity:.85; display:flex; align-items:center; gap:10px}
.top .who button{background:rgba(255,255,255,.14); color:#fff; border:0; padding:5px 10px;
  border-radius:6px; font-size:12px; cursor:pointer}
.top .who button:hover{background:rgba(255,255,255,.24)}
nav.tabs{display:flex; gap:3px; margin-top:12px; overflow-x:auto; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{
  color:#c8d3e6; text-decoration:none; font-size:13.5px; padding:9px 14px;
  border-radius:8px 8px 0 0; white-space:nowrap; background:rgba(255,255,255,.06);
}
nav.tabs a:hover{background:rgba(255,255,255,.14); color:#fff}
nav.tabs a.active{background:var(--bg); color:var(--navy); font-weight:700}

.wrap{max-width:1080px; margin:0 auto; padding:18px}

/* kaarten */
.card{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; margin-bottom:16px}
.card h2{margin:0 0 4px; font-size:15px; color:var(--navy); letter-spacing:.2px}
.card .lead{margin:0 0 12px; font-size:12.5px; color:var(--grey)}

/* kerncijfers */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-bottom:16px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 15px}
.kpi .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--grey); font-weight:700}
.kpi .big{font-size:22px; font-weight:800; margin-top:4px; color:var(--navy); font-variant-numeric:tabular-nums}
.kpi .sm{font-size:11.5px; color:var(--grey); margin-top:2px}
.kpi.accent .big{color:var(--green)}
.kpi.warn .big{color:var(--gold)}

/* voortgangsbalk */
.bar{height:7px; background:#eef1f6; border-radius:99px; overflow:hidden; margin-top:8px}
.bar > i{display:block; height:100%; background:var(--blue); border-radius:99px}
.bar > i.over{background:var(--red)}

/* tabellen */
table{width:100%; border-collapse:collapse}
th{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--grey);
  text-align:left; padding:0 8px 7px; font-weight:700; border-bottom:1px solid var(--line)}
td{padding:8px; border-bottom:1px solid #eef1f5; vertical-align:middle; font-size:13.5px}
td.r,th.r{text-align:right}
tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto}

/* bewerkbare velden */
.f{border:1px solid transparent; background:transparent; border-radius:6px; padding:5px 7px;
  font:inherit; color:inherit; width:100%; min-width:60px}
.f:hover{border-color:var(--line); background:#fafbfd}
.f:focus{outline:0; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(46,84,150,.1)}
.f.num{text-align:right}
select.f{cursor:pointer}
input[type=date].f{min-width:130px}
.saved{animation:flash .9s ease}
@keyframes flash{0%{background:#dcf1e4}100%{background:transparent}}

/* to-do */
.todo{display:flex; align-items:flex-start; gap:11px; padding:9px 4px; border-bottom:1px solid #eef1f5}
.todo:last-child{border-bottom:0}
.todo input[type=checkbox]{width:19px; height:19px; margin-top:2px; accent-color:var(--green);
  cursor:pointer; flex:0 0 auto}
.todo .body{flex:1 1 auto; min-width:0}
.todo .title{font-size:14px}
.todo.af .title{text-decoration:line-through; color:var(--grey)}
.todo .meta{font-size:11.5px; color:var(--grey); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap}

/* labels */
.tag{display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.3px; padding:2px 7px; border-radius:5px; background:#eef1f6; color:var(--grey)}
.tag.nick{background:#e6eefb; color:#2E5496}
.tag.jeanine{background:#fdeef2; color:#a3336a}
.tag.samen{background:#e9f2ea; color:var(--green)}
.tag.laat{background:#fdeaea; color:var(--red)}
.tag.klaar,.tag.getekend,.tag.binnen{background:#e4f1e8; color:var(--green)}
.tag.bezig,.tag.opgevraagd,.tag.besteld{background:#fbf0e1; color:#8a6414}
.tag.ontbreekt{background:#fdeaea; color:var(--red)}

/* knoppen */
.btn{background:var(--navy); color:#fff; border:0; border-radius:8px; padding:8px 14px;
  font-size:13px; font-weight:600; cursor:pointer}
.btn:hover{background:#2b3a5c}
.btn.light{background:#eef1f6; color:var(--navy)}
.btn.light:hover{background:#e2e8f2}
.btn.mini{padding:4px 9px; font-size:11.5px}
.del{background:none; border:0; color:#c3ccda; cursor:pointer; font-size:16px; line-height:1; padding:2px 6px}
.del:hover{color:var(--red)}

/* toevoegregel */
.add{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px;
  padding-top:12px; border-top:1px dashed var(--line)}
.add input,.add select{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit}
.add input[type=text]{flex:1 1 200px; min-width:0}

/* meldingen */
.empty{color:var(--grey); font-size:13px; font-style:italic; padding:10px 4px}
.flag{background:#FBF0E1; border:1px solid #eaddb4; border-left:4px solid var(--gold);
  border-radius:10px; padding:12px 15px; font-size:13px; color:#6b551f; margin-top:12px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; background:var(--navy);
  color:#fff; padding:10px 18px; border-radius:99px; font-size:13px; opacity:0;
  transition:opacity .2s; pointer-events:none; z-index:99}
.toast.on{opacity:.95}
.toast.err{background:var(--red)}

/* inloggen */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login{background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px;
  width:100%; max-width:380px}
.login h1{margin:0 0 4px; font-size:19px; color:var(--navy)}
.login p.sub{margin:0 0 20px; font-size:13px; color:var(--grey)}
.login label{display:block; font-size:12px; font-weight:700; color:var(--grey); margin:12px 0 5px}
.login input{width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; font:inherit}
.login input:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,84,150,.12)}
.login .btn{width:100%; margin-top:18px; padding:11px}
.login .err{background:#fdeaea; color:var(--red); border-radius:8px; padding:10px 12px;
  font-size:13px; margin-top:14px}

/* documenten */
.docs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.docs .col{border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.docs h3{margin:0 0 8px; font-size:12.5px; color:var(--navy)}
.docs ul{margin:0; padding-left:16px; font-size:13px}
.docs li{margin:5px 0}
.docs a{text-decoration:none}
.docs a:hover{text-decoration:underline}

/* tijdlijn */
.tl{position:relative; padding-left:22px}
.tl::before{content:""; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--line)}
.tl .item{position:relative; padding:9px 0}
.tl .item::before{content:""; position:absolute; left:-20px; top:15px; width:9px; height:9px;
  border-radius:50%; background:var(--blue); border:2px solid #fff; box-shadow:0 0 0 2px var(--line)}
.tl .item.done::before{background:var(--green)}
.tl .item.next::before{background:var(--gold); box-shadow:0 0 0 3px #f5e6cc}
.tl .d{font-size:11.5px; color:var(--grey); font-variant-numeric:tabular-nums}
.tl .t{font-size:14px; font-weight:600}

@media(max-width:640px){
  .wrap{padding:12px}
  .card{padding:14px}
  .kpi .big{font-size:19px}
  td,th{padding:7px 6px}
  .top h1{font-size:15px}
}