:root{
  --ftbd-green:#165b55;
  --ftbd-gold:#cbb87d;
  --border:#e5e5e5;
  --muted:#6f6f6f;
  --bg:#ffffff;
  --light:#f7f7f7;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:#111}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border)}
header strong{color:var(--ftbd-green);letter-spacing:.2px}

header .brand{display:flex;align-items:center;text-decoration:none}
.header-logo{height:42px;width:auto;display:block}

nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
a{color:var(--ftbd-green);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1400px;margin:0 auto;padding:20px}
.card{border:1px solid var(--border);border-radius:16px;padding:20px;background:#fff;margin-bottom:16px}
h1,h2,h3{margin:0 0 12px 0}
label{display:block;margin-top:10px;font-size:13px;color:var(--muted);font-weight:600}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-top:6px;font-size:14px}
textarea{min-height:110px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:220px}
.button,button{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#111;cursor:pointer;font-size:14px}
.button.primary,button.primary{background:var(--ftbd-green);border-color:var(--ftbd-green);color:#fff}
.button.green{background:var(--ftbd-green);border-color:var(--ftbd-green);color:#fff}
.button.gold{background:var(--ftbd-gold);border-color:var(--ftbd-gold);color:#000}
.pill{padding:4px 10px;border-radius:999px;background:var(--light);border:1px solid var(--border);font-size:12px}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:700}
.small{font-size:12px;color:var(--muted)}
.notice{background:var(--light);border-left:4px solid var(--ftbd-gold);padding:12px 14px;border-radius:12px}
.right{text-align:right}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input[type="number"]{appearance:textfield}

/* Compact excel-like grid */
table.grid.tight th, table.grid.tight td{padding:6px 8px}
table.grid.tight tbody tr:nth-child(odd){background:#fafafa}
table.grid.tight tbody tr:nth-child(even){background:#f2f2f2}
table.grid.tight input{padding:6px 8px}
.pill.bad{border-color:#c33;background:#ffecec}
.pill.good{border-color:#2a8f4a;background:#eafff0}
/* Readonly look */
input[disabled], select[disabled], textarea[disabled]{background:#f3f3f3;color:#777}
/* Modal */
dialog.modal{border:none;padding:0;background:transparent}
dialog::backdrop{background:rgba(0,0,0,.35)}
.modal-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;max-width:720px;width:92vw}

.drag-handle{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:grab;user-select:none}
tr.dragging{opacity:.6}
tr.add-row td{background:#fffbe6}

.num{width:100%;text-align:right}


.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

.checkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:6px}
.checkitem{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:#fff}
.checkitem input{margin-top:2px}
@media(max-width:900px){.checkgrid{grid-template-columns:1fr}}

.topbar{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.topbar-block{padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:#fff;min-width:260px}

.checkitem span{display:block;min-width:0;white-space:normal;word-break:break-word;line-height:1.25}
.checkitem{overflow:hidden}

/* compact multi-select box */
.msbox{border:1px solid var(--border);border-radius:14px;background:#fff;padding:10px 12px}
.msbox > summary{cursor:pointer;list-style:none;font-weight:600}
.msbox > summary::-webkit-details-marker{display:none}
.mscontent{margin-top:10px}
.mslist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.msitem{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}
.msitem span{display:block;min-width:0;white-space:normal;word-break:break-word;line-height:1.25}
@media(max-width:900px){.mslist{grid-template-columns:1fr}}

/* compact cards / tables */
.card.compact{padding:12px 14px}
.table.compact th,.table.compact td{padding:8px 10px}
details.card > summary{cursor:pointer;list-style:none}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary{display:flex;align-items:center;gap:10px}

/* Step36: compacter multiselect items (tekst links, checkbox rechts) */
.mslist{grid-template-columns:1fr !important;gap:6px !important}
.msitem{display:flex;align-items:center;justify-content:space-between;padding:6px 10px !important;border-radius:12px}
.msitem input{margin:0}
.msitem span{padding-right:10px}

/* Step37: horizontale allergenen items */
.msitem{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px;
}
.msitem span{
  display:inline-block !important;
  white-space:normal;
}

/* Step38: force horizontale items in multiselect */
.msitem{display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important;}
.msitem span{display:inline !important;}

/* Step39: checkbox strak rechts */
.msitem{gap:10px}
.msitem span{flex:1; padding-right:12px}
.msitem input{margin-left:auto}

/* Step40: volledige rij klikbaar i.p.v. los checkboxje */
.msitem {
  cursor: pointer;
}
.msitem input[type="checkbox"] {
  display: none;
}
.msitem::after {
  content: "✓";
  opacity: 0;
  font-weight: 700;
}
.msitem input[type="checkbox"]:checked + span::after {
  content: "";
}
.msitem input[type="checkbox"]:checked ~ span {
  font-weight: 600;
}
.msitem input[type="checkbox"]:checked ~ span::before {
  content: "✓ ";
  font-weight: 700;
}

/* Step41: fix multiselect rendering (geen losse checkbox zichtbaar, hele rij klikbaar) */
.mslist{display:flex !important; flex-direction:column; gap:6px !important}
.msitem{display:block; cursor:pointer}
.msitem input{position:absolute; opacity:0; pointer-events:none}
.msitem span{display:block; padding:6px 10px; border:1px solid var(--border); border-radius:12px; background:#fff; line-height:1.2}
.msitem input:checked + span{background:var(--ftbd-gold); border-color:var(--ftbd-gold); color:#111}

/* Home tiles */
.home-hero{margin-top:18px;margin-bottom:14px}
.home-hero-inner{border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,#fff, #fbfbfb);padding:26px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.home-greeting-line{font-size:14px;color:var(--muted);font-weight:700;letter-spacing:.2px;text-transform:none}
.home-greeting-name{font-size:32px;line-height:1.1;font-weight:800;color:#111;margin-top:2px}
.home-subtext{font-size:13px;color:var(--muted)}

.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media(max-width:1100px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.home-grid{grid-template-columns:1fr;}}

.home-tile{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:18px;background:#fff;padding:16px 16px;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease}
.home-tile:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:#d7d7d7}
.home-icon{width:46px;height:46px;border-radius:16px;background:var(--light);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ftbd-green);flex:0 0 auto}
.home-tile-body{min-width:0;flex:1}
.home-tile-title{font-weight:800;color:#111;margin-bottom:2px}
.home-tile-desc{font-size:12px;color:var(--muted);line-height:1.25}
.home-tile-arrow{font-size:22px;color:var(--muted);flex:0 0 auto;opacity:.8}