/* =====================================================================
   FEAT-005 — Interactieve restaurant-plattegrond
   Hergebruikt uitsluitend bestaande Spot-On-variabelen (base.css) —
   geen nieuwe kleuren/radius-waarden uitgevonden.
   ===================================================================== */

.fp-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.fp-tool-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.fp-tool-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  stroke: currentColor;
}

.fp-tool-btn:hover {
  background: var(--surface-alt);
  border-color: var(--copper-dark);
}

.fp-tool-btn:active { background: var(--copper-mist); border-color: var(--copper-dark); }
.fp-tool-btn--combinations { display: inline-flex; align-items: center; gap: 4px; }
.fp-tool-btn--combinations .fp-tool-btn__icon { display: inline-flex; align-items: center; }
.fp-tool-btn--combinations .fp-tool-btn__icon svg { width: 14px; height: 14px; flex: none; }
/* Moderne icon-knoppen: Bank t/m Terras */
.fp-tool-btn[data-add-type="bench"],
.fp-tool-btn[data-add-type="wall"],
.fp-tool-btn[data-add-type="wallCorner"],
.fp-tool-btn[data-add-type="door"],
.fp-tool-btn[data-add-type="window"],
.fp-tool-btn[data-add-type="bar"],
.fp-tool-btn[data-add-type="barL"],
.fp-tool-btn[data-add-type="barU"],
.fp-tool-btn[data-add-type="toilet"],
.fp-tool-btn[data-add-type="kitchen"],
.fp-tool-btn[data-add-type="stairs"],
.fp-tool-btn[data-add-type="entrance"],
.fp-tool-btn[data-add-type="terrace"] {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  color: var(--copper-dark);
}
/* Kleuraccenten per type */
.fp-tool-btn[data-add-type="bench"],
.fp-tool-btn[data-add-type="wall"],
.fp-tool-btn[data-add-type="wallCorner"] {
  color: #5f7f72;
}

.fp-tool-btn[data-add-type="door"],
.fp-tool-btn[data-add-type="window"],
.fp-tool-btn[data-add-type="entrance"] {
  color: #657b91;
}

.fp-tool-btn[data-add-type="bar"],
.fp-tool-btn[data-add-type="barL"],
.fp-tool-btn[data-add-type="barU"] {
  color: #9a7048;
}

.fp-tool-btn[data-add-type="toilet"],
.fp-tool-btn[data-add-type="kitchen"],
.fp-tool-btn[data-add-type="stairs"],
.fp-tool-btn[data-add-type="terrace"] {
  color: #806b8d;
}

.fp-rooms-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fp-room-tab {
  font-size: 13px; font-weight: 600; padding: 8px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--muted);
}
.fp-room-tab.is-active { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; }
.fp-room-add { color: var(--copper-dark); border-style: dashed; }

.fp-canvas-wrap { position: relative; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }
.fp-canvas { display: block; width: 100%; height: auto; transform-origin: center center; touch-action: none; }
.fp-canvas.fp-bg-light   { background: #FAF7F1; }
.fp-canvas.fp-bg-dark    { background: #3A332C; }
.fp-canvas.fp-bg-wood    { background: #D8C3A0; }
.fp-canvas.fp-bg-tile    { background: #E4E7E7; }
.fp-canvas.fp-bg-neutral { background: var(--surface-alt); }

.fp-zoom-controls { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 6px; }
.fp-zoom-controls .icon-btn { background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-sm); }

.fp-el { cursor: grab; }
.fp-el:active { cursor: grabbing; }
.fp-el rect, .fp-el circle { fill: var(--copper-light); stroke: var(--copper-deep); stroke-width: 1.5; }
.fp-el--wall rect, .fp-el--wall-corner rect { fill: var(--ink); stroke: none; }
.fp-el--door rect { fill: var(--copper); }
.fp-el--window rect { fill: var(--line-strong); }
.fp-el--bar rect, .fp-el--bar-l rect, .fp-el--bar-u rect { fill: var(--copper-dark); }
.fp-el--toilet rect, .fp-el--kitchen rect, .fp-el--stairs rect, .fp-el--entrance rect { fill: var(--surface); stroke: var(--line-strong); }
.fp-el--terrace rect { fill: var(--surface-alt); stroke-dasharray: 4 3; }
.fp-el--chair rect, .fp-el--barstool circle { fill: var(--surface); stroke: var(--copper-deep); }
.fp-el.is-selected rect, .fp-el.is-selected circle { stroke: var(--copper-dark); stroke-width: 3; }
.fp-el.is-link-target rect, .fp-el.is-link-target circle { stroke: var(--success, #3F7D5C); stroke-width: 3; }
.fp-el-label { font-size: 11px; font-weight: 700; fill: var(--copper-deep); pointer-events: none; }
.fp-el--preview { cursor: default; }

.fp-actions-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fp-actions-bar .btn { width: auto; flex: none; padding: 9px 14px; }

.fp-selection-panel, .fp-room-settings, .fp-combinations {
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; margin-bottom: 14px;
}
.fp-selection-panel__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fp-selection-panel__title { font-weight: 700; font-size: 14px; }
.fp-selection-panel__btns { display: flex; gap: 4px; }
.fp-selection-panel__btns .icon-btn { width: 32px; height: 32px; background: var(--surface-alt); border-radius: var(--radius-sm); font-size: 15px; }

.fp-combination-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px;
}

/* ------------------------------------------------- FEAT-005 Fase 3: klant -- */
.fp-cust-canvas { width: 100%; height: auto; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); margin-top: 8px; touch-action: none; }
.fp-cust-el.fp-el--available rect, .fp-cust-el.fp-el--available circle { fill: var(--success-bg, #E4F0E9); stroke: var(--success, #3F7D5C); stroke-width: 2; cursor: pointer; }
.fp-cust-el.fp-el--unavailable rect, .fp-cust-el.fp-el--unavailable circle { fill: var(--danger-bg, #FBE7E2); stroke: var(--danger, #A6412F); opacity: .6; cursor: default; }
.fp-cust-el.fp-el--selected rect, .fp-cust-el.fp-el--selected circle { fill: var(--copper-dark); stroke: var(--copper-deep); stroke-width: 3; cursor: pointer; }
.fp-cust-el.fp-el--selected .fp-el-label { fill: #fff; }
.fp-combo-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fp-combo-pick-btn.is-active { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; }

/* ------------------------------------- FEAT-005: "Tafelcombinaties" (opstellingen) -- */
.fp-preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.fp-preset-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface);
}
.fp-preset-card:active { background: var(--copper-mist); border-color: var(--copper-dark); }
.fp-preset-thumb { width: 100%; height: 90px; }
.fp-preset-thumb .fp-el rect, .fp-preset-thumb .fp-el circle { fill: var(--copper-light); stroke: var(--copper-deep); stroke-width: 1.5; }
.fp-preset-card__label { font-size: 12.5px; font-weight: 600; text-align: center; }