:root{
  /* Kleuren */
  --bg: #F4F2F2;
  --card: #ffffff;
  --border: #e6e9ef;
  --text: #0e1116;
  --muted: #5b667a;
  --accent: #bc1c7c;
  --accent-weak: #f9e3ef;
  --success: #16a34a;
  --warn: #f59e0b;

  /* Kleuren racks & tekeningen */
  --rack-fill:#ead0de;
  --rack-stroke:#bc1c7c;
  --rack2-fill:#f3dbe7;
  --aisle-fill:#F4F2F2;
  --aisle-stroke:#e7dfe4;
  --tick:#cdbec7;
  --tick-text:#9a728a;

  /* UI */
  --radius:14px;
  --shadow:0 10px 30px rgba(6,24,44,.06);

  /* Ritme */
  --sp-1:8px;  --sp-2:10px; --sp-3:12px; --sp-4:14px; --sp-5:16px; --sp-6:20px;
}

/* Basis */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* Basis */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* ====== Layout: 2 kolommen ====== */
.wrap{
  display:grid; gap:var(--sp-6); padding:var(--sp-6);
  grid-template-columns:minmax(320px,380px) 1fr;
  align-items:start;
}

.wrap2{
  display:grid; gap:var(--sp-6); padding:var(--sp-6);
  grid-template-columns:minmax(400px,600px) 1fr;
  align-items:start;
}

/* Kaarten */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); width:100%;
}
.card h2{
  margin:0; padding:var(--sp-4) var(--sp-5);
  font-size:16px; font-weight:600; color:#0b1220;
  border-bottom:1px solid var(--border);
}
.card .body{ padding:var(--sp-4) var(--sp-5); }

/* Formulier */
.row{
  display:grid; grid-template-columns: 1fr 140px;
  gap:var(--sp-3); align-items:center; margin:var(--sp-3) 0;
}
.row label{ color:var(--muted); font-weight:500; }
.row input,.row select,.btn{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.row input:focus-visible,.row select:focus-visible{
  border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-weak);
}

/* Nummerinput – iets strakker */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type="number"]{ -moz-appearance:textfield; }

/* Knop */
.btn{
  cursor:pointer; font-weight:600; background:var(--accent); color:#fff; border:1px solid var(--accent);
}
.btn:hover{ filter:brightness(.98) }
.btn:active{ filter:brightness(.94) }

.contact{
  align-self: center;
  width: 80%;
  padding: 10px;
  margin: 15px;
  font-size: larger;
  border-color:var(--accent);
  border-radius: var(--radius);
  background-color:var( --accent);
  color:var( --bg);
}

.contact:hover{
  background-color: var(--bg);
  color: var(--accent);
}
/* Subtitels */
.card-subtitle{
  padding: 30px;
  color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em;
}

/* Pallet-mix */
.pct-row{ grid-template-columns: 1fr 160px; }
.pct-input{ position:relative; display:flex; align-items:center; }
.pct-input input{ width:100%; padding-right:38px; }
.pct-suffix{ position:absolute; right:20px; font-size:12px; color:var(--muted); }

