/* ── LAYOUT SIDEBAR TAB BAR (Props / Groups / Connections) ── */
.sidebar-tab-bar {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 3;
}
.sidebar-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--border2);
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 9px 2px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .12s, background .12s, border-color .12s;
  white-space: nowrap;
}
.sidebar-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.sidebar-tab-btn.active {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
  background: rgba(0,232,143,0.05);
}
/* Tabbed sections fill remaining height and scroll their own body. */
.sidebar-section.sidebar-tab-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── LAYOUT SIDEBAR ── */
.layout-sidebar {
  width:240px;
  flex-shrink:0;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  background:var(--surface);
  /* Scroll the whole sidebar when content exceeds the viewport so every
     section header stays reachable.  Each section takes its natural
     height; collapsing a section shrinks it to just its title row. */
  overflow-y:auto;
  min-height:0;
}
.layout-sidebar::-webkit-scrollbar { width:6px; }
.layout-sidebar::-webkit-scrollbar-track { background:transparent; }
.layout-sidebar::-webkit-scrollbar-thumb { background:var(--border2); border-radius:var(--r-pill); }

.sidebar-section {
  border-bottom:1px solid var(--border);
  padding:14px 16px;
  flex-shrink:0;       /* don't collapse — natural height drives layout */
}

.sidebar-section-title {
  font-size:8px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--label);
  /* Sticky so each section's header stays visible as you scroll the
     sidebar — even with a long prop list, the Props / Groups /
     Controllers titles remain reachable for collapse-clicks.  We pull
     the title out into the section's own padding using negative
     margins, then repaint that padding inside the title so the visual
     position is unchanged but the sticky background fully covers
     content scrolling underneath. */
  margin: -14px -16px 12px;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.sidebar-add-btn {
  font-size:14px;
  color:var(--border2);
  cursor:pointer;
  line-height:1;
  transition:.15s;
}
.sidebar-add-btn:hover { color:var(--accent2); }

.sidebar-section-body { overflow: hidden; transition: none; }
.sidebar-section-body.collapsed { display: none; }
.sidebar-section-chevron { font-size:10px; color:var(--border2); transition:.15s; line-height:1; pointer-events:none; }
.sidebar-section-chevron.collapsed { transform: rotate(-90deg); }

/* ── PROP LIST ── */
.prop-list { display:flex; flex-direction:column; gap:6px; }

.prop-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg);
  cursor:pointer;
  transition:var(--trans);
}
.prop-item:hover { border-color:var(--border2); }
.prop-item.selected { border-color:var(--accent2); background:rgba(0,232,143,.03); }

