:root{
  --orange:#f36b16;
  --orange-dark:#c94f05;
  --blue:#1e6fb9;
  --green:#2e9d66;
  --red:#cf4b4b;
  --yellow:#d7a11f;
  --bg:#eef2f5;
  --sidebar:#1d252d;
  --sidebar2:#151b21;
  --panel:#ffffff;
  --panel-soft:#f7f9fb;
  --line:#d8e0e7;
  --text:#1d2730;
  --muted:#6f7b86;
  --shadow:0 3px 12px rgba(20,35,50,.08)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
button,.btn{
  border:0;background:var(--orange);color:white;border-radius:4px;padding:10px 14px;
  font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px
}
button:hover,.btn:hover{background:var(--orange-dark)}
.btn.secondary{background:#53616d}.btn.light{background:#e7edf2;color:var(--text)}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));color:white;
  border-right:1px solid #111820;position:sticky;top:0;height:100vh;display:flex;flex-direction:column
}
.brand{padding:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand img{display:block;width:100%;background:#fff;border-radius:4px;padding:6px}
.sidebar-user{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;color:#bcc7d0}
.sidebar-user b{display:block;color:white;margin-bottom:3px}
.sidebar nav{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.sidebar nav a{
  color:#c4ced6;padding:10px 11px;border-radius:3px;display:flex;align-items:center;gap:10px;
  font-size:14px;border-left:3px solid transparent
}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:white}
.sidebar nav a.active{background:#2d3944;color:white;border-left-color:var(--orange)}
.sidebar .bottom{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar .bottom a{color:#d8e0e6}
main{min-width:0}
.topbar{
  height:58px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:30
}
.topbar-left{display:flex;align-items:center;gap:14px}.topbar h1{font-size:20px;margin:0}
.topbar small{color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:8px}
.searchbox{display:flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:4px;overflow:hidden}
.searchbox input{border:0;margin:0;background:transparent;min-width:250px;padding:9px}
.searchbox button{border-radius:0;padding:9px 11px;background:#e9eef2;color:#33414d}
.content{padding:18px;max-width:1650px;margin:auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:15px}
.page-head h2{margin:0 0 4px;font-size:22px}.page-head p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:15px;box-shadow:var(--shadow)
}
.kpi{position:relative;overflow:hidden;min-height:106px}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue)}
.kpi.orange:before{background:var(--orange)}.kpi.red:before{background:var(--red)}.kpi.green:before{background:var(--green)}.kpi.yellow:before{background:var(--yellow)}
.kpi .label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.kpi .value{font-size:29px;font-weight:800;margin:10px 0 3px}.kpi .hint{font-size:12px;color:var(--muted)}
.section{margin-top:16px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section-title h3{margin:0;font-size:16px}
.quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.quick a{background:white;border:1px solid var(--line);border-radius:4px;padding:13px;box-shadow:var(--shadow);min-height:85px}
.quick a:hover{border-color:var(--orange)}
.quick b{display:block;margin-bottom:6px}.quick small{color:var(--muted)}
.two{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.three{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.table-wrap{overflow:auto;background:white;border:1px solid var(--line);border-radius:5px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f3f6f8;color:#53616d;font-size:12px;text-transform:uppercase;letter-spacing:.2px;position:sticky;top:0}
tr:hover td{background:#fbfcfd}
input,select,textarea{
  width:100%;border:1px solid #cbd5dd;border-radius:4px;background:white;color:var(--text);
  padding:9px 10px;margin:4px 0 11px
}
textarea{resize:vertical}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.toolbar input{max-width:310px;margin:0}.toolbar select{max-width:200px;margin:0}
.badge{display:inline-block;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700;background:#e8edf1;color:#45535f}
.badge.nieuw,.badge.open,.badge.aangevraagd{background:#fff0df;color:#a95914}
.badge.ingepland,.badge.verzonden{background:#e6f0fa;color:#21639c}
.badge.bezig,.badge.pauze{background:#fff4cf;color:#896b0a}
.badge.afgerond,.badge.gereed,.badge.betaald,.badge.goedgekeurd,.badge.hersteld,.badge.geldig,.badge.voldoende{background:#e5f4eb;color:#27714c}
.badge.ziek,.badge.verlopen,.badge.te-laat,.badge.bijbestellen{background:#fdeaea;color:#9e3535}
.alert{
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff6ed;
  border:1px solid #f0c7a6;border-left:4px solid var(--orange);border-radius:4px;padding:12px 14px;margin-bottom:14px
}
.alert.red{background:#fff0f0;border-color:#edb9b9;border-left-color:var(--red)}
.notice-list{display:flex;flex-direction:column;gap:8px}.notice{padding:10px;border:1px solid var(--line);border-radius:4px;background:#fff}
.notice b{display:block;margin-bottom:4px}.muted{color:var(--muted)}.red{color:var(--red)}.orange{color:var(--orange)}.green{color:var(--green)}.blue{color:var(--blue)}
.success,.error{padding:12px 14px;border-radius:4px;margin-bottom:12px}.success{background:#e7f5ec;border:1px solid #b9dec8;color:#2a6a47}.error{background:#fbeaea;border:1px solid #e6bcbc;color:#873636}
.mobilebar,.mobile-menu,.mobile-overlay{display:none}
canvas{border:1px solid var(--line)}
@media(max-width:1200px){.grid{grid-template-columns:repeat(2,1fr)}.quick{grid-template-columns:repeat(3,1fr)}.three{grid-template-columns:1fr}.two{grid-template-columns:1fr}}
@media(max-width:760px){
  .layout{display:block}.sidebar{display:none}.topbar{display:none}.content{padding:10px}
  .mobilebar{display:flex;position:sticky;top:0;z-index:80;background:var(--sidebar);padding:9px 10px;align-items:center;justify-content:space-between}
  .mobilebar img{height:40px;background:white;border-radius:3px;padding:3px}
  .mobilebar button{padding:9px 12px}
  .mobile-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;visibility:hidden;transition:.2s}
  .mobile-overlay.open{opacity:1;visibility:visible}
  .mobile-menu{display:block;position:fixed;top:0;right:0;bottom:0;width:min(87vw,360px);z-index:100;background:var(--sidebar);padding:12px;transform:translateX(100%);transition:.2s;overflow-y:auto}
  .mobile-menu.open{transform:translateX(0)}
  .mobile-menu-head{display:flex;justify-content:space-between;align-items:center;color:white;padding:6px 4px 12px}
  .mobile-menu nav{display:flex;flex-direction:column;gap:3px}.mobile-menu nav a{padding:11px;color:#ccd5dd;border-radius:3px}.mobile-menu nav a.active{background:#2d3944;color:white;border-left:3px solid var(--orange)}
  body.menu-open{overflow:hidden}.grid{grid-template-columns:1fr 1fr}.quick{grid-template-columns:1fr 1fr}
  .page-head{align-items:flex-start;flex-direction:column}.table-wrap{font-size:12px}
}