/* ─── Floor Designer ─────────────────────────────────────────────────────── */

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.fd-tabs {
  display:flex; align-items:center; gap:6px; padding-bottom:12px;
  border-bottom:1px solid var(--border); margin-bottom:14px; flex-wrap:wrap;
}
.fd-tab {
  padding:6px 16px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-secondary);
  font-size:12px; font-weight:700; cursor:pointer; transition:all .15s;
}
.fd-tab:hover  { background:var(--bg-input); color:var(--text-primary); border-color:var(--border-hover); }
.fd-tab.active { background:rgba(0,200,150,.16); color:#00e0b0; border-color:rgba(0,200,150,.5); }
[data-theme="light"] .fd-tab.active { background:rgba(0,118,168,.12); color:#0076a8; border-color:rgba(0,118,168,.4); }
.fd-tab-right  { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fd-grid-toggle { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); cursor:pointer; user-select:none; }
.fd-grid-toggle input { accent-color:#00d4b8; cursor:pointer; }
.fd-canvas-size-label { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-muted); font-weight:600; }
.fd-size-input { width:64px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-primary); font-size:11px; outline:none; font-family:monospace; }
.fd-size-input:focus { border-color:rgba(0,212,255,.5); }

/* ── Body ─────────────────────────────────────────────────────────────────── */
.fd-body { display:flex; gap:12px; align-items:flex-start; position:relative; }

/* ── Palette ──────────────────────────────────────────────────────────────── */
.fd-palette {
  width:116px; min-width:116px; flex-shrink:0;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; padding:10px 8px; max-height:580px; overflow-y:auto;
}
[data-theme="light"] .fd-palette { background:#fff; border-color:rgba(0,0,0,.13); }
.fd-panel-head {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--text-muted); margin-bottom:8px;
}
.fd-eq-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 4px; border-radius:8px; cursor:pointer;
  border:1.5px solid transparent; transition:all .15s; margin-bottom:3px; text-align:center;
}
.fd-eq-item:hover  { background:var(--bg-elevated); border-color:var(--border); }
.fd-eq-item.fd-eq-active { background:rgba(0,200,150,.12); border-color:rgba(0,200,150,.55); }
[data-theme="light"] .fd-eq-item:hover { background:#f0f5fc; }
[data-theme="light"] .fd-eq-item.fd-eq-active { background:rgba(0,118,168,.1); border-color:rgba(0,118,168,.4); }
.fd-eq-item > span { font-size:10px; color:var(--text-secondary); line-height:1.2; font-weight:500; }
.fd-eq-thumb { pointer-events:none; display:flex; align-items:center; justify-content:center; }

/* Custom equip item row */
.fd-eq-custom { padding-bottom:2px; }
.fd-eq-custom-name {
  display:flex; align-items:center; gap:3px; width:100%;
  font-size:10px; color:var(--text-secondary); line-height:1.2; font-weight:500;
  min-width:0;
}
.fd-eq-custom-name > span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-eq-rename-btn,.fd-eq-del-btn {
  background:none; border:none; cursor:pointer; padding:2px; border-radius:3px;
  color:var(--text-muted); display:flex; align-items:center; flex-shrink:0;
  transition:color .15s;
}
.fd-eq-rename-btn:hover { color:var(--accent); }
.fd-eq-del-btn:hover    { color:#ef4444; }

/* Upload zone */
.fd-upload-zone {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; border-radius:8px; cursor:pointer;
  border:1.5px dashed rgba(0,212,255,.4); background:rgba(0,212,255,.04);
  color:var(--accent); font-size:10px; font-weight:600; transition:all .15s;
  margin-top:8px; text-align:center;
}
[data-theme="light"] .fd-upload-zone { border-color:rgba(0,118,168,.35); background:rgba(0,118,168,.04); color:#0076a8; }
.fd-upload-zone:hover { background:rgba(0,212,255,.1); border-color:rgba(0,212,255,.7); }

/* ── Canvas column ────────────────────────────────────────────────────────── */
.fd-canvas-col { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }

/* CANVAS: dark in dark mode, light concrete in light mode */
.fd-canvas {
  position:relative; overflow:hidden; flex-shrink:0;
  border:1.5px solid var(--border); border-radius:12px;
  background-color:#07111e;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.4);
  cursor:default;
}
[data-theme="light"] .fd-canvas {
  background-color:#ccd8e8;
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.1);
}
.fd-canvas.fd-placing { cursor:crosshair; }

/* ── Objects on canvas ────────────────────────────────────────────────────── */
.fd-obj { position:absolute; cursor:move; user-select:none; }
.fd-obj:hover { filter:brightness(1.25) drop-shadow(0 0 8px rgba(120,190,255,.3)); }
.fd-obj.fd-selected { outline:2px dashed rgba(0,220,160,.9); outline-offset:5px; border-radius:6px; }
.fd-road-obj { cursor:default; pointer-events:all; }
.fd-road-obj.fd-selected { outline:2px dashed rgba(0,220,160,.7); outline-offset:8px; }

.fd-obj-lbl {
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  font-size:10px; color:var(--text-secondary); white-space:nowrap;
  background:rgba(8,16,30,.9); padding:2px 7px; border-radius:4px;
  border:1px solid var(--border); font-weight:600; pointer-events:none;
  max-width:130px; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="light"] .fd-obj-lbl { background:rgba(255,255,255,.92); color:#1e3050; border-color:rgba(0,0,0,.15); }

/* Road label badge */
.fd-road-label-badge {
  position:absolute; display:flex; align-items:center; gap:4px; z-index:10;
  background:rgba(8,16,30,.9); border:1px solid rgba(0,220,160,.4);
  padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700;
  color:#00e0b0; white-space:nowrap; pointer-events:all;
}
[data-theme="light"] .fd-road-label-badge { background:rgba(255,255,255,.95); color:#0076a8; border-color:rgba(0,118,168,.35); }
.fd-tiny-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:2px; border-radius:3px; display:flex; align-items:center; }
.fd-tiny-btn:hover { color:var(--accent); }

/* ── Object toolbar (appears above selected object, no overlap with handles) */
.fd-obj-toolbar {
  position:absolute; top:-38px; left:0; right:0;
  display:flex; align-items:center; gap:4px; z-index:50;
  background:rgba(10,20,36,.92); border:1px solid rgba(0,220,160,.4);
  border-radius:8px; padding:4px 8px;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  white-space:nowrap; overflow:hidden;
  pointer-events:all;
}
[data-theme="light"] .fd-obj-toolbar { background:rgba(255,255,255,.96); border-color:rgba(0,118,168,.35); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.fd-toolbar-name {
  flex:1; font-size:10px; font-weight:700; color:#00e0b0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  pointer-events:none;
}
[data-theme="light"] .fd-toolbar-name { color:#0076a8; }
.fd-tb-btn {
  width:22px; height:22px; border-radius:5px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:var(--text-muted); flex-shrink:0;
  transition:all .15s;
}
[data-theme="light"] .fd-tb-btn { background:rgba(0,0,0,.06); color:#445878; }
.fd-tb-rename:hover { background:rgba(0,212,255,.2); color:var(--accent); }
.fd-tb-delete:hover { background:rgba(239,68,68,.2); color:#ef4444; }

/* Delete button (sensor chips only) */
.fd-del-btn {
  position:absolute; top:-10px; right:-10px; width:20px; height:20px; border-radius:50%;
  background:#ef4444; color:#fff; border:2px solid var(--bg-card);
  font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:60; box-shadow:0 2px 8px rgba(0,0,0,.5); font-weight:700; line-height:1;
}
.fd-del-btn:hover { background:#dc2626; }

/* Resize handles */
.fd-handle {
  position:absolute; width:10px; height:10px; border-radius:2px;
  background:#00e0b0; border:2px solid rgba(6,14,28,.9);
  z-index:35; box-shadow:0 1px 4px rgba(0,0,0,.5); cursor:pointer;
}
.fd-handle[data-h="nw"]{cursor:nw-resize;}
.fd-handle[data-h="n"] {cursor:n-resize;}
.fd-handle[data-h="ne"]{cursor:ne-resize;}
.fd-handle[data-h="e"] {cursor:e-resize;}
.fd-handle[data-h="se"]{cursor:se-resize;}
.fd-handle[data-h="s"] {cursor:s-resize;}
.fd-handle[data-h="sw"]{cursor:sw-resize;}
.fd-handle[data-h="w"] {cursor:w-resize;}

/* Rotate handle */
.fd-rotate-handle {
  position:absolute; width:22px; height:22px; border-radius:50%;
  background:#7c3aed; color:#fff; border:2px solid var(--bg-card);
  z-index:30; cursor:grab; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; box-shadow:0 1px 6px rgba(0,0,0,.5);
  user-select:none;
}
.fd-rotate-handle:active { cursor:grabbing; }

/* Sensor chips on canvas */
.fd-cs { position:absolute; cursor:move; user-select:none; display:flex; flex-direction:column; align-items:center; gap:2px; width:52px; z-index:3; }
.fd-cs-attached .fd-sensor-dot { border-width:3px; }
.fd-cs.fd-selected .fd-sensor-dot { outline:2px dashed rgba(0,220,160,.9); outline-offset:4px; }
.fd-sensor-dot { width:44px; height:44px; border-radius:50%; border:2.5px solid; display:flex; align-items:center; justify-content:center; transition:all .4s; }
.fd-dot-num    { font-size:14px; font-weight:900; font-family:monospace; line-height:1; }
.fd-sensor-label { font-size:9px; color:rgba(255,255,255,.7); white-space:nowrap; max-width:60px; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.fd-sensor-val   { font-size:9px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
[data-theme="light"] .fd-sensor-label { color:rgba(0,0,0,.65); }

/* Ghost */
.fd-ghost { position:absolute; pointer-events:none; opacity:.65; z-index:50; filter:drop-shadow(0 0 10px rgba(0,200,140,.4)); }

/* Custom equipment image: filter is applied inline from JS based on current theme */
.fd-custom-equip-img { display:block; }
/* Dark canvas: equipment needs inversion (dark SVG → visible on dark bg) */
.fd-canvas:not([data-theme]) .fd-custom-equip-img,
.fd-canvas .fd-custom-equip-img {
  /* filter set inline by JS equipFilter() — this is a fallback */
}

/* Hint bar */
.fd-hint { font-size:11px; color:var(--text-muted); padding:4px 2px; min-height:20px; }
.fd-hint kbd {
  display:inline-block; padding:1px 6px; border:1px solid var(--border);
  border-radius:4px; font-size:10px; background:var(--bg-elevated); color:var(--text-primary);
}
.fd-hint-on { color:#00e0b0; font-weight:700; }
[data-theme="light"] .fd-hint-on { color:#0076a8; }

/* ── Floating sensor panel ────────────────────────────────────────────────── */
.fd-sensor-float {
  position:absolute; right:12px; top:0; width:190px; z-index:100;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.35);
  display:flex; flex-direction:column; max-height:calc(100% - 60px);
  overflow:hidden; transition:opacity .2s, transform .2s;
}
[data-theme="light"] .fd-sensor-float { background:#fff; border-color:rgba(0,0,0,.14); box-shadow:0 8px 28px rgba(0,0,0,.14); }
.fd-sensor-float-hidden { opacity:0; transform:translateX(12px); pointer-events:none; }

.fd-sensor-float-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 8px; border-bottom:1px solid var(--border);
  font-size:12px; font-weight:700; color:var(--text-primary);
  gap:6px; flex-shrink:0;
}
[data-theme="light"] .fd-sensor-float-head { border-color:rgba(0,0,0,.1); }
.fd-placed-badge-sm {
  background:rgba(0,212,255,.15); color:var(--accent);
  padding:1px 8px; border-radius:99px; font-size:10px; font-weight:700;
}
[data-theme="light"] .fd-placed-badge-sm { background:rgba(0,118,168,.1); color:#0076a8; }
.fd-panel-close {
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  padding:2px 4px; border-radius:4px; font-size:13px; line-height:1;
}
.fd-panel-close:hover { background:var(--bg-elevated); color:var(--text-primary); }

.fd-sensor-float-body { flex:1; overflow-y:auto; padding:8px 10px; }
.fd-attach-note {
  font-size:9px; color:var(--text-muted); padding:6px 10px 8px;
  border-top:1px solid var(--border); flex-shrink:0; line-height:1.4;
}
[data-theme="light"] .fd-attach-note { border-color:rgba(0,0,0,.08); }

/* Sensor panel show button (when panel is hidden) */
.fd-sensor-panel-show {
  position:absolute; right:0; top:0; z-index:101;
  display:flex; align-items:center; gap:6px; padding:6px 12px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  font-size:11px; font-weight:700; color:var(--text-secondary); cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.2); transition:all .15s;
}
.fd-sensor-panel-show:hover { background:var(--bg-elevated); color:var(--text-primary); }
.fd-panel-show-hidden { display:none !important; }
[data-theme="light"] .fd-sensor-panel-show { background:#fff; border-color:rgba(0,0,0,.14); }

/* Sensor list items */
.fd-sec-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:5px; margin-top:2px; }
.fd-si { display:flex; align-items:center; gap:6px; padding:5px 2px; border-bottom:1px solid rgba(255,255,255,.06); }
[data-theme="light"] .fd-si { border-bottom:1px solid rgba(0,0,0,.06); }
.fd-si:last-child { border-bottom:none; }
.fd-si-done { opacity:.55; }
.fd-si-act  { background:rgba(0,200,150,.08); border-radius:6px; padding:5px 4px; }
.fd-si-dot { width:26px; height:26px; border-radius:50%; border:2px solid; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.fd-si-info { flex:1; min-width:0; }
.fd-si-name { font-size:10px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-si-ppm  { font-size:9px; font-variant-numeric:tabular-nums; line-height:1.2; }
.fd-place-btn { font-size:10px; padding:3px 7px; border-radius:5px; cursor:pointer; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary); transition:all .15s; white-space:nowrap; flex-shrink:0; font-weight:600; }
.fd-place-btn:hover,.fd-place-btn.act { background:rgba(0,200,150,.15); border-color:rgba(0,200,150,.5); color:#00e0b0; }
[data-theme="light"] .fd-place-btn:hover, [data-theme="light"] .fd-place-btn.act { background:rgba(0,118,168,.1); border-color:rgba(0,118,168,.4); color:#0076a8; }

/* Toast for admin panel */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; font-size:13px; font-weight:500; color:var(--text-primary); box-shadow:var(--shadow-card); opacity:0; transform:translateX(24px); transition:opacity .3s,transform .3s; min-width:220px; }
.toast i { width:16px; height:16px; flex-shrink:0; }
.toast-show { opacity:1; transform:none; }
.toast-success { border-color:rgba(16,185,129,.45); }
.toast-success i { color:#10b981; }
.toast-error   { border-color:rgba(239,68,68,.45); }
.toast-error i  { color:#ef4444; }

/* Responsive */
@media(max-width:960px) {
  .fd-body { flex-wrap:wrap; }
  .fd-canvas-col { width:100%; }
  .fd-sensor-float { position:relative; right:auto; top:auto; width:100%; max-height:200px; }
  .fd-sensor-panel-show { position:relative; }
}

/* Inline rename input */
.fd-rename-inp {
  background:rgba(0,0,0,.85); border:1.5px solid #00d4b8;
  border-radius:4px; padding:2px 6px; font-size:10px; font-weight:700;
  outline:none; width:95px; font-family:inherit; color:#e8f4ff;
}
[data-theme="light"] .fd-rename-inp { background:rgba(255,255,255,.96); color:#081525; border-color:#0076a8; }

/* ═════════════════════════════════════════════════════════════
   Floor Designer update – road editing, draggable panel, dialogs
═════════════════════════════════════════════════════════════ */
.fd-road-obj.fd-selected-road { outline:none !important; }
.fd-road-selection-frame {
  position:absolute; box-sizing:border-box; border:2px dashed rgba(0,224,176,.86);
  border-radius:14px; background:rgba(0,224,176,.035); z-index:8;
  box-shadow:0 0 0 9999px rgba(0,0,0,.02), 0 0 22px rgba(0,224,176,.15);
}
[data-theme="light"] .fd-road-selection-frame { border-color:#0076a8; background:rgba(0,118,168,.045); box-shadow:0 0 20px rgba(0,118,168,.12); }
.fd-road-selection-frame .fd-obj-toolbar { top:-43px; left:50%; transform:translateX(-50%); }
.fd-road-label-badge {
  position:absolute; transform:translateX(-50%); z-index:9; pointer-events:none;
  padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800;
  color:#e9fff9; background:rgba(8,18,32,.88); border:1px solid rgba(0,224,176,.42);
  box-shadow:0 4px 12px rgba(0,0,0,.25); white-space:nowrap;
}
[data-theme="light"] .fd-road-label-badge { color:#07445e; background:rgba(255,255,255,.94); border-color:rgba(0,118,168,.32); box-shadow:0 5px 15px rgba(10,35,55,.12); }
.fd-sensor-float-head { cursor:move; user-select:none; }
.fd-sensor-float.dragging { transition:none; box-shadow:0 20px 50px rgba(0,0,0,.42); }

.fd-dialog-overlay {
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  background:rgba(3,8,14,.62); backdrop-filter:blur(8px); padding:18px;
}
.fd-dialog-box {
  width:min(440px,100%); display:flex; gap:14px; align-items:flex-start;
  background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border);
  border-radius:18px; padding:18px; box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.fd-dialog-icon {
  width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,212,255,.12); color:var(--accent); flex-shrink:0;
}
.fd-dialog-icon.danger { background:rgba(239,68,68,.12); color:#ef4444; }
.fd-dialog-icon i { width:20px; height:20px; }
.fd-dialog-content { flex:1; min-width:0; }
.fd-dialog-content h3 { margin:0 0 4px; font-size:16px; font-weight:850; color:var(--text-primary); }
.fd-dialog-content p { margin:0 0 12px; font-size:13px; color:var(--text-muted); line-height:1.45; }
.fd-dialog-input {
  width:100%; height:40px; border-radius:11px; border:1px solid var(--border); background:var(--bg-elevated);
  color:var(--text-primary); padding:0 12px; outline:none; font:inherit; margin-bottom:14px;
}
.fd-dialog-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,.12); }
.fd-dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.btn-danger { background:linear-gradient(135deg,#ef4444,#b91c1c) !important; color:#fff !important; border-color:transparent !important; }
[data-theme="light"] .fd-dialog-overlay { background:rgba(230,238,247,.72); }
[data-theme="light"] .fd-dialog-box { background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 24px 70px rgba(15,35,55,.20); }
[data-theme="light"] .fd-dialog-input { background:#f7fbff; border-color:rgba(0,0,0,.14); color:#081525; }

/* ═════════════════════════════════════════════════════════════
   Fix pack 2 – road point editing, theme-live equipment, panel drag
═════════════════════════════════════════════════════════════ */
.fd-road-point {
  position:absolute; width:16px; height:16px; border-radius:999px;
  border:2px solid #fff; background:#00e0b0; box-shadow:0 0 0 4px rgba(0,224,176,.18), 0 4px 12px rgba(0,0,0,.35);
  cursor:grab; z-index:80; padding:0; pointer-events:all;
}
.fd-road-point:active { cursor:grabbing; transform:scale(1.12); }
[data-theme="light"] .fd-road-point { background:#0076a8; box-shadow:0 0 0 4px rgba(0,118,168,.16), 0 4px 12px rgba(10,35,55,.18); }
.fd-road-selection-frame { pointer-events:none !important; }
.fd-road-selection-frame .fd-obj-toolbar,
.fd-road-selection-frame .fd-handle,
.fd-road-selection-frame .fd-rotate-handle,
.fd-road-selection-frame .fd-road-point { pointer-events:all !important; }

/* Uploaded equipment stays black on light floor and light on dark floor, instantly on theme toggle. */
.fd-custom-equip-img,
.fd-custom-equip-palette { filter:invert(1) brightness(1.18) contrast(1.12) hue-rotate(5deg); }
[data-theme="light"] .fd-custom-equip-img,
[data-theme="light"] .fd-custom-equip-palette { filter:brightness(.82) contrast(1.22) drop-shadow(0 2px 4px rgba(0,0,0,.28)); }

.fd-sensor-float-head { cursor:grab; }
.fd-sensor-float.dragging .fd-sensor-float-head { cursor:grabbing; }
.fd-sensor-float.dragging { user-select:none; }

/* Fix pack 4 – canvas size sliders + road-name centered on road line */
.fd-canvas-size-control {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:190px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-elevated);
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
}
[data-theme="light"] .fd-canvas-size-control {
  background:#fff;
  border-color:rgba(0,0,0,.13);
  box-shadow:0 2px 8px rgba(15,35,55,.05);
}
.fd-canvas-size-control span { min-width:38px; }
.fd-canvas-size-control strong {
  min-width:52px;
  color:var(--text-primary);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  text-align:right;
}
.fd-size-slider {
  flex:1;
  min-width:80px;
  height:5px;
  accent-color:var(--accent);
  cursor:pointer;
}
.fd-road-label-badge {
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
}
@media (max-width: 1120px) {
  .fd-canvas-size-control { min-width:150px; }
  .fd-canvas-size-control span { min-width:auto; }
}

/* Floor Designer sensor markers use the same single-pill capsule style as Live Floor Plan */
.fd-cs.fd-cs-pill {
  width:var(--fd-sensor-w,46px) !important;
  height:var(--fd-sensor-h,130px) !important;
  display:block !important;
  align-items:initial !important;
  gap:0 !important;
  cursor:move;
  z-index:3;
  pointer-events:auto;
}
.fd-cs.fd-cs-pill.fd-selected {
  outline:2px dashed rgba(0,220,160,.9);
  outline-offset:6px;
  border-radius:12px;
}
[data-theme="light"] .fd-cs.fd-cs-pill.fd-selected {
  outline-color:rgba(0,118,168,.86);
}
.fd-cs.fd-cs-pill.fd-cs-attached::after {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:14px;
  border:1px dashed color-mix(in srgb, var(--fv-col,#22C55E) 64%, transparent);
  pointer-events:none;
}
.fd-floor-pill-shell {
  position:absolute;
  top:0;
  left:50%;
  width:56px;
  min-height:158px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  transform:translateX(-50%) scale(var(--fd-pill-scale,.82));
  transform-origin:top center;
  pointer-events:none;
  filter:none;
}
.fd-floor-pill-shell .fv-single-glow-ring,
.fd-floor-pill-shell .fv-single-pill,
.fd-floor-pill-shell .fv-pill-channel {
  pointer-events:none;
}
.fd-cs.fd-cs-pill .fd-del-btn {
  top:-12px;
  right:-12px;
  pointer-events:auto;
}
.fd-ghost .fd-floor-pill-shell {
  opacity:.78;
  filter:drop-shadow(0 0 14px var(--fv-glow, rgba(34,197,94,.35)));
}
.fd-ghost.fd-ghost-attach .fd-floor-pill-shell {
  filter:drop-shadow(0 0 18px rgba(0,220,160,.75));
}
.fd-sensor-scale-control { min-width:170px; }
@media(max-width:1120px){ .fd-sensor-scale-control { min-width:150px; } }

/* Crisp Floor Designer pill capsules.
   Do not scale the capsule with CSS transform; scale by real pixel dimensions. */
.fd-floor-pill-shell {
  --fv-pill-scale: var(--fd-pill-scale, .82);
  --fvp-scale: var(--fd-pill-scale, .82);
  --fvp-w: calc(56px * var(--fvp-scale));
  --fvp-h: calc(132px * var(--fvp-scale));
  --fvp-shell-h: calc(158px * var(--fvp-scale));
  width: var(--fvp-w) !important;
  min-height: var(--fvp-shell-h) !important;
  gap: max(3px, calc(5px * var(--fvp-scale))) !important;
  transform: translateX(-50%) !important;
  transform-origin: top center;
  overflow: visible;
}
.fd-floor-pill-shell .fv-single-glow-ring {
  top: calc(-5px * var(--fvp-scale));
  width: calc(66px * var(--fvp-scale));
  height: calc(142px * var(--fvp-scale));
  border-radius: calc(33px * var(--fvp-scale));
  border-width: max(1.15px, calc(1.25px * var(--fvp-scale)));
}
.fd-floor-pill-shell .fv-single-pill {
  width: calc(56px * var(--fvp-scale));
  height: calc(132px * var(--fvp-scale));
  border-radius: calc(28px * var(--fvp-scale));
  padding-bottom: max(7px, calc(10px * var(--fvp-scale)));
  border-width: max(1.35px, calc(1.5px * var(--fvp-scale)));
}
.fd-cs.fd-cs-pill {
  overflow: visible;
}
.fd-cs.fd-cs-pill.fd-selected {
  outline-offset: max(5px, calc(6px * var(--fd-pill-scale, .82)));
}
.fd-floor-pill-shell .fv-single-fill { transition:height .8s cubic-bezier(.4,0,.2,1), background .4s ease, box-shadow .4s ease; }
.fd-floor-pill-shell .fv-single-fill::after { animation:fv-single-wave 2.2s ease-in-out infinite; }
.fd-floor-pill-shell .fv-single-fill.alarm { animation:fv-single-fill-alarm-glow 1.8s ease-in-out infinite; }
.fd-floor-pill-shell .fv-single-fill.danger { animation:fv-single-fill-glow 1.5s ease-in-out infinite; }
.fd-floor-pill-shell .fv-single-glow-ring.active { transition:opacity .4s ease, box-shadow .4s ease; }
.fd-floor-pill-shell.fv-zone-alarm .fv-single-glow-ring.active { opacity:.50; }
.fd-floor-pill-shell.fv-zone-danger .fv-single-glow-ring.active { animation:fv-single-pill-pulse 1.5s ease-in-out infinite; }

/* Real editor UX: viewport, undo/redo, zoom/pan, multi-select, properties */
.fd-icon-btn {
  width:32px; height:32px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-secondary); display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; transition:all .15s ease;
}
.fd-icon-btn svg { width:15px; height:15px; }
.fd-icon-btn:hover:not(:disabled), .fd-icon-btn.active { color:var(--accent); border-color:rgba(0,212,255,.45); background:rgba(0,212,255,.09); }
.fd-icon-btn:disabled { opacity:.38; cursor:not-allowed; }
.fd-toolbar-sep { width:1px; height:24px; background:var(--border); margin:0 2px; }
.fd-zoom-label { min-width:46px; text-align:center; font-size:12px; color:var(--text-primary); font-variant-numeric:tabular-nums; }
[data-theme="light"] .fd-icon-btn { background:#fff; border-color:rgba(0,0,0,.14); color:#445878; }
[data-theme="light"] .fd-icon-btn:hover:not(:disabled), [data-theme="light"] .fd-icon-btn.active { color:#0076a8; border-color:rgba(0,118,168,.38); background:rgba(0,118,168,.07); }

.fd-canvas-viewport {
  position:relative; overflow:hidden; flex-shrink:0; border-radius:14px;
  border:1px solid var(--border); background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 32px rgba(0,0,0,.22);
  min-height:420px; touch-action:none;
}
[data-theme="light"] .fd-canvas-viewport { background:linear-gradient(135deg,#eef5fb,#dde9f4); border-color:rgba(0,0,0,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 24px rgba(15,35,55,.11); }
.fd-canvas { will-change:transform; transition:box-shadow .15s ease; }
.fd-canvas.fd-no-grid { background-image:none !important; }
.fd-canvas.fd-pan-active, .fd-canvas-viewport.fd-pan-mode { cursor:grab !important; }
.fd-canvas.fd-pan-active:active, .fd-canvas-viewport.fd-pan-mode:active { cursor:grabbing !important; }

.fd-obj.fd-selected, .fd-road-obj.fd-selected-road {
  outline:2px dashed rgba(0,220,160,.92); outline-offset:6px; border-radius:8px;
  box-shadow:0 0 0 4px rgba(0,220,160,.08);
}
.fd-obj.fd-locked { cursor:not-allowed; opacity:.92; }
.fd-obj.fd-locked:hover { filter:none; }
.fd-lock-badge {
  position:absolute; top:-11px; right:-11px; min-width:22px; height:22px; padding:0 7px;
  border-radius:999px; display:flex; align-items:center; justify-content:center; gap:4px;
  background:rgba(15,23,42,.94); color:#facc15; border:1px solid rgba(250,204,21,.4);
  font-size:10px; font-weight:800; z-index:70; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.fd-lock-badge svg { width:12px; height:12px; }
[data-theme="light"] .fd-lock-badge { background:#fffbea; color:#a16207; border-color:rgba(161,98,7,.28); box-shadow:0 4px 12px rgba(15,35,55,.16); }

.fd-props {
  width:258px; min-width:258px; max-height:760px; overflow:auto; flex-shrink:0;
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.22);
}
[data-theme="light"] .fd-props { background:#fff; border-color:rgba(0,0,0,.13); box-shadow:0 10px 24px rgba(15,35,55,.11); }
.fd-props-head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:850; color:var(--text-primary); padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.fd-props-head svg { width:16px; height:16px; color:var(--accent); }
.fd-props-empty { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:var(--text-muted); font-size:12px; line-height:1.45; }
.fd-props-empty > svg { width:34px; height:34px; color:var(--accent); opacity:.75; }
.fd-props-empty strong { color:var(--text-primary); font-size:14px; }
.fd-shortcuts { margin-top:8px; text-align:left; line-height:1.8; }
.fd-shortcuts kbd { display:inline-block; min-width:54px; text-align:center; margin-right:6px; padding:1px 6px; border:1px solid var(--border); border-radius:5px; background:var(--bg-elevated); color:var(--text-primary); font-size:10px; }
.fd-prop-selected { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.fd-prop-selected strong { color:var(--text-primary); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-prop-chip { display:inline-flex; width:max-content; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:rgba(0,212,255,.1); color:var(--accent); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.fd-prop-chip svg { width:12px; height:12px; }
.fd-prop-section { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.fd-prop-section label, .fd-prop-row label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
.fd-prop-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.fd-prop-row > div { display:flex; flex-direction:column; gap:6px; }
.fd-prop-input {
  width:100%; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-primary);
  border-radius:9px; padding:8px 10px; font-size:12px; outline:none; font-weight:650;
}
.fd-prop-input:focus { border-color:rgba(0,212,255,.55); box-shadow:0 0 0 3px rgba(0,212,255,.12); }
.fd-prop-input:disabled { opacity:.55; cursor:not-allowed; }
[data-theme="light"] .fd-prop-input { background:#f7fbff; border-color:rgba(0,0,0,.14); }
.fd-lock-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:var(--bg-elevated); font-size:12px; font-weight:800; color:var(--text-primary); cursor:pointer; }
.fd-lock-toggle input { accent-color:var(--accent); }
.fd-prop-grid { display:grid; gap:7px; }
.fd-prop-grid.two { grid-template-columns:1fr 1fr; }
.fd-prop-grid.four { grid-template-columns:1fr 1fr; }
.fd-prop-grid button {
  min-height:34px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-secondary);
  border-radius:9px; font-size:11px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
}
.fd-prop-grid button svg { width:13px; height:13px; }
.fd-prop-grid button:hover { color:var(--accent); border-color:rgba(0,212,255,.42); background:rgba(0,212,255,.08); }
.fd-prop-grid button.danger:hover { color:#ef4444; border-color:rgba(239,68,68,.42); background:rgba(239,68,68,.08); }
.fd-props-multi { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid rgba(0,212,255,.18); background:rgba(0,212,255,.06); border-radius:12px; margin-bottom:12px; }
.fd-props-multi strong { color:var(--text-primary); font-size:14px; }
.fd-props-multi span { color:var(--text-muted); font-size:12px; }

.fd-sensor-float { right:282px; }
@media (max-width: 1280px) {
  .fd-body { flex-wrap:wrap; }
  .fd-props { width:100%; min-width:260px; max-height:none; order:3; }
  .fd-sensor-float { right:12px; }
}
@media (max-width: 900px) {
  .fd-palette { width:100%; min-width:100%; max-height:240px; display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:6px; }
  .fd-panel-head { grid-column:1/-1; }
  .fd-canvas-col { min-width:100%; }
  .fd-tab-right { width:100%; margin-left:0; }
}

/* Ultra modern floor designer polish */
.fd-workspace-tips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 14px;padding:10px 12px;border:1px solid rgba(0,212,255,.16);border-radius:16px;background:linear-gradient(135deg,rgba(0,212,255,.07),rgba(124,58,237,.05));color:var(--text-secondary);font-size:11px;font-weight:800}.fd-workspace-tips span{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.12)}.fd-workspace-tips svg{width:13px;height:13px;color:var(--accent)}.fd-workspace-tips kbd{border:1px solid var(--border);border-radius:6px;padding:1px 6px;background:var(--bg-elevated);color:var(--text-primary);font-size:10px}.fd-tabs{padding:10px;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:linear-gradient(135deg,rgba(15,23,42,.20),rgba(15,23,42,.07));box-shadow:0 14px 34px rgba(0,0,0,.12)}.fd-body{gap:14px}.fd-palette,.fd-props,.fd-canvas-viewport{border-radius:20px!important}.fd-palette{background:linear-gradient(180deg,rgba(148,163,184,.09),rgba(15,23,42,.10));border:1px solid rgba(148,163,184,.16);box-shadow:0 16px 34px rgba(0,0,0,.16)}.fd-panel-head{font-weight:950;letter-spacing:.08em}.fd-eq-item{border-radius:15px!important;transition:transform .16s ease, border-color .16s ease, background .16s ease}.fd-eq-item:hover{transform:translateY(-1px);border-color:rgba(0,212,255,.35)!important;background:rgba(0,212,255,.07)!important}.fd-eq-active{box-shadow:0 0 0 3px rgba(0,212,255,.14)!important}.fd-upload-zone{border-radius:16px!important;border-style:dashed!important;background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(124,58,237,.05))!important}.fd-canvas-viewport{background:radial-gradient(circle at 20% 0%,rgba(0,212,255,.08),transparent 28%),linear-gradient(135deg,rgba(15,23,42,.24),rgba(15,23,42,.08))!important}.fd-canvas{border-radius:16px}.fd-props{background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(15,23,42,.10));border-color:rgba(148,163,184,.18)}.fd-props-head{font-weight:950}.fd-prop-grid button,.fd-icon-btn{box-shadow:0 4px 12px rgba(0,0,0,.08)}.fd-prop-input{min-height:38px}.fd-obj.fd-selected,.fd-road-obj.fd-selected-road{outline:2px solid rgba(34,211,238,.95)!important;outline-offset:7px!important;box-shadow:0 0 0 5px rgba(34,211,238,.12),0 0 24px rgba(34,211,238,.18)!important}.fd-lock-badge{backdrop-filter:blur(10px)}[data-theme="light"] .fd-tabs,[data-theme="light"] .fd-palette,[data-theme="light"] .fd-props{background:linear-gradient(180deg,#fff,#f6fbff);box-shadow:0 14px 28px rgba(15,35,55,.09)}[data-theme="light"] .fd-workspace-tips{background:linear-gradient(135deg,#effaff,#f7f3ff);border-color:rgba(0,118,168,.15)}[data-theme="light"] .fd-canvas-viewport{background:radial-gradient(circle at 20% 0%,rgba(0,118,168,.08),transparent 30%),linear-gradient(135deg,#eef7ff,#e8f0f8)!important}@media(max-width:900px){.fd-workspace-tips{font-size:10px}.fd-tabs{border-radius:14px}}