/* Subsidie-app — DAANS-huisstijl (gelijk aan ControllerCockpit) */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap");
:root{
  --merk:#1B75BB; --merk-hover:#155E96;
  --tint:#E6F1F9; --tint-licht:#F0F7FC; --tint-border:#BEDCF0; --navy:#1E3A5F;
  --ink:#0F172A; --tekst2:#475569; --tekst3:#64748B; --zacht:#94A3B8; --uit:#CBD5E1;
  --pagina:#F8FAFC; --kaart:#FFFFFF; --kaart-border:#E6EAF0; --lijn:#F1F5F9;
  --veld-border:#E2E8F0; --rij-hover:#F8FAFF;
  --ok:#15803D; --ok-bg:#DCFCE7; --amber:#B45309; --amber-bg:#FEF3C7; --rood:#B91C1C; --rood-bg:#FEE2E2;
  --schaduw:0 1px 3px rgba(15,23,42,.04); --schaduw-lift:0 6px 18px rgba(15,23,42,.09);
}
*{box-sizing:border-box}
body{margin:0;background:var(--pagina);color:var(--ink);font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;font-size:14px}
.display{font-family:"Space Grotesk",sans-serif} .mono{font-family:"IBM Plex Mono",monospace}
a{color:var(--merk);text-decoration:none} a:hover{text-decoration:underline}
input[type=checkbox]{accent-color:var(--merk)}

.knop{border:none;border-radius:10px;padding:0 16px;height:38px;font:600 13.5px "Inter",sans-serif;cursor:pointer;background:var(--merk);color:#fff;display:inline-flex;align-items:center;gap:8px}
.knop:hover{background:var(--merk-hover)} .knop:disabled{opacity:.5;cursor:default}
.knop.ghost{background:#fff;color:var(--tekst2);border:1px solid var(--veld-border)}
.knop.ghost:hover{background:var(--rij-hover)}
.veld{width:100%;height:38px;border:1px solid var(--veld-border);border-radius:9px;padding:0 11px;font:13.5px "Inter",sans-serif;background:var(--pagina);color:var(--ink)}
.veld:focus{outline:2px solid var(--merk);border-color:var(--merk)}
.kaart{background:var(--kaart);border:1px solid var(--kaart-border);border-radius:16px;box-shadow:var(--schaduw)}

/* login */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.loginkaart{width:100%;max-width:400px;padding:34px 30px}
.loginkaart img.wm{height:30px;display:block;margin-bottom:22px}
.loginkaart h1{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:600;margin:0 0 4px}
.loginkaart p{color:var(--tekst3);margin:0 0 20px;font-size:13px}
.loginkaart label{display:block;font-size:12px;color:var(--tekst3);margin:12px 0 5px}
.foutmelding{background:var(--rood-bg);color:var(--rood);border-radius:9px;padding:9px 12px;font-size:13px;margin-top:12px}

/* topbalk */
.top{height:64px;display:flex;align-items:center;gap:16px;padding:0 26px;background:#fff;border-bottom:1px solid var(--kaart-border);position:sticky;top:0;z-index:5}
.top img.wm{height:24px;display:block}
.top .titel{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;border-left:1px solid var(--kaart-border);padding-left:16px}
.top .rechts{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--tekst3);font-size:12.5px}
.inhoud{max-width:1200px;margin:0 auto;padding:24px 26px}

/* KPI */
.kpirij{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--kaart);border:1px solid var(--kaart-border);border-radius:16px;box-shadow:var(--schaduw);padding:16px 18px}
.kpi .lbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst3)}
.kpi .val{font-family:"Space Grotesk",sans-serif;font-size:28px;font-weight:600;margin-top:8px;letter-spacing:-.01em}
.kpi .sub{font-size:12px;color:var(--tekst3);margin-top:4px}

h2{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;margin:24px 0 12px}
.blok{padding:18px 20px}

/* project-balken */
.pbar{display:grid;grid-template-columns:1fr 280px 130px;gap:16px;align-items:center;padding:10px 0;border-top:1px solid var(--lijn)}
.pbar:first-child{border-top:none}
.track{height:8px;border-radius:999px;background:var(--lijn);overflow:hidden}
.vul{height:100%;border-radius:999px;background:var(--merk)} .vul.over{background:var(--rood)}
.pbedrag{text-align:right;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tekst3)}
.pct{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;text-align:right}

/* tabel */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--lijn)}
th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--tekst3);font-weight:600}
tbody tr:hover{background:var(--rij-hover)}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace}
.chip{display:inline-block;padding:1px 8px;border-radius:999px;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;background:var(--tint);color:var(--merk-hover)}
.chip.grijs{background:var(--lijn);color:var(--tekst3)}
.badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;font-size:12px;font-weight:700}
.b-ok{background:var(--ok-bg);color:var(--ok)} .b-warn{background:var(--amber-bg);color:var(--amber)} .b-fout{background:var(--rood-bg);color:var(--rood)} .b-na{background:var(--lijn);color:var(--zacht)}
.rood{color:var(--rood)} .grijs{color:var(--tekst3)}
.uploadzone{border:1.5px dashed var(--veld-border);border-radius:12px;padding:24px;text-align:center;color:var(--tekst3);background:var(--tint-licht)}

/* tabbalk */
.tabbalk{display:flex;gap:4px;padding:0 26px;background:#fff;border-bottom:1px solid var(--kaart-border);overflow-x:auto}
.tab{border:none;background:none;font:600 13px "Inter",sans-serif;color:var(--tekst3);padding:12px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.actief{color:var(--merk);border-bottom-color:var(--merk)}

/* signalen */
.sigrij{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--lijn);font-size:13px}
.sigrij:first-child{border-top:none}
.sigdot{width:9px;height:9px;border-radius:999px;background:var(--amber);flex-shrink:0}
.sigrij.hoog .sigdot{background:var(--rood)} .sigrij.middel .sigdot{background:var(--amber)}

/* formulieren in-line */
.uform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.uform .veld{width:auto;flex:1;min-width:130px}
.uform input[type=file]{font:13px "Inter",sans-serif;min-width:180px}
.knop.mini{height:28px;padding:0 10px;font-size:12px}

/* uitklapbare deelprojecten */
.pbar.klik{cursor:pointer} .pbar.klik:hover{background:var(--rij-hover)}
.uitpijl{display:inline-block;width:14px;color:var(--zacht);font-size:11px}
.subkd{padding:2px 0 10px 24px} .subkd table{font-size:12.5px} .subkd td{padding:6px 10px;border-bottom:1px solid var(--lijn)}