:root{
  --groen:#79BC22; --blauw:#38B0C8; --oranje:#E88800; --grijs:#585858;
  --blauw-diep:#1B8AA3;
  --paper:#F4F6F7; --surface:#fff; --ink:#2B2E31; --muted:#767B80;
  --hairline:#E3E7E9; --rood:#CF3A2B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",-apple-system,system-ui,sans-serif;background:var(--paper);color:var(--ink)}

header.top{background:#fff;padding:16px 28px 14px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
header.top .brand{display:flex;align-items:flex-end;gap:12px}
header.top img{height:34px;display:block;width:auto}
header.top .sub{font-size:18px;color:var(--grijs);font-weight:300;padding-bottom:2px}
header.top .sub b{font-weight:600;color:var(--ink)}
header.top .who{font-size:12px;color:var(--muted);text-align:right;line-height:1.6}
header.top .who a{color:var(--blauw-diep)}
.tricolor{display:flex;height:4px}
.tricolor span{flex:1}
.tricolor .g{background:var(--groen)}
.tricolor .b{background:var(--blauw)}
.tricolor .o{background:var(--oranje)}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px 48px}

.flash{margin:18px 0 0;padding:11px 14px;border-radius:6px;font-size:13px}
.flash.ok{background:#EDF7E0;color:#3F6B0E;border:1px solid #CFE7A8}
.flash.err{background:#FBE6E4;color:#9B2B20;border:1px solid #F0C3BE}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.kpi{background:var(--surface);border:1px solid var(--hairline);border-radius:6px;
  padding:14px 16px;border-top:3px solid var(--hairline)}
.kpi.g{border-top-color:var(--groen)} .kpi.o{border-top-color:var(--oranje)}
.kpi.r{border-top-color:var(--rood)}  .kpi.b{border-top-color:var(--blauw)}
.kpi .label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.kpi .num{font-size:28px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.kpi .note{font-size:11px;color:var(--muted);margin-top:2px}

.toolbar{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.pill{font:inherit;font-size:12px;padding:6px 13px;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid var(--hairline);color:#4a535e;text-decoration:none;display:inline-block}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.searchform{margin-left:auto;display:flex;gap:8px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--hairline);
  border-radius:4px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blauw);outline-offset:-1px}

.btn{font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:4px;
  cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-block}
.btn.primary{background:var(--blauw-diep);color:#fff}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--hairline)}
.btn.danger{background:#fff;color:var(--rood);border-color:#F0C3BE}

.card{background:var(--surface);border:1px solid var(--hairline);border-radius:6px;
  margin-top:14px;overflow:hidden}
.card h2{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em;
  padding:16px 16px 0}

table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-weight:600;font-size:11px;color:var(--muted);letter-spacing:.04em;
  padding:11px 14px;border-bottom:1px solid var(--hairline);background:#FAFBFC}
tbody td{padding:11px 14px;border-bottom:1px solid #F1F3F5;vertical-align:middle}
tbody tr.row:hover{background:#FAFBFC}
.klant{font-weight:600}
.klant small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
.key{font-family:Consolas,monospace;font-size:12px}

.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.badge.active,.badge.actief{background:#EDF7E0;color:#4A7B12}
.badge.expiring,.badge.grace{background:#FDF0DC;color:#96590A}
.badge.expired,.badge.cancelled,.badge.suspended{background:#FBE6E4;color:#9B2B20}
.tier{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:4px;
  background:#EEF6F9;color:#186C80;text-transform:capitalize}

.seats{font-variant-numeric:tabular-nums}
.seats .bar{display:block;width:78px;height:4px;background:#EDEFF1;border-radius:2px;margin-top:4px}
.seats .bar i{display:block;height:100%;border-radius:2px;background:var(--blauw)}
.seats .bar i.vol{background:var(--oranje)}

.rust{font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:4px;
  border:1px solid #F3D2A6;background:#fff;color:var(--oranje);cursor:pointer;
  white-space:nowrap;text-decoration:none;display:inline-block}
.rust:hover{background:#FEF7EE}
.rust.off{opacity:.4;cursor:not-allowed;border-color:var(--hairline);color:var(--muted)}

tr.detail{display:none;background:#F8FAFB}
tr.detail.on{display:table-row}
tr.detail td{padding:0 14px 16px;border-bottom:1px solid #F1F3F5}
.detailgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:6px}
.detailgrid .lab{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.detailgrid .val{font-size:13px;margin-top:2px}
.devices{margin-top:12px;font-size:12px}
.devices .dev{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #EDF0F2}
.devices .dev .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.devices .dev .nm{font-weight:600;min-width:150px}
.devices .dev .meta{color:var(--muted)}
.devices .dev form{margin-left:auto}
.empty{padding:26px;text-align:center;font-size:13px;color:var(--muted)}

.formgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 16px 18px}
.formgrid label{display:block;font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:.04em;margin-bottom:4px}
.formgrid .field{display:flex;flex-direction:column}
.formgrid input,.formgrid select{width:100%}
.formactions{padding:0 16px 18px;display:flex;gap:10px;align-items:center}
.hint{font-size:11px;color:var(--muted);margin-top:4px}

footer.bottom{padding:16px 28px;border-top:1px solid var(--hairline);font-size:11px;
  color:var(--muted);line-height:1.6;margin-top:26px}
footer.bottom .strong{font-size:12px;font-weight:600;color:var(--ink)}

.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.loginbox{background:#fff;border:1px solid var(--hairline);border-radius:8px;width:380px;
  max-width:100%;overflow:hidden;box-shadow:0 12px 32px rgba(20,28,38,.12)}
.loginbox .inner{padding:26px}
.loginbox img{height:36px;width:auto;display:block;margin-bottom:6px}
.loginbox .sub{font-size:17px;font-weight:300;color:var(--grijs);margin-bottom:20px}
.loginbox .field{margin-bottom:14px}
.loginbox input{width:100%}