:root{
  --bg:#f1f5f9; --panel:#fff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --brand:#0d9488; --brand-d:#0f766e;
  --open:#64748b; --gepland:#b45309; --verv:#1d4ed8; --klaar:#15803d;
  --red:#dc2626;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 3px rgba(15,23,42,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--brand-d);text-decoration:none}

/* Topbar */
.topbar{background:#0f172a;color:#fff;display:flex;align-items:center;gap:20px;padding:0 20px;height:56px;position:sticky;top:0;z-index:10}
.topbar-brand{font-weight:700}
.topbar-nav{display:flex;gap:6px;flex:1}
.topbar-nav a{color:#cbd5e1;padding:8px 12px;border-radius:8px;font-size:14px}
.topbar-nav a:hover{background:#1e293b;color:#fff}
.topbar-nav a.active{background:var(--brand);color:#fff}
.topbar-user{display:flex;align-items:center;gap:12px;font-size:14px;color:#cbd5e1}
.container{max-width:1100px;margin:0 auto;padding:22px 20px 60px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:var(--radius-sm);font-size:14px;cursor:pointer;font-weight:500}
.btn:hover{background:#f8fafc}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d)}
.btn-ghost{background:transparent;border-color:#334155;color:#cbd5e1}
.btn-ghost:hover{background:#1e293b}
.btn-block{width:100%}
.btn-done{background:#eff6ff;border-color:#bfdbfe;color:var(--verv)}
.btn-done-lg{background:var(--brand);border:none;color:#fff;font-size:16px;font-weight:600;padding:14px 22px;border-radius:var(--radius-sm);min-width:120px}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);display:block}
.kpi-lbl{font-size:13px;color:var(--muted)}
.kpi-val{font-size:26px;font-weight:700;margin-top:4px}
.kpi-accent .kpi-val{color:var(--verv)}
.kpi-on{outline:2px solid var(--brand)}

/* Layout */
.layout-2col{display:grid;grid-template-columns:1fr 300px;gap:22px}
.section-title{font-size:16px;font-weight:650;margin-bottom:12px}
.muted{color:var(--muted)} .small{font-size:13px}

/* Container card */
.ct-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.ct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ct-naam{font-weight:650;font-size:15px}
.ct-addr{font-size:13px;color:var(--muted);margin-left:8px}
.ct-id{font-size:12px;color:#475569;background:#f1f5f9;border-radius:6px;padding:1px 7px;margin-left:8px}
.ct-frac{font-size:12px;color:var(--brand-d);margin-left:8px}
.ct-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.inline{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
input[type=date]{font-family:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:6px}

/* Badges */
.badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;color:#fff}
.badge-open{background:var(--open)}
.badge-gepland{background:var(--gepland)}
.badge-vervangen{background:var(--verv)}
.badge-verwerkt{background:var(--klaar)}

/* Checklist */
.ct-checks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;border:1px solid var(--line);border-radius:6px;padding:7px 9px;cursor:pointer}
.chk-on{background:#f0fdf4;border-color:#bbf7d0;color:var(--klaar)}
.chk input{width:16px;height:16px;cursor:pointer}

/* Stock */
.stock-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.stock-top{display:flex;justify-content:space-between;align-items:baseline}
.stock-lbl{font-size:14px;font-weight:600}
.stock-num{font-size:22px;font-weight:700}
.stock-num.low{color:var(--red)}
.stock-min{font-size:12px;color:var(--muted);margin-bottom:8px}
.stock-actions{display:flex;gap:8px;align-items:center}
.stock-qty{width:56px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;font-family:inherit}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.mv-in{color:var(--klaar);font-weight:600}
.mv-uit{color:var(--gepland);font-weight:600}
.btn-danger{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.btn-danger:hover{background:#fee2e2}
.stock-edit{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.stock-edit summary{font-size:12px;color:var(--muted);cursor:pointer}
.edit-form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.edit-form label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.edit-form input{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-family:inherit}
.edit-actions{display:flex;gap:8px;margin-top:4px}
.stock-new{border-style:dashed}

/* Table */
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13px}
.table th{text-align:left;background:#f8fafc;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;text-transform:uppercase}
.table td{padding:9px 12px;border-bottom:1px solid #f1f5f9}

/* Alerts */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:14px}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.alert-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}

/* Upload */
.upload-form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.filedrop{border:2px dashed #cbd5e1;border-radius:var(--radius);padding:26px;text-align:center;color:var(--muted);cursor:pointer;background:#fff}
.filedrop input{display:block;margin:0 auto 10px}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0f172a}
.login-card{background:#fff;border-radius:16px;padding:32px;width:100%;max-width:360px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.login-logo{font-size:22px;font-weight:700;text-align:center}
.login-sub{text-align:center;color:var(--muted);font-size:14px;margin:4px 0 20px}
.login-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
.login-card input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px;margin-top:4px;font-family:inherit}

/* Field PWA */
.field-wrap{max-width:600px;margin:0 auto}
.field-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.field-card.done{opacity:.6}
.field-info{flex:1;display:flex;flex-direction:column}
.field-plan{font-size:13px;color:var(--gepland);margin-top:4px}

/* Detailpagina */
.back-link{display:inline-block;margin-bottom:12px;font-size:14px}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.detail-naam{font-size:20px;font-weight:650;display:flex;align-items:center;gap:8px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px}
.detail-cell{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.detail-cell span{font-size:12px;color:var(--muted)}
.detail-cell b{font-size:14px;font-weight:600}
.detail-cell.df-wide{grid-column:1/-1}
.detail-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.df-row{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);max-width:280px;margin-bottom:14px}
.df-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.df-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.df-field.df-wide{grid-column:1/-1}
.df-field input,.df-field select,.df-field textarea,.df-row input,.df-row textarea{padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:14px;color:var(--ink)}
.done-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);max-width:520px}
.veld-terug{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.veld-foto{max-width:260px;border-radius:8px;margin-top:8px}
.ct-details{margin-left:auto;font-size:13px;white-space:nowrap}
.field-link{text-decoration:none;color:inherit;justify-content:space-between}
.field-chev{font-size:24px;color:var(--muted)}

/* Nette werkbon-kaarten (veld-PWA detail) */
.info-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:4px 16px 12px;margin-bottom:14px}
.info-card-title{font-size:13px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-d);padding:12px 0 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.info-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #f1f5f9;font-size:15px}
.info-row:last-child{border-bottom:none}
.info-row span{color:var(--muted);flex:none}
.info-row b{font-weight:600;text-align:right}
.info-card .df-row{max-width:none;margin:12px 0 0;font-size:14px}
.info-card .df-row textarea,.info-card .df-row input{font-size:16px;padding:10px}
.btn-block-mob{width:100%;margin-top:14px}

/* Gebruikersbeheer */
.row-edit summary{cursor:pointer;color:var(--brand-d);font-size:13px}
.row-edit .edit-form{margin-top:10px;max-width:320px}
.chk-inline{flex-direction:row !important;align-items:center;gap:8px}
.user-add{display:flex;flex-direction:column;gap:10px;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.user-add label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.user-add input,.user-add select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:14px}

/* Cocons */
.cocon-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cocon-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.cocon-card.done{opacity:.6}
.cocon-info{flex:1;display:flex;flex-direction:column;min-width:0}
.vg-badge{font-size:14px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.vg-high{background:#fee2e2;color:#b91c1c}
.vg-mid{background:#fef3c7;color:#b45309}
.vg-low{background:#dcfce7;color:#15803d}
.btn-leeg{background:var(--brand);border:none;color:#fff;font-weight:600;padding:12px 20px;border-radius:8px;font-size:15px}

@media(max-width:860px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .layout-2col{grid-template-columns:1fr}
  .ct-checks{grid-template-columns:repeat(2,1fr)}
  .topbar-user span{display:none}
}