.pct-details summary{
  list-style:none; cursor:pointer; border:1px dashed var(--border);
  border-radius:10px; padding:8px 10px; transition:background .15s ease, border-color .15s ease;
}
.pct-details[open] summary{ background:#fff; border-color:var(--border); }
.pct-details summary::-webkit-details-marker{ display:none; }
.pct-details .subgrid{ padding:10px 0 6px; }

.sum-badge{
  display:inline-flex; align-items:center; gap:6px; min-width:72px; justify-content:center;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--muted); font-weight:600;
}
.sum-badge.warn{ border-color:var(--warn); background:#fff8ec; color:#9a5a00; }

/* Canvas kaart (rechts) */
.grid{ display:grid; grid-template-rows:auto 1fr; min-height:70vh; }
.card.grid .body{ padding:0; overflow:auto; }

/* SVG / lay-out */
#svg{ display:block; width:100%; height:72vh; }
.tick{ stroke:#c7cfdb }
.scaleText{ fill:#6b7280; font-size:10px }

/* Rijen/gangen */
.rack{ stroke-width:.8 }
.rackSingle{ fill:#c7b1ff; stroke:#7c3aed; fill-opacity:.95 }
.rackDouble{ fill:#8dd3ff; stroke:#0ea5e9; fill-opacity:.90 }
.deepDivider{ stroke:#0ea5e9; stroke-width:1; stroke-dasharray:3 3; opacity:.9; shape-rendering:crispEdges }
.aisle{ fill:#eef2f7; stroke:#d9e1ec }          /* lichte gang */
.bayTick{ stroke:#d4d8e1; stroke-width:1; opacity:.9; shape-rendering:crispEdges }

/* Tabellen (gedeelde stijl) */
.table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:8px;
  border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; box-shadow:var(--shadow);
  font-size:13px;
}
.table thead th{
  text-align:left; background:#f5f7fb; color:var(--muted); font-weight:600;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.table tbody td{
  padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text);
}
.table tbody tr:last-child td{ border-bottom:0 }

/* huidige tabellen laten de nieuwe basisstijl gebruiken */
.cap-table{ composes: table; } /* werkt in build tools; anders laat je dit staan zonder effect */
.info-table{ composes: table; }
.cap-badge-warn{
  color:#9a5a00; background:#fff8ec; border:1px solid #f7d7a6;
  padding:2px 8px; border-radius:999px; font-size:12px;
}
.info-table .col-note{ width:40%; color:var(--muted) }
.info-table{
  margin: 0 30px 30px ;
}

/* Responsief */
@media (max-width:980px){
  .wrap{ grid-template-columns:1fr }
  .wrap2{ grid-template-columns:1fr }
  #svg{ height:52vh }
  .row{ grid-template-columns:1fr }
}

/* Voorkeuren & a11y */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Optioneel: sticky linkerkant (fijn bij lange layouts) *

/* SVG / lay-out */
#svg{ display:block; width:100%; height:72vh; }

/* Stellingen */
.rack{ stroke-width:.8 }
.rackSingle{ fill:var(--rack-fill);  stroke:var(--rack-stroke); fill-opacity:.95 }
.rackDouble{ fill:var(--rack2-fill); stroke:var(--rack-stroke); fill-opacity:.95 }

/* Dubbel-diep scheidslijn */
.deepDivider{
  stroke:var(--accent);
  stroke-width:1;
  stroke-dasharray:3 3;
  opacity:.9;
  shape-rendering:crispEdges;
}

/* Gangpaden */
.aisle{
  fill:var(--aisle-fill);
  stroke:var(--aisle-stroke);
}

/* Huizen (bays) streepjes */
.bayTick{
  stroke:var(--rack-stroke);
  stroke-opacity:.25;           /* subtiel */
  stroke-width:1;
  shape-rendering:crispEdges;
}

/* Schaal */
.tick{ stroke:var(--tick) }
.scaleText{ fill:var(--tick-text); font-size:10px }

.rowLabel {
  font-size: 10px;
  fill: var(--accent);
  pointer-events: none;
}
.totalLabel {
  font-size: 25px;
  font-weight: 600;
  fill: var(--accent);
  pointer-events: none;
}
.card.grid .body{
  /* kies één van beide */
  aspect-ratio: 5/4;         /* responsive hoogte */
  /* of: min-height: 320px;  // vaste minimale hoogte */
}
#svg{ width:100%; height:100%; display:block; overflow:visible; }

.card .totals{
  display:flex; gap:24px; justify-content:center; 
  padding:10px 0 4px; font-weight:700; color:var(--accent);
  font-size: 25px;
}
@media (max-width:640px){
  .card .totals{ flex-direction:column; gap:6px; }
}

.faq { margin: 40px auto; max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none;
  padding: 16px; font-size: 15px; font-weight: 600;
  color: var(--accent); cursor: pointer;
}
.faq-question[aria-expanded="true"] { color: var(--text); }
.faq-answer { padding: 0 16px 16px; color: var(--muted); font-size: 14px; }
.faq-answer p { margin: 0; }