/* sidebar.css — layer tree + entity lists */

#sidebar { padding: 8px 0 40px; }

.side-empty {
  padding: 30px 18px;
  color: var(--faint);
  font-family: var(--hand);
  font-size: 16px;
  text-align: center;
}
.side-empty svg { color: var(--nalim); opacity: 0.7; margin-bottom: 8px; }

.layer { margin-bottom: 4px; }
.layer-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
  user-select: none;
}
.layer-head:hover { background: var(--panel-hi); }
.layer.active .layer-head { border-left-color: var(--accent); background: var(--panel-hi); }
.layer-head .eye { background: none; border: none; padding: 0 2px; font-size: 13px; opacity: 0.75; }
.layer-head .eye.off { opacity: 0.3; }
.layer-head .dot { width: 10px; height: 10px; border-radius: 50% 45% 55% 50%; flex: none; }
.layer-name {
  flex: 1;
  font-family: var(--hand);
  font-size: 15.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-count { color: var(--faint); font-size: 11px; font-family: var(--mono); }
.layer.hidden-layer .layer-name { opacity: 0.4; }
.layer-name input { font-family: var(--hand); font-size: 15px; padding: 0 4px; }

.entity {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2.5px 10px 2.5px 24px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--dim);
  border-left: 3px solid transparent;
  user-select: none;
}
.entity:hover { background: var(--panel-hi); color: var(--ink); }
.entity.selected { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); }
.entity .glyph { flex: none; width: 14px; text-align: center; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.entity .ename { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity .emeta { flex: none; color: var(--faint); font-size: 10.5px; font-family: var(--mono); }

.entity.dragging { opacity: 0.35; }
.entity.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.entity.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }

.group-label {
  padding: 5px 10px 1px 24px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}