.prop-icon { font-size:14px; }
.prop-info { flex:1; }
.prop-name { font-size:9px; letter-spacing:1px; color:var(--text); }
.prop-sub { font-size:8px; color:var(--label); margin-top:2px; }
.prop-color { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.empty-list { font-size:9px; color:var(--border2); letter-spacing:1px; padding:8px 0; }

/* ── GROUPS ── */
.group-list { display:flex; flex-direction:column; gap:6px; }

.group-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg);
  cursor:pointer;
  transition:var(--trans);
  position:relative;
}
.group-item:hover { border-color:var(--border2); }
.group-item.active-group { border-color:var(--gc, #aaa); background:color-mix(in srgb, var(--gc, #aaa) 6%, transparent); }

.group-color-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.group-info { flex:1; min-width:0; }
.group-name { font-size:9px; letter-spacing:1px; color:var(--text); }
.group-sub  { font-size:8px; color:var(--label); margin-top:2px; }
.group-del {
  font-size:11px; color:var(--border2); cursor:pointer;
  padding:2px 4px; line-height:1; transition:.1s; flex-shrink:0;
}
.group-del:hover { color:var(--danger); }

/* ── GROUP EDIT TOOLBAR ── */
.group-edit-bar {
  display:none;
  align-items:center;
  gap:8px;
  padding:6px 16px;
  background:#090e14;
  border-bottom:1px solid #1a2a3a;
  flex-shrink:0;
  flex-wrap:wrap;
}
.group-edit-bar.visible { display:flex; }
.group-edit-label {
  font-size:9px; letter-spacing:2px; color:var(--gc, #aaa);
  text-transform:uppercase;
}
.group-edit-count {
  font-size:9px; letter-spacing:1px; color:var(--label);
}
.group-edit-hint {
  font-size:8px; color:var(--border2); letter-spacing:1px;
}

/* Stage prop group overlays */
.stage-prop-pixel.in-group canvas {
  outline: 2px solid var(--gc, #aaa) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--gc, #aaa) 60%, transparent) !important;
}
.stage-prop-pixel.not-in-group { opacity: 0.3; }
.stage-prop-pixel.not-in-group canvas { outline: none !important; box-shadow: none !important; }

/* ── CONTROLLERS ── */
.controller-list { display:flex; flex-direction:column; gap:6px; }

.controller-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg);
}
.controller-item.selected { border-color:var(--accent2); background:rgba(0,232,143,0.06); }

.controller-status {
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.controller-status.connected { background:#00ff7f; box-shadow:0 0 6px #00ff7f88; }
.controller-status.disconnected { background:#333; }

.controller-info { flex:1; min-width:0; }
.controller-name { font-size:9px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.controller-port { font-size:7.5px; color:var(--label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.controller-del {
  font-size:9px; color:var(--border2); cursor:pointer; padding:0 2px; flex-shrink:0;
  transition:color .12s;
}
.controller-del:hover  { color:#ff4d00; }

/* ── IN-PANEL CONTROLLER VIEW (#propsPanel) ── */
.ctlv-head { display:flex; align-items:center; gap:6px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.ctlv-back { background:none; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-size:13px; line-height:1; padding:1px 7px; cursor:pointer; }
.ctlv-back:hover { border-color:var(--accent2); color:var(--accent2); }
.ctlv-title { flex:1; min-width:0; }
.ctlv-name { font-size:10px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctlv-addr { font-size:7.5px; letter-spacing:1px; color:var(--label); text-transform:uppercase; }
.ctlv-settings { padding:8px; margin-bottom:10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); }
.ctlv-settings-title { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--label); margin-bottom:8px; }
.ctlv-2col { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ctlv-del { width:100%; margin-top:8px; font-size:8px; letter-spacing:1px; padding:6px; background:none; border:1px solid #ff4d0055; color:#ff4d00; border-radius:var(--r-sm); cursor:pointer; }
.ctlv-del:hover { background:rgba(255,77,0,0.08); }

.ctlv-mode { display:flex; gap:0; margin-bottom:10px; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
.ctlv-modebtn { flex:1; background:none; border:none; color:var(--border2); font-family:'DM Mono',monospace; font-size:7.5px; letter-spacing:1px; padding:6px 2px; cursor:pointer; transition:all .12s; }
.ctlv-modebtn + .ctlv-modebtn { border-left:1px solid var(--border); }
.ctlv-modebtn:hover { color:var(--text); }
.ctlv-modebtn.active { color:var(--accent2); background:rgba(0,232,143,0.08); }

.ctlv-addports { display:flex; gap:5px; margin-bottom:10px; }
.ctlv-addbtn { flex:1; font-size:7.5px; letter-spacing:.5px; padding:6px 2px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); cursor:pointer; white-space:nowrap; }
.ctlv-addbtn:hover { border-color:var(--accent2); color:var(--accent2); }

.ctlv-ports { display:flex; flex-direction:column; gap:8px; }
.ctlv-noports { font-size:9px; color:var(--border2); text-align:center; padding:16px 4px; }
.ctlv-port { border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); overflow:hidden; }
.ctlv-port.drag-src { opacity:.5; }
.ctlv-porthead { display:flex; align-items:center; gap:5px; padding:5px 7px; background:var(--surface); cursor:grab; user-select:none; }
.ctlv-porthead:active { cursor:grabbing; }
.ctlv-portgrip { color:var(--border2); font-size:10px; }
.ctlv-portlabel { flex:1; font-size:9px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctlv-portaddr { font-size:7px; letter-spacing:.5px; color:var(--accent2); }
.ctlv-portdel { font-size:9px; color:var(--border2); cursor:pointer; padding:0 2px; }
.ctlv-portdel:hover { color:#ff4d00; }
.ctlv-portfields { display:flex; gap:4px; padding:5px 7px; }
.ctlv-portfields label { flex:1; display:flex; align-items:center; gap:2px; font-size:7px; color:var(--label); }
.ctlv-portfields input { width:100%; min-width:0; font-family:'DM Mono',monospace; font-size:8px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:2px; padding:2px 3px; outline:none; }
.ctlv-portfields input:focus { border-color:var(--accent2); }
.ctlv-portfields input:disabled { opacity:.45; cursor:not-allowed; }
.ctlv-chain { display:flex; flex-direction:column; gap:3px; padding:0 7px 5px; }
.ctlv-chainempty { font-size:7.5px; color:var(--border2); font-style:italic; padding:2px 0; }
.ctlv-chainprop { display:flex; align-items:center; gap:4px; font-size:8px; color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:2px; padding:2px 5px; }
.ctlv-chainlink { color:var(--accent2); font-size:8px; }
.ctlv-chainname { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctlv-chainx { color:var(--border2); cursor:pointer; }
.ctlv-chainx:hover { color:#ff4d00; }
.ctlv-draghint { font-size:7px; letter-spacing:.3px; color:var(--border2); padding:2px 7px 0; }
.ctlv-addrow { padding:4px 7px 6px; }
.ctlv-addbtn2 { width:100%; font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.5px; background:var(--bg); color:var(--text2); border:1px dashed var(--border2); border-radius:2px; padding:4px; cursor:pointer; }
.ctlv-addbtn2:hover, .ctlv-addbtn2.active { border-color:var(--accent2); color:var(--accent2); }
.ctlv-addbox { margin-top:5px; padding:6px; border:1px solid var(--accent2); border-radius:var(--r-sm); background:rgba(0,232,143,0.05); }
.ctlv-addbox-hint { font-size:7.5px; line-height:1.4; color:var(--text2); margin-bottom:5px; }
.ctlv-addbox-select { width:100%; font-family:'DM Mono',monospace; font-size:8.5px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:2px; padding:4px 5px; cursor:pointer; outline:none; }
.ctlv-addbox-select:focus { border-color:var(--accent2); }

/* Stage prop highlighted as a drop target while dragging a port */
.stage-prop-pixel.port-drop-target { outline:2px solid var(--accent2) !important; outline-offset:2px; box-shadow:0 0 16px var(--accent2); }

/* ── ADD PROP MENU ── */
.add-prop-menu {
  display:none;
  position:absolute;
  top:100%;
  right:0;
  background:var(--surface);
  border:1px solid var(--border2);
  z-index:50;
  min-width:160px;
  flex-direction:column;
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);
}
.add-prop-menu.visible { display:flex; }
.add-prop-menu-item {
  padding:8px 14px;
  font-size:9px;
  letter-spacing:2px;
  color:var(--text2);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:.1s;
  text-transform:uppercase;
}
.add-prop-menu-item:hover { background:var(--bg); color:var(--accent2); }