:root{
  --blue-950:#07162B;
  --blue-900:#0B1F3B;
  --blue-800:#10335F;
  --blue-700:#144A8A;
  --blue-600:#1E63B8;
  --blue-500:#2A7AE4;

  --bg:#F6F9FF;
  --card:#FFFFFF;
  --border:#DCE6F7;
  --muted:#5A6B85;
  --text:#0E1B2A;

  --shadow: 0 10px 22px rgba(16,51,95,.10);
  --radius:14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #EEF5FF 0%, var(--bg) 55%, #FFFFFF 100%);
}

a{color:inherit; text-decoration:none}
h1,h2{margin:0}
.small{font-size:12px}
.muted{color:var(--muted)}

.wrap{display:grid; grid-template-columns: 280px 1fr; min-height:100vh;}
@media (max-width:1100px){ .wrap{grid-template-columns:1fr;} }

.sidebar{
  background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 60%, #0b2445 100%);
  color:#fff;
  padding:18px 14px;
  border-right: 1px solid rgba(255,255,255,.08);
  position: sticky; top:0; height:100vh; overflow:auto;
}
@media (max-width:1100px){ .sidebar{position:relative; height:auto;} }

.brand{
  display:flex; gap:10px; align-items:center;
  padding:10px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.logo{
  width:40px; height:40px; border-radius:12px;
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-size: 100%;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.brandTitle{font-size:13px; font-weight:700; line-height:1.1}
.brandSub{font-size:12px; opacity:.85}

.navTitle{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  opacity:.7; padding:10px 10px 6px;
}
.nav a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  margin:4px 6px;
  border: 1px solid rgba(255,255,255,.08);
}
.nav a:hover{ background: rgba(255,255,255,.08); }
.nav a.active{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }

.navFooter{
  margin-top:18px;
  padding:10px;
  border-top:1px solid rgba(255,255,255,.10);
}
.userLine{font-size:12px; opacity:.95; margin-bottom:10px}
.btnGhost{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}

.main{padding:18px 18px 36px;}

.topbar{
  display:flex; gap:12px; align-items:end; flex-wrap:wrap;
  margin-bottom:14px;
}
.pageHeader{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  align-items:flex-start; margin-bottom:14px;
}
.pageHeader h1{font-size:20px}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}
.alert{background: linear-gradient(180deg, #FFFFFF 0%, #F3F8FF 100%);}

.grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media (max-width:1100px){ .grid{grid-template-columns:1fr 1fr;} }
@media (max-width:720px){ .grid{grid-template-columns:1fr;} }

.kpiRow{display:flex; gap:10px; flex-wrap:wrap}
.kpi{
  flex: 1 1 160px;
  border-radius: 14px;
  padding:12px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F8FF 100%);
}
.kpi .label{font-size:12px; color:var(--muted)}
.kpi .value{font-size:22px; font-weight:800; margin-top:6px}
.kpi .hint{font-size:12px; margin-top:4px; color: var(--blue-700)}

.filters{display:flex; gap:10px; flex-wrap:wrap}
.filter{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:10px 12px;
  box-shadow: var(--shadow);
  min-width: 220px;
}
.filter label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
.filter select, .filter input, .filter textarea{
  width:100%;
  border:0; outline:0; background:transparent;
  font-size:14px;
}
.filter textarea{min-height:90px; resize:vertical}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: #fff;
  cursor:pointer;
  font-size:14px;
}
.btnPrimary{
  border-color: rgba(42,122,228,.35);
  background: linear-gradient(180deg, #EAF3FF 0%, #FFFFFF 100%);
  color: var(--blue-800);
}

table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:9px 8px; border-bottom:1px solid #EEF2FA; text-align:left; vertical-align:top}
th{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}

code{
  background:#f3f6ff;
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
}

.status{
  display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--border); background:#fff;
}
.ok{border-color:#BFE7C8; background:#F3FFF6}
.warn{border-color:#FFD59A; background:#FFF7EA}
.bad{border-color:#FFB3B3; background:#FFF0F0}

.loginWrap{min-height:100vh; display:grid; place-items:center; padding:18px;}
.loginCard{
  width:min(460px, 100%);
  background:#fff; border:1px solid var(--border);
  border-radius:18px; box-shadow: var(--shadow);
  padding:18px;
}
.loginCard h1{font-size:18px; margin-bottom:6px}
.err{color:#b00020; font-size:13px; margin:10px 0}

pre.preview{
  white-space:pre-wrap;
  margin-top:10px;
  font-size:13px;
  background:#f7faff;
  border:1px solid #dce6f7;
  padding:12px;
  border-radius:14px;
  overflow:auto;
}

/* Login logo boven formulier */
.loginLogo{
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.loginLogo img{
  height: 200px;        /* iets groter dan sidebar */
  width: auto;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
/* ==========================
   Responsive drop-in (no redesign)
   ========================== */

/* voorkom overflow issues in grid/flex children */
.card, .pageHeader, .grid, .filters, .filter, .topbar { min-width: 0; }

/* pageHeader: op mobiel onder elkaar + actions netjes */
@media (max-width: 720px) {
  .pageHeader{
    flex-direction: column;
    align-items: stretch;
  }
  .pageHeader > div{
    width: 100%;
  }
}

/* filters: op mobiel full width zodat ze niet klemmen */
@media (max-width: 720px) {
  .filter{ min-width: 0; width: 100%; }
  .filters{ width: 100%; }
}

/* Buttons niet laten "uitsteken" */
.btn{ max-width: 100%; }
.pageHeader .btn{ white-space: nowrap; }

/* === Tables: behoud desktop look, maar op mobiel scrollbaar === */
.tableWrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* houdt je desktop table spacing, maar laat mobiel scrollen */
.tableWrap > table{
  min-width: 760px; /* pas aan als je tables smaller/breder wil */
}

/* kleine touch: sticky header is optioneel, UIT laten voor look gelijk */
/* .tableWrap thead th{ position: sticky; top: 0; background: var(--card); } */

/* Inputs/selects/textarea nooit buiten card laten lopen */
input, select, textarea{ max-width: 100%; }

/* ==========================
   Mobile sidebar collapse
   ========================== */

/* mobile topbar hidden by default */
.mobileTopbar{
  display:none;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background: var(--card);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top:0;
  z-index: 1001;
}

.mobileBrand{
  display:flex;
  align-items:center;
  gap:10px;
}

.menuToggle{
  font-size:22px;
  line-height:1;
  background:none;
  border:0;
  cursor:pointer;
  padding:6px 10px;
  border-radius:10px;
}
.menuToggle:hover{
  background:#eef3ff;
}

/* --- mobile behaviour --- */
@media (max-width:1100px){

  /* show topbar */
  .mobileTopbar{ display:flex; }

  /* sidebar becomes drawer */
  .sidebar{
    position: fixed;
    top:0;
    left:0;
    height:100vh;
    width:280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1002;
  }

  /* sidebar open */
  body.menuOpen .sidebar{
    transform: translateX(0);
  }

  /* backdrop */
  body.menuOpen::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:1000;
  }

  /* content full width */
  .wrap{
    grid-template-columns:1fr;
  }

  .main{
    padding-top: 12px;
  }
}
/* Mobile sidebar collapse */
.mobileTopbar{
  display:none;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background: var(--card);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top:0;
  z-index: 1001;
}
.mobileBrand{ display:flex; align-items:center; gap:10px; }
.menuToggle{
  font-size:22px; line-height:1;
  background:none; border:0; cursor:pointer;
  padding:6px 10px; border-radius:10px;
}
.menuToggle:hover{ background:#eef3ff; }

@media (max-width:1100px){
  .mobileTopbar{ display:flex; }

  .sidebar{
    position: fixed;
    top:0; left:0;
    height:100vh;
    width:280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1002;
  }
  body.menuOpen .sidebar{ transform: translateX(0); }

  body.menuOpen::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:1000;
  }

  .wrap{ grid-template-columns:1fr; }
  .main{ padding-top: 12px; }
}