/* Orderportaal — Kooman GWW Design System (versie A: sidebar + kanban) */
:root {
  /* Palet */
  --color-neutral-100:#CBCBCB; --color-neutral-300:#686A6A; --color-neutral-500:#2E2E2E; --color-neutral-700:#1A1A1A;
  --color-meten-100:#C09585; --color-meten-300:#A86A55; --color-meten-500:#88503F;
  --color-realiseren-100:#AADCE8; --color-realiseren-300:#5090B4; --color-realiseren-500:#477898; --color-realiseren-900:#243A4C;
  --color-ontwerpen-100:#709870; --color-ontwerpen-300:#3E6048; --color-ontwerpen-500:#1E3028;
  /* Semantisch */
  --bg-page:#fff; --bg-ral9010:#F4F4F0; --surface-card:#fff;
  --accent-primary:var(--color-meten-300); --accent-realiseren:var(--color-realiseren-500);
  --text-primary:var(--color-neutral-500); --text-secondary:var(--color-neutral-300);
  --text-light:#fff; --text-muted:var(--color-neutral-100);
  --border-subtle:rgba(0,0,0,.08);
  /* Fonts */
  --font-heading:'Plus Jakarta Sans',system-ui,sans-serif; --font-body:'DM Sans',system-ui,sans-serif;
  /* Radii / schaduw / motion */
  --radius-sm:8px; --radius-md:16px; --radius-full:9999px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.12); --shadow-lg:0 8px 40px rgba(0,0,0,.18);
  --ease:cubic-bezier(.4,0,.2,1);
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { font-family:var(--font-body); color:var(--text-primary); background:var(--bg-ral9010); }
select,input,button { font-family:var(--font-body); }

.kgww-scroll::-webkit-scrollbar { width:10px; height:10px; }
.kgww-scroll::-webkit-scrollbar-thumb { background:rgba(0,0,0,.14); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

/* Layout */
.portal { position:relative; display:flex; width:100%; height:100vh; overflow:hidden; background:#fff; }

/* Sidebar */
.sidebar { width:236px; flex:none; background:var(--color-ontwerpen-500); color:#fff; display:flex; flex-direction:column; padding:22px 16px; }
.sb-logo { display:flex; align-items:center; gap:10px; padding:4px 8px 22px; }
.sb-logo img { height:34px; width:auto; display:block; }
.sb-logo span { font-family:var(--font-heading); font-weight:800; font-size:17px; letter-spacing:.02em; }
.sb-section { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); padding:8px 10px 6px; }
.sb-section.acc { padding-top:22px; }
.sb-nav { display:flex; flex-direction:column; gap:2px; }
.sb-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; font-size:14px;
           color:rgba(255,255,255,.72); cursor:pointer; text-decoration:none; transition:background var(--dur,.15s) var(--ease); }
.sb-item:hover { background:rgba(255,255,255,.06); }
.sb-item.active { background:rgba(255,255,255,.12); font-weight:600; color:#fff; }
.sb-item svg { width:18px; height:18px; flex:none; }
.sb-foot { margin-top:auto; padding:12px 10px 0; font-size:11px; color:rgba(255,255,255,.4); }

/* Main */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.header { padding:20px 26px; border-bottom:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:14px; background:#fff; }
.header .row1 { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.header h1 { font-family:var(--font-heading); font-weight:800; font-size:22px; color:var(--color-ontwerpen-500); margin:0; }
.header .subtitle { font-size:13px; color:var(--text-secondary); margin-top:3px; }
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.search { display:flex; align-items:center; gap:8px; background:var(--bg-ral9010); border:1px solid var(--border-subtle);
          border-radius:var(--radius-full); padding:8px 14px; min-width:260px; }
.search input { border:none; outline:none; background:transparent; font-size:13px; color:var(--text-primary); width:100%; }
.pill-select { border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:8px 14px; font-size:13px;
               color:var(--text-primary); background:#fff; cursor:pointer; }
.btn { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px; padding:8px 15px;
       border-radius:var(--radius-full); cursor:pointer; border:1px solid transparent; transition:all .18s var(--ease); }
.btn:hover { opacity:.88; transform:translateY(-1px); }
.btn-primary { background:var(--accent-primary); color:#fff; }
.btn-spoed { background:#fff; color:var(--text-secondary); border-color:var(--border-subtle); }
.btn-spoed.active { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }

/* Board */
.board { flex:1; overflow:auto; background:var(--bg-ral9010); padding:20px; display:flex; gap:16px; align-items:stretch; }
.col { width:288px; flex:none; background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
       display:flex; flex-direction:column; box-shadow:var(--shadow-sm); overflow:hidden; max-height:100%; }
.col-head { display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--border-subtle); }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; border-radius:var(--radius-full);
          background:var(--accent-realiseren); color:#fff; font-family:var(--font-heading); font-weight:700; font-size:11px; }
.avatar.none { background:var(--color-neutral-300); }
.col-name { font-family:var(--font-heading); font-weight:700; font-size:14px; color:var(--text-primary); flex:1; }
.col-count { font-family:var(--font-heading); font-weight:700; font-size:12px; color:var(--text-secondary); background:var(--bg-ral9010);
             border-radius:var(--radius-full); min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; padding:0 7px; }
.col-body { flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:80px;
            transition:background .18s var(--ease); }
.col-body.over { background:rgba(80,144,180,.12); }
.placeholder { padding:14px 8px; text-align:center; font-size:12px; color:var(--text-muted);
               border:1px dashed var(--border-subtle); border-radius:10px; }

/* Card */
.card { background:#fff; border:1px solid var(--border-subtle); border-radius:12px; padding:13px; box-shadow:var(--shadow-sm);
        cursor:pointer; display:flex; flex-direction:column; gap:9px; transition:box-shadow .18s var(--ease), border-color .18s var(--ease); }
.card:hover { box-shadow:var(--shadow-md); border-color:rgba(0,0,0,.16); }
.card.dragging { opacity:.45; }
.card .top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.card .bedrijf { font-family:var(--font-heading); font-weight:700; font-size:14px; color:var(--text-primary); line-height:1.25; }
.card .contact { font-size:12px; color:var(--text-secondary); line-height:1.35; }
.card .chips { display:flex; flex-wrap:wrap; gap:6px; }
.card .foot { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:8px; border-top:1px solid var(--border-subtle); }
.card .date { font-size:11px; color:var(--text-secondary); }
.card select.status { border:1px solid var(--border-subtle); border-radius:7px; padding:4px 6px; font-size:11px;
                      color:var(--text-primary); background:var(--bg-ral9010); cursor:pointer; }
.badge-spoed { flex:none; background:var(--accent-primary); color:#fff; font-family:var(--font-heading); font-weight:800;
               font-size:9px; letter-spacing:.08em; padding:3px 7px; border-radius:5px; }

/* Chips */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; line-height:1.4; }
.chip-dim2d { background:var(--color-realiseren-100); color:var(--color-realiseren-900); }
.chip-dim3d { background:var(--color-meten-100); color:#4a271c; }
.chip-brand { background:var(--bg-ral9010); color:var(--text-primary); border:1px solid var(--border-subtle); }
.chip-online { background:rgba(62,96,72,.12); color:var(--color-ontwerpen-300); }
.chip-offline { background:rgba(0,0,0,.05); color:var(--text-secondary); }
.dot { width:6px; height:6px; border-radius:var(--radius-full); display:inline-block; }
.dot-on { background:var(--color-ontwerpen-300); }
.dot-off { background:var(--text-muted); }

/* Detailpaneel */
.backdrop { position:absolute; inset:0; background:rgba(10,14,10,.34); z-index:40; }
.detail { position:absolute; top:0; right:0; bottom:0; width:392px; background:#fff; z-index:50; box-shadow:var(--shadow-lg);
          display:flex; flex-direction:column; }
.detail-head { padding:22px 24px; border-bottom:1px solid var(--border-subtle); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.detail-head .bedrijf { font-family:var(--font-heading); font-weight:800; font-size:19px; color:var(--color-ontwerpen-500); line-height:1.2; }
.detail-head .titlerow { display:flex; align-items:center; gap:9px; }
.detail-head .contact { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.detail-close { flex:none; border:none; background:var(--bg-ral9010); width:32px; height:32px; border-radius:8px; cursor:pointer;
                display:inline-flex; align-items:center; justify-content:center; }
.detail-body { flex:1; overflow:auto; padding:22px 24px; display:flex; flex-direction:column; gap:18px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.info-grid .label, .field .label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.info-grid .value { font-family:var(--font-heading); font-weight:700; font-size:14px; color:var(--text-primary); margin-top:4px; }
.hr { height:1px; background:var(--border-subtle); }
.field .label { margin-bottom:7px; }
.field select { width:100%; border:1px solid var(--border-subtle); border-radius:9px; padding:10px 12px; font-size:14px;
                color:var(--text-primary); background:#fff; cursor:pointer; }
.filelist { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.filelist a { font-size:13px; color:var(--accent-realiseren); background:var(--bg-ral9010); padding:8px 10px; border-radius:8px;
              text-decoration:none; cursor:pointer; word-break:break-all; }
.filelist a:hover { background:#e9e9e3; }
.opm { font-size:13px; color:var(--text-primary); line-height:1.5; white-space:pre-wrap; }

@media (max-width:900px) {
  .sidebar { display:none; }
  .detail { width:100%; }
}