:root{
  --blue:#1b74e4; --blue-d:#0b5cbf; --ink:#16325c; --ink-2:#3e5978;
  --grey:#f3f4f6; --line:#e3e7ee; --card:#ffffff; --muted:#6b7a90;
  --green:#2e844a; --green-bg:#eaf6ee; --amber:#8a6d00; --amber-bg:#fdf4d6;
  --teal:#0d7d84; --shadow:0 1px 2px rgba(16,50,92,.08),0 4px 14px rgba(16,50,92,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--grey); color:var(--ink); font-size:14px; line-height:1.45;}
a{color:var(--blue); text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 18px}

/* chrome */
header.top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.toprow{display:flex; align-items:center; gap:18px; padding:10px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px; color:var(--teal); white-space:nowrap}
.logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),#12a3ac);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.logo small{display:block;font-weight:600;font-size:10px;letter-spacing:2px;color:var(--muted)}
.search{flex:1; position:relative; margin:0}
.search input{width:100%; padding:9px 12px 9px 34px; border:1px solid var(--line); border-radius:22px; background:var(--grey); font-size:13px}
.search svg{position:absolute; left:11px; top:9px; opacity:.5}
.agent{font-size:12px; color:var(--muted); white-space:nowrap}
.agent b{color:var(--ink)}
nav.tabs{display:flex; gap:2px; overflow-x:auto}
nav.tabs a{padding:12px 14px; font-weight:600; color:var(--ink-2); border-bottom:3px solid transparent; white-space:nowrap; font-size:13.5px; cursor:pointer}
nav.tabs a.active{color:var(--blue); border-color:var(--blue)}

.demobar{background:linear-gradient(90deg,#fff7e6,#fdf4d6); border-bottom:1px solid #f0e2a8; color:#6b5600; font-size:12.5px}
.demobar .wrap{display:flex; gap:10px; align-items:center; padding:7px 18px}
.demobar .dot{width:8px;height:8px;border-radius:50%;background:#e6a700;box-shadow:0 0 0 3px #fceeb6; flex:none}

main{padding:18px 0 60px}

.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.btn{border:1px solid var(--blue); background:var(--blue); color:#fff; padding:9px 16px; border-radius:8px; font-weight:700; cursor:pointer; font-size:13.5px; display:inline-flex; gap:8px; align-items:center}
.btn:hover{background:var(--blue-d)}
.btn.sec{background:#fff; color:var(--blue)}
.btn.sec:hover{background:#eef4fe}
.iconbtn{border:1px solid var(--line); background:#fff; color:var(--ink-2); width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none}
.iconbtn:hover{background:#eef4fe; color:var(--blue); border-color:#cfe0f6}
.iconbtn.active{background:var(--blue); color:#fff; border-color:var(--blue)}

/* Presentatiemodus: alle demo-uitleg/commentaar weg, alleen de strakke app blijft */
.clean .demobar,
.clean .src,
.clean .tag,
.clean .na-note,
.clean .metric,
.clean .hint{ display:none !important; }
.metric{margin-left:auto; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.chip{background:#fff; border:1px solid var(--line); border-radius:20px; padding:6px 12px; font-size:12.5px; color:var(--ink-2)}
.chip b{color:var(--ink); font-variant-numeric:tabular-nums}
.chip.live{background:var(--green-bg); border-color:#bfe4cb; color:var(--green)}
.chip.live b{color:var(--green)}

.card{background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); margin-bottom:16px}
.card > .hd{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.card > .hd h2{margin:0; font-size:15px}
.card > .bd{padding:16px 18px}

.subject{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap}
.avatar{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#cfe0f6,#e7eefb);
  display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:800;font-size:20px}
.subject h1{margin:0 0 6px; font-size:24px; letter-spacing:.2px}
.pills{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.pill{background:var(--grey); border:1px solid var(--line); border-radius:16px; padding:4px 10px; font-size:12px; color:var(--ink-2); font-weight:600}
.pill.addr{background:#fff}

.summary{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.sc{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.sc .big{font-size:24px; font-weight:800; letter-spacing:.2px}
.sc .lbl{color:var(--muted); font-size:12.5px; margin-top:2px}
.sc.saldo{border-left:4px solid #e6a700}

.src{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:11.5px}
.tag{border-radius:14px; padding:3px 9px; font-weight:700; letter-spacing:.2px}
.tag.live{background:var(--green-bg); color:var(--green)}
.tag.illu{background:var(--amber-bg); color:var(--amber)}
.tag.jira{background:#e7eefb; color:var(--blue)}
.tag.src-note{background:#f0f2f6; color:var(--ink-2); font-weight:600}

.subtabs{display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--line); padding:0 6px}
.subtabs a{padding:12px 14px; font-weight:600; color:var(--ink-2); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; font-size:13.5px}
.subtabs a.active{color:var(--blue); border-color:var(--blue)}
.pane{display:none} .pane.active{display:block}
.pane h3{margin:2px 0 12px; font-size:14px}

.fields{display:grid; grid-template-columns:220px 1fr; gap:6px 18px; max-width:720px}
.fields dt{color:var(--muted)} .fields dd{margin:0; font-weight:600}
.fields dd.na{color:#9aa7b8; font-weight:500}
.na-note{font-size:11px; color:#9aa7b8; font-weight:500; margin-left:6px}
.bsnblur{filter:blur(5px); letter-spacing:1px; user-select:none}

table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.status{font-weight:700; border-radius:12px; padding:2px 9px; font-size:11.5px}
.status.open{background:#fdecec;color:#b3261e} .status.betaald{background:var(--green-bg);color:var(--green)}
.status.lopend{background:var(--amber-bg);color:var(--amber)}

/* Objecten: links waardering + objectgegevens, rechts grafiek + tabel */
.objgrid{display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:28px; align-items:start}
.objleft .waarde,.waarde{font-size:30px; font-weight:800; color:var(--ink)}
.objleft .sub,.woz .sub{color:var(--muted); font-size:12.5px}
.chart{border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fbfcfe}
.wozhist{min-width:280px}
@media(max-width:820px){ .objgrid{grid-template-columns:1fr} }
.wozhist table{font-size:13px}
.wozhist th,.wozhist td{padding:7px 10px}
.wozhist .up{color:var(--green); font-weight:700}
.wozhist .down{color:#b3261e; font-weight:700}

.listwrap table tr[data-bsn]{cursor:pointer}
.listwrap table tbody tr[data-bsn]:hover{background:#f7faff}
.hint{color:var(--muted); font-size:12.5px; margin:2px 0 12px}
.loading{color:var(--muted); padding:30px; text-align:center}
.rel{color:var(--muted); font-size:12px}
@media(max-width:820px){ .summary{grid-template-columns:repeat(2,1fr)} .fields{grid-template-columns:1fr